@bitforgehq/ui 0.3.1 → 0.3.2

package/fesm2022/bitforgehq-ui-overlay.mjs

@@ -4,7 +4,7 @@ import { FocusTrapFactory, LiveAnnouncer } from "@angular/cdk/a11y";
 import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
 import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
 import { Location, NgTemplateOutlet } from "@angular/common";
-import { BF_DEFAULTS, BF_LABELS, BfButtonComponent, BfCalendarComponent, BfFieldComponent, BfIconButtonComponent, BfSpinnerComponent, bfFieldControlClass, ɵBF_BUTTON_CLASSES, ɵBF_ICON_BUTTON_CLASSES, ɵFIELD_BOX, ɵFIELD_PADDING_END, ɵFIELD_PADDING_START, ɵPILL_HIT, ɵdaysInMonth, ɵfieldDescribedBy, ɵfieldErrorMessageId, ɵfieldErrorText, ɵfieldShowsError, ɵformatIsoDate, ɵlocalIsoDate, ɵparseIsoDate, ɵuniqueId } from "@bitforgehq/ui";
+import { BF_DEFAULTS, BF_LABELS, BfButtonComponent, BfCalendarComponent, BfFieldComponent, BfIconButtonComponent, BfSpinnerComponent, bfFieldControlClass, ɵBF_BUTTON_CLASSES, ɵBF_ICON_BUTTON_CLASSES, ɵBF_NAV, ɵFIELD_BOX, ɵFIELD_PADDING_END, ɵFIELD_PADDING_START, ɵPILL_HIT, ɵdaysInMonth, ɵfieldDescribedBy, ɵfieldErrorMessageId, ɵfieldErrorText, ɵfieldShowsError, ɵformatIsoDate, ɵlocalIsoDate, ɵparseIsoDate, ɵuniqueId } from "@bitforgehq/ui";
 import { BfIconComponent } from "@bitforgehq/ui/icons";
 import { X } from "lucide";
 import { Directionality } from "@angular/cdk/bidi";
