@bitforgehq/ui 0.3.0

package/fesm2022/bitforgehq-ui-overlay.mjs

@@ -0,0 +1,2675 @@
+import * as i0 from "@angular/core";
+import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, SimpleChange, TemplateRef, afterNextRender, booleanAttribute, computed, effect, inject, input, makeEnvironmentProviders, model, output, signal, viewChild } from "@angular/core";
+import { FocusTrapFactory, LiveAnnouncer } from "@angular/cdk/a11y";
+import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { Location, NgTemplateOutlet } from "@angular/common";
+import { BF_DEFAULTS, BF_LABELS, BfButtonComponent, BfIconButtonComponent, ɵBF_BUTTON_CLASSES, ɵBF_ICON_BUTTON_CLASSES, ɵPILL_HIT, ɵuniqueId } from "@bitforgehq/ui";
+import { BfIconComponent } from "@bitforgehq/ui/icons";
+import { X } from "lucide";
+import { Directionality } from "@angular/cdk/bidi";
+import * as i1 from "@angular/cdk/menu";
+import { CDK_MENU, CdkMenu, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger, CdkTargetMenuAim } from "@angular/cdk/menu";
+const BF_OVERLAY_DATA = new InjectionToken("BF_OVERLAY_DATA");
+let nextId = 0;
+var BfOverlayRef = class {
+	controller;
+	id = `bf-overlay-${nextId++}`;
+	afterClosed;
+	closedState = signal(false, ...ngDevMode ? [{ debugName: "closedState" }] : 	/* istanbul ignore next */ []);
+	closed = this.closedState.asReadonly();
+	closing = false;
+	resolveClosed = () => void 0;
+	constructor(controller) {
+		this.controller = controller;
+		this.afterClosed = new Promise((resolve) => {
+			this.resolveClosed = resolve;
+		});
+	}
+	get isClosing() {
+		return this.closing;
+	}
+	close(result) {
+		if (this.closing) return;
+		this.closing = true;
+		this.controller.close().then(() => {
+			this.closedState.set(true);
+			this.resolveClosed(result);
+		});
+	}
+	updatePosition() {
+		this.controller.updatePosition();
+	}
+};
+var BfComponentOverlayRef = class extends BfOverlayRef {
+	ref = null;
+	get componentRef() {
+		if (!this.ref) throw new Error("BfComponentOverlayRef: the content component is not attached yet");
+		return this.ref;
+	}
+	setComponentRef(ref) {
+		this.ref = ref;
+	}
+};
+const BF_OVERLAY_HOST = new InjectionToken("BF_OVERLAY_HOST");
+const OVERLAY_CONTAINER = ".cdk-overlay-container";
+const KEEP_ACTIVE = [
+	"script",
+	"style",
+	"template",
+	"link",
+	".cdk-live-announcer-element",
+	".cdk-describedby-message-container",
+	"[data-bf-overlay-keep]"
+].join(", ");
+var BfOverlayStack = class BfOverlayStack {
+	host = inject(BF_OVERLAY_HOST, { optional: true });
+	document = inject(DOCUMENT);
+	roots = /* @__PURE__ */ new Set();
+	inertBodyChildren = /* @__PURE__ */ new Set();
+	entries = signal([], ...ngDevMode ? [{ debugName: "entries" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			for (const el of this.inertBodyChildren) el.removeAttribute("inert");
+			this.inertBodyChildren.clear();
+			for (const root of this.roots) {
+				root.removeAttribute("inert");
+				root.style.removeProperty("--bf-modal-depth");
+			}
+			this.roots.clear();
+		});
+	}
+	count = computed(() => this.entries().length, ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
+	depth = computed(() => this.entries().filter((e) => e.countsAsModal).length, ...ngDevMode ? [{ debugName: "depth" }] : 	/* istanbul ignore next */ []);
+	registerRoot(el) {
+		this.roots.add(el);
+		this.applyTo(el);
+		this.applyToBody();
+		return () => {
+			if (this.roots.delete(el)) {
+				el.removeAttribute("inert");
+				el.style.removeProperty("--bf-modal-depth");
+				this.applyToBody();
+			}
+		};
+	}
+	push(ref, options = {}) {
+		if (this.entries().some((e) => e.ref === ref)) return;
+		const unregisterBack = this.host?.registerBack(options.backPriority ?? 100, () => {
+			ref.close();
+			return true;
+		}) ?? (() => void 0);
+		this.entries.update((list) => [...list, {
+			ref,
+			countsAsModal: options.countsAsModal ?? false,
+			unregisterBack
+		}]);
+		this.apply();
+	}
+	pop(ref) {
+		const entry = this.entries().find((e) => e.ref === ref);
+		if (!entry) return;
+		entry.unregisterBack();
+		this.entries.update((list) => list.filter((e) => e !== entry));
+		this.apply();
+	}
+	isTop(ref) {
+		const list = this.entries();
+		return list.length > 0 && list[list.length - 1].ref === ref;
+	}
+	releaseBack(ref) {
+		this.entries().find((e) => e.ref === ref)?.unregisterBack();
+	}
+	apply() {
+		for (const root of this.roots) this.applyTo(root);
+		this.applyToBody();
+	}
+	applyToBody() {
+		if (this.count() === 0 || this.roots.size > 0) {
+			for (const el of this.inertBodyChildren) el.removeAttribute("inert");
+			this.inertBodyChildren.clear();
+			return;
+		}
+		const containers = Array.from(this.document.querySelectorAll(OVERLAY_CONTAINER));
+		for (const child of Array.from(this.document.body.children)) {
+			if (child.hasAttribute("inert") || containers.some((container) => child.contains(container)) || child.matches(KEEP_ACTIVE)) continue;
+			child.setAttribute("inert", "");
+			this.inertBodyChildren.add(child);
+		}
+	}
+	applyTo(root) {
+		if (this.count() > 0) root.setAttribute("inert", "");
+		else root.removeAttribute("inert");
+		const depth = this.depth();
+		if (depth > 0) root.style.setProperty("--bf-modal-depth", String(depth));
+		else root.style.removeProperty("--bf-modal-depth");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfOverlayStack,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfOverlayStack,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfOverlayStack,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const OVERLAY_DURATION = 260;
+const OVERLAY_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+const OVERLAY_REDUCED_DURATION = 150;
+function prefersReducedMotion(view) {
+	if (!view || typeof view.matchMedia !== "function") return false;
+	return view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function urlPath(url) {
+	const end = url.search(/[?#]/);
+	return end === -1 ? url : url.slice(0, end);
+}
+function watchPathChange(location, onChange) {
+	let last = urlPath(location.path());
+	const stop = location.onUrlChange(() => {
+		const path = urlPath(location.path());
+		if (path === last) return;
+		last = path;
+		onChange();
+	});
+	let stopped = false;
+	return () => {
+		if (stopped) return;
+		stopped = true;
+		queueMicrotask(stop);
+	};
+}
+const TIMING_KEYS = /* @__PURE__ */ new Set([
+	"offset",
+	"easing",
+	"composite"
+]);
+var BfFinishedAnimation = class extends EventTarget {
+	currentTime = null;
+	effect = null;
+	finished = Promise.resolve(this);
+	id = "";
+	oncancel = null;
+	onfinish = null;
+	onremove = null;
+	overallProgress = 1;
+	pending = false;
+	playState = "finished";
+	playbackRate = 1;
+	ready = Promise.resolve(this);
+	replaceState = "active";
+	startTime = null;
+	timeline = null;
+	cancel() {}
+	commitStyles() {}
+	finish() {}
+	pause() {}
+	persist() {}
+	play() {}
+	reverse() {}
+	updatePlaybackRate(rate) {
+		this.playbackRate = rate;
+	}
+};
+function animateOrSettle(el, frames, options) {
+	if (typeof el.animate === "function") return el.animate(frames, options);
+	const last = frames[frames.length - 1];
+	if (last && (options.fill === "forwards" || options.fill === "both")) {
+		for (const [key, value] of Object.entries(last)) if (!TIMING_KEYS.has(key) && value !== null && value !== void 0) el.style.setProperty(key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`), String(value));
+	}
+	return new BfFinishedAnimation();
+}
+function run(el, frames, entering) {
+	if (prefersReducedMotion(el.ownerDocument.defaultView)) return animateOrSettle(el, entering ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+		duration: 150,
+		easing: "linear",
+		fill: entering ? "backwards" : "forwards"
+	});
+	return animateOrSettle(el, frames, {
+		duration: 260,
+		easing: OVERLAY_EASING,
+		fill: entering ? "backwards" : "forwards"
+	});
+}
+function slideUp(el, distance = "100%") {
+	return run(el, [{ transform: `translate3d(0,${distance},0)` }, { transform: "translate3d(0,0,0)" }], true);
+}
+function slideDown(el, distance = "100%") {
+	return run(el, [{ transform: "translate3d(0,0,0)" }, { transform: `translate3d(0,${distance},0)` }], false);
+}
+function fadeIn(el) {
+	return run(el, [{ opacity: 0 }, { opacity: 1 }], true);
+}
+function fadeOut(el) {
+	return run(el, [{ opacity: 1 }, { opacity: 0 }], false);
+}
+function scaleIn(el) {
+	return run(el, [{
+		opacity: 0,
+		transform: "scale(0.92)"
+	}, {
+		opacity: 1,
+		transform: "scale(1)"
+	}], true);
+}
+function fadeUp(el, distance = "16px") {
+	return run(el, [{
+		opacity: 0,
+		transform: `translate3d(0,${distance},0)`
+	}, {
+		opacity: 1,
+		transform: "translate3d(0,0,0)"
+	}], true);
+}
+function fadeDown(el, distance = "16px") {
+	return run(el, [{
+		opacity: 1,
+		transform: "translate3d(0,0,0)"
+	}, {
+		opacity: 0,
+		transform: `translate3d(0,${distance},0)`
+	}], false);
+}
+var BfOverlayTemplateHostComponent = class BfOverlayTemplateHostComponent {
+	template = input.required(...ngDevMode ? [{ debugName: "template" }] : 	/* istanbul ignore next */ []);
+	context = input.required(...ngDevMode ? [{ debugName: "context" }] : 	/* istanbul ignore next */ []);
+	injector = input.required(...ngDevMode ? [{ debugName: "injector" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfOverlayTemplateHostComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.1.7",
+		type: BfOverlayTemplateHostComponent,
+		isStandalone: true,
+		selector: "bf-overlay-template-host",
+		inputs: {
+			template: {
+				classPropertyName: "template",
+				publicName: "template",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			context: {
+				classPropertyName: "context",
+				publicName: "context",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			injector: {
+				classPropertyName: "injector",
+				publicName: "injector",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: `<ng-container
+    [ngTemplateOutlet]="template()"
+    [ngTemplateOutletContext]="context()"
+    [ngTemplateOutletInjector]="injector()"
+  />`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfOverlayTemplateHostComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-overlay-template-host",
+			imports: [NgTemplateOutlet],
+			host: { style: "display: contents" },
+			template: `<ng-container
+    [ngTemplateOutlet]="template()"
+    [ngTemplateOutletContext]="context()"
+    [ngTemplateOutletInjector]="injector()"
+  />`
+		}]
+	}],
+	propDecorators: {
+		template: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "template",
+				required: true
+			}]
+		}],
+		context: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "context",
+				required: true
+			}]
+		}],
+		injector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "injector",
+				required: true
+			}]
+		}]
+	}
+});
+const TABBABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[contenteditable=\"true\"]"
+].join(",");
+function firstTabbable(panel) {
+	const autofocus = panel.querySelector("[autofocus], [cdkFocusInitial]");
+	if (autofocus) {
+		if (autofocus.matches(TABBABLE) || autofocus.hasAttribute("tabindex")) return autofocus;
+		const inner = autofocus.querySelector(TABBABLE);
+		if (inner) return inner;
+	}
+	for (const el of Array.from(panel.querySelectorAll(TABBABLE))) if (!el.closest("[inert]") && !el.hidden && !el.hasAttribute("data-bf-overlay-chrome")) return el;
+	return null;
+}
+function isCloseWatcherConstructor(value) {
+	return typeof value === "function";
+}
+function closeWatcherOf(view) {
+	const constructor = view ? Reflect.get(view, "CloseWatcher") : void 0;
+	return isCloseWatcherConstructor(constructor) ? constructor : null;
+}
+function fromOtherPane(event, pane) {
+	for (const target of event.composedPath()) {
+		if (target === pane) return false;
+		if (target instanceof Element && target.classList.contains("cdk-overlay-pane")) return true;
+	}
+	return false;
+}
+var BfOverlayService = class BfOverlayService {
+	overlay = inject(Overlay);
+	injector = inject(Injector);
+	document = inject(DOCUMENT);
+	stack = inject(BfOverlayStack);
+	focusTrapFactory = inject(FocusTrapFactory);
+	location = inject(Location);
+	openPanels = /* @__PURE__ */ new Set();
+	host = inject(BF_OVERLAY_HOST, { optional: true });
+	documentScrolls = this.host?.documentScrolls !== false;
+	open(content, options = {}) {
+		const passive = options.passive ?? false;
+		const previouslyFocused = this.document.activeElement;
+		const hasBackdrop = !passive && (options.backdrop ?? true);
+		const position = options.position ?? "center";
+		const overlayRef = this.overlay.create(new OverlayConfig({
+			positionStrategy: this.positionStrategy(position),
+			scrollStrategy: passive || !this.documentScrolls ? this.overlay.scrollStrategies.noop() : this.overlay.scrollStrategies.block(),
+			hasBackdrop,
+			backdropClass: options.backdropClass ?? "bf-overlay-backdrop",
+			panelClass: ["bf-overlay-panel", ...options.panelClass ?? []],
+			...position === "fullscreen" ? {
+				width: "100%",
+				height: "100%"
+			} : {}
+		}));
+		const panel = overlayRef.overlayElement;
+		const subscriptions = [];
+		let focusTrap = null;
+		let enterAnimation = null;
+		let stopNavigation = null;
+		let closeWatcher = null;
+		const controller = {
+			close: async () => {
+				stopNavigation?.();
+				closeWatcher?.destroy();
+				closeWatcher = null;
+				this.stack.releaseBack(ref);
+				subscriptions.forEach((s) => s.unsubscribe());
+				enterAnimation?.cancel();
+				this.fadeOutBackdrop(overlayRef.backdropElement);
+				try {
+					await (options.exit ?? fadeOut)(panel)?.finished;
+				} catch {}
+				focusTrap?.destroy();
+				overlayRef.dispose();
+				this.stack.pop(ref);
+				this.openPanels.delete(panel);
+				if (!passive && (options.restoreFocus ?? true)) {
+					const fallback = [...this.openPanels].at(-1);
+					if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
+					else if (fallback) fallback.focus({ preventScroll: true });
+				}
+			},
+			updatePosition: () => overlayRef.updatePosition()
+		};
+		const ref = content instanceof TemplateRef ? new BfOverlayRef(controller) : new BfComponentOverlayRef(controller);
+		const contentInjector = Injector.create({
+			parent: options.injector ?? this.injector,
+			providers: [
+				{
+					provide: BF_OVERLAY_DATA,
+					useValue: options.data
+				},
+				{
+					provide: BfOverlayRef,
+					useValue: ref
+				},
+				...options.providers?.(ref) ?? []
+			]
+		});
+		this.decoratePanel(panel, options, passive);
+		if (!passive) {
+			this.openPanels.add(panel);
+			this.stack.push(ref, {
+				backPriority: options.backPriority,
+				countsAsModal: options.countsAsModal
+			});
+		}
+		if (content instanceof TemplateRef) {
+			const host = overlayRef.attach(new ComponentPortal(BfOverlayTemplateHostComponent, null, contentInjector));
+			host.setInput("template", content);
+			host.setInput("context", {
+				$implicit: ref,
+				data: options.data
+			});
+			host.setInput("injector", contentInjector);
+			host.changeDetectorRef.detectChanges();
+		} else {
+			const componentRef = overlayRef.attach(new ComponentPortal(content, null, contentInjector));
+			componentRef.changeDetectorRef.detectChanges();
+			ref.setComponentRef(componentRef);
+		}
+		this.dropDanglingLabel(panel, options);
+		if (!passive) {
+			const dismissByEscape = () => {
+				if (options.onEscape) options.onEscape();
+				else if (options.dismissOnEscape ?? true) ref.close();
+			};
+			subscriptions.push(overlayRef.keydownEvents().subscribe((event) => {
+				if (event.key !== "Escape" || !this.stack.isTop(ref) || fromOtherPane(event, overlayRef.overlayElement)) return;
+				event.preventDefault();
+				dismissByEscape();
+			}));
+			const Watcher = this.host?.handlesSystemBack ? null : closeWatcherOf(this.document.defaultView);
+			const watch = () => {
+				if (!Watcher) return;
+				const watcher = new Watcher();
+				watcher.onclose = () => {
+					if (closeWatcher !== watcher) return;
+					closeWatcher = null;
+					if (ref.isClosing) return;
+					if (this.stack.isTop(ref)) dismissByEscape();
+					if (!ref.isClosing) watch();
+				};
+				closeWatcher = watcher;
+			};
+			watch();
+			overlayRef.backdropElement?.addEventListener("mousedown", (event) => event.preventDefault());
+			if (hasBackdrop && (options.dismissOnBackdrop ?? true)) subscriptions.push(overlayRef.backdropClick().subscribe(() => ref.close()));
+			if (options.trapFocus ?? true) focusTrap = this.focusTrapFactory.create(panel);
+			(options.autoFocus === "panel" ? panel : firstTabbable(panel) ?? panel).focus({ preventScroll: true });
+		}
+		if (options.closeOnNavigation ?? !passive) stopNavigation = watchPathChange(this.location, () => {
+			if (ref.isClosing) return;
+			if (options.onNavigation) options.onNavigation();
+			else ref.close();
+		});
+		enterAnimation = (options.enter ?? fadeIn)(panel);
+		return ref;
+	}
+	fadeOutBackdrop(backdrop) {
+		if (!backdrop) return;
+		if (prefersReducedMotion(this.document.defaultView)) {
+			backdrop.style.opacity = "0";
+			return;
+		}
+		const current = this.document.defaultView?.getComputedStyle(backdrop).opacity;
+		animateOrSettle(backdrop, [{ opacity: current === void 0 || current === "" ? "1" : current }, { opacity: 0 }], {
+			duration: 260,
+			easing: OVERLAY_EASING,
+			fill: "forwards"
+		});
+	}
+	dropDanglingLabel(panel, options) {
+		const id = options.ariaLabelledBy;
+		if (!id || options.ariaLabel) return;
+		const target = this.document.getElementById(id);
+		if (!target || !panel.contains(target)) panel.removeAttribute("aria-labelledby");
+	}
+	decoratePanel(panel, options, passive) {
+		const role = options.role ?? (passive ? null : "dialog");
+		if (role) panel.setAttribute("role", role);
+		panel.setAttribute("tabindex", "-1");
+		if (!passive) panel.setAttribute("aria-modal", "true");
+		if (options.ariaLabel) panel.setAttribute("aria-label", options.ariaLabel);
+		if (options.ariaLabelledBy) panel.setAttribute("aria-labelledby", options.ariaLabelledBy);
+		if (options.ariaDescribedBy) panel.setAttribute("aria-describedby", options.ariaDescribedBy);
+	}
+	positionStrategy(position) {
+		const global = this.overlay.position().global();
+		switch (position) {
+			case "bottom": return global.centerHorizontally().bottom("0");
+			case "top": return global.centerHorizontally().top("0");
+			case "fullscreen": return global.top("0").left("0");
+			default: return global.centerHorizontally().centerVertically();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfOverlayService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfOverlayService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfOverlayService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+let nextTitleId = 0;
+const HEADING = "h1, h2, h3, h4, h5, h6, [role=\"heading\"]";
+function labelPanelByHeading(panel) {
+	const heading = Array.from(panel.querySelectorAll(HEADING)).find((element) => !element.closest("[aria-hidden=\"true\"], [hidden]"));
+	if (!heading) return false;
+	if (!heading.id) heading.id = `bf-overlay-title-${nextTitleId++}`;
+	panel.setAttribute("aria-labelledby", heading.id);
+	panel.removeAttribute("aria-label");
+	return true;
+}
+function watchPanelHeading(panel) {
+	if (labelPanelByHeading(panel)) return () => void 0;
+	const observer = new MutationObserver(() => {
+		if (labelPanelByHeading(panel)) observer.disconnect();
+	});
+	observer.observe(panel, {
+		childList: true,
+		subtree: true,
+		attributes: true,
+		attributeFilter: [
+			"role",
+			"aria-hidden",
+			"hidden"
+		]
+	});
+	return () => observer.disconnect();
+}
+var BfToastRef = class {
+	controller;
+	afterDismissed;
+	constructor(controller, afterDismissed) {
+		this.controller = controller;
+		this.afterDismissed = afterDismissed;
+	}
+	dismiss() {
+		this.controller.dismiss();
+	}
+};
+const DEFAULT_DURATION = 3e3;
+function announcement(message, action) {
+	if (!action) return message;
+	const separator = /[.!?…:;,]$/.test(message.trim()) ? " " : ". ";
+	return `${message.trim()}${separator}${action.label}`;
+}
+var ɵBfToastQueue = class {
+	presenter;
+	options;
+	waiting = [];
+	shown = /* @__PURE__ */ new Set();
+	destroyed = false;
+	constructor(presenter, options) {
+		this.presenter = presenter;
+		this.options = options;
+		options.destroyRef.onDestroy(() => {
+			this.destroyed = true;
+			for (const entry of [...this.waiting, ...this.shown]) this.dismissEntry(entry);
+		});
+	}
+	show(request) {
+		let resolve = () => void 0;
+		const afterDismissed = new Promise((res) => {
+			resolve = res;
+		});
+		const entry = {
+			request,
+			message: request.message,
+			action: request.action,
+			duration: request.duration ?? (request.action ? 0 : DEFAULT_DURATION),
+			resolve,
+			dismissed: false
+		};
+		const ref = new BfToastRef({ dismiss: () => this.dismissEntry(entry) }, afterDismissed);
+		if (this.destroyed) {
+			entry.dismissed = true;
+			resolve("dismiss");
+			return ref;
+		}
+		for (const stale of [...this.waiting, ...this.shown]) if (stale.duration <= 0) this.dismissEntry(stale);
+		this.waiting.push(entry);
+		this.pump();
+		return ref;
+	}
+	dismissEntry(entry) {
+		if (entry.dismissed) return;
+		if (entry.finish) {
+			entry.finish("dismiss");
+			return;
+		}
+		const index = this.waiting.indexOf(entry);
+		if (index >= 0) this.waiting.splice(index, 1);
+		entry.dismissed = true;
+		entry.resolve("dismiss");
+	}
+	pump() {
+		while (!this.destroyed && this.shown.size < this.options.maxVisible) {
+			const entry = this.waiting.shift();
+			if (!entry) return;
+			this.shown.add(entry);
+			this.present(entry);
+		}
+	}
+	present(entry) {
+		const doc = this.options.document;
+		let timer = null;
+		let remaining = entry.duration;
+		let startedAt = 0;
+		const holds = /* @__PURE__ */ new Set();
+		let handle = null;
+		let early = null;
+		let returnTo = this.focusedElement();
+		const inToast = (target) => target instanceof Node && (handle?.host?.contains(target) ?? false);
+		const onDocumentFocusIn = (event) => {
+			if (!inToast(event.target)) returnTo = event.target instanceof HTMLElement ? event.target : null;
+		};
+		const onDocumentFocusOut = (event) => {
+			if (!inToast(event.target) && event.relatedTarget === null) returnTo = null;
+		};
+		const pauseTimer = () => {
+			if (timer === null) return;
+			clearTimeout(timer);
+			timer = null;
+			remaining -= Date.now() - startedAt;
+		};
+		const startTimer = () => {
+			if (entry.duration <= 0 || entry.dismissed || timer !== null || holds.size > 0) return;
+			startedAt = Date.now();
+			timer = setTimeout(() => finish("timeout"), Math.max(0, remaining));
+		};
+		const close = (current, reason) => {
+			current.close(reason).then(() => {
+				entry.resolve(reason);
+				this.shown.delete(entry);
+				this.pump();
+			});
+		};
+		const finish = (reason) => {
+			if (entry.dismissed) return;
+			entry.dismissed = true;
+			pauseTimer();
+			doc.removeEventListener("focusin", onDocumentFocusIn, true);
+			doc.removeEventListener("focusout", onDocumentFocusOut, true);
+			if (inToast(doc.activeElement) && returnTo?.isConnected) returnTo.focus({ preventScroll: true });
+			if (handle) close(handle, reason);
+			else early = reason;
+		};
+		entry.finish = finish;
+		const view = {
+			message: entry.message,
+			action: entry.action ? {
+				label: entry.action.label,
+				run: () => {
+					if (entry.dismissed) return;
+					entry.action?.handler?.();
+					finish("action");
+				}
+			} : null,
+			hold: (source, held) => {
+				if (held) {
+					holds.add(source);
+					pauseTimer();
+				} else {
+					holds.delete(source);
+					startTimer();
+				}
+			},
+			escape: () => finish("dismiss")
+		};
+		handle = this.presenter.present(view, entry.request);
+		if (early) {
+			close(handle, early);
+			return;
+		}
+		doc.addEventListener("focusin", onDocumentFocusIn, true);
+		doc.addEventListener("focusout", onDocumentFocusOut, true);
+		this.options.announcer.announce(announcement(entry.message, entry.action), "polite");
+		startTimer();
+	}
+	focusedElement() {
+		const active = this.options.document.activeElement;
+		return active instanceof HTMLElement && active !== this.options.document.body ? active : null;
+	}
+};
+const BF_DIALOG_DATA = new InjectionToken("BF_DIALOG_DATA");
+const BF_DIALOG_CONTEXT = new InjectionToken("BF_DIALOG_CONTEXT");
+var BfDialogRef = class {
+	overlayRef;
+	instance;
+	id;
+	afterClosed;
+	closed;
+	constructor(overlayRef, instance = () => null) {
+		this.overlayRef = overlayRef;
+		this.instance = instance;
+		this.id = overlayRef.id;
+		this.afterClosed = overlayRef.afterClosed;
+		this.closed = overlayRef.closed;
+	}
+	get componentInstance() {
+		return this.instance();
+	}
+	close(result) {
+		this.overlayRef.close(result);
+	}
+};
+const HOST_BASE = "relative flex flex-col bg-surface text-text";
+const CARD = "max-h-[calc(100dvh-2*var(--spacing-gutter))] rounded-card shadow-floating border border-transparent";
+const SIZE$1 = {
+	sm: `w-[min(24rem,calc(100vw-2*var(--spacing-gutter)))] ${CARD}`,
+	md: `w-[min(32rem,calc(100vw-2*var(--spacing-gutter)))] ${CARD}`,
+	lg: `w-[min(48rem,calc(100vw-2*var(--spacing-gutter)))] ${CARD}`,
+	xl: `w-[min(64rem,calc(100vw-2*var(--spacing-gutter)))] ${CARD}`,
+	fullscreen: "h-full w-full"
+};
+const HEADER_BASE = "flex min-w-0 shrink-0 items-start gap-3 px-6 pt-6";
+const HEADER = {
+	close: `${HEADER_BASE} min-h-14 pe-14`,
+	plain: `${HEADER_BASE} empty:hidden`
+};
+var BfDialogComponent = class BfDialogComponent {
+	labels = inject(BF_LABELS);
+	context = inject(BF_DIALOG_CONTEXT, { optional: true });
+	ref = inject(BfDialogRef, { optional: true });
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
+	closeButton = input(true, {
+		...ngDevMode ? { debugName: "closeButton" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input("", ...ngDevMode ? [{ debugName: "closeLabel" }] : 	/* istanbul ignore next */ []);
+	overflowing = signal(false, ...ngDevMode ? [{ debugName: "overflowing" }] : 	/* istanbul ignore next */ []);
+	titleId = this.context?.titleId ?? ɵuniqueId("bf-dialog-title");
+	closeIcon = X;
+	size = this.context?.size ?? "md";
+	hostClasses = computed(() => `${HOST_BASE} ${SIZE$1[this.size]}`, ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
+	headerClasses = computed(() => HEADER[this.closeButton() ? "close" : "plain"], ...ngDevMode ? [{ debugName: "headerClasses" }] : 	/* istanbul ignore next */ []);
+	closeName = computed(() => this.closeLabel() || this.labels.close, ...ngDevMode ? [{ debugName: "closeName" }] : 	/* istanbul ignore next */ []);
+	body = viewChild.required("body", ...ngDevMode ? [{ debugName: "body" }] : 	/* istanbul ignore next */ []);
+	content = viewChild.required("content", ...ngDevMode ? [{ debugName: "content" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		let observer = null;
+		afterNextRender(() => {
+			const body = this.body().nativeElement;
+			const measure = () => this.overflowing.set(body.scrollHeight > body.clientHeight);
+			measure();
+			if (typeof ResizeObserver === "function") {
+				observer = new ResizeObserver(measure);
+				observer.observe(body);
+				observer.observe(this.content().nativeElement);
+			}
+		});
+		inject(DestroyRef).onDestroy(() => observer?.disconnect());
+	}
+	close() {
+		this.ref?.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDialogComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfDialogComponent,
+		isStandalone: true,
+		selector: "bf-dialog",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeButton: {
+				classPropertyName: "closeButton",
+				publicName: "closeButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-bf-dialog-id": "titleId"
+		} },
+		viewQueries: [{
+			propertyName: "body",
+			first: true,
+			predicate: ["body"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "content",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div data-dialog-header [class]="headerClasses()">
+      @if (title()) {
+        <h2 [id]="titleId" class="text-heading min-w-0 flex-1 wrap-anywhere">{{ title() }}</h2>
+      }
+      <ng-content select="[bfSlot=header]" />
+    </div>
+    <div
+      #body
+      data-dialog-body
+      class="focus-visible:ring-ring min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 focus-visible:ring-4 focus-visible:outline-hidden focus-visible:ring-inset"
+      [attr.tabindex]="overflowing() ? 0 : null"
+      [attr.role]="overflowing() && title() ? 'region' : null"
+      [attr.aria-labelledby]="overflowing() && title() ? titleId : null"
+    >
+      <div #content class="flex flex-col gap-4"><ng-content /></div>
+    </div>
+    <!-- A projected wrapper (<div bfSlot="footer">) lays out its buttons like the row itself. -->
+    <div
+      data-dialog-footer
+      class="flex shrink-0 flex-wrap justify-end gap-2 px-6 pb-6 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
+    >
+      <ng-content select="[bfSlot=footer]" />
+    </div>
+    @if (closeButton()) {
+      <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
+      <bf-icon-button
+        data-dialog-close
+        class="absolute end-3 top-3"
+        variant="text"
+        size="sm"
+        [label]="closeName()"
+        (clicked)="close()"
+      >
+        <bf-icon [icon]="closeIcon" />
+      </bf-icon-button>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfIconButtonComponent,
+			selector: "bf-icon-button",
+			inputs: [
+				"variant",
+				"size",
+				"type",
+				"disabled",
+				"label"
+			],
+			outputs: ["clicked"]
+		}, {
+			kind: "component",
+			type: BfIconComponent,
+			selector: "bf-icon",
+			inputs: [
+				"icon",
+				"size",
+				"label"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-dialog",
+			imports: [BfIconButtonComponent, BfIconComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-bf-dialog-id]": "titleId"
+			},
+			template: `
+    <div data-dialog-header [class]="headerClasses()">
+      @if (title()) {
+        <h2 [id]="titleId" class="text-heading min-w-0 flex-1 wrap-anywhere">{{ title() }}</h2>
+      }
+      <ng-content select="[bfSlot=header]" />
+    </div>
+    <div
+      #body
+      data-dialog-body
+      class="focus-visible:ring-ring min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 focus-visible:ring-4 focus-visible:outline-hidden focus-visible:ring-inset"
+      [attr.tabindex]="overflowing() ? 0 : null"
+      [attr.role]="overflowing() && title() ? 'region' : null"
+      [attr.aria-labelledby]="overflowing() && title() ? titleId : null"
+    >
+      <div #content class="flex flex-col gap-4"><ng-content /></div>
+    </div>
+    <!-- A projected wrapper (<div bfSlot="footer">) lays out its buttons like the row itself. -->
+    <div
+      data-dialog-footer
+      class="flex shrink-0 flex-wrap justify-end gap-2 px-6 pb-6 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
+    >
+      <ng-content select="[bfSlot=footer]" />
+    </div>
+    @if (closeButton()) {
+      <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
+      <bf-icon-button
+        data-dialog-close
+        class="absolute end-3 top-3"
+        variant="text"
+        size="sm"
+        [label]="closeName()"
+        (clicked)="close()"
+      >
+        <bf-icon [icon]="closeIcon" />
+      </bf-icon-button>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		closeButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeButton",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		body: [{
+			type: i0.ViewChild,
+			args: ["body", { isSignal: true }]
+		}],
+		content: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}]
+	}
+});
+const BF_DIALOG_TEMPLATE = new InjectionToken("BF_DIALOG_TEMPLATE");
+var BfDialogTemplateHostComponent = class BfDialogTemplateHostComponent {
+	view = inject(BF_DIALOG_TEMPLATE);
+	injector = inject(Injector);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDialogTemplateHostComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfDialogTemplateHostComponent,
+		isStandalone: true,
+		selector: "bf-dialog-template-host",
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: `<ng-container
+    [ngTemplateOutlet]="view.template"
+    [ngTemplateOutletContext]="view.context"
+    [ngTemplateOutletInjector]="injector"
+  />`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDialogTemplateHostComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-dialog-template-host",
+			imports: [NgTemplateOutlet],
+			host: { style: "display: contents" },
+			template: `<ng-container
+    [ngTemplateOutlet]="view.template"
+    [ngTemplateOutletContext]="view.context"
+    [ngTemplateOutletInjector]="injector"
+  />`
+		}]
+	}]
+});
+var BfConfirmDialogComponent = class BfConfirmDialogComponent {
+	data = inject(BF_DIALOG_DATA);
+	ref = inject(BfDialogRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfConfirmDialogComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfConfirmDialogComponent,
+		isStandalone: true,
+		selector: "bf-confirm-dialog",
+		host: { styleAttribute: "display: contents" },
+		ngImport: i0,
+		template: `
+    <bf-dialog [title]="data.title" [closeButton]="false">
+      @if (data.message) {
+        <p [id]="data.messageId" class="text-body text-text-secondary">{{ data.message }}</p>
+      }
+      <div bfSlot="footer">
+        @for (button of data.buttons; track $index) {
+          <bf-button
+            [variant]="button.variant"
+            [attr.cdkFocusInitial]="button.initial ? '' : null"
+            (clicked)="ref.close(button.answer)"
+          >
+            {{ button.label }}
+          </bf-button>
+        }
+      </div>
+    </bf-dialog>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfDialogComponent,
+			selector: "bf-dialog",
+			inputs: [
+				"title",
+				"closeButton",
+				"closeLabel"
+			]
+		}, {
+			kind: "component",
+			type: BfButtonComponent,
+			selector: "bf-button, a[bfButton]",
+			inputs: [
+				"variant",
+				"size",
+				"type",
+				"disabled",
+				"loading",
+				"fullWidth"
+			],
+			outputs: ["clicked"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfConfirmDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-confirm-dialog",
+			imports: [BfDialogComponent, BfButtonComponent],
+			host: { style: "display: contents" },
+			template: `
+    <bf-dialog [title]="data.title" [closeButton]="false">
+      @if (data.message) {
+        <p [id]="data.messageId" class="text-body text-text-secondary">{{ data.message }}</p>
+      }
+      <div bfSlot="footer">
+        @for (button of data.buttons; track $index) {
+          <bf-button
+            [variant]="button.variant"
+            [attr.cdkFocusInitial]="button.initial ? '' : null"
+            (clicked)="ref.close(button.answer)"
+          >
+            {{ button.label }}
+          </bf-button>
+        }
+      </div>
+    </bf-dialog>
+  `
+		}]
+	}]
+});
+var BfDialogService = class BfDialogService {
+	overlays = inject(BfOverlayService);
+	injector = inject(Injector);
+	open(content, config = {}) {
+		return this.openDialog(content, config, {});
+	}
+	confirm(options) {
+		const injector = options.injector ?? this.injector;
+		const labels = injector.get(BF_LABELS);
+		const buttons = options.buttons?.length ? options.buttons : [{
+			id: "cancel",
+			label: labels.cancel,
+			role: "cancel"
+		}, {
+			id: "ok",
+			label: labels.ok
+		}];
+		const cancelIndex = buttons.findIndex((button) => button.role === "cancel");
+		const initialIndex = cancelIndex >= 0 ? cancelIndex : 0;
+		let primaryAssigned = false;
+		const views = buttons.map((button, index) => {
+			let variant;
+			if (button.role === "cancel") variant = "outline";
+			else if (button.role === "destructive") variant = "danger";
+			else if (!primaryAssigned) {
+				variant = "primary";
+				primaryAssigned = true;
+			} else variant = "tonal";
+			return {
+				label: button.label,
+				answer: button.id ?? button.label,
+				variant,
+				initial: index === initialIndex
+			};
+		});
+		const messageId = ɵuniqueId("bf-confirm-message");
+		const data = {
+			title: options.title,
+			message: options.message,
+			messageId,
+			buttons: views
+		};
+		const cancel = views[cancelIndex];
+		const ref = this.openDialog(BfConfirmDialogComponent, {
+			data,
+			role: "alertdialog",
+			size: options.size ?? "sm",
+			ariaDescribedBy: options.message ? messageId : void 0,
+			dismissOnBackdrop: false,
+			closeOnNavigation: options.closeOnNavigation,
+			injector
+		}, {
+			onEscape: () => {
+				if (cancel) ref.close(cancel.answer);
+			},
+			onNavigation: () => ref.close(cancel?.answer)
+		});
+		return ref.afterClosed;
+	}
+	openDialog(content, config, handlers) {
+		const size = config.size ?? "md";
+		const role = config.role ?? "dialog";
+		const injector = config.injector ?? this.injector;
+		const titleId = ɵuniqueId("bf-dialog-title");
+		let dialogRef = null;
+		let instance = null;
+		const providers = (ref) => {
+			const created = new BfDialogRef(ref, () => instance);
+			dialogRef = created;
+			const list = [
+				{
+					provide: BfDialogRef,
+					useValue: created
+				},
+				{
+					provide: BF_DIALOG_DATA,
+					useValue: config.data
+				},
+				{
+					provide: BF_DIALOG_CONTEXT,
+					useValue: {
+						titleId,
+						size
+					}
+				}
+			];
+			if (content instanceof TemplateRef) {
+				const view = {
+					template: content,
+					context: {
+						$implicit: created,
+						data: config.data
+					}
+				};
+				list.push({
+					provide: BF_DIALOG_TEMPLATE,
+					useValue: view
+				});
+			}
+			return list;
+		};
+		const options = {
+			data: config.data,
+			position: size === "fullscreen" ? "fullscreen" : "center",
+			role,
+			ariaLabel: config.ariaLabel,
+			ariaLabelledBy: config.ariaLabel ? void 0 : titleId,
+			ariaDescribedBy: config.ariaDescribedBy,
+			dismissOnBackdrop: config.dismissOnBackdrop ?? role === "dialog",
+			dismissOnEscape: config.dismissOnEscape ?? true,
+			onEscape: handlers.onEscape,
+			closeOnNavigation: config.closeOnNavigation,
+			onNavigation: handlers.onNavigation,
+			autoFocus: config.autoFocus,
+			restoreFocus: config.restoreFocus,
+			panelClass: ["bf-dialog-panel", ...config.panelClass ?? []],
+			injector,
+			providers,
+			enter: size === "fullscreen" ? fadeIn : scaleIn,
+			exit: fadeOut
+		};
+		let overlayRef;
+		if (content instanceof TemplateRef) overlayRef = this.overlays.open(BfDialogTemplateHostComponent, options);
+		else {
+			const componentRef = this.overlays.open(content, options);
+			instance = componentRef.componentRef.instance;
+			overlayRef = componentRef;
+		}
+		if (!dialogRef) throw new Error("BfDialogService: the overlay core did not build the dialog providers");
+		this.nameUnlabelledPanel(overlayRef.componentRef.location.nativeElement, overlayRef.afterClosed, config, injector);
+		return dialogRef;
+	}
+	nameUnlabelledPanel(host, afterClosed, config, injector) {
+		const panel = host instanceof HTMLElement ? host.closest(".bf-overlay-panel") : null;
+		if (!panel || config.ariaLabel || panel.hasAttribute("aria-labelledby")) return;
+		panel.setAttribute("aria-label", injector.get(BF_LABELS).dialog);
+		const stop = watchPanelHeading(panel);
+		afterClosed.then(stop);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDialogService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDialogService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDialogService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var BfDesktopToastComponent = class BfDesktopToastComponent {
+	message = input.required(...ngDevMode ? [{ debugName: "message" }] : 	/* istanbul ignore next */ []);
+	actionLabel = input("", ...ngDevMode ? [{ debugName: "actionLabel" }] : 	/* istanbul ignore next */ []);
+	actionClicked = output();
+	escaped = output();
+	keydown(event) {
+		if (!(event instanceof KeyboardEvent) || event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.escaped.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDesktopToastComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfDesktopToastComponent,
+		isStandalone: true,
+		selector: "bf-desktop-toast",
+		inputs: {
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			actionLabel: {
+				classPropertyName: "actionLabel",
+				publicName: "actionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			actionClicked: "actionClicked",
+			escaped: "escaped"
+		},
+		host: {
+			listeners: { "keydown": "keydown($event)" },
+			classAttribute: "bg-surface text-text border border-border rounded-card shadow-floating px-4 py-3 text-body flex items-start gap-3 w-[min(24rem,calc(100vw-2*var(--spacing-gutter)))]"
+		},
+		ngImport: i0,
+		template: `
+    <span class="min-w-0 flex-1 wrap-anywhere">{{ message() }}</span>
+    @if (actionLabel()) {
+      <button
+        type="button"
+        class="text-primary-strong focus-visible:ring-ring rounded-tile -me-2 inline-flex min-h-6 shrink-0 cursor-pointer items-center px-2 font-bold hover:underline focus-visible:ring-4 focus-visible:outline-hidden"
+        (click)="actionClicked.emit()"
+      >
+        {{ actionLabel() }}
+      </button>
+    }
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDesktopToastComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-desktop-toast",
+			host: {
+				class: "bg-surface text-text border border-border rounded-card shadow-floating px-4 py-3 text-body flex items-start gap-3 w-[min(24rem,calc(100vw-2*var(--spacing-gutter)))]",
+				"(keydown)": "keydown($event)"
+			},
+			template: `
+    <span class="min-w-0 flex-1 wrap-anywhere">{{ message() }}</span>
+    @if (actionLabel()) {
+      <button
+        type="button"
+        class="text-primary-strong focus-visible:ring-ring rounded-tile -me-2 inline-flex min-h-6 shrink-0 cursor-pointer items-center px-2 font-bold hover:underline focus-visible:ring-4 focus-visible:outline-hidden"
+        (click)="actionClicked.emit()"
+      >
+        {{ actionLabel() }}
+      </button>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: true
+			}]
+		}],
+		actionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionLabel",
+				required: false
+			}]
+		}],
+		actionClicked: [{
+			type: i0.Output,
+			args: ["actionClicked"]
+		}],
+		escaped: [{
+			type: i0.Output,
+			args: ["escaped"]
+		}]
+	}
+});
+const BF_DESKTOP_TOAST_DEFAULTS = Object.freeze({
+	position: "bottom-end",
+	maxVisible: 3,
+	ariaLabel: ""
+});
+const BF_DESKTOP_TOAST_CONFIG = new InjectionToken("BF_DESKTOP_TOAST_CONFIG", {
+	providedIn: "root",
+	factory: () => BF_DESKTOP_TOAST_DEFAULTS
+});
+function provideBfDesktopToast(config = {}) {
+	return makeEnvironmentProviders([{
+		provide: BF_DESKTOP_TOAST_CONFIG,
+		useValue: Object.freeze({
+			...BF_DESKTOP_TOAST_DEFAULTS,
+			...config
+		})
+	}]);
+}
+var BfDesktopToastStackComponent = class BfDesktopToastStackComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : 	/* istanbul ignore next */ []);
+	held = output();
+	focusLeft(event) {
+		const to = event.relatedTarget;
+		const self = event.currentTarget;
+		if (to instanceof Node && self instanceof Node && self.contains(to)) return;
+		this.held.emit({
+			source: "focus",
+			held: false
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDesktopToastStackComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfDesktopToastStackComponent,
+		isStandalone: true,
+		selector: "bf-desktop-toast-stack",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { held: "held" },
+		host: {
+			attributes: { "role": "region" },
+			listeners: {
+				"pointerenter": "held.emit({ source: 'pointer', held: true })",
+				"pointerleave": "held.emit({ source: 'pointer', held: false })",
+				"focusin": "held.emit({ source: 'focus', held: true })",
+				"focusout": "focusLeft($event)"
+			},
+			properties: { "attr.aria-label": "label()" },
+			classAttribute: "flex flex-col gap-2"
+		},
+		ngImport: i0,
+		template: `
+    @for (item of items(); track item.id) {
+      <bf-desktop-toast
+        [attr.data-bf-toast]="item.id"
+        [message]="item.view.message"
+        [actionLabel]="item.view.action?.label ?? ''"
+        (actionClicked)="item.view.action?.run()"
+        (escaped)="item.view.escape()"
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfDesktopToastComponent,
+			selector: "bf-desktop-toast",
+			inputs: ["message", "actionLabel"],
+			outputs: ["actionClicked", "escaped"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDesktopToastStackComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-desktop-toast-stack",
+			imports: [BfDesktopToastComponent],
+			host: {
+				role: "region",
+				"[attr.aria-label]": "label()",
+				class: "flex flex-col gap-2",
+				"(pointerenter)": "held.emit({ source: 'pointer', held: true })",
+				"(pointerleave)": "held.emit({ source: 'pointer', held: false })",
+				"(focusin)": "held.emit({ source: 'focus', held: true })",
+				"(focusout)": "focusLeft($event)"
+			},
+			template: `
+    @for (item of items(); track item.id) {
+      <bf-desktop-toast
+        [attr.data-bf-toast]="item.id"
+        [message]="item.view.message"
+        [actionLabel]="item.view.action?.label ?? ''"
+        (actionClicked)="item.view.action?.run()"
+        (escaped)="item.view.escape()"
+      />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		held: [{
+			type: i0.Output,
+			args: ["held"]
+		}]
+	}
+});
+const INSET = {
+	top: "calc(24px + var(--spacing-safe-top, 0px))",
+	bottom: "calc(24px + var(--spacing-safe-bottom, 0px))",
+	endLtr: "calc(24px + var(--spacing-safe-right, 0px))",
+	endRtl: "calc(24px + var(--spacing-safe-left, 0px))"
+};
+var BfDesktopToastService = class BfDesktopToastService {
+	overlay = inject(Overlay);
+	injector = inject(Injector);
+	document = inject(DOCUMENT);
+	config = inject(BF_DESKTOP_TOAST_CONFIG);
+	directionality = inject(Directionality);
+	overlayStack = inject(BfOverlayStack);
+	f6ReturnTo = null;
+	onKeydown = (event) => this.keydown(event);
+	items = [];
+	holds = /* @__PURE__ */ new Set();
+	pane = null;
+	dirSubscription = null;
+	nextId = 0;
+	queue = new ɵBfToastQueue({ present: (view, options) => this.present(view, options) }, {
+		maxVisible: Math.max(1, Math.floor(this.config.maxVisible)),
+		announcer: inject(LiveAnnouncer),
+		document: this.document,
+		destroyRef: inject(DestroyRef)
+	});
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.disposePane());
+	}
+	show(options) {
+		return this.queue.show(options);
+	}
+	present(view, options) {
+		const pane = this.ensurePane(options.injector ?? this.injector);
+		const item = {
+			id: this.nextId++,
+			view
+		};
+		this.items = [...this.items, item];
+		this.render();
+		for (const source of this.holds) view.hold(source, true);
+		const host = pane.overlayRef.overlayElement.querySelector(`[data-bf-toast="${item.id}"]`);
+		if (host) fadeUp(host, this.anchoredTop() ? "-8px" : "8px");
+		return {
+			host,
+			close: async () => {
+				if (host) try {
+					await fadeOut(host).finished;
+				} catch {}
+				this.remove(item);
+			}
+		};
+	}
+	remove(item) {
+		if (!this.pane) return;
+		this.items = this.items.filter((i) => i !== item);
+		if (this.items.length === 0) {
+			this.disposePane();
+			return;
+		}
+		this.render();
+		if (this.holds.has("focus") && !this.pane.overlayRef.overlayElement.contains(this.document.activeElement)) this.setHold("focus", false);
+	}
+	render() {
+		const pane = this.pane;
+		if (!pane) return;
+		pane.stack.setInput("items", this.anchoredTop() ? [...this.items].reverse() : this.items);
+		pane.stack.changeDetectorRef.detectChanges();
+	}
+	setHold(source, held) {
+		if (held === this.holds.has(source)) return;
+		if (held) this.holds.add(source);
+		else this.holds.delete(source);
+		for (const item of this.items) item.view.hold(source, held);
+	}
+	ensurePane(injector) {
+		if (this.pane) return this.pane;
+		const overlayRef = this.overlay.create({
+			positionStrategy: this.positionStrategy(),
+			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			hasBackdrop: false,
+			panelClass: "bf-desktop-toast-pane"
+		});
+		const stack = overlayRef.attach(new ComponentPortal(BfDesktopToastStackComponent, null, injector));
+		stack.setInput("label", this.config.ariaLabel || injector.get(BF_LABELS).notifications);
+		stack.instance.held.subscribe(({ source, held }) => this.setHold(source, held));
+		overlayRef.updatePosition();
+		this.document.addEventListener("keydown", this.onKeydown);
+		this.dirSubscription = this.directionality.change.subscribe((dir) => {
+			overlayRef.setDirection(dir);
+			overlayRef.updatePositionStrategy(this.positionStrategy());
+		});
+		this.pane = {
+			overlayRef,
+			stack
+		};
+		return this.pane;
+	}
+	disposePane() {
+		if (this.pane) this.document.removeEventListener("keydown", this.onKeydown);
+		this.dirSubscription?.unsubscribe();
+		this.dirSubscription = null;
+		this.pane?.overlayRef.dispose();
+		this.pane = null;
+		this.items = [];
+		this.holds.clear();
+		this.f6ReturnTo = null;
+	}
+	keydown(event) {
+		const pane = this.pane;
+		if (!pane || event.key !== "F6" || event.ctrlKey || event.altKey || event.metaKey) return;
+		const active = this.document.activeElement;
+		if (active instanceof Node && pane.overlayRef.overlayElement.contains(active)) {
+			const back = this.f6ReturnTo;
+			if (back?.isConnected) {
+				event.preventDefault();
+				this.f6ReturnTo = null;
+				back.focus();
+			}
+			return;
+		}
+		if (this.overlayStack.count() > 0) return;
+		const newest = [...this.items].reverse().find((item) => item.view.action);
+		const button = newest ? pane.overlayRef.overlayElement.querySelector(`[data-bf-toast="${newest.id}"] button`) : null;
+		if (!button) return;
+		event.preventDefault();
+		this.f6ReturnTo = active instanceof HTMLElement && active !== this.document.body ? active : null;
+		button.focus();
+	}
+	anchoredTop() {
+		return this.config.position.startsWith("top");
+	}
+	positionStrategy() {
+		const global = this.overlay.position().global();
+		const vertical = this.anchoredTop() ? global.top(INSET.top) : global.bottom(INSET.bottom);
+		return this.config.position.endsWith("center") ? vertical.centerHorizontally() : vertical.end(this.directionality.value === "rtl" ? INSET.endRtl : INSET.endLtr);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDesktopToastService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDesktopToastService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDesktopToastService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const GAP = 4;
+const BELOW_START = {
+	originX: "start",
+	originY: "bottom",
+	overlayX: "start",
+	overlayY: "top",
+	offsetY: GAP
+};
+const BELOW_END = {
+	originX: "end",
+	originY: "bottom",
+	overlayX: "end",
+	overlayY: "top",
+	offsetY: GAP
+};
+const ABOVE_START = {
+	originX: "start",
+	originY: "top",
+	overlayX: "start",
+	overlayY: "bottom",
+	offsetY: -4
+};
+const ABOVE_END = {
+	originX: "end",
+	originY: "top",
+	overlayX: "end",
+	overlayY: "bottom",
+	offsetY: -4
+};
+const POSITIONS = {
+	"below-start": [
+		BELOW_START,
+		ABOVE_START,
+		BELOW_END,
+		ABOVE_END
+	],
+	"below-end": [
+		BELOW_END,
+		ABOVE_END,
+		BELOW_START,
+		ABOVE_START
+	],
+	"above-start": [
+		ABOVE_START,
+		BELOW_START,
+		ABOVE_END,
+		BELOW_END
+	],
+	"above-end": [
+		ABOVE_END,
+		BELOW_END,
+		ABOVE_START,
+		BELOW_START
+	]
+};
+var BfMenuTriggerDirective = class BfMenuTriggerDirective {
+	el = inject(ElementRef).nativeElement;
+	bfMenuPlacement = input("below-start", ...ngDevMode ? [{ debugName: "bfMenuPlacement" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		const trigger = inject(CdkMenuTrigger, { self: true });
+		if (inject(CDK_MENU, { optional: true }) !== null) return;
+		const location = inject(Location);
+		let stop = null;
+		const unwatch = () => {
+			stop?.();
+			stop = null;
+		};
+		const opened = trigger.opened.subscribe(() => {
+			unwatch();
+			stop = watchPathChange(location, () => {
+				if (trigger.isOpen()) trigger.close();
+			});
+		});
+		const closed = trigger.closed.subscribe(unwatch);
+		inject(DestroyRef).onDestroy(() => {
+			opened.unsubscribe();
+			closed.unsubscribe();
+			unwatch();
+		});
+		let previous;
+		effect(() => {
+			const positions = POSITIONS[this.bfMenuPlacement()];
+			trigger.menuPosition = positions;
+			if (previous) trigger.ngOnChanges({ menuPosition: new SimpleChange(previous, positions, false) });
+			previous = positions;
+		});
+	}
+	labelId() {
+		if (!this.el.id) this.el.id = ɵuniqueId("bf-menu-trigger");
+		return this.el.id;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.1.7",
+		type: BfMenuTriggerDirective,
+		isStandalone: true,
+		selector: "[bfMenuTriggerFor]",
+		inputs: { bfMenuPlacement: {
+			classPropertyName: "bfMenuPlacement",
+			publicName: "bfMenuPlacement",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		hostDirectives: [{
+			directive: i1.CdkMenuTrigger,
+			inputs: [
+				"cdkMenuTriggerFor",
+				"bfMenuTriggerFor",
+				"cdkMenuTriggerData",
+				"bfMenuTriggerData"
+			],
+			outputs: [
+				"cdkMenuOpened",
+				"bfMenuOpened",
+				"cdkMenuClosed",
+				"bfMenuClosed"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bfMenuTriggerFor]",
+			hostDirectives: [{
+				directive: CdkMenuTrigger,
+				inputs: ["cdkMenuTriggerFor: bfMenuTriggerFor", "cdkMenuTriggerData: bfMenuTriggerData"],
+				outputs: ["cdkMenuOpened: bfMenuOpened", "cdkMenuClosed: bfMenuClosed"]
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { bfMenuPlacement: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "bfMenuPlacement",
+			required: false
+		}]
+	}] }
+});
+var BfMenuComponent = class BfMenuComponent {
+	defaults = inject(BF_DEFAULTS);
+	trigger = inject(BfMenuTriggerDirective, { optional: true });
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	triggerId = this.trigger?.labelId() ?? null;
+	labelledBy = computed(() => this.ariaLabelledby() || (this.ariaLabel() ? null : this.triggerId), ...ngDevMode ? [{ debugName: "labelledBy" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.1.7",
+		type: BfMenuComponent,
+		isStandalone: true,
+		selector: "bf-menu",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "ariaLabelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.aria-label": "ariaLabel() || null",
+				"attr.aria-labelledby": "labelledBy()"
+			},
+			classAttribute: "flex flex-col bg-surface text-text border border-border rounded-card shadow-floating p-1 min-w-48 max-h-[min(24rem,calc(100dvh-2rem))] overflow-y-auto overscroll-contain"
+		},
+		hostDirectives: [{ directive: i1.CdkMenu }, { directive: i1.CdkTargetMenuAim }],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-menu",
+			hostDirectives: [CdkMenu, CdkTargetMenuAim],
+			host: {
+				class: "flex flex-col bg-surface text-text border border-border rounded-card shadow-floating p-1 min-w-48 max-h-[min(24rem,calc(100dvh-2rem))] overflow-y-auto overscroll-contain",
+				"[attr.aria-label]": "ariaLabel() || null",
+				"[attr.aria-labelledby]": "labelledBy()"
+			},
+			template: "<ng-content />"
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}]
+	}
+});
+const ITEM = "relative flex w-full items-center gap-3 px-3 text-text text-start rounded-field cursor-pointer select-none focus:outline-hidden no-underline! focus:bg-surface-muted not-aria-disabled:hover:bg-surface-muted focus-visible:ring-4 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:text-text-disabled aria-disabled:cursor-not-allowed forced-colors:aria-disabled:text-[GrayText] forced-colors:focus:forced-color-adjust-none forced-colors:focus:bg-[Highlight] forced-colors:focus:text-[HighlightText] forced-colors:focus:aria-disabled:bg-[Canvas] forced-colors:focus:aria-disabled:text-[GrayText] forced-colors:focus:aria-disabled:outline-2 forced-colors:focus:aria-disabled:-outline-offset-2 forced-colors:focus:aria-disabled:outline-[Highlight]";
+const SIZE = {
+	sm: "min-h-8 py-1 text-label-sm pointer-coarse:min-h-hit",
+	md: "min-h-9 py-1.5 text-body pointer-coarse:min-h-hit",
+	lg: "min-h-11 py-2 text-body"
+};
+const SUBMENU_CHEVRON = "aria-[haspopup=menu]:after:ms-auto aria-[haspopup=menu]:after:size-2 aria-[haspopup=menu]:after:shrink-0 aria-[haspopup=menu]:after:-translate-x-0.5 aria-[haspopup=menu]:after:rotate-45 rtl:aria-[haspopup=menu]:after:translate-x-0.5 rtl:aria-[haspopup=menu]:after:-rotate-135 aria-[haspopup=menu]:after:border-t-[1.5px] aria-[haspopup=menu]:after:border-r-[1.5px] aria-[haspopup=menu]:after:border-current aria-[haspopup=menu]:after:content-['']";
+const INDICATOR = {
+	item: "",
+	checkbox: "before:mx-[5px] before:h-[11px] before:w-[6px] before:shrink-0 before:-translate-y-px before:rotate-45 before:border-current aria-checked:before:border-r-2 aria-checked:before:border-b-2 before:content-['']",
+	radio: "before:mx-1 before:size-2 before:shrink-0 before:rounded-full before:border-current aria-checked:before:border-4 before:content-['']"
+};
+function itemClasses(kind) {
+	const menu = inject(BfMenuComponent, { optional: true });
+	const defaults = inject(BF_DEFAULTS);
+	return computed(() => {
+		const size = menu?.resolvedSize() ?? defaults.controlSize;
+		return [
+			ITEM,
+			SIZE[size],
+			SUBMENU_CHEVRON,
+			INDICATOR[kind]
+		].filter(Boolean).join(" ");
+	});
+}
+function linkItemRules() {
+	const el = inject(ElementRef).nativeElement;
+	if (el.tagName !== "A") return;
+	const disabled = () => el.getAttribute("aria-disabled") === "true";
+	const block = (event) => {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	const onClick = (event) => {
+		if (disabled()) block(event);
+	};
+	const onKeydown = (event) => {
+		if (event.key === "Enter" && disabled()) {
+			block(event);
+			return;
+		}
+		if (event.key !== " " || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || disabled()) return;
+		block(event);
+		if (!event.repeat) el.click();
+	};
+	el.addEventListener("click", onClick, { capture: true });
+	el.addEventListener("keydown", onKeydown, { capture: true });
+	inject(DestroyRef).onDestroy(() => {
+		el.removeEventListener("click", onClick, { capture: true });
+		el.removeEventListener("keydown", onKeydown, { capture: true });
+	});
+}
+var BfMenuItemDirective = class BfMenuItemDirective {
+	classes = itemClasses("item");
+	constructor() {
+		linkItemRules();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfMenuItemDirective,
+		isStandalone: true,
+		selector: "button[bfMenuItem], a[bfMenuItem]",
+		host: { properties: { "class": "classes()" } },
+		hostDirectives: [{
+			directive: i1.CdkMenuItem,
+			inputs: [
+				"cdkMenuItemDisabled",
+				"bfMenuItemDisabled",
+				"cdkMenuitemTypeaheadLabel",
+				"bfMenuItemTypeahead"
+			],
+			outputs: ["cdkMenuItemTriggered", "triggered"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[bfMenuItem], a[bfMenuItem]",
+			hostDirectives: [{
+				directive: CdkMenuItem,
+				inputs: ["cdkMenuItemDisabled: bfMenuItemDisabled", "cdkMenuitemTypeaheadLabel: bfMenuItemTypeahead"],
+				outputs: ["cdkMenuItemTriggered: triggered"]
+			}],
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+var BfMenuItemCheckboxDirective = class BfMenuItemCheckboxDirective {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : 	/* istanbul ignore next */ []);
+	changed = output();
+	classes = itemClasses("checkbox");
+	constructor() {
+		const item = inject(CdkMenuItemCheckbox, { self: true });
+		effect(() => {
+			item.checked = this.checked();
+		});
+		const subscription = item.triggered.subscribe(() => {
+			const next = !item.checked;
+			this.checked.set(next);
+			this.changed.emit(next);
+		});
+		inject(DestroyRef).onDestroy(() => subscription.unsubscribe());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuItemCheckboxDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.1.7",
+		type: BfMenuItemCheckboxDirective,
+		isStandalone: true,
+		selector: "button[bfMenuItemCheckbox]",
+		inputs: { checked: {
+			classPropertyName: "checked",
+			publicName: "checked",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			checked: "checkedChange",
+			changed: "changed"
+		},
+		host: { properties: { "class": "classes()" } },
+		hostDirectives: [{
+			directive: i1.CdkMenuItemCheckbox,
+			inputs: [
+				"cdkMenuItemDisabled",
+				"bfMenuItemDisabled",
+				"cdkMenuitemTypeaheadLabel",
+				"bfMenuItemTypeahead"
+			],
+			outputs: ["cdkMenuItemTriggered", "triggered"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuItemCheckboxDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[bfMenuItemCheckbox]",
+			hostDirectives: [{
+				directive: CdkMenuItemCheckbox,
+				inputs: ["cdkMenuItemDisabled: bfMenuItemDisabled", "cdkMenuitemTypeaheadLabel: bfMenuItemTypeahead"],
+				outputs: ["cdkMenuItemTriggered: triggered"]
+			}],
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}]
+	}
+});
+var BfMenuItemRadioDirective = class BfMenuItemRadioDirective {
+	classes = itemClasses("radio");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuItemRadioDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfMenuItemRadioDirective,
+		isStandalone: true,
+		selector: "button[bfMenuItemRadio]",
+		host: { properties: { "class": "classes()" } },
+		hostDirectives: [{
+			directive: i1.CdkMenuItemRadio,
+			inputs: [
+				"cdkMenuItemChecked",
+				"checked",
+				"cdkMenuItemDisabled",
+				"bfMenuItemDisabled",
+				"cdkMenuitemTypeaheadLabel",
+				"bfMenuItemTypeahead"
+			],
+			outputs: ["cdkMenuItemTriggered", "triggered"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuItemRadioDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[bfMenuItemRadio]",
+			hostDirectives: [{
+				directive: CdkMenuItemRadio,
+				inputs: [
+					"cdkMenuItemChecked: checked",
+					"cdkMenuItemDisabled: bfMenuItemDisabled",
+					"cdkMenuitemTypeaheadLabel: bfMenuItemTypeahead"
+				],
+				outputs: ["cdkMenuItemTriggered: triggered"]
+			}],
+			host: { "[class]": "classes()" }
+		}]
+	}]
+});
+var BfMenuGroupDirective = class BfMenuGroupDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfMenuGroupDirective,
+		isStandalone: true,
+		selector: "[bfMenuGroup]",
+		host: { classAttribute: "flex flex-col" },
+		hostDirectives: [{ directive: i1.CdkMenuGroup }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bfMenuGroup]",
+			hostDirectives: [CdkMenuGroup],
+			host: { class: "flex flex-col" }
+		}]
+	}]
+});
+var BfMenuDividerDirective = class BfMenuDividerDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuDividerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfMenuDividerDirective,
+		isStandalone: true,
+		selector: "[bfMenuDivider]",
+		host: {
+			attributes: { "role": "separator" },
+			classAttribute: "my-1 block h-0 border-t border-border"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuDividerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[bfMenuDivider]",
+			host: {
+				role: "separator",
+				class: "my-1 block h-0 border-t border-border"
+			}
+		}]
+	}]
+});
+const BUTTON = ɵBF_BUTTON_CLASSES;
+const ICON = ɵBF_ICON_BUTTON_CLASSES;
+const CARET_PADDING = {
+	sm: "ps-3.5 pe-3",
+	md: "ps-4.5 pe-4",
+	lg: "ps-6 pe-5"
+};
+var BfMenuButtonComponent = class BfMenuButtonComponent {
+	defaults = inject(BF_DEFAULTS);
+	menu = input.required(...ngDevMode ? [{ debugName: "menu" }] : 	/* istanbul ignore next */ []);
+	variant = input("outline", ...ngDevMode ? [{ debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	placement = input("below-start", ...ngDevMode ? [{ debugName: "placement" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	iconOnly = input(false, {
+		...ngDevMode ? { debugName: "iconOnly" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	opened = output();
+	closed = output();
+	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	labelClasses = computed(() => this.iconOnly() ? "contents" : "max-w-full min-w-0 truncate", ...ngDevMode ? [{ debugName: "labelClasses" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => {
+		const size = this.resolvedSize();
+		const variant = this.variant();
+		const hit = ɵPILL_HIT[size][variant === "outline" ? "bordered" : "plain"];
+		if (this.iconOnly()) {
+			const pressed = this.disabled() ? "" : ICON.pressed[variant];
+			return [
+				ICON.base,
+				ICON.variant[variant],
+				pressed,
+				ICON.size[size],
+				hit
+			].filter(Boolean).join(" ");
+		}
+		const padding = variant === "text" ? BUTTON.textPadding[size] : CARET_PADDING[size];
+		const pressed = this.disabled() ? "" : BUTTON.pressed[variant];
+		return [
+			BUTTON.base,
+			"cursor-pointer",
+			BUTTON.variant[variant],
+			pressed,
+			BUTTON.size[size],
+			padding,
+			hit
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfMenuButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfMenuButtonComponent,
+		isStandalone: true,
+		selector: "bf-menu-button",
+		inputs: {
+			menu: {
+				classPropertyName: "menu",
+				publicName: "menu",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconOnly: {
+				classPropertyName: "iconOnly",
+				publicName: "iconOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			opened: "opened",
+			closed: "closed"
+		},
+		host: { classAttribute: "inline-flex max-w-full" },
+		ngImport: i0,
+		template: `
+    <button
+      type="button"
+      [bfMenuTriggerFor]="menu()"
+      [bfMenuPlacement]="placement()"
+      [disabled]="disabled()"
+      [attr.aria-label]="label() || null"
+      [class]="classes()"
+      (bfMenuOpened)="opened.emit()"
+      (bfMenuClosed)="closed.emit()"
+    >
+      <ng-content select="[bfSlot=icon-start]" />
+      <span data-label [class]="labelClasses()"><ng-content /></span>
+      @if (!iconOnly()) {
+        <!-- A CSS caret pointing down in either direction (physical borders), in the text colour; nothing in the accessible name. -->
+        <span
+          data-caret
+          class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-current"
+        ></span>
+      }
+    </button>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: BfMenuTriggerDirective,
+			selector: "[bfMenuTriggerFor]",
+			inputs: ["bfMenuPlacement"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfMenuButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-menu-button",
+			imports: [BfMenuTriggerDirective],
+			host: { class: "inline-flex max-w-full" },
+			template: `
+    <button
+      type="button"
+      [bfMenuTriggerFor]="menu()"
+      [bfMenuPlacement]="placement()"
+      [disabled]="disabled()"
+      [attr.aria-label]="label() || null"
+      [class]="classes()"
+      (bfMenuOpened)="opened.emit()"
+      (bfMenuClosed)="closed.emit()"
+    >
+      <ng-content select="[bfSlot=icon-start]" />
+      <span data-label [class]="labelClasses()"><ng-content /></span>
+      @if (!iconOnly()) {
+        <!-- A CSS caret pointing down in either direction (physical borders), in the text colour; nothing in the accessible name. -->
+        <span
+          data-caret
+          class="size-2 shrink-0 -translate-y-0.5 rotate-45 border-r-[1.5px] border-b-[1.5px] border-current"
+        ></span>
+      }
+    </button>
+  `
+		}]
+	}],
+	propDecorators: {
+		menu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menu",
+				required: true
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		iconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconOnly",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+export { BF_DESKTOP_TOAST_DEFAULTS, BF_DIALOG_DATA, BF_OVERLAY_DATA, BF_OVERLAY_HOST, BfComponentOverlayRef, BfDesktopToastComponent, BfDesktopToastService, BfDialogComponent, BfDialogRef, BfDialogService, BfMenuButtonComponent, BfMenuComponent, BfMenuDividerDirective, BfMenuGroupDirective, BfMenuItemCheckboxDirective, BfMenuItemDirective, BfMenuItemRadioDirective, BfMenuTriggerDirective, BfOverlayRef, BfOverlayService, BfOverlayStack, BfToastRef, OVERLAY_DURATION, OVERLAY_EASING, OVERLAY_REDUCED_DURATION, fadeDown, fadeIn, fadeOut, fadeUp, prefersReducedMotion, provideBfDesktopToast, scaleIn, slideDown, slideUp, ɵBfToastQueue, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
+
+//# sourceMappingURL=bitforgehq-ui-overlay.mjs.map