@coreui/angular 5.7.34 → 5.7.35

package/fesm2022/coreui-angular.mjs

@@ -8,7 +8,7 @@ import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from
 import { debounceTime, filter, finalize, tap, withLatestFrom, zipWith } from "rxjs/operators";
 import { createPopper } from "@popperjs/core";
 import * as i1 from "@angular/cdk/a11y";
-import { A11yModule, FocusKeyManager, FocusMonitor } from "@angular/cdk/a11y";
+import { A11yModule, CdkTrapFocus, FocusKeyManager } from "@angular/cdk/a11y";
 import { BreakpointObserver } from "@angular/cdk/layout";
 import { DomPortal, DomPortalOutlet } from "@angular/cdk/portal";
 import { IconDirective } from "@coreui/icons-angular";
@@ -5733,8 +5733,24 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ providedIn: "root" }]
 	}]
 });
+const REPLAY_EVENT_PHASE = 101;
+const isReplayedEvent = (event) => event.eventPhase === REPLAY_EVENT_PHASE;
+const FORM_CONTROL_SELECTOR = "input:not([type=\"button\"]):not([type=\"image\"]):not([type=\"reset\"]):not([type=\"submit\"]), select, textarea";
+const isEditableTarget$1 = (target) => {
+	if (!(target instanceof Element)) return false;
+	if (target.closest(FORM_CONTROL_SELECTOR)) return true;
+	for (let host = target.closest("[contenteditable]"); host; host = host.parentElement?.closest("[contenteditable]") ?? null) {
+		const value = host.getAttribute("contenteditable")?.toLowerCase();
+		if (value === "" || value === "true" || value === "plaintext-only") return true;
+		if (value === "false") return false;
+	}
+	return false;
+};
+const clicksOnEnter = (element) => element instanceof HTMLButtonElement || element instanceof HTMLInputElement && /^(button|image|reset|submit)$/.test(element.type) || element instanceof HTMLAnchorElement && element.hasAttribute("href") || element.tagName === "SUMMARY";
+const clicksOnSpace = (element) => element instanceof HTMLButtonElement || element instanceof HTMLInputElement && /^(button|checkbox|image|radio|reset|submit)$/.test(element.type) || element.tagName === "SUMMARY";
 var DropdownMenuDirective = class DropdownMenuDirective {
 	#destroyRef = inject(DestroyRef);
+	#injector = inject(Injector);
 	elementRef = inject(ElementRef);
 	#dropdownService = inject(DropdownService);
 	#focusKeyManager;
@@ -5766,16 +5782,13 @@ var DropdownMenuDirective = class DropdownMenuDirective {
 	}, ...ngDevMode ? [{ debugName: "hostStyles" }] : /* istanbul ignore next */ []);
 	dataPopper = computed(() => this.#dropdownService.popper() ? null : "static", ...ngDevMode ? [{ debugName: "dataPopper" }] : /* istanbul ignore next */ []);
 	onKeyDown($event) {
-		if (!this.visible()) return;
-		if (["Space", "ArrowDown"].includes($event.code)) $event.preventDefault();
+		if (!this.visible() || isReplayedEvent($event) || isEditableTarget$1($event.target)) return;
+		if ($event.code === "ArrowDown" || $event.code === "Space" && !this.#clicksOnSpace($event.target)) $event.preventDefault();
 		this.#focusKeyManager.onKeydown($event);
 	}
-	onKeyUp($event) {
-		if (!this.visible()) return;
-		if (["Tab"].includes($event.key)) {
-			if (this.#focusKeyManager.activeItem) $event.shiftKey ? this.#focusKeyManager.setPreviousItemActive() : this.#focusKeyManager.setNextItemActive();
-			else this.#focusKeyManager.setFirstItemActive();
-		}
+	onFocusIn($event) {
+		const index = this.dropdownItemsContent().findIndex((item) => item.elementRef.nativeElement.contains($event.target));
+		if (index > -1) this.#focusKeyManager.updateActiveItem(index);
 	}
 	dropdownItemsContent = contentChildren(forwardRef(() => DropdownItemDirective), {
 		...ngDevMode ? { debugName: "dropdownItemsContent" } : /* istanbul ignore next */ {},
@@ -5794,8 +5807,12 @@ var DropdownMenuDirective = class DropdownMenuDirective {
 				this.visible.update((visible) => state.visible === "toggle" ? !visible : state.visible);
 				if (!this.visible()) this.#focusKeyManager?.setActiveItem(-1);
 			}
+			if (state.focus && this.visible()) afterNextRender(() => state.focus === "first" ? this.#focusKeyManager.setFirstItemActive() : this.#focusKeyManager.setLastItemActive(), { injector: this.#injector });
 		}), takeUntilDestroyed(this.#destroyRef)).subscribe();
 	}
+	#clicksOnSpace(target) {
+		return target instanceof Element && clicksOnSpace(target);
+	}
 	focusKeyManagerInit() {
 		this.#focusKeyManager = new FocusKeyManager(this.dropdownItemsContent()).withHomeAndEnd().withPageUpDown().withWrap().skipPredicate((dropdownItem) => dropdownItem.disabled === true);
 	}
@@ -5831,8 +5848,8 @@ var DropdownMenuDirective = class DropdownMenuDirective {
 		},
 		host: {
 			listeners: {
-				"keydown": "onKeyDown($event)",
-				"keyup": "onKeyUp($event)"
+				"focusin": "onFocusIn($event)",
+				"keydown": "onKeyDown($event)"
 			},
 			properties: {
 				"class": "hostClasses()",
@@ -5874,8 +5891,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class]": "hostClasses()",
 				"[style]": "hostStyles()",
 				"[attr.data-coreui-popper]": "dataPopper()",
-				"(keydown)": "onKeyDown($event)",
-				"(keyup)": "onKeyUp($event)"
+				"(focusin)": "onFocusIn($event)",
+				"(keydown)": "onKeyDown($event)"
 			}
 		}]
 	}],
@@ -5910,10 +5927,11 @@ const alignmentClasses = (alignment) => {
 	if (typeof alignment === "string") return { [`dropdown-menu-${alignment}`]: true };
 	return Object.fromEntries(Object.entries(alignment).map(([breakpoint, direction]) => [`dropdown-menu${breakpoint === BreakpointInfix.xs ? "" : `-${breakpoint}`}-${direction}`, true]));
 };
+const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
 var DropdownToken = class {};
 var DropdownToggleDirective = class DropdownToggleDirective {
-	#destroyRef = inject(DestroyRef);
 	elementRef = inject(ElementRef);
+	#renderer = inject(Renderer2);
 	#dropdownService = inject(DropdownService);
 	dropdown = inject(DropdownToken, { optional: true });
 	dropdownComponent = input(...ngDevMode ? [void 0, { debugName: "dropdownComponent" }] : /* istanbul ignore next */ []);
@@ -5933,30 +5951,46 @@ var DropdownToggleDirective = class DropdownToggleDirective {
 			disabled: this.disabled()
 		};
 	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
-	#ariaExpanded = signal(false, ...ngDevMode ? [{ debugName: "#ariaExpanded" }] : /* istanbul ignore next */ []);
+	#ariaExpanded = computed(() => (this.dropdownComponent() ?? this.dropdown)?.visible() ?? false, ...ngDevMode ? [{ debugName: "#ariaExpanded" }] : /* istanbul ignore next */ []);
 	get ariaExpanded() {
 		return this.#ariaExpanded();
 	}
 	onClick($event) {
 		$event.preventDefault();
-		!this.disabled() && this.#dropdownService.toggle({
+		if (this.disabled()) return;
+		const element = this.elementRef.nativeElement;
+		if (!element.contains(element.ownerDocument.activeElement)) element.focus();
+		this.#dropdownService.toggle({
 			visible: "toggle",
 			dropdown: this.dropdown
 		});
 	}
+	onKeyDown($event) {
+		if (this.disabled() || isReplayedEvent($event) || isEditableTarget$1($event.target)) return;
+		const element = this.elementRef.nativeElement;
+		if ($event.target === element && element.tagName === "A" && ($event.key === " " || $event.key === "Enter" && !clicksOnEnter(element))) {
+			$event.preventDefault();
+			if (!$event.repeat) element.click();
+			return;
+		}
+		if (!["ArrowDown", "ArrowUp"].includes($event.key)) return;
+		$event.preventDefault();
+		this.#dropdownService.toggle({
+			visible: true,
+			dropdown: this.dropdown,
+			focus: $event.key === "ArrowDown" ? "first" : "last"
+		});
+	}
+	constructor() {
+		const element = this.elementRef.nativeElement;
+		if (element?.tagName === "A" && !element.hasAttribute("role")) this.#renderer.setAttribute(element, "role", "button");
+	}
 	ngAfterViewInit() {
 		const dropdownComponent = this.dropdownComponent();
 		if (dropdownComponent) {
 			this.dropdown = dropdownComponent;
 			this.#dropdownService = dropdownComponent?.dropdownService;
-		}
-		if (this.dropdown) {
-			const subscription = this.dropdown?.visibleChange?.subscribe((visible) => {
-				this.#ariaExpanded.set(visible);
-			});
-			if (subscription) this.#destroyRef.onDestroy(() => {
-				subscription.unsubscribe();
-			});
+			dropdownComponent.toggler = this;
 		}
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -6004,7 +6038,10 @@ var DropdownToggleDirective = class DropdownToggleDirective {
 			}
 		},
 		host: {
-			listeners: { "click": "onClick($event)" },
+			listeners: {
+				"click": "onClick($event)",
+				"keydown": "onKeyDown($event)"
+			},
 			properties: {
 				"class": "hostClasses()",
 				"aria-expanded": "ariaExpanded"
@@ -6035,10 +6072,12 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				"[class]": "hostClasses()",
 				"[aria-expanded]": "ariaExpanded",
-				"(click)": "onClick($event)"
+				"(click)": "onClick($event)",
+				"(keydown)": "onKeyDown($event)"
 			}
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		dropdownComponent: [{
 			type: i0.Input,
@@ -6168,6 +6207,7 @@ var DropdownComponent = class DropdownComponent {
 	visibleChange = output();
 	dropdownContext = { $implicit: this.visible() };
 	_toggler = contentChild(DropdownToggleDirective, ...ngDevMode ? [{ debugName: "_toggler" }] : /* istanbul ignore next */ []);
+	toggler;
 	_menu = contentChild(DropdownMenuDirective, ...ngDevMode ? [{ debugName: "_menu" }] : /* istanbul ignore next */ []);
 	_menuElementRef = contentChild(DropdownMenuDirective, {
 		...ngDevMode ? { debugName: "_menuElementRef" } : /* istanbul ignore next */ {},
@@ -6226,7 +6266,7 @@ var DropdownComponent = class DropdownComponent {
 		});
 	}
 	createPopperInstance() {
-		const _toggler = this._toggler();
+		const _toggler = this._toggler() ?? this.toggler;
 		const _menu = this._menu();
 		if (_toggler && _menu) this.#ngZone.runOutsideAngular(() => {
 			_menu.elementRef.nativeElement.style.visibility = "hidden";
@@ -6249,7 +6289,7 @@ var DropdownComponent = class DropdownComponent {
 		this.listeners.push(this.#renderer.listen(this.#document, "click", (event) => {
 			const target = event.target;
 			if (this._menuElementRef()?.nativeElement.contains(event.target)) this.clickedTarget = target;
-			if (this._toggler()?.elementRef.nativeElement.contains(event.target)) return;
+			if (this.#togglerElement()?.contains(event.target)) return;
 			const autoClose = this.autoClose();
 			if (autoClose === true) {
 				this.setVisibleState(false);
@@ -6264,20 +6304,35 @@ var DropdownComponent = class DropdownComponent {
 				return;
 			}
 		}));
-		this.listeners.push(this.#renderer.listen(this.#elementRef.nativeElement, "keyup", (event) => {
-			if (event.key === "Escape" && this.autoClose() !== false) {
-				event.stopPropagation();
-				this.setVisibleState(false);
-				return;
-			}
-		}));
+		this.listeners.push(this.#renderer.listen(this.#elementRef.nativeElement, "keyup", this.#onEscape));
+		const toggler = this.#togglerElement();
+		if (toggler && !this.#elementRef.nativeElement.contains(toggler)) this.listeners.push(this.#renderer.listen(toggler, "keyup", this.#onEscape));
 		this.listeners.push(this.#renderer.listen(this.#document, "keyup", (event) => {
-			if (event.key === "Tab" && this.autoClose() !== false && !this.#elementRef.nativeElement.contains(event.target)) {
-				this.setVisibleState(false);
-				return;
-			}
+			const path = event.composedPath();
+			const toggler = this.#togglerElement();
+			if (event.key === "Tab" && this.autoClose() !== false && !path.includes(this.#elementRef.nativeElement) && !(toggler && path.includes(toggler))) this.setVisibleState(false);
 		}));
 	}
+	#onEscape = (event) => {
+		if (event.key !== "Escape" || this.autoClose() === false) return;
+		event.stopPropagation();
+		const focusInMenu = this._menuElementRef()?.nativeElement.contains(event.target);
+		this.setVisibleState(false);
+		if (focusInMenu) this.#focusToggler();
+	};
+	#togglerElement() {
+		return (this._toggler() ?? this.toggler)?.elementRef.nativeElement;
+	}
+	#focusToggler() {
+		const toggler = this.#togglerElement();
+		if (!toggler) return;
+		const root = toggler.getRootNode();
+		const candidates = [toggler, ...toggler.querySelectorAll(FOCUSABLE_SELECTOR)].filter((candidate) => candidate === toggler || candidate.tabIndex >= 0 && !candidate.closest("[aria-hidden=\"true\"]"));
+		for (const candidate of candidates) {
+			candidate.focus();
+			if (root.activeElement === candidate) return;
+		}
+	}
 	clearListeners() {
 		this.listeners.forEach((unListen) => {
 			unListen();
@@ -6513,7 +6568,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var DropdownItemDirective = class DropdownItemDirective {
-	#elementRef = inject(ElementRef);
+	elementRef = inject(ElementRef);
 	#dropdownService = inject(DropdownService);
 	dropdown = inject(DropdownComponent, { optional: true });
 	active = input(...ngDevMode ? [void 0, { debugName: "active" }] : /* istanbul ignore next */ []);
@@ -6530,7 +6585,7 @@ var DropdownItemDirective = class DropdownItemDirective {
 	get disabled() {
 		return this.#disabled();
 	}
-	role = input("list-item", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	role = input(...ngDevMode ? [void 0, { debugName: "role" }] : /* istanbul ignore next */ []);
 	tabIndexInput = input("0", {
 		...ngDevMode ? { debugName: "tabIndexInput" } : /* istanbul ignore next */ {},
 		alias: "tabIndex"
@@ -6541,10 +6596,10 @@ var DropdownItemDirective = class DropdownItemDirective {
 		computation: (value) => this.disabled ? "-1" : value
 	});
 	focus(origin) {
-		this.#elementRef?.nativeElement?.focus();
+		this.elementRef?.nativeElement?.focus();
 	}
 	getLabel() {
-		return this.#elementRef?.nativeElement?.textContent.trim();
+		return this.elementRef?.nativeElement?.textContent.trim();
 	}
 	ariaCurrent = computed(() => {
 		return this.active() ? "true" : null;
@@ -6560,7 +6615,8 @@ var DropdownItemDirective = class DropdownItemDirective {
 		this.handleInteraction();
 	}
 	onKeyUp($event) {
-		if ($event.key === "Enter") this.handleInteraction();
+		const target = $event.target;
+		if ($event.key === "Enter" && !isEditableTarget$1(target) && !clicksOnEnter(target)) this.handleInteraction();
 	}
 	handleInteraction() {
 		if (this.autoClose()) this.#dropdownService.toggle({
@@ -11288,7 +11344,10 @@ var ModalService = class ModalService {
 	#modalState = new Subject();
 	modalState$ = this.#modalState.asObservable();
 	toggle(action) {
-		this.#modalState.next(action);
+		this.#modalState.next({
+			...action,
+			focusFallback: [...action.focusFallback ?? []]
+		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -11317,6 +11376,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var ModalToggleDirective = class ModalToggleDirective {
+	#elementRef = inject(ElementRef);
 	#modalService = inject(ModalService);
 	toggle = input(void 0, {
 		...ngDevMode ? { debugName: "toggle" } : /* istanbul ignore next */ {},
@@ -11326,7 +11386,8 @@ var ModalToggleDirective = class ModalToggleDirective {
 		$event.preventDefault();
 		this.#modalService.toggle({
 			show: "toggle",
-			id: this.toggle()
+			id: this.toggle(),
+			trigger: this.#elementRef.nativeElement
 		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -11477,6 +11538,16 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+const restoreFocus = (overlay, candidates) => {
+	const document = overlay.ownerDocument;
+	const active = document.activeElement;
+	if (active && active !== document.body && !overlay.contains(active)) return false;
+	for (const target of candidates) if (target?.isConnected && !overlay.contains(target)) {
+		target.focus({ preventScroll: true });
+		if (document.activeElement === target) return true;
+	}
+	return false;
+};
 var ModalComponent = class ModalComponent {
 	static ngAcceptInputType_ariaModalInput;
 	static ngAcceptInputType_scrollable;
@@ -11487,7 +11558,7 @@ var ModalComponent = class ModalComponent {
 	#modalService = inject(ModalService);
 	#backdropService = inject(BackdropService);
 	#destroyRef = inject(DestroyRef);
-	#focusMonitor = inject(FocusMonitor);
+	#platformId = inject(PLATFORM_ID);
 	alignment = input("top", ...ngDevMode ? [{ debugName: "alignment" }] : /* istanbul ignore next */ []);
 	backdrop = input(true, ...ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []);
 	container = input(this.#document.body, ...ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []);
@@ -11559,26 +11630,19 @@ var ModalComponent = class ModalComponent {
 			this.visibleChange?.emit(visible);
 		});
 	}, ...ngDevMode ? [{ debugName: "#visibleInputEffect" }] : /* istanbul ignore next */ []);
-	#activeElement = signal(null, ...ngDevMode ? [{ debugName: "#activeElement" }] : /* istanbul ignore next */ []);
+	#focusBeforeShow = null;
+	#openAction = null;
+	#trigger = null;
 	#visibleEffect = effect(() => {
 		const visible = this.visible();
 		const afterViewInit = this.#afterViewInit();
 		untracked(() => {
 			if (visible && afterViewInit) {
-				this.#activeElement.set(this.#document.activeElement);
+				this.#focusBeforeShow = this.#document.activeElement;
 				setTimeout(() => {
-					const focusable = this.modalContentRef()?.nativeElement.querySelectorAll("[tabindex]:not([tabindex=\"-1\"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])");
-					if (focusable?.length) this.#focusMonitor.focusVia(focusable[0], "keyboard");
+					if (!this.focusTrap()?.focusTrap.focusInitialElement()) this.#hostElement.nativeElement.focus();
 				});
-			} else {
-				const activeElement = this.#activeElement();
-				if (activeElement && this.#document.contains(activeElement)) {
-					this.#focusMonitor.focusVia(activeElement, "keyboard");
-					setTimeout(() => {
-						this.#activeElement.set(null);
-					});
-				}
-			}
+			} else this.#restoreFocus();
 		});
 	}, ...ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []);
 	visibleChange = output();
@@ -11586,6 +11650,7 @@ var ModalComponent = class ModalComponent {
 		...ngDevMode ? { debugName: "modalContentRef" } : /* istanbul ignore next */ {},
 		read: ElementRef
 	});
+	focusTrap = viewChild(CdkTrapFocus, ...ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []);
 	modalDialogRef = viewChild.required(ModalDialogComponent, {
 		...ngDevMode ? { debugName: "modalDialogRef" } : /* istanbul ignore next */ {},
 		read: ElementRef
@@ -11674,6 +11739,7 @@ var ModalComponent = class ModalComponent {
 		this.#afterViewInit.set(true);
 	}
 	ngOnDestroy() {
+		if (this.#trigger || this.#focusBeforeShow) this.#restoreFocus();
 		this.#modalService.toggle({
 			show: false,
 			modal: this
@@ -11685,10 +11751,35 @@ var ModalComponent = class ModalComponent {
 	stateToggleSubscribe() {
 		this.#modalService.modalState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
 			if (this === action.modal || this.id === action.id) {
-				if ("show" in action) this.visible.update((visible) => action?.show === "toggle" ? !visible : action.show);
-			} else if (this.visible()) this.visible.set(false);
+				if ("show" in action) {
+					const visible = this.visible();
+					const show = action?.show === "toggle" ? !visible : !!action.show;
+					if (show && !visible) {
+						this.#trigger = action.trigger ?? null;
+						this.#openAction = action;
+					}
+					this.visible.set(show);
+				}
+			} else if (this.visible()) {
+				for (const target of this.#focusCandidates()) if (!action.focusFallback?.includes(target)) action.focusFallback?.push(target);
+				this.visible.set(false);
+			}
 		});
 	}
+	#focusCandidates() {
+		return [
+			this.#trigger,
+			this.#focusBeforeShow,
+			...this.#openAction?.focusFallback ?? []
+		];
+	}
+	#restoreFocus() {
+		const candidates = this.#focusCandidates();
+		this.#trigger = null;
+		this.#focusBeforeShow = null;
+		this.#openAction = null;
+		if (isPlatformBrowser(this.#platformId)) restoreFocus(this.#hostElement.nativeElement, candidates);
+	}
 	setBackdrop(setBackdrop) {
 		this.#activeBackdrop = setBackdrop ? this.#backdropService.setBackdrop("modal") : this.#backdropService.clearBackdrop(this.#activeBackdrop);
 	}
@@ -11827,29 +11918,38 @@ var ModalComponent = class ModalComponent {
 				"inert": "ariaHidden()",
 				"attr.id": "id",
 				"aria-modal": "ariaModal()",
-				"aria-hidden": "ariaHidden()",
 				"attr.tabindex": "-1"
 			},
 			classAttribute: "modal"
 		},
-		viewQueries: [{
-			propertyName: "modalContentRef",
-			first: true,
-			predicate: ["modalContentRef"],
-			descendants: true,
-			read: ElementRef,
-			isSignal: true
-		}, {
-			propertyName: "modalDialogRef",
-			first: true,
-			predicate: ModalDialogComponent,
-			descendants: true,
-			read: ElementRef,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "modalContentRef",
+				first: true,
+				predicate: ["modalContentRef"],
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			},
+			{
+				propertyName: "focusTrap",
+				first: true,
+				predicate: CdkTrapFocus,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "modalDialogRef",
+				first: true,
+				predicate: ModalDialogComponent,
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}
+		],
 		exportAs: ["cModal"],
 		ngImport: i0,
-		template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocusAutoCapture]=\"isVisible\" [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n",
+		template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -11903,13 +12003,12 @@ i0.ɵɵngDeclareClassMetadata({
 				"[inert]": "ariaHidden()",
 				"[attr.id]": "id",
 				"[aria-modal]": "ariaModal()",
-				"[aria-hidden]": "ariaHidden()",
 				"[attr.tabindex]": "-1",
 				"(mousedown)": "onMouseDownHandler($event)",
 				"(click)": "onClickHandler($event)",
 				"(document:keydown)": "onKeyDownHandler($event)"
 			},
-			template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocusAutoCapture]=\"isVisible\" [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n"
+			template: "@let isVisible = visible();\n<c-modal-dialog\n  [alignment]=\"alignment()\"\n  [fullscreen]=\"fullscreen()\"\n  [scrollable]=\"scrollable()\"\n  [size]=\"size()\">\n  <c-modal-content>\n    <div #modalContentRef [cdkTrapFocus]=\"isVisible\" style=\"display: contents;\">\n      <ng-content />\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n"
 		}]
 	}],
 	propDecorators: {
@@ -12028,6 +12127,10 @@ i0.ɵɵngDeclareClassMetadata({
 				isSignal: true
 			}]
 		}],
+		focusTrap: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }]
+		}],
 		modalDialogRef: [{
 			type: i0.ViewChild,
 			args: [i0.forwardRef(() => ModalDialogComponent), {
@@ -12181,7 +12284,11 @@ var OffcanvasComponent = class OffcanvasComponent {
 	#backdropClickSubscription;
 	#layoutChangeSubscription;
 	#hideFallbackId;
+	#focusBeforeShow = null;
 	#isShown = false;
+	#shownAsPanel = false;
+	#trigger = null;
+	#inPlace = signal(false, ...ngDevMode ? [{ debugName: "#inPlace" }] : /* istanbul ignore next */ []);
 	scroll = input(false, {
 		...ngDevMode ? { debugName: "scroll" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -12212,13 +12319,20 @@ var OffcanvasComponent = class OffcanvasComponent {
 			}
 		});
 	}, ...ngDevMode ? [{ debugName: "#portalEffect" }] : /* istanbul ignore next */ []);
+	#afterEveryRenderFn = afterEveryRender({ read: () => this.#readPosition() });
 	visibleEffect = effect(() => {
 		const visible = this.visible();
+		const wasShown = this.#isShown;
 		this.animateStart(visible);
 		if (visible) {
+			if (!wasShown) this.#focusBeforeShow = this.#document.activeElement;
 			this.setBackdrop(this.backdrop());
 			this.setFocus();
-		} else this.setBackdrop(false);
+		} else {
+			this.#shownAsPanel = false;
+			this.#restoreFocus();
+			this.setBackdrop(false);
+		}
 		this.layoutChangeSubscribe(visible);
 		this.visibleChange?.emit(visible);
 	}, ...ngDevMode ? [{ debugName: "visibleEffect" }] : /* istanbul ignore next */ []);
@@ -12235,7 +12349,7 @@ var OffcanvasComponent = class OffcanvasComponent {
 		};
 	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
 	ariaHidden = computed(() => {
-		return this.visible() ? null : true;
+		return this.visible() || this.#inPlace() ? null : true;
 	}, ...ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []);
 	get tabIndex() {
 		return "-1";
@@ -12263,8 +12377,10 @@ var OffcanvasComponent = class OffcanvasComponent {
 			this.#renderer.addClass(this.#hostElement.nativeElement, "showing");
 		} else {
 			this.#renderer.removeClass(this.#hostElement.nativeElement, "showing");
-			this.#renderer.addClass(this.#hostElement.nativeElement, "hiding");
-			if (wasShown) this.#scheduleHideFallback();
+			if (wasShown) {
+				this.#renderer.addClass(this.#hostElement.nativeElement, "hiding");
+				this.#scheduleHideFallback();
+			}
 		}
 	}
 	onKeyDownHandler(event) {
@@ -12273,6 +12389,13 @@ var OffcanvasComponent = class OffcanvasComponent {
 			id: this.id()
 		});
 	}
+	onResizeHandler() {
+		this.#readPosition();
+		if (this.visible() && this.#shownAsPanel && this.#inPlace()) this.#offcanvasService.toggle({
+			show: false,
+			id: this.id()
+		});
+	}
 	ngOnInit() {
 		this.stateToggleSubscribe();
 		setTimeout(() => {
@@ -12281,6 +12404,7 @@ var OffcanvasComponent = class OffcanvasComponent {
 		this.#hostElement.nativeElement.addEventListener("transitionend", this.#handleTransitionEnd);
 	}
 	ngOnDestroy() {
+		if (this.#trigger || this.#focusBeforeShow) this.#restoreFocus();
 		this.#offcanvasService.toggle({
 			show: false,
 			id: this.id()
@@ -12317,13 +12441,29 @@ var OffcanvasComponent = class OffcanvasComponent {
 		clearTimeout(this.#hideFallbackId);
 		this.#hideFallbackId = void 0;
 	}
+	#readPosition() {
+		const position = this.#document.defaultView?.getComputedStyle(this.#hostElement.nativeElement).position;
+		this.#inPlace.set(!!position && position !== "fixed");
+		if (position === "fixed" && this.visible()) this.#shownAsPanel = true;
+	}
 	setFocus() {
 		if (isPlatformBrowser(this.#platformId)) setTimeout(() => this.#hostElement.nativeElement.focus());
 	}
+	#restoreFocus() {
+		const candidates = [this.#trigger, this.#focusBeforeShow];
+		this.#trigger = null;
+		this.#focusBeforeShow = null;
+		if (isPlatformBrowser(this.#platformId)) restoreFocus(this.#hostElement.nativeElement, candidates);
+	}
 	stateToggleSubscribe() {
 		this.#offcanvasService.offcanvasState$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((action) => {
 			if (this === action.offcanvas || this.id() === action.id) {
-				if ("show" in action) this.visible.update((value) => action?.show === "toggle" ? !value : action.show);
+				if ("show" in action) {
+					const visible = this.visible();
+					const show = action?.show === "toggle" ? !visible : !!action.show;
+					if (show && !visible) this.#trigger = action.trigger ?? null;
+					this.visible.set(show);
+				}
 			}
 		});
 	}
@@ -12445,12 +12585,15 @@ var OffcanvasComponent = class OffcanvasComponent {
 		},
 		outputs: { visibleChange: "visibleChange" },
 		host: {
-			listeners: { "document:keydown": "onKeyDownHandler($event)" },
+			listeners: {
+				"document:keydown": "onKeyDownHandler($event)",
+				"window:resize": "onResizeHandler()"
+			},
 			properties: {
 				"attr.id": "id()",
 				"inert": "ariaHidden()",
-				"attr.role": "role()",
-				"aria-modal": "ariaModal()",
+				"attr.role": "visible() ? role() : null",
+				"aria-modal": "visible() ? ariaModal() : null",
 				"attr.tabindex": "tabIndex",
 				"class": "hostClasses()"
 			}
@@ -12461,7 +12604,7 @@ var OffcanvasComponent = class OffcanvasComponent {
 			inputs: ["dark", "dark"]
 		}],
 		ngImport: i0,
-		template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n",
+		template: "<div [cdkTrapFocus]=\"visible()\">\n  <ng-content />\n</div>\n",
 		styles: [":host{display:none}\n"],
 		dependencies: [{
 			kind: "ngmodule",
@@ -12493,13 +12636,14 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				"[attr.id]": "id()",
 				"[inert]": "ariaHidden()",
-				"[attr.role]": "role()",
-				"[aria-modal]": "ariaModal()",
+				"[attr.role]": "visible() ? role() : null",
+				"[aria-modal]": "visible() ? ariaModal() : null",
 				"[attr.tabindex]": "tabIndex",
 				"[class]": "hostClasses()",
-				"(document:keydown)": "onKeyDownHandler($event)"
+				"(document:keydown)": "onKeyDownHandler($event)",
+				"(window:resize)": "onResizeHandler()"
 			},
-			template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content />\n</div>\n\n",
+			template: "<div [cdkTrapFocus]=\"visible()\">\n  <ng-content />\n</div>\n",
 			styles: [":host{display:none}\n"]
 		}]
 	}],
@@ -12703,6 +12847,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var OffcanvasToggleDirective = class OffcanvasToggleDirective {
+	#elementRef = inject(ElementRef);
 	#offcanvasService = inject(OffcanvasService);
 	id = input(void 0, {
 		...ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {},
@@ -12712,7 +12857,8 @@ var OffcanvasToggleDirective = class OffcanvasToggleDirective {
 		$event.preventDefault();
 		this.#offcanvasService.toggle({
 			show: "toggle",
-			id: this.id()
+			id: this.id(),
+			trigger: this.#elementRef.nativeElement
 		});
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({