@@ -2509,7 +2509,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 const BUTTON = ɵBF_BUTTON_CLASSES;
-const ICON = ɵBF_ICON_BUTTON_CLASSES;
+const ICON$1 = ɵBF_ICON_BUTTON_CLASSES;
 const CARET_PADDING = {
 	sm: "ps-3.5 pe-3",
 	md: "ps-4.5 pe-4",
@@ -2539,12 +2539,12 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 		const variant = this.variant();
 		const hit = ɵPILL_HIT[size][variant === "outline" ? "bordered" : "plain"];
 		if (this.iconOnly()) {
-			const pressed = this.disabled() ? "" : ICON.pressed[variant];
+			const pressed = this.disabled() ? "" : ICON$1.pressed[variant];
 			return [
-				ICON.base,
-				ICON.variant[variant],
+				ICON$1.base,
+				ICON$1.variant[variant],
 				pressed,
-				ICON.size[size],
+				ICON$1.size[size],
 				hit
 			].filter(Boolean).join(" ");
 		}
@@ -3028,468 +3028,52 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const BF_SIDE_PANEL_DATA = new InjectionToken("BF_SIDE_PANEL_DATA");
-const BF_SIDE_PANEL_CONTEXT = new InjectionToken("BF_SIDE_PANEL_CONTEXT");
-var BfSidePanelRef = 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 h-full flex-col border-s border-border bg-surface text-text shadow-floating";
-const WIDTH = {
-	sm: "w-[min(22.5rem,100vw)]",
-	md: "w-[min(30rem,100vw)]",
-	lg: "w-[min(40rem,100vw)]"
-};
-var BfSidePanelComponent = class BfSidePanelComponent {
-	labels = inject(BF_LABELS);
-	context = inject(BF_SIDE_PANEL_CONTEXT, { optional: true });
-	ref = inject(BfSidePanelRef, { optional: true });
-	title = input("", ...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
-	closeLabel = input("", ...ngDevMode ? [{ debugName: "closeLabel" }] : 	/* istanbul ignore next */ []);
-	overflowing = signal(false, ...ngDevMode ? [{ debugName: "overflowing" }] : 	/* istanbul ignore next */ []);
-	titleId = this.context?.titleId ?? ɵuniqueId("bf-side-panel-title");
-	closeIcon = X;
-	width = this.context?.width ?? "md";
-	hostClasses = computed(() => `${HOST_BASE} ${WIDTH[this.width]}`, ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* 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();
-	}
+var BfTooltipComponent = class BfTooltipComponent {
+	text = input("", ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
 		ngImport: i0,
-		type: BfSidePanelComponent,
+		type: BfTooltipComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
+		minVersion: "17.1.0",
 		version: "22.1.7",
-		type: BfSidePanelComponent,
+		type: BfTooltipComponent,
 		isStandalone: true,
-		selector: "bf-side-panel",
-		inputs: {
-			title: {
-				classPropertyName: "title",
-				publicName: "title",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			closeLabel: {
-				classPropertyName: "closeLabel",
-				publicName: "closeLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		host: { properties: {
-			"class": "hostClasses()",
-			"attr.data-bf-side-panel-id": "titleId"
+		selector: "bf-tooltip",
+		inputs: { text: {
+			classPropertyName: "text",
+			publicName: "text",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
 		} },
-		viewQueries: [{
-			propertyName: "body",
-			first: true,
-			predicate: ["body"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "content",
-			first: true,
-			predicate: ["content"],
-			descendants: true,
-			isSignal: true
-		}],
+		host: {
+			attributes: { "role": "tooltip" },
+			classAttribute: "block max-w-xs rounded-field border border-transparent bg-tooltip px-2.5 py-1 text-label-xs text-on-tooltip shadow-raised break-words"
+		},
 		ngImport: i0,
-		template: `
-    <div
-      data-side-panel-header
-      class="border-border flex min-h-16 min-w-0 shrink-0 items-center gap-3 border-b py-4 ps-6 pe-14"
-    >
-      @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-side-panel-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-side-panel-footer
-      class="border-border flex shrink-0 flex-wrap justify-end gap-2 border-t px-6 py-4 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
-    >
-      <ng-content select="[bfSlot=footer]" />
-    </div>
-    <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
-    <bf-icon-button
-      data-side-panel-close
-      class="absolute end-3 top-4"
-      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, a[bfIconButton]",
-			inputs: [
-				"variant",
-				"size",
-				"type",
-				"disabled",
-				"label"
-			],
-			outputs: ["clicked"]
-		}, {
-			kind: "component",
-			type: BfIconComponent,
-			selector: "bf-icon",
-			inputs: [
-				"icon",
-				"size",
-				"label",
-				"filled"
-			]
-		}]
+		template: "{{ text() }}",
+		isInline: true
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.1.7",
 	ngImport: i0,
-	type: BfSidePanelComponent,
+	type: BfTooltipComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "bf-side-panel",
-			imports: [BfIconButtonComponent, BfIconComponent],
+			selector: "bf-tooltip",
 			host: {
-				"[class]": "hostClasses()",
-				"[attr.data-bf-side-panel-id]": "titleId"
+				role: "tooltip",
+				class: "block max-w-xs rounded-field border border-transparent bg-tooltip px-2.5 py-1 text-label-xs text-on-tooltip shadow-raised break-words"
 			},
-			template: `
-    <div
-      data-side-panel-header
-      class="border-border flex min-h-16 min-w-0 shrink-0 items-center gap-3 border-b py-4 ps-6 pe-14"
-    >
-      @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-side-panel-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-side-panel-footer
-      class="border-border flex shrink-0 flex-wrap justify-end gap-2 border-t px-6 py-4 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
-    >
-      <ng-content select="[bfSlot=footer]" />
-    </div>
-    <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
-    <bf-icon-button
-      data-side-panel-close
-      class="absolute end-3 top-4"
-      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
-			}]
-		}],
-		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_SIDE_PANEL_TEMPLATE = new InjectionToken("BF_SIDE_PANEL_TEMPLATE");
-var BfSidePanelTemplateHostComponent = class BfSidePanelTemplateHostComponent {
-	view = inject(BF_SIDE_PANEL_TEMPLATE);
-	injector = inject(Injector);
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.1.7",
-		ngImport: i0,
-		type: BfSidePanelTemplateHostComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "14.0.0",
-		version: "22.1.7",
-		type: BfSidePanelTemplateHostComponent,
-		isStandalone: true,
-		selector: "bf-side-panel-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: BfSidePanelTemplateHostComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "bf-side-panel-template-host",
-			imports: [NgTemplateOutlet],
-			host: { style: "display: contents" },
-			template: `<ng-container
-    [ngTemplateOutlet]="view.template"
-    [ngTemplateOutletContext]="view.context"
-    [ngTemplateOutletInjector]="injector"
-  />`
-		}]
-	}]
-});
-function exitPanel(el) {
-	el.setAttribute("data-bf-closing", "");
-	return slideOutToEnd(el);
-}
-var BfSidePanelService = class BfSidePanelService {
-	overlays = inject(BfOverlayService);
-	injector = inject(Injector);
-	open(content, config = {}) {
-		const width = config.width ?? "md";
-		const injector = config.injector ?? this.injector;
-		const titleId = ɵuniqueId("bf-side-panel-title");
-		let panelRef = null;
-		let instance = null;
-		const providers = (ref) => {
-			const created = new BfSidePanelRef(ref, () => instance);
-			panelRef = created;
-			const list = [
-				{
-					provide: BfSidePanelRef,
-					useValue: created
-				},
-				{
-					provide: BF_SIDE_PANEL_DATA,
-					useValue: config.data
-				},
-				{
-					provide: BF_SIDE_PANEL_CONTEXT,
-					useValue: {
-						titleId,
-						width
-					}
-				}
-			];
-			if (content instanceof TemplateRef) {
-				const view = {
-					template: content,
-					context: {
-						$implicit: created,
-						data: config.data
-					}
-				};
-				list.push({
-					provide: BF_SIDE_PANEL_TEMPLATE,
-					useValue: view
-				});
-			}
-			return list;
-		};
-		const options = {
-			data: config.data,
-			position: "end",
-			modal: config.modal ?? true,
-			ariaLabel: config.ariaLabel,
-			ariaLabelledBy: config.ariaLabel ? void 0 : titleId,
-			panelClass: ["bf-side-panel-panel"],
-			injector,
-			providers,
-			enter: slideInFromEnd,
-			exit: exitPanel
-		};
-		let overlayRef;
-		if (content instanceof TemplateRef) overlayRef = this.overlays.open(BfSidePanelTemplateHostComponent, options);
-		else {
-			const componentRef = this.overlays.open(content, options);
-			instance = componentRef.componentRef.instance;
-			overlayRef = componentRef;
-		}
-		if (!panelRef) throw new Error("BfSidePanelService: the overlay core did not build the panel providers");
-		this.nameUnlabelledPanel(overlayRef.componentRef.location.nativeElement, overlayRef.afterClosed, config, injector);
-		return panelRef;
-	}
-	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: BfSidePanelService,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.1.7",
-		ngImport: i0,
-		type: BfSidePanelService,
-		providedIn: "root"
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.1.7",
-	ngImport: i0,
-	type: BfSidePanelService,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}]
-});
-var BfTooltipComponent = class BfTooltipComponent {
-	text = input("", ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.1.7",
-		ngImport: i0,
-		type: BfTooltipComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
-		version: "22.1.7",
-		type: BfTooltipComponent,
-		isStandalone: true,
-		selector: "bf-tooltip",
-		inputs: { text: {
-			classPropertyName: "text",
-			publicName: "text",
-			isSignal: true,
-			isRequired: false,
-			transformFunction: null
-		} },
-		host: {
-			attributes: { "role": "tooltip" },
-			classAttribute: "block max-w-xs rounded-field border border-transparent bg-tooltip px-2.5 py-1 text-label-xs text-on-tooltip shadow-raised break-words"
-		},
-		ngImport: i0,
-		template: "{{ text() }}",
-		isInline: true
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.1.7",
-	ngImport: i0,
-	type: BfTooltipComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "bf-tooltip",
-			host: {
-				role: "tooltip",
-				class: "block max-w-xs rounded-field border border-transparent bg-tooltip px-2.5 py-1 text-label-xs text-on-tooltip shadow-raised break-words"
-			},
-			template: "{{ text() }}"
+			template: "{{ text() }}"
 		}]
 	}],
 	propDecorators: { text: [{
@@ -3699,6 +3283,547 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const ICON = ɵBF_ICON_BUTTON_CLASSES;
+const HOST = {
+	shown: "inline-flex",
+	none: "hidden"
+};
+var BfSidebarToggleComponent = class BfSidebarToggleComponent {
+	defaults = inject(BF_DEFAULTS);
+	labels = inject(BF_LABELS);
+	host = inject(ɵBF_NAV, { optional: true });
+	nav = this.host?.layout === "sidebar" ? this.host : null;
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	collapsed = computed(() => this.nav?.collapsed() ?? false, ...ngDevMode ? [{ debugName: "collapsed" }] : 	/* istanbul ignore next */ []);
+	name = computed(() => this.collapsed() ? this.labels.sidebarExpand : this.labels.sidebarCollapse, ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	hostClasses = computed(() => HOST[this.nav ? "shown" : "none"], ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => {
+		const size = this.size() ?? this.defaults.controlSize;
+		return [
+			ICON.base,
+			ICON.variant.text,
+			ICON.pressed.text,
+			ICON.size[size],
+			ɵPILL_HIT[size].plain
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	toggle() {
+		this.nav?.setCollapsed(!this.collapsed());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSidebarToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfSidebarToggleComponent,
+		isStandalone: true,
+		selector: "bf-sidebar-toggle",
+		inputs: { size: {
+			classPropertyName: "size",
+			publicName: "size",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: `
+    @if (nav) {
+      <button
+        type="button"
+        [class]="classes()"
+        [attr.aria-label]="name()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="nav.navId"
+        [bfTooltip]="name()"
+        [bfTooltipPlacement]="collapsed() ? 'end' : 'top'"
+        (click)="toggle()"
+      >
+        <!-- display: contents, so the projected icon is the button's own flex item. -->
+        <span [class]="collapsed() ? 'hidden' : 'contents'"
+          ><ng-content select="[bfSlot=collapse-icon]"
+        /></span>
+        <span [class]="collapsed() ? 'contents' : 'hidden'"
+          ><ng-content select="[bfSlot=expand-icon]"
+        /></span>
+      </button>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: BfTooltipDirective,
+			selector: "[bfTooltip]",
+			inputs: ["bfTooltip", "bfTooltipPlacement"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfSidebarToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-sidebar-toggle",
+			imports: [BfTooltipDirective],
+			host: { "[class]": "hostClasses()" },
+			template: `
+    @if (nav) {
+      <button
+        type="button"
+        [class]="classes()"
+        [attr.aria-label]="name()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="nav.navId"
+        [bfTooltip]="name()"
+        [bfTooltipPlacement]="collapsed() ? 'end' : 'top'"
+        (click)="toggle()"
+      >
+        <!-- display: contents, so the projected icon is the button's own flex item. -->
+        <span [class]="collapsed() ? 'hidden' : 'contents'"
+          ><ng-content select="[bfSlot=collapse-icon]"
+        /></span>
+        <span [class]="collapsed() ? 'contents' : 'hidden'"
+          ><ng-content select="[bfSlot=expand-icon]"
+        /></span>
+      </button>
+    }
+  `
+		}]
+	}],
+	propDecorators: { size: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "size",
+			required: false
+		}]
+	}] }
+});
+const BF_SIDE_PANEL_DATA = new InjectionToken("BF_SIDE_PANEL_DATA");
+const BF_SIDE_PANEL_CONTEXT = new InjectionToken("BF_SIDE_PANEL_CONTEXT");
+var BfSidePanelRef = 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 h-full flex-col border-s border-border bg-surface text-text shadow-floating";
+const WIDTH = {
+	sm: "w-[min(22.5rem,100vw)]",
+	md: "w-[min(30rem,100vw)]",
+	lg: "w-[min(40rem,100vw)]"
+};
+var BfSidePanelComponent = class BfSidePanelComponent {
+	labels = inject(BF_LABELS);
+	context = inject(BF_SIDE_PANEL_CONTEXT, { optional: true });
+	ref = inject(BfSidePanelRef, { optional: true });
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
+	closeLabel = input("", ...ngDevMode ? [{ debugName: "closeLabel" }] : 	/* istanbul ignore next */ []);
+	overflowing = signal(false, ...ngDevMode ? [{ debugName: "overflowing" }] : 	/* istanbul ignore next */ []);
+	titleId = this.context?.titleId ?? ɵuniqueId("bf-side-panel-title");
+	closeIcon = X;
+	width = this.context?.width ?? "md";
+	hostClasses = computed(() => `${HOST_BASE} ${WIDTH[this.width]}`, ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* 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: BfSidePanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfSidePanelComponent,
+		isStandalone: true,
+		selector: "bf-side-panel",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.data-bf-side-panel-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-side-panel-header
+      class="border-border flex min-h-16 min-w-0 shrink-0 items-center gap-3 border-b py-4 ps-6 pe-14"
+    >
+      @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-side-panel-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-side-panel-footer
+      class="border-border flex shrink-0 flex-wrap justify-end gap-2 border-t px-6 py-4 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
+    >
+      <ng-content select="[bfSlot=footer]" />
+    </div>
+    <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
+    <bf-icon-button
+      data-side-panel-close
+      class="absolute end-3 top-4"
+      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, a[bfIconButton]",
+			inputs: [
+				"variant",
+				"size",
+				"type",
+				"disabled",
+				"label"
+			],
+			outputs: ["clicked"]
+		}, {
+			kind: "component",
+			type: BfIconComponent,
+			selector: "bf-icon",
+			inputs: [
+				"icon",
+				"size",
+				"label",
+				"filled"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfSidePanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-side-panel",
+			imports: [BfIconButtonComponent, BfIconComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.data-bf-side-panel-id]": "titleId"
+			},
+			template: `
+    <div
+      data-side-panel-header
+      class="border-border flex min-h-16 min-w-0 shrink-0 items-center gap-3 border-b py-4 ps-6 pe-14"
+    >
+      @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-side-panel-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-side-panel-footer
+      class="border-border flex shrink-0 flex-wrap justify-end gap-2 border-t px-6 py-4 *:flex *:min-w-0 *:flex-wrap *:justify-end *:gap-2 empty:hidden"
+    >
+      <ng-content select="[bfSlot=footer]" />
+    </div>
+    <!-- Last in DOM order so first-tabbable focus lands on the content, not on the ×. -->
+    <bf-icon-button
+      data-side-panel-close
+      class="absolute end-3 top-4"
+      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
+			}]
+		}],
+		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_SIDE_PANEL_TEMPLATE = new InjectionToken("BF_SIDE_PANEL_TEMPLATE");
+var BfSidePanelTemplateHostComponent = class BfSidePanelTemplateHostComponent {
+	view = inject(BF_SIDE_PANEL_TEMPLATE);
+	injector = inject(Injector);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSidePanelTemplateHostComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.1.7",
+		type: BfSidePanelTemplateHostComponent,
+		isStandalone: true,
+		selector: "bf-side-panel-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: BfSidePanelTemplateHostComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-side-panel-template-host",
+			imports: [NgTemplateOutlet],
+			host: { style: "display: contents" },
+			template: `<ng-container
+    [ngTemplateOutlet]="view.template"
+    [ngTemplateOutletContext]="view.context"
+    [ngTemplateOutletInjector]="injector"
+  />`
+		}]
+	}]
+});
+function exitPanel(el) {
+	el.setAttribute("data-bf-closing", "");
+	return slideOutToEnd(el);
+}
+var BfSidePanelService = class BfSidePanelService {
+	overlays = inject(BfOverlayService);
+	injector = inject(Injector);
+	open(content, config = {}) {
+		const width = config.width ?? "md";
+		const injector = config.injector ?? this.injector;
+		const titleId = ɵuniqueId("bf-side-panel-title");
+		let panelRef = null;
+		let instance = null;
+		const providers = (ref) => {
+			const created = new BfSidePanelRef(ref, () => instance);
+			panelRef = created;
+			const list = [
+				{
+					provide: BfSidePanelRef,
+					useValue: created
+				},
+				{
+					provide: BF_SIDE_PANEL_DATA,
+					useValue: config.data
+				},
+				{
+					provide: BF_SIDE_PANEL_CONTEXT,
+					useValue: {
+						titleId,
+						width
+					}
+				}
+			];
+			if (content instanceof TemplateRef) {
+				const view = {
+					template: content,
+					context: {
+						$implicit: created,
+						data: config.data
+					}
+				};
+				list.push({
+					provide: BF_SIDE_PANEL_TEMPLATE,
+					useValue: view
+				});
+			}
+			return list;
+		};
+		const options = {
+			data: config.data,
+			position: "end",
+			modal: config.modal ?? true,
+			ariaLabel: config.ariaLabel,
+			ariaLabelledBy: config.ariaLabel ? void 0 : titleId,
+			panelClass: ["bf-side-panel-panel"],
+			injector,
+			providers,
+			enter: slideInFromEnd,
+			exit: exitPanel
+		};
+		let overlayRef;
+		if (content instanceof TemplateRef) overlayRef = this.overlays.open(BfSidePanelTemplateHostComponent, options);
+		else {
+			const componentRef = this.overlays.open(content, options);
+			instance = componentRef.componentRef.instance;
+			overlayRef = componentRef;
+		}
+		if (!panelRef) throw new Error("BfSidePanelService: the overlay core did not build the panel providers");
+		this.nameUnlabelledPanel(overlayRef.componentRef.location.nativeElement, overlayRef.afterClosed, config, injector);
+		return panelRef;
+	}
+	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: BfSidePanelService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSidePanelService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfSidePanelService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
 var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 	overlay = inject(Overlay);
 	document = inject(DOCUMENT);
@@ -9073,6 +9198,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { BF_DESKTOP_TOAST_DEFAULTS, BF_DIALOG_DATA, BF_OVERLAY_DATA, BF_OVERLAY_HOST, BF_SIDE_PANEL_DATA, BfComboboxComponent, BfComponentOverlayRef, BfDateInputComponent, BfDateTimeInputComponent, BfDesktopToastComponent, BfDesktopToastService, BfDialogComponent, BfDialogRef, BfDialogService, BfMenuButtonComponent, BfMenuComponent, BfMenuDividerDirective, BfMenuGroupDirective, BfMenuItemCheckboxDirective, BfMenuItemDirective, BfMenuItemRadioDirective, BfMenuTriggerDirective, BfMultiComboboxComponent, BfOverlayRef, BfOverlayService, BfOverlayStack, BfPopoverComponent, BfPopoverTriggerDirective, BfSidePanelComponent, BfSidePanelRef, BfSidePanelService, BfThemeMenuButtonComponent, BfTimeInputComponent, BfToastRef, BfTooltipComponent, BfTooltipDirective, OVERLAY_DURATION, OVERLAY_EASING, OVERLAY_REDUCED_DURATION, fadeDown, fadeIn, fadeOut, fadeUp, prefersReducedMotion, provideBfDesktopToast, scaleIn, slideDown, slideInFromEnd, slideOutToEnd, slideUp, ɵBfToastQueue, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
+export { BF_DESKTOP_TOAST_DEFAULTS, BF_DIALOG_DATA, BF_OVERLAY_DATA, BF_OVERLAY_HOST, BF_SIDE_PANEL_DATA, BfComboboxComponent, BfComponentOverlayRef, BfDateInputComponent, BfDateTimeInputComponent, BfDesktopToastComponent, BfDesktopToastService, BfDialogComponent, BfDialogRef, BfDialogService, BfMenuButtonComponent, BfMenuComponent, BfMenuDividerDirective, BfMenuGroupDirective, BfMenuItemCheckboxDirective, BfMenuItemDirective, BfMenuItemRadioDirective, BfMenuTriggerDirective, BfMultiComboboxComponent, BfOverlayRef, BfOverlayService, BfOverlayStack, BfPopoverComponent, BfPopoverTriggerDirective, BfSidePanelComponent, BfSidePanelRef, BfSidePanelService, BfSidebarToggleComponent, BfThemeMenuButtonComponent, BfTimeInputComponent, BfToastRef, BfTooltipComponent, BfTooltipDirective, OVERLAY_DURATION, OVERLAY_EASING, OVERLAY_REDUCED_DURATION, fadeDown, fadeIn, fadeOut, fadeUp, prefersReducedMotion, provideBfDesktopToast, scaleIn, slideDown, slideInFromEnd, slideOutToEnd, slideUp, ɵBfToastQueue, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
 
 //# sourceMappingURL=bitforgehq-ui-overlay.mjs.map