@bitforgehq/ui 0.4.0 → 0.5.0-next.4

package/fesm2022/bitforgehq-ui-overlay.mjs

@@ -1,12 +1,12 @@
 import * as i0 from "@angular/core";
-import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, SimpleChange, TemplateRef, ViewContainerRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, inputBinding, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, Injectable, InjectionToken, Injector, SimpleChange, TemplateRef, ViewContainerRef, afterNextRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, inputBinding, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, signal, viewChild } from "@angular/core";
 import { FocusTrapFactory, LiveAnnouncer } from "@angular/cdk/a11y";
-import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
+import { OverlayConfig, createBlockScrollStrategy, createFlexibleConnectedPositionStrategy, createGlobalPositionStrategy, createNoopScrollStrategy, createOverlayRef, createRepositionScrollStrategy } 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, ɵ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 { BF_DEFAULTS, BF_LABELS, BF_TABLE_SORT_SELECT, BfButtonComponent, BfCalendarComponent, BfFadeInDirective, BfFieldComponent, BfIconButtonComponent, BfSpinnerComponent, BfTextareaComponent, bfFieldControlClass, ɵBF_BUTTON_CLASSES, ɵBF_ICON_BUTTON_CLASSES, ɵBF_NAV, ɵBfNativeSelectComponent, ɵFIELD_BOX, ɵFIELD_PADDING_END, ɵFIELD_PADDING_START, ɵPILL_HIT, ɵchoiceIndex, ɵchoiceKey, ɵdaysInMonth, ɵfieldDescribedBy, ɵfieldErrorMessageId, ɵfieldErrorText, ɵfieldShowsError, ɵformatIsoDate, ɵlocalIsoDate, ɵparseIsoDate, ɵuniqueId } from "@bitforgehq/ui";
 import { BfIconComponent } from "@bitforgehq/ui/icons";
-import { X } from "lucide";
+import { ChevronLeft, ChevronRight, 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";
@@ -437,7 +437,6 @@ function fromOtherPane(event, pane) {
 	return false;
 }
 var BfOverlayService = class BfOverlayService {
-	overlay = inject(Overlay);
 	injector = inject(Injector);
 	document = inject(DOCUMENT);
 	stack = inject(BfOverlayStack);
@@ -452,9 +451,9 @@ var BfOverlayService = class BfOverlayService {
 		const previouslyFocused = this.document.activeElement;
 		const hasBackdrop = modal && (options.backdrop ?? true);
 		const position = options.position ?? "center";
-		const overlayRef = this.overlay.create(new OverlayConfig({
+		const overlayRef = createOverlayRef(this.injector, new OverlayConfig({
 			positionStrategy: this.positionStrategy(position),
-			scrollStrategy: !modal || !this.documentScrolls ? this.overlay.scrollStrategies.noop() : this.overlay.scrollStrategies.block(),
+			scrollStrategy: !modal || !this.documentScrolls ? createNoopScrollStrategy() : createBlockScrollStrategy(this.injector),
 			hasBackdrop,
 			backdropClass: options.backdropClass ?? "bf-overlay-backdrop",
 			panelClass: ["bf-overlay-panel", ...options.panelClass ?? []],
@@ -600,7 +599,7 @@ var BfOverlayService = class BfOverlayService {
 		if (options.ariaDescribedBy) panel.setAttribute("aria-describedby", options.ariaDescribedBy);
 	}
 	positionStrategy(position) {
-		const global = this.overlay.position().global();
+		const global = createGlobalPositionStrategy(this.injector);
 		switch (position) {
 			case "bottom": return global.centerHorizontally().bottom("0");
 			case "top": return global.centerHorizontally().top("0");
@@ -1691,7 +1690,6 @@ const INSET = {
 	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);
@@ -1761,9 +1759,9 @@ var BfDesktopToastService = class BfDesktopToastService {
 	}
 	ensurePane(injector) {
 		if (this.pane) return this.pane;
-		const overlayRef = this.overlay.create({
+		const overlayRef = createOverlayRef(this.injector, {
 			positionStrategy: this.positionStrategy(),
-			scrollStrategy: this.overlay.scrollStrategies.noop(),
+			scrollStrategy: createNoopScrollStrategy(),
 			hasBackdrop: false,
 			panelClass: "bf-desktop-toast-pane"
 		});
@@ -1817,7 +1815,7 @@ var BfDesktopToastService = class BfDesktopToastService {
 		return this.config.position.startsWith("top");
 	}
 	positionStrategy() {
-		const global = this.overlay.position().global();
+		const global = createGlobalPositionStrategy(this.injector);
 		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);
 	}
@@ -1848,6 +1846,96 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => []
 });
+const ANCHORED_ENTER_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+const ANCHORED_EXIT_EASING = "cubic-bezier(0.4, 0, 1, 1)";
+const ANCHORED_SCALE = .96;
+const OPEN = {
+	opacity: 1,
+	transform: "none"
+};
+function hiddenFrame(panel, anchor) {
+	if (prefersReducedMotion(panel.ownerDocument.defaultView)) return { opacity: 0 };
+	const p = panel.getBoundingClientRect();
+	const a = anchor.getBoundingClientRect();
+	let x = 0;
+	let y = 0;
+	let originX = null;
+	let originY = "top";
+	if (p.top >= a.bottom - 1) y = -4;
+	else if (p.bottom <= a.top + 1) {
+		y = 4;
+		originY = "bottom";
+	} else if (p.left >= a.right - 1) {
+		x = -4;
+		originX = "left";
+	} else {
+		x = 4;
+		originX = "right";
+	}
+	originX ??= Math.abs(p.left - a.left) <= Math.abs(p.right - a.right) ? "left" : "right";
+	panel.style.transformOrigin = `${originX} ${originY}`;
+	return {
+		opacity: 0,
+		transform: `translate3d(${x}px, ${y}px, 0) scale(${ANCHORED_SCALE})`
+	};
+}
+function animateAnchoredIn(panel, anchor) {
+	return animateOrSettle(panel, [hiddenFrame(panel, anchor), OPEN], {
+		duration: 180,
+		easing: ANCHORED_ENTER_EASING,
+		fill: "backwards"
+	});
+}
+function animateAnchoredOut(panel, anchor) {
+	return animateOrSettle(panel, [hiddenFrame(panel, anchor)], {
+		duration: 130,
+		easing: ANCHORED_EXIT_EASING,
+		fill: "forwards"
+	});
+}
+var AnchoredMotion = class {
+	leaving = null;
+	enter(ref, anchor, view) {
+		view?.detectChanges();
+		ref.updatePosition();
+		animateAnchoredIn(ref.overlayElement, anchor);
+	}
+	leave(ref, anchor, freeze) {
+		this.flush();
+		const pane = ref.overlayElement;
+		pane.setAttribute("inert", "");
+		pane.style.pointerEvents = "none";
+		freeze?.detach();
+		const animation = animateAnchoredOut(pane, anchor);
+		if (animation.playState === "finished" || animation.effect === null) {
+			ref.dispose();
+			return;
+		}
+		const entry = {
+			ref,
+			animation
+		};
+		this.leaving = entry;
+		const done = () => {
+			if (this.leaving === entry) {
+				this.leaving = null;
+				ref.dispose();
+			}
+		};
+		animation.finished.then(done, done);
+	}
+	flush() {
+		const entry = this.leaving;
+		if (entry) {
+			this.leaving = null;
+			entry.animation.cancel();
+			entry.ref.dispose();
+		}
+	}
+	isLeaving() {
+		return this.leaving !== null;
+	}
+};
 const BELOW_START = {
 	originX: "start",
 	originY: "bottom",
@@ -1965,11 +2053,11 @@ function sidePositions(placement, direction = "ltr") {
 		offsetX: -position.offsetX
 	} : position);
 }
-function createAnchoredOverlay(overlay, anchor, options) {
-	const strategy = overlay.position().flexibleConnectedTo(anchor).withPositions(options.positions).withFlexibleDimensions(false).withPush(false).withViewportMargin(8);
-	const ref = overlay.create({
+function createAnchoredOverlay(injector, anchor, options) {
+	const strategy = createFlexibleConnectedPositionStrategy(injector, anchor).withPositions(options.positions).withFlexibleDimensions(false).withPush(false).withViewportMargin(8);
+	const ref = createOverlayRef(injector, {
 		positionStrategy: strategy,
-		scrollStrategy: overlay.scrollStrategies.reposition(),
+		scrollStrategy: createRepositionScrollStrategy(injector),
 		direction: options.direction,
 		hasBackdrop: false,
 		panelClass: options.panelClass
@@ -2014,6 +2102,9 @@ var BfMenuTriggerDirective = class BfMenuTriggerDirective {
 			previous = positions;
 		});
 	}
+	anchorElement() {
+		return this.el;
+	}
 	labelId() {
 		if (!this.el.id) this.el.id = ɵuniqueId("bf-menu-trigger");
 		return this.el.id;
@@ -2092,6 +2183,12 @@ var BfMenuComponent = class BfMenuComponent {
 	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 */ []);
+	constructor() {
+		const trigger = this.trigger;
+		if (!trigger) return;
+		const host = inject(ElementRef).nativeElement;
+		afterNextRender({ read: () => animateAnchoredIn(host, trigger.anchorElement()) });
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
@@ -2160,6 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: "<ng-content />"
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		size: [{
 			type: i0.Input,
@@ -2508,7 +2606,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
-const BUTTON = ɵBF_BUTTON_CLASSES;
+const BUTTON$1 = ɵBF_BUTTON_CLASSES;
 const ICON$1 = ɵBF_ICON_BUTTON_CLASSES;
 const CARET_PADDING = {
 	sm: "ps-3.5 pe-3",
@@ -2526,6 +2624,10 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 		...ngDevMode ? { debugName: "iconOnly" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
+	fullWidth = input(false, {
+		...ngDevMode ? { debugName: "fullWidth" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
 	disabled = input(false, {
 		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -2533,6 +2635,8 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 	opened = output();
 	closed = output();
 	resolvedSize = computed(() => this.size() ?? this.defaults.controlSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	stretched = computed(() => this.fullWidth() && !this.iconOnly(), ...ngDevMode ? [{ debugName: "stretched" }] : 	/* istanbul ignore next */ []);
+	hostClasses = computed(() => this.stretched() ? "inline-flex max-w-full w-full" : "inline-flex max-w-full", ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* 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();
@@ -2548,16 +2652,17 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 				hit
 			].filter(Boolean).join(" ");
 		}
-		const padding = variant === "text" ? BUTTON.textPadding[size] : CARET_PADDING[size];
-		const pressed = this.disabled() ? "" : BUTTON.pressed[variant];
+		const padding = variant === "text" ? BUTTON$1.textPadding[size] : CARET_PADDING[size];
+		const pressed = this.disabled() ? "" : BUTTON$1.pressed[variant];
 		return [
-			BUTTON.base,
+			BUTTON$1.base,
 			"cursor-pointer",
-			BUTTON.variant[variant],
+			BUTTON$1.variant[variant],
 			pressed,
-			BUTTON.size[size],
+			BUTTON$1.size[size],
 			padding,
-			hit
+			hit,
+			this.stretched() ? "w-full" : ""
 		].filter(Boolean).join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -2617,6 +2722,13 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			fullWidth: {
+				classPropertyName: "fullWidth",
+				publicName: "fullWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -2629,7 +2741,7 @@ var BfMenuButtonComponent = class BfMenuButtonComponent {
 			opened: "opened",
 			closed: "closed"
 		},
-		host: { classAttribute: "inline-flex max-w-full" },
+		host: { properties: { "class": "hostClasses()" } },
 		ngImport: i0,
 		template: `
     <button
@@ -2672,7 +2784,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "bf-menu-button",
 			imports: [BfMenuTriggerDirective],
-			host: { class: "inline-flex max-w-full" },
+			host: { "[class]": "hostClasses()" },
 			template: `
     <button
       type="button"
@@ -2746,6 +2858,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		fullWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fullWidth",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -2902,6 +3022,7 @@ var BfThemeMenuButtonComponent = class BfThemeMenuButtonComponent {
 					"placement",
 					"label",
 					"iconOnly",
+					"fullWidth",
 					"disabled"
 				],
 				outputs: ["opened", "closed"]
@@ -3089,7 +3210,7 @@ const SHOW_DELAY = 500;
 const HIDE_GRACE = 100;
 const FADE = 120;
 var BfTooltipDirective = class BfTooltipDirective {
-	overlay = inject(Overlay);
+	environment = inject(EnvironmentInjector);
 	document = inject(DOCUMENT);
 	injector = inject(Injector);
 	dir = inject(Directionality, { optional: true });
@@ -3112,7 +3233,7 @@ var BfTooltipDirective = class BfTooltipDirective {
 		this.clearTimers();
 		if (this.anchored || !this.bfTooltip() || this.coarsePointer()) return;
 		const direction = this.dir?.value ?? "ltr";
-		const anchored = createAnchoredOverlay(this.overlay, this.host, {
+		const anchored = createAnchoredOverlay(this.environment, this.host, {
 			positions: sidePositions(this.bfTooltipPlacement(), direction),
 			direction,
 			panelClass: ["bf-tooltip-panel"]
@@ -3408,175 +3529,301 @@ 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 BUTTON = ɵBF_BUTTON_CLASSES;
+const VARIANT = {
+	send: "primary",
+	stop: "tonal"
 };
-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)]"
+const SQUARE = {
+	sm: "has-[[data-icon]>*]:w-8 has-[[data-icon]>*]:px-0",
+	md: "has-[[data-icon]>*]:w-10 has-[[data-icon]>*]:px-0",
+	lg: "has-[[data-icon]>*]:w-12 has-[[data-icon]>*]:px-0"
 };
-var BfSidePanelComponent = class BfSidePanelComponent {
+const FIELD_HEIGHT = {
+	sm: "[&_textarea]:min-h-8",
+	md: "[&_textarea]:min-h-10",
+	lg: "[&_textarea]:min-h-12 [&_textarea]:py-[11px]"
+};
+const BLOCKED = "cursor-not-allowed bg-surface-sunken text-text-disabled";
+var BfChatComposerComponent = class BfChatComposerComponent {
+	defaults = inject(BF_DEFAULTS);
 	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());
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	running = input(false, {
+		...ngDevMode ? { debugName: "running" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabledReason = input("", ...ngDevMode ? [{ debugName: "disabledReason" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	maxRows = input(8, ...ngDevMode ? [{ debugName: "maxRows" }] : 	/* istanbul ignore next */ []);
+	maxLength = input(void 0, ...ngDevMode ? [{ debugName: "maxLength" }] : 	/* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	changed = output();
+	sent = output();
+	stopped = output();
+	field = viewChild.required(BfTextareaComponent, ...ngDevMode ? [{ debugName: "field" }] : 	/* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.defaults.fieldSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	fieldClasses = computed(() => `min-w-0 flex-1 ${FIELD_HEIGHT[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "fieldClasses" }] : 	/* istanbul ignore next */ []);
+	action = computed(() => this.running() ? "stop" : "send", ...ngDevMode ? [{ debugName: "action" }] : 	/* istanbul ignore next */ []);
+	blocked = computed(() => this.disabled() && this.disabledReason() !== "", ...ngDevMode ? [{ debugName: "blocked" }] : 	/* istanbul ignore next */ []);
+	nativeDisabled = computed(() => !this.blocked() && (this.disabled() || this.action() === "send" && this.value().trim() === ""), ...ngDevMode ? [{ debugName: "nativeDisabled" }] : 	/* istanbul ignore next */ []);
+	buttonName = computed(() => this.action() === "stop" ? this.labels.chatStop : this.labels.chatSend, ...ngDevMode ? [{ debugName: "buttonName" }] : 	/* istanbul ignore next */ []);
+	fieldName = computed(() => this.ariaLabel() || (this.ariaLabelledby() ? "" : this.labels.chatComposer), ...ngDevMode ? [{ debugName: "fieldName" }] : 	/* istanbul ignore next */ []);
+	fieldPlaceholder = computed(() => this.disabled() && this.disabledReason() ? this.disabledReason() : this.placeholder(), ...ngDevMode ? [{ debugName: "fieldPlaceholder" }] : 	/* istanbul ignore next */ []);
+	buttonClasses = computed(() => {
+		const size = this.resolvedSize();
+		const variant = VARIANT[this.action()];
+		return [
+			BUTTON.base,
+			this.blocked() ? BLOCKED : `${BUTTON.variant[variant]} ${BUTTON.pressed[variant]} cursor-pointer`,
+			BUTTON.size[size],
+			BUTTON.padding[size],
+			SQUARE[size],
+			ɵPILL_HIT[size].plain
+		].join(" ");
+	}, ...ngDevMode ? [{ debugName: "buttonClasses" }] : 	/* istanbul ignore next */ []);
+	send() {
+		const text = this.value().trim();
+		if (this.disabled() || this.running() || text === "") return;
+		this.sent.emit(text);
+		this.value.set("");
+		this.field().focus();
+	}
+	focus() {
+		this.field().focus();
+	}
+	onChanged(text) {
+		this.value.set(text);
+		this.changed.emit(text);
+	}
+	onButton() {
+		if (this.blocked()) return;
+		if (this.action() === "stop") {
+			this.stopped.emit();
+			return;
+		}
+		this.send();
 	}
-	close() {
-		this.ref?.close();
+	onKeydown(event) {
+		const composing = event.isComposing || event.keyCode === 229;
+		if (event.key !== "Enter" || event.shiftKey || composing) return;
+		event.preventDefault();
+		this.send();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
 		ngImport: i0,
-		type: BfSidePanelComponent,
+		type: BfChatComposerComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
+		minVersion: "17.2.0",
 		version: "22.1.7",
-		type: BfSidePanelComponent,
+		type: BfChatComposerComponent,
 		isStandalone: true,
-		selector: "bf-side-panel",
+		selector: "bf-chat-composer",
 		inputs: {
-			title: {
-				classPropertyName: "title",
-				publicName: "title",
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			closeLabel: {
-				classPropertyName: "closeLabel",
-				publicName: "closeLabel",
+			running: {
+				classPropertyName: "running",
+				publicName: "running",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledReason: {
+				classPropertyName: "disabledReason",
+				publicName: "disabledReason",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				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
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxRows: {
+				classPropertyName: "maxRows",
+				publicName: "maxRows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxLength: {
+				classPropertyName: "maxLength",
+				publicName: "maxLength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		host: { properties: {
-			"class": "hostClasses()",
-			"attr.data-bf-side-panel-id": "titleId"
-		} },
+		outputs: {
+			value: "valueChange",
+			changed: "changed",
+			sent: "sent",
+			stopped: "stopped"
+		},
+		host: {
+			properties: { "attr.data-running": "running() ? '' : null" },
+			classAttribute: "flex items-end gap-2"
+		},
 		viewQueries: [{
-			propertyName: "body",
-			first: true,
-			predicate: ["body"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "content",
+			propertyName: "field",
 			first: true,
-			predicate: ["content"],
+			predicate: BfTextareaComponent,
 			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 data-start class="flex shrink-0 items-center gap-1 empty:hidden">
+      <ng-content select="[bfSlot=start]" />
     </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>
+    <bf-textarea
+      [class]="fieldClasses()"
+      autoResize
+      [rows]="1"
+      [maxRows]="maxRows()"
+      [size]="resolvedSize()"
+      [label]="label()"
+      [ariaLabel]="fieldName()"
+      [ariaLabelledby]="ariaLabelledby()"
+      [placeholder]="fieldPlaceholder()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [name]="name()"
+      [value]="value()"
+      (changed)="onChanged($event)"
+      (keydown)="onKeydown($event)"
+    />
+    <div data-end class="flex shrink-0 items-center gap-1 empty:hidden">
+      <ng-content select="[bfSlot=end]" />
     </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"
+    <button
+      type="button"
+      data-action
+      [attr.data-mode]="action()"
+      [class]="buttonClasses()"
+      [disabled]="nativeDisabled()"
+      [attr.aria-disabled]="blocked() ? 'true' : null"
+      [bfTooltip]="blocked() ? disabledReason() : ''"
+      (click)="onButton()"
     >
-      <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>
+      <!-- display: contents, so a projected icon is the button's own flex item. -->
+      <span
+        [class]="action() === 'send' ? 'contents' : 'hidden'"
+        [attr.data-icon]="action() === 'send' ? '' : null"
+        ><ng-content select="[bfSlot=send-icon]"
+      /></span>
+      <span
+        [class]="action() === 'stop' ? 'contents' : 'hidden'"
+        [attr.data-icon]="action() === 'stop' ? '' : null"
+        ><ng-content select="[bfSlot=stop-icon]"
+      /></span>
+      <span data-text class="[[data-icon]:has(>*)~&]:sr-only">{{ buttonName() }}</span>
+    </button>
   `,
 		isInline: true,
 		dependencies: [{
 			kind: "component",
-			type: BfIconButtonComponent,
-			selector: "bf-icon-button, a[bfIconButton]",
+			type: BfTextareaComponent,
+			selector: "bf-textarea",
 			inputs: [
-				"variant",
+				"value",
 				"size",
-				"type",
+				"label",
+				"ariaLabel",
+				"ariaLabelledby",
+				"placeholder",
+				"helpText",
+				"errorMessage",
 				"disabled",
-				"label"
+				"readonly",
+				"required",
+				"invalid",
+				"touched",
+				"errors",
+				"name",
+				"id",
+				"rows",
+				"autoResize",
+				"maxRows",
+				"maxLength",
+				"minLength"
 			],
-			outputs: ["clicked"]
-		}, {
-			kind: "component",
-			type: BfIconComponent,
-			selector: "bf-icon",
-			inputs: [
-				"icon",
-				"size",
-				"label",
-				"filled"
+			outputs: [
+				"valueChange",
+				"changed",
+				"focused",
+				"blurred",
+				"touch"
 			]
+		}, {
+			kind: "directive",
+			type: BfTooltipDirective,
+			selector: "[bfTooltip]",
+			inputs: ["bfTooltip", "bfTooltipPlacement"]
 		}]
 	});
 };
@@ -3584,105 +3831,459 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.1.7",
 	ngImport: i0,
-	type: BfSidePanelComponent,
+	type: BfChatComposerComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "bf-side-panel",
-			imports: [BfIconButtonComponent, BfIconComponent],
+			selector: "bf-chat-composer",
+			imports: [BfTextareaComponent, BfTooltipDirective],
 			host: {
-				"[class]": "hostClasses()",
-				"[attr.data-bf-side-panel-id]": "titleId"
+				class: "flex items-end gap-2",
+				"[attr.data-running]": "running() ? '' : null"
 			},
 			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 data-start class="flex shrink-0 items-center gap-1 empty:hidden">
+      <ng-content select="[bfSlot=start]" />
     </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]" />
+    <bf-textarea
+      [class]="fieldClasses()"
+      autoResize
+      [rows]="1"
+      [maxRows]="maxRows()"
+      [size]="resolvedSize()"
+      [label]="label()"
+      [ariaLabel]="fieldName()"
+      [ariaLabelledby]="ariaLabelledby()"
+      [placeholder]="fieldPlaceholder()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [name]="name()"
+      [value]="value()"
+      (changed)="onChanged($event)"
+      (keydown)="onKeydown($event)"
+    />
+    <div data-end class="flex shrink-0 items-center gap-1 empty:hidden">
+      <ng-content select="[bfSlot=end]" />
     </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()"
+    <button
+      type="button"
+      data-action
+      [attr.data-mode]="action()"
+      [class]="buttonClasses()"
+      [disabled]="nativeDisabled()"
+      [attr.aria-disabled]="blocked() ? 'true' : null"
+      [bfTooltip]="blocked() ? disabledReason() : ''"
+      (click)="onButton()"
     >
-      <bf-icon [icon]="closeIcon" />
-    </bf-icon-button>
+      <!-- display: contents, so a projected icon is the button's own flex item. -->
+      <span
+        [class]="action() === 'send' ? 'contents' : 'hidden'"
+        [attr.data-icon]="action() === 'send' ? '' : null"
+        ><ng-content select="[bfSlot=send-icon]"
+      /></span>
+      <span
+        [class]="action() === 'stop' ? 'contents' : 'hidden'"
+        [attr.data-icon]="action() === 'stop' ? '' : null"
+        ><ng-content select="[bfSlot=stop-icon]"
+      /></span>
+      <span data-text class="[[data-icon]:has(>*)~&]:sr-only">{{ buttonName() }}</span>
+    </button>
   `
 		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
-		title: [{
+		value: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "title",
+				alias: "value",
 				required: false
 			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
 		}],
-		closeLabel: [{
+		running: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "closeLabel",
+				alias: "running",
 				required: false
 			}]
 		}],
-		body: [{
-			type: i0.ViewChild,
-			args: ["body", { isSignal: true }]
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
 		}],
-		content: [{
+		disabledReason: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledReason",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		maxRows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxRows",
+				required: false
+			}]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		sent: [{
+			type: i0.Output,
+			args: ["sent"]
+		}],
+		stopped: [{
+			type: i0.Output,
+			args: ["stopped"]
+		}],
+		field: [{
 			type: i0.ViewChild,
-			args: ["content", { isSignal: true }]
+			args: [i0.forwardRef(() => BfTextareaComponent), { 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);
+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: BfSidePanelTemplateHostComponent,
+		type: BfSidePanelComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "14.0.0",
+		minVersion: "17.0.0",
 		version: "22.1.7",
-		type: BfSidePanelTemplateHostComponent,
+		type: BfSidePanelComponent,
 		isStandalone: true,
-		selector: "bf-side-panel-template-host",
-		host: { styleAttribute: "display: contents" },
-		ngImport: i0,
+		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"
@@ -3825,7 +4426,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
-	overlay = inject(Overlay);
+	environment = inject(EnvironmentInjector);
 	document = inject(DOCUMENT);
 	injector = inject(Injector);
 	viewContainer = inject(ViewContainerRef);
@@ -3841,6 +4442,7 @@ var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 	isOpen = this.openState.asReadonly();
 	panelId = ɵuniqueId("bf-popover");
 	anchored = null;
+	motion = new AnchoredMotion();
 	subscriptions = [];
 	stopNavigation = null;
 	stopHeading = null;
@@ -3853,18 +4455,22 @@ var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 			if (open) control.setAttribute("aria-controls", this.panelId);
 			else control.removeAttribute("aria-controls");
 		} });
-		inject(DestroyRef).onDestroy(() => this.teardown());
+		inject(DestroyRef).onDestroy(() => {
+			this.teardown(false);
+			this.motion.flush();
+		});
 	}
 	open() {
 		if (this.anchored) return;
+		this.motion.flush();
 		const direction = this.dir?.value ?? "ltr";
-		const anchored = createAnchoredOverlay(this.overlay, this.host, {
+		const anchored = createAnchoredOverlay(this.environment, this.host, {
 			positions: blockPositions(this.bfPopoverPlacement()),
 			direction,
 			panelClass: ["bf-popover-panel"]
 		});
 		this.anchored = anchored;
-		anchored.ref.attach(new TemplatePortal(this.bfPopoverTriggerFor(), this.viewContainer, void 0, this.injector));
+		const view = anchored.ref.attach(new TemplatePortal(this.bfPopoverTriggerFor(), this.viewContainer, void 0, this.injector));
 		const pane = anchored.ref.overlayElement;
 		this.subscriptions = [anchored.ref.keydownEvents().subscribe((event) => {
 			if (event.key === "Escape") {
@@ -3879,6 +4485,7 @@ var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 		pane.addEventListener("keydown", (event) => this.tabbed(event, pane));
 		this.stopNavigation = watchPathChange(this.location, () => this.close(false));
 		this.openState.set(true);
+		this.motion.enter(anchored.ref, this.host, view);
 		const panel = pane.querySelector("bf-popover") ?? pane;
 		this.name(panel);
 		(firstTabbable(panel) ?? panel).focus({ preventScroll: true });
@@ -3886,7 +4493,7 @@ var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 	}
 	close(restoreFocus = true) {
 		if (!this.anchored) return;
-		this.teardown();
+		this.teardown(true);
 		this.openState.set(false);
 		if (restoreFocus) this.control().focus({ preventScroll: true });
 		this.bfPopoverClosed.emit();
@@ -3917,15 +4524,17 @@ var BfPopoverTriggerDirective = class BfPopoverTriggerDirective {
 		panel.setAttribute("aria-labelledby", this.labelId());
 		this.stopHeading = watchPanelHeading(panel);
 	}
-	teardown() {
+	teardown(animate) {
 		this.stopHeading?.();
 		this.stopHeading = null;
 		this.subscriptions.forEach((s) => s.unsubscribe());
 		this.subscriptions = [];
 		this.stopNavigation?.();
 		this.stopNavigation = null;
-		this.anchored?.ref.dispose();
+		const ref = this.anchored?.ref;
 		this.anchored = null;
+		if (ref && animate) this.motion.leave(ref, this.host);
+		else ref?.dispose();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -4091,7 +4700,7 @@ function labelContains(option, query) {
 }
 var ComboboxCore = class {
 	host;
-	overlay = inject(Overlay);
+	environment = inject(EnvironmentInjector);
 	injector = inject(Injector);
 	viewContainer = inject(ViewContainerRef);
 	dir = inject(Directionality, { optional: true });
@@ -4141,10 +4750,15 @@ var ComboboxCore = class {
 	}, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
 	controls = computed(() => this.isOpen() && this.items().length > 0 ? this.listboxId : null, ...ngDevMode ? [{ debugName: "controls" }] : 	/* istanbul ignore next */ []);
 	anchored = null;
+	panelView = null;
+	motion = new AnchoredMotion();
 	subscriptions = [];
 	constructor(host) {
 		this.host = host;
-		inject(DestroyRef).onDestroy(() => this.teardown());
+		inject(DestroyRef).onDestroy(() => {
+			this.teardown(false);
+			this.motion.flush();
+		});
 	}
 	setQuery(query) {
 		const before = this.queryState() ?? "";
@@ -4158,15 +4772,18 @@ var ComboboxCore = class {
 	}
 	open() {
 		if (this.anchored) return;
+		this.motion.flush();
 		const anchor = this.host.anchor();
-		const anchored = createAnchoredOverlay(this.overlay, anchor, {
+		const anchored = createAnchoredOverlay(this.environment, anchor, {
 			positions: blockPositions("below-start"),
 			direction: this.dir?.value ?? "ltr",
 			panelClass: ["bf-combobox-panel"]
 		});
 		this.anchored = anchored;
 		anchored.ref.updateSize({ width: anchor.getBoundingClientRect().width || void 0 });
-		anchored.ref.attach(new ComponentPortal(this.host.panel, this.viewContainer, this.injector)).setInput("core", this);
+		const panel = anchored.ref.attach(new ComponentPortal(this.host.panel, this.viewContainer, this.injector));
+		panel.setInput("core", this);
+		this.panelView = panel.changeDetectorRef;
 		this.subscriptions = [anchored.ref.keydownEvents().subscribe((event) => {
 			if (event.key === "Escape") {
 				event.preventDefault();
@@ -4176,10 +4793,11 @@ var ComboboxCore = class {
 			if (!(event.target instanceof Node && anchor.contains(event.target))) this.close();
 		})];
 		this.openState.set(true);
+		this.motion.enter(anchored.ref, anchor, panel.changeDetectorRef);
 	}
 	close() {
 		if (!this.anchored) return;
-		this.teardown();
+		this.teardown(true);
 		this.openState.set(false);
 		this.activeIndex.set(null);
 	}
@@ -4238,11 +4856,15 @@ var ComboboxCore = class {
 	firstEnabled(items) {
 		return items.find((item) => !item.option.disabled);
 	}
-	teardown() {
+	teardown(animate) {
 		this.subscriptions.forEach((s) => s.unsubscribe());
 		this.subscriptions = [];
-		this.anchored?.ref.dispose();
+		const ref = this.anchored?.ref;
+		const view = this.panelView;
 		this.anchored = null;
+		this.panelView = null;
+		if (ref && animate) this.motion.leave(ref, this.host.anchor(), view ?? void 0);
+		else ref?.dispose();
 	}
 };
 function sameValue(compare, optionValue, value) {
@@ -4260,7 +4882,7 @@ const COMBOBOX_CHEVRON_INSET = {
 	md: "after:end-4",
 	lg: "after:end-4.5"
 };
-const PANEL = "block bg-surface text-text border border-border rounded-card shadow-floating p-1 max-h-[min(18rem,calc(100dvh-2rem))] overflow-y-auto overscroll-contain";
+const PANEL = "block w-full min-w-0 bg-surface text-text border border-border rounded-card shadow-floating p-1 max-h-[min(18rem,calc(100dvh-2rem))] overflow-y-auto overscroll-contain";
 const OPTION$1 = "flex w-full items-start gap-2 rounded-field px-2 text-start cursor-pointer select-none data-active:bg-surface-muted aria-disabled:cursor-not-allowed aria-disabled:text-text-disabled before:mt-[0.3em] before:h-[11px] before:w-[6px] before:mx-[5px] before:shrink-0 before:rotate-45 before:border-current before:content-[''] aria-selected:before:border-r-2 aria-selected:before:border-b-2 aria-selected:text-primary-text forced-colors:data-active:forced-color-adjust-none forced-colors:data-active:bg-[Highlight] forced-colors:data-active:text-[HighlightText] forced-colors:aria-disabled:text-[GrayText]";
 const SIZE = {
 	sm: "min-h-8 py-1.5 text-label-sm pointer-coarse:min-h-hit",
@@ -4472,10 +5094,664 @@ i0.ɵɵngDeclareClassMetadata({
 			alias: "core",
 			required: true
 		}]
-	}] }
+	}] }
+});
+var BfComboboxComponent = class BfComboboxComponent {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : 	/* istanbul ignore next */ []);
+	filter = input(labelContains, ...ngDevMode ? [{ debugName: "filter" }] : 	/* istanbul ignore next */ []);
+	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : 	/* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	helpText = input("", ...ngDevMode ? [{ debugName: "helpText" }] : 	/* istanbul ignore next */ []);
+	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : 	/* istanbul ignore next */ []);
+	emptyLabel = input("", ...ngDevMode ? [{ debugName: "emptyLabel" }] : 	/* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : 	/* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	id = input(ɵuniqueId("bf-combobox"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	changed = output();
+	queried = output();
+	focused = output();
+	blurred = output();
+	touch = output();
+	el = viewChild.required("el", ...ngDevMode ? [{ debugName: "el" }] : 	/* istanbul ignore next */ []);
+	anchorEl = viewChild.required("anchor", ...ngDevMode ? [{ debugName: "anchorEl" }] : 	/* istanbul ignore next */ []);
+	defaults = inject(BF_DEFAULTS);
+	labels = inject(BF_LABELS);
+	pickedLabel = signal(null, ...ngDevMode ? [{ debugName: "pickedLabel" }] : 	/* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.defaults.fieldSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	core = new ComboboxCore({
+		options: this.options,
+		filter: this.filter,
+		isSelected: (option) => sameValue(this.compareWith(), option.value, this.value()),
+		pick: (item) => this.pick(item),
+		anchor: () => this.anchorEl().nativeElement,
+		panel: BfComboboxListboxComponent,
+		listboxLabel: computed(() => this.label() || this.ariaLabel() || null),
+		listboxLabelledby: computed(() => this.label() ? null : this.ariaLabelledby() || null),
+		multiple: false,
+		loading: this.loading,
+		emptyText: computed(() => this.emptyLabel() || this.labels.comboboxEmpty),
+		size: this.resolvedSize,
+		queried: (query) => this.queried.emit(query)
+	});
+	valueLabel = computed(() => {
+		const value = this.value();
+		if (value === null) return "";
+		const compare = this.compareWith();
+		const option = this.options().find((o) => compare(o.value, value));
+		const picked = this.pickedLabel();
+		return option?.label ?? (picked && compare(picked.value, value) ? picked.label : "");
+	}, ...ngDevMode ? [{ debugName: "valueLabel" }] : 	/* istanbul ignore next */ []);
+	text = computed(() => this.core.query() ?? this.valueLabel(), ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+	errorText = computed(() => ɵfieldErrorText(this.errorMessage(), this.touched(), this.errors(), this.labels.validation), ...ngDevMode ? [{ debugName: "errorText" }] : 	/* istanbul ignore next */ []);
+	showError = computed(() => ɵfieldShowsError(this.errorText(), this.invalid(), this.touched()), ...ngDevMode ? [{ debugName: "showError" }] : 	/* istanbul ignore next */ []);
+	describedBy = computed(() => ɵfieldDescribedBy(this.id(), this.errorText(), this.helpText()), ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
+	errorMessageId = computed(() => ɵfieldErrorMessageId(this.id(), this.errorText(), this.showError()), ...ngDevMode ? [{ debugName: "errorMessageId" }] : 	/* istanbul ignore next */ []);
+	ariaLabelAttr = computed(() => this.label() ? null : this.ariaLabel() || null, ...ngDevMode ? [{ debugName: "ariaLabelAttr" }] : 	/* istanbul ignore next */ []);
+	ariaLabelledbyAttr = computed(() => this.label() ? null : this.ariaLabelledby() || null, ...ngDevMode ? [{ debugName: "ariaLabelledbyAttr" }] : 	/* istanbul ignore next */ []);
+	wrapperClasses = computed(() => `${COMBOBOX_CHEVRON} ${COMBOBOX_CHEVRON_INSET[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "wrapperClasses" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => [
+		COMBOBOX_FIELD_BASE,
+		ɵFIELD_BOX[this.resolvedSize()],
+		ɵFIELD_PADDING_START[this.resolvedSize()].text,
+		COMBOBOX_PADDING_END[this.resolvedSize()],
+		this.showError() ? "border-danger-border hover:border-danger" : "border-border-strong hover:border-text-muted"
+	].join(" "), ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	focus(options) {
+		this.el().nativeElement.focus(options);
+	}
+	onInput(el) {
+		if (this.readonly()) return;
+		this.core.typed(el.value);
+	}
+	onClick() {
+		if (!this.readonly() && !this.disabled()) this.core.open();
+	}
+	onKeydown(event) {
+		if (this.readonly()) return;
+		if (this.core.keydown(event)) return;
+		if (event.key === "Escape" && !this.core.isOpen() && this.core.query() !== null) this.resetQuery(null);
+	}
+	onBlur(event) {
+		this.core.close();
+		const query = this.core.query();
+		if (query !== null) {
+			const typed = foldText(query.trim());
+			const match = this.options().find((o) => !o.disabled && foldText(o.label) === typed);
+			if (!typed && this.value() !== null) this.set(null);
+			else if (typed && match && !sameValue(this.compareWith(), match.value, this.value())) this.set(match.value, match.label);
+			this.resetQuery(null);
+		}
+		this.blurred.emit(event);
+		this.touch.emit();
+	}
+	pick(item) {
+		if (!sameValue(this.compareWith(), item.option.value, this.value())) this.set(item.option.value, item.option.label);
+		this.resetQuery(null);
+		this.core.close();
+	}
+	set(value, label = "") {
+		this.pickedLabel.set(value === null ? null : {
+			value,
+			label
+		});
+		this.value.set(value);
+		this.changed.emit(value);
+	}
+	resetQuery(query) {
+		this.core.setQuery(query);
+		this.el().nativeElement.value = this.text();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfComboboxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.1.7",
+		type: BfComboboxComponent,
+		isStandalone: true,
+		selector: "bf-combobox",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			compareWith: {
+				classPropertyName: "compareWith",
+				publicName: "compareWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				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
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helpText: {
+				classPropertyName: "helpText",
+				publicName: "helpText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyLabel: {
+				classPropertyName: "emptyLabel",
+				publicName: "emptyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errors: {
+				classPropertyName: "errors",
+				publicName: "errors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			changed: "changed",
+			queried: "queried",
+			focused: "focused",
+			blurred: "blurred",
+			touch: "touch"
+		},
+		host: {
+			properties: { "attr.id": "null" },
+			classAttribute: "block"
+		},
+		viewQueries: [{
+			propertyName: "el",
+			first: true,
+			predicate: ["el"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "anchorEl",
+			first: true,
+			predicate: ["anchor"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <bf-field
+      [label]="label()"
+      [helpText]="helpText()"
+      [error]="errorText()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [controlId]="id()"
+    >
+      <div #anchor [class]="wrapperClasses()">
+        <input
+          #el
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-autocomplete="list"
+          [id]="id()"
+          [attr.name]="name() || null"
+          [value]="text()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [readOnly]="readonly()"
+          [required]="required()"
+          [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
+          [attr.aria-controls]="core.controls()"
+          [attr.aria-activedescendant]="core.active()?.id ?? null"
+          [attr.aria-label]="ariaLabelAttr()"
+          [attr.aria-labelledby]="ariaLabelledbyAttr()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-errormessage]="errorMessageId()"
+          [class]="classes()"
+          (input)="onInput(el)"
+          (keydown)="onKeydown($event)"
+          (click)="onClick()"
+          (focus)="focused.emit($event)"
+          (blur)="onBlur($event)"
+        />
+      </div>
+    </bf-field>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfFieldComponent,
+			selector: "bf-field",
+			inputs: [
+				"label",
+				"helpText",
+				"error",
+				"required",
+				"disabled",
+				"controlId"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfComboboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-combobox",
+			imports: [BfFieldComponent],
+			host: {
+				class: "block",
+				"[attr.id]": "null"
+			},
+			template: `
+    <bf-field
+      [label]="label()"
+      [helpText]="helpText()"
+      [error]="errorText()"
+      [required]="required()"
+      [disabled]="disabled()"
+      [controlId]="id()"
+    >
+      <div #anchor [class]="wrapperClasses()">
+        <input
+          #el
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-autocomplete="list"
+          [id]="id()"
+          [attr.name]="name() || null"
+          [value]="text()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          [readOnly]="readonly()"
+          [required]="required()"
+          [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
+          [attr.aria-controls]="core.controls()"
+          [attr.aria-activedescendant]="core.active()?.id ?? null"
+          [attr.aria-label]="ariaLabelAttr()"
+          [attr.aria-labelledby]="ariaLabelledbyAttr()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [attr.aria-errormessage]="errorMessageId()"
+          [class]="classes()"
+          (input)="onInput(el)"
+          (keydown)="onKeydown($event)"
+          (click)="onClick()"
+          (focus)="focused.emit($event)"
+          (blur)="onBlur($event)"
+        />
+      </div>
+    </bf-field>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		helpText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helpText",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		emptyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyLabel",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		queried: [{
+			type: i0.Output,
+			args: ["queried"]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		el: [{
+			type: i0.ViewChild,
+			args: ["el", { isSignal: true }]
+		}],
+		anchorEl: [{
+			type: i0.ViewChild,
+			args: ["anchor", { isSignal: true }]
+		}]
+	}
 });
-var BfComboboxComponent = class BfComboboxComponent {
-	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+const BOX = "flex w-full flex-wrap items-center gap-1 rounded-field border py-1 transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-ring";
+const BOX_SIZE = {
+	sm: "min-h-8 text-label-xs",
+	md: "min-h-10 text-label-sm",
+	lg: "min-h-12 text-label"
+};
+const MODE$1 = {
+	editable: "cursor-text bg-surface text-text",
+	readonly: "cursor-text bg-surface-muted text-text",
+	disabled: "cursor-not-allowed border-surface-sunken bg-surface-muted text-text-disabled"
+};
+const INPUT = "h-6 min-w-16 flex-1 border-0 p-0 shadow-none focus:ring-0 focus:shadow-none bg-transparent outline-hidden placeholder:text-text-muted disabled:cursor-not-allowed";
+const TAG = "inline-flex h-6 max-w-full min-w-0 items-center rounded-control bg-primary-soft ps-2 text-label-xs font-bold text-primary-strong";
+const REMOVE = "relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-control hover:bg-primary-soft-hover active:bg-primary-soft-pressed focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:-inset-2.5 pointer-coarse:after:content-['']";
+const CROSS = "relative block size-2.5 before:absolute before:inset-x-0 before:top-1/2 before:h-[1.5px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:content-[''] after:absolute after:inset-x-0 after:top-1/2 after:h-[1.5px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:content-['']";
+var BfMultiComboboxComponent = class BfMultiComboboxComponent {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
 	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
 	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : 	/* istanbul ignore next */ []);
 	filter = input(labelContains, ...ngDevMode ? [{ debugName: "filter" }] : 	/* istanbul ignore next */ []);
@@ -4513,7 +5789,7 @@ var BfComboboxComponent = class BfComboboxComponent {
 	});
 	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : 	/* istanbul ignore next */ []);
 	name = input("", ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
-	id = input(ɵuniqueId("bf-combobox"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	id = input(ɵuniqueId("bf-multi-combobox"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
 	changed = output();
 	queried = output();
 	focused = output();
@@ -4523,105 +5799,137 @@ var BfComboboxComponent = class BfComboboxComponent {
 	anchorEl = viewChild.required("anchor", ...ngDevMode ? [{ debugName: "anchorEl" }] : 	/* istanbul ignore next */ []);
 	defaults = inject(BF_DEFAULTS);
 	labels = inject(BF_LABELS);
-	pickedLabel = signal(null, ...ngDevMode ? [{ debugName: "pickedLabel" }] : 	/* istanbul ignore next */ []);
+	pickedLabels = signal([], ...ngDevMode ? [{ debugName: "pickedLabels" }] : 	/* istanbul ignore next */ []);
 	resolvedSize = computed(() => this.size() ?? this.defaults.fieldSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
 	core = new ComboboxCore({
 		options: this.options,
 		filter: this.filter,
-		isSelected: (option) => sameValue(this.compareWith(), option.value, this.value()),
-		pick: (item) => this.pick(item),
+		isSelected: (option) => this.indexOf(option.value) >= 0,
+		pick: (item) => this.toggle(item),
 		anchor: () => this.anchorEl().nativeElement,
 		panel: BfComboboxListboxComponent,
 		listboxLabel: computed(() => this.label() || this.ariaLabel() || null),
 		listboxLabelledby: computed(() => this.label() ? null : this.ariaLabelledby() || null),
-		multiple: false,
+		multiple: true,
 		loading: this.loading,
 		emptyText: computed(() => this.emptyLabel() || this.labels.comboboxEmpty),
 		size: this.resolvedSize,
 		queried: (query) => this.queried.emit(query)
 	});
-	valueLabel = computed(() => {
-		const value = this.value();
-		if (value === null) return "";
+	tags = computed(() => {
 		const compare = this.compareWith();
-		const option = this.options().find((o) => compare(o.value, value));
-		const picked = this.pickedLabel();
-		return option?.label ?? (picked && compare(picked.value, value) ? picked.label : "");
-	}, ...ngDevMode ? [{ debugName: "valueLabel" }] : 	/* istanbul ignore next */ []);
-	text = computed(() => this.core.query() ?? this.valueLabel(), ...ngDevMode ? [{ debugName: "text" }] : 	/* istanbul ignore next */ []);
+		return this.value().map((value) => {
+			return {
+				value,
+				label: this.options().find((o) => compare(o.value, value))?.label ?? this.pickedLabels().find((t) => compare(t.value, value))?.label ?? String(value)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "tags" }] : 	/* istanbul ignore next */ []);
+	editable = computed(() => !this.disabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "editable" }] : 	/* istanbul ignore next */ []);
 	errorText = computed(() => ɵfieldErrorText(this.errorMessage(), this.touched(), this.errors(), this.labels.validation), ...ngDevMode ? [{ debugName: "errorText" }] : 	/* istanbul ignore next */ []);
 	showError = computed(() => ɵfieldShowsError(this.errorText(), this.invalid(), this.touched()), ...ngDevMode ? [{ debugName: "showError" }] : 	/* istanbul ignore next */ []);
 	describedBy = computed(() => ɵfieldDescribedBy(this.id(), this.errorText(), this.helpText()), ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
 	errorMessageId = computed(() => ɵfieldErrorMessageId(this.id(), this.errorText(), this.showError()), ...ngDevMode ? [{ debugName: "errorMessageId" }] : 	/* istanbul ignore next */ []);
 	ariaLabelAttr = computed(() => this.label() ? null : this.ariaLabel() || null, ...ngDevMode ? [{ debugName: "ariaLabelAttr" }] : 	/* istanbul ignore next */ []);
 	ariaLabelledbyAttr = computed(() => this.label() ? null : this.ariaLabelledby() || null, ...ngDevMode ? [{ debugName: "ariaLabelledbyAttr" }] : 	/* istanbul ignore next */ []);
-	wrapperClasses = computed(() => `${COMBOBOX_CHEVRON} ${COMBOBOX_CHEVRON_INSET[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "wrapperClasses" }] : 	/* istanbul ignore next */ []);
-	classes = computed(() => [
-		COMBOBOX_FIELD_BASE,
-		ɵFIELD_BOX[this.resolvedSize()],
-		ɵFIELD_PADDING_START[this.resolvedSize()].text,
-		COMBOBOX_PADDING_END[this.resolvedSize()],
-		this.showError() ? "border-danger-border hover:border-danger" : "border-border-strong hover:border-text-muted"
-	].join(" "), ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	boxClasses = computed(() => {
+		const size = this.resolvedSize();
+		const mode = this.disabled() ? "disabled" : this.readonly() ? "readonly" : "editable";
+		return [
+			BOX,
+			BOX_SIZE[size],
+			ɵFIELD_PADDING_START[size].text,
+			COMBOBOX_PADDING_END[size],
+			COMBOBOX_CHEVRON,
+			COMBOBOX_CHEVRON_INSET[size],
+			MODE$1[mode],
+			mode === "disabled" ? "" : this.showError() ? "border-danger-border hover:not-focus-within:border-danger" : "border-border-strong hover:not-focus-within:border-text-muted"
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "boxClasses" }] : 	/* istanbul ignore next */ []);
+	inputClasses = INPUT;
+	tagClasses = TAG;
+	removeClasses = REMOVE;
+	crossClasses = CROSS;
+	constructor() {
+		afterRenderEffect({ write: () => {
+			this.tags();
+			this.core.reposition();
+		} });
+	}
 	focus(options) {
 		this.el().nativeElement.focus(options);
 	}
 	onInput(el) {
-		if (this.readonly()) return;
-		this.core.typed(el.value);
+		if (this.editable()) this.core.typed(el.value);
 	}
 	onClick() {
-		if (!this.readonly() && !this.disabled()) this.core.open();
+		if (this.editable()) this.core.open();
+	}
+	onBoxMousedown(event) {
+		const target = event.target;
+		if (!(target instanceof Element) || target.closest("button, input") || this.disabled()) return;
+		event.preventDefault();
+		this.focus();
+		this.onClick();
 	}
 	onKeydown(event) {
-		if (this.readonly()) return;
-		if (this.core.keydown(event)) return;
-		if (event.key === "Escape" && !this.core.isOpen() && this.core.query() !== null) this.resetQuery(null);
+		if (!this.editable() || this.core.keydown(event)) return;
+		const query = this.core.query() ?? "";
+		if (event.key === "Backspace" && query === "" && this.value().length) {
+			event.preventDefault();
+			this.remove(this.value().length - 1);
+		} else if (event.key === "Escape" && !this.core.isOpen() && query !== "") this.resetQuery(null);
 	}
 	onBlur(event) {
 		this.core.close();
-		const query = this.core.query();
-		if (query !== null) {
-			const typed = foldText(query.trim());
-			const match = this.options().find((o) => !o.disabled && foldText(o.label) === typed);
-			if (!typed && this.value() !== null) this.set(null);
-			else if (typed && match && !sameValue(this.compareWith(), match.value, this.value())) this.set(match.value, match.label);
-			this.resetQuery(null);
-		}
+		this.resetQuery(null);
 		this.blurred.emit(event);
 		this.touch.emit();
 	}
-	pick(item) {
-		if (!sameValue(this.compareWith(), item.option.value, this.value())) this.set(item.option.value, item.option.label);
-		this.resetQuery(null);
-		this.core.close();
+	remove(index) {
+		const next = this.value().filter((_, i) => i !== index);
+		this.value.set(next);
+		this.changed.emit(next);
+		this.focus();
 	}
-	set(value, label = "") {
-		this.pickedLabel.set(value === null ? null : {
-			value,
-			label
-		});
-		this.value.set(value);
-		this.changed.emit(value);
+	toggle(item) {
+		const at = this.indexOf(item.option.value);
+		let next;
+		if (at >= 0) next = this.value().filter((_, i) => i !== at);
+		else {
+			next = [...this.value(), item.option.value];
+			const tag = {
+				value: item.option.value,
+				label: item.option.label
+			};
+			this.pickedLabels.update((tags) => [...tags, tag]);
+		}
+		this.value.set(next);
+		this.changed.emit(next);
+		this.resetQuery("");
+	}
+	indexOf(value) {
+		const compare = this.compareWith();
+		return this.value().findIndex((v) => compare(value, v));
 	}
 	resetQuery(query) {
 		this.core.setQuery(query);
-		this.el().nativeElement.value = this.text();
+		this.el().nativeElement.value = "";
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
 		ngImport: i0,
-		type: BfComboboxComponent,
+		type: BfMultiComboboxComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.2.0",
+		minVersion: "17.0.0",
 		version: "22.1.7",
-		type: BfComboboxComponent,
+		type: BfMultiComboboxComponent,
 		isStandalone: true,
-		selector: "bf-combobox",
+		selector: "bf-multi-combobox",
 		inputs: {
 			value: {
 				classPropertyName: "value",
@@ -4806,7 +6114,25 @@ var BfComboboxComponent = class BfComboboxComponent {
       [disabled]="disabled()"
       [controlId]="id()"
     >
-      <div #anchor [class]="wrapperClasses()">
+      <!-- A press on the box outside the tags puts the caret in the input. -->
+      <div #anchor [class]="boxClasses()" (mousedown)="onBoxMousedown($event)">
+        @for (tag of tags(); track $index) {
+          <span data-chip [class]="tagClasses">
+            <span data-label class="min-w-0 truncate">{{ tag.label }}</span>
+            @if (editable()) {
+              <button
+                type="button"
+                [class]="removeClasses"
+                [attr.aria-label]="labels.comboboxRemove(tag.label)"
+                (click)="remove($index)"
+              >
+                <span aria-hidden="true" [class]="crossClasses"></span>
+              </button>
+            } @else {
+              <span class="pe-2"></span>
+            }
+          </span>
+        }
         <input
           #el
           type="text"
@@ -4815,11 +6141,11 @@ var BfComboboxComponent = class BfComboboxComponent {
           aria-autocomplete="list"
           [id]="id()"
           [attr.name]="name() || null"
-          [value]="text()"
-          [placeholder]="placeholder()"
+          [value]="core.query() ?? ''"
+          [placeholder]="tags().length ? '' : placeholder()"
           [disabled]="disabled()"
           [readOnly]="readonly()"
-          [required]="required()"
+          [required]="required() && !tags().length"
           [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
           [attr.aria-controls]="core.controls()"
           [attr.aria-activedescendant]="core.active()?.id ?? null"
@@ -4828,7 +6154,7 @@ var BfComboboxComponent = class BfComboboxComponent {
           [attr.aria-invalid]="showError() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-errormessage]="errorMessageId()"
-          [class]="classes()"
+          [class]="inputClasses"
           (input)="onInput(el)"
           (keydown)="onKeydown($event)"
           (click)="onClick()"
@@ -4858,11 +6184,11 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.1.7",
 	ngImport: i0,
-	type: BfComboboxComponent,
+	type: BfMultiComboboxComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "bf-combobox",
+			selector: "bf-multi-combobox",
 			imports: [BfFieldComponent],
 			host: {
 				class: "block",
@@ -4877,7 +6203,25 @@ i0.ɵɵngDeclareClassMetadata({
       [disabled]="disabled()"
       [controlId]="id()"
     >
-      <div #anchor [class]="wrapperClasses()">
+      <!-- A press on the box outside the tags puts the caret in the input. -->
+      <div #anchor [class]="boxClasses()" (mousedown)="onBoxMousedown($event)">
+        @for (tag of tags(); track $index) {
+          <span data-chip [class]="tagClasses">
+            <span data-label class="min-w-0 truncate">{{ tag.label }}</span>
+            @if (editable()) {
+              <button
+                type="button"
+                [class]="removeClasses"
+                [attr.aria-label]="labels.comboboxRemove(tag.label)"
+                (click)="remove($index)"
+              >
+                <span aria-hidden="true" [class]="crossClasses"></span>
+              </button>
+            } @else {
+              <span class="pe-2"></span>
+            }
+          </span>
+        }
         <input
           #el
           type="text"
@@ -4886,11 +6230,11 @@ i0.ɵɵngDeclareClassMetadata({
           aria-autocomplete="list"
           [id]="id()"
           [attr.name]="name() || null"
-          [value]="text()"
-          [placeholder]="placeholder()"
+          [value]="core.query() ?? ''"
+          [placeholder]="tags().length ? '' : placeholder()"
           [disabled]="disabled()"
           [readOnly]="readonly()"
-          [required]="required()"
+          [required]="required() && !tags().length"
           [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
           [attr.aria-controls]="core.controls()"
           [attr.aria-activedescendant]="core.active()?.id ?? null"
@@ -4899,7 +6243,7 @@ i0.ɵɵngDeclareClassMetadata({
           [attr.aria-invalid]="showError() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-errormessage]="errorMessageId()"
-          [class]="classes()"
+          [class]="inputClasses"
           (input)="onInput(el)"
           (keydown)="onKeydown($event)"
           (click)="onClick()"
@@ -4911,6 +6255,7 @@ i0.ɵɵngDeclareClassMetadata({
   `
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		value: [{
 			type: i0.Input,
@@ -5113,26 +6458,26 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const BOX = "flex w-full flex-wrap items-center gap-1 rounded-field border py-1 transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-ring";
-const BOX_SIZE = {
-	sm: "min-h-8 text-label-xs",
-	md: "min-h-10 text-label-sm",
-	lg: "min-h-12 text-label"
-};
+const BASE = "flex w-full items-center rounded-field border text-text select-none transition-colors focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-ring aria-disabled:cursor-not-allowed aria-disabled:border-surface-sunken aria-disabled:bg-surface-muted aria-disabled:text-text-disabled forced-colors:aria-disabled:border-[GrayText] forced-colors:aria-disabled:text-[GrayText]";
 const MODE = {
-	editable: "cursor-text bg-surface text-text",
-	readonly: "cursor-text bg-surface-muted text-text",
-	disabled: "cursor-not-allowed border-surface-sunken bg-surface-muted text-text-disabled"
+	editable: "cursor-pointer bg-surface",
+	readonly: "cursor-default bg-surface-muted"
 };
-const INPUT = "h-6 min-w-16 flex-1 bg-transparent outline-hidden placeholder:text-text-muted disabled:cursor-not-allowed";
-const TAG = "inline-flex h-6 max-w-full min-w-0 items-center rounded-control bg-primary-soft ps-2 text-label-xs font-bold text-primary-strong";
-const REMOVE = "relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-control hover:bg-primary-soft-hover active:bg-primary-soft-pressed focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring pointer-coarse:after:absolute pointer-coarse:after:-inset-2.5 pointer-coarse:after:content-['']";
-const CROSS = "relative block size-2.5 before:absolute before:inset-x-0 before:top-1/2 before:h-[1.5px] before:-translate-y-1/2 before:rotate-45 before:bg-current before:content-[''] after:absolute after:inset-x-0 after:top-1/2 after:h-[1.5px] after:-translate-y-1/2 after:-rotate-45 after:bg-current after:content-['']";
-var BfMultiComboboxComponent = class BfMultiComboboxComponent {
-	value = model([], ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	" ",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End",
+	"PageUp",
+	"PageDown"
+]);
+const PAGE = 10;
+const TYPEAHEAD_MS = 500;
+var BfSelectComponent = class BfSelectComponent {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : 	/* istanbul ignore next */ []);
 	options = input.required(...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
 	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : 	/* istanbul ignore next */ []);
-	filter = input(labelContains, ...ngDevMode ? [{ debugName: "filter" }] : 	/* istanbul ignore next */ []);
 	size = input(void 0, ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
 	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : 	/* istanbul ignore next */ []);
@@ -5140,11 +6485,6 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
 	helpText = input("", ...ngDevMode ? [{ debugName: "helpText" }] : 	/* istanbul ignore next */ []);
 	errorMessage = input("", ...ngDevMode ? [{ debugName: "errorMessage" }] : 	/* istanbul ignore next */ []);
-	emptyLabel = input("", ...ngDevMode ? [{ debugName: "emptyLabel" }] : 	/* istanbul ignore next */ []);
-	loading = input(false, {
-		...ngDevMode ? { debugName: "loading" } : 		/* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
 	disabled = input(false, {
 		...ngDevMode ? { debugName: "disabled" } : 		/* istanbul ignore next */ {},
 		transform: booleanAttribute
@@ -5167,147 +6507,190 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 	});
 	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : 	/* istanbul ignore next */ []);
 	name = input("", ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
-	id = input(ɵuniqueId("bf-multi-combobox"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
+	id = input(ɵuniqueId("bf-select"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
 	changed = output();
-	queried = output();
 	focused = output();
 	blurred = output();
 	touch = output();
-	el = viewChild.required("el", ...ngDevMode ? [{ debugName: "el" }] : 	/* istanbul ignore next */ []);
-	anchorEl = viewChild.required("anchor", ...ngDevMode ? [{ debugName: "anchorEl" }] : 	/* istanbul ignore next */ []);
+	fieldEl = viewChild("field", ...ngDevMode ? [{ debugName: "fieldEl" }] : 	/* istanbul ignore next */ []);
+	anchorEl = viewChild("anchor", ...ngDevMode ? [{ debugName: "anchorEl" }] : 	/* istanbul ignore next */ []);
+	nativeSelect = viewChild("native", ...ngDevMode ? [{ debugName: "nativeSelect" }] : 	/* istanbul ignore next */ []);
 	defaults = inject(BF_DEFAULTS);
 	labels = inject(BF_LABELS);
-	pickedLabels = signal([], ...ngDevMode ? [{ debugName: "pickedLabels" }] : 	/* istanbul ignore next */ []);
+	document = inject(DOCUMENT);
+	coarse = signal(false, ...ngDevMode ? [{ debugName: "coarse" }] : 	/* istanbul ignore next */ []);
 	resolvedSize = computed(() => this.size() ?? this.defaults.fieldSize, ...ngDevMode ? [{ debugName: "resolvedSize" }] : 	/* istanbul ignore next */ []);
+	selectedIndex = computed(() => ɵchoiceIndex(this.options(), this.value(), this.compareWith()), ...ngDevMode ? [{ debugName: "selectedIndex" }] : 	/* istanbul ignore next */ []);
+	selectedLabel = computed(() => this.options()[this.selectedIndex()]?.label ?? null, ...ngDevMode ? [{ debugName: "selectedLabel" }] : 	/* istanbul ignore next */ []);
+	formKey = computed(() => {
+		const index = this.selectedIndex();
+		const option = this.options()[index];
+		return option ? ɵchoiceKey(option.value, index) : "";
+	}, ...ngDevMode ? [{ debugName: "formKey" }] : 	/* istanbul ignore next */ []);
+	listOptions = computed(() => this.options().map(({ value, label, disabled }) => ({
+		value,
+		label,
+		disabled
+	})), ...ngDevMode ? [{ debugName: "listOptions" }] : 	/* istanbul ignore next */ []);
 	core = new ComboboxCore({
-		options: this.options,
-		filter: this.filter,
-		isSelected: (option) => this.indexOf(option.value) >= 0,
-		pick: (item) => this.toggle(item),
+		options: this.listOptions,
+		filter: signal(null),
+		isSelected: (option) => this.listOptions()[this.selectedIndex()] === option,
+		pick: (item) => this.pick(item),
 		anchor: () => this.anchorEl().nativeElement,
 		panel: BfComboboxListboxComponent,
 		listboxLabel: computed(() => this.label() || this.ariaLabel() || null),
 		listboxLabelledby: computed(() => this.label() ? null : this.ariaLabelledby() || null),
-		multiple: true,
-		loading: this.loading,
-		emptyText: computed(() => this.emptyLabel() || this.labels.comboboxEmpty),
+		multiple: false,
+		loading: signal(false),
+		emptyText: signal(""),
 		size: this.resolvedSize,
-		queried: (query) => this.queried.emit(query)
+		queried: () => void 0
 	});
-	tags = computed(() => {
-		const compare = this.compareWith();
-		return this.value().map((value) => {
-			return {
-				value,
-				label: this.options().find((o) => compare(o.value, value))?.label ?? this.pickedLabels().find((t) => compare(t.value, value))?.label ?? String(value)
-			};
-		});
-	}, ...ngDevMode ? [{ debugName: "tags" }] : 	/* istanbul ignore next */ []);
-	editable = computed(() => !this.disabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "editable" }] : 	/* istanbul ignore next */ []);
 	errorText = computed(() => ɵfieldErrorText(this.errorMessage(), this.touched(), this.errors(), this.labels.validation), ...ngDevMode ? [{ debugName: "errorText" }] : 	/* istanbul ignore next */ []);
 	showError = computed(() => ɵfieldShowsError(this.errorText(), this.invalid(), this.touched()), ...ngDevMode ? [{ debugName: "showError" }] : 	/* istanbul ignore next */ []);
 	describedBy = computed(() => ɵfieldDescribedBy(this.id(), this.errorText(), this.helpText()), ...ngDevMode ? [{ debugName: "describedBy" }] : 	/* istanbul ignore next */ []);
 	errorMessageId = computed(() => ɵfieldErrorMessageId(this.id(), this.errorText(), this.showError()), ...ngDevMode ? [{ debugName: "errorMessageId" }] : 	/* istanbul ignore next */ []);
 	ariaLabelAttr = computed(() => this.label() ? null : this.ariaLabel() || null, ...ngDevMode ? [{ debugName: "ariaLabelAttr" }] : 	/* istanbul ignore next */ []);
 	ariaLabelledbyAttr = computed(() => this.label() ? null : this.ariaLabelledby() || null, ...ngDevMode ? [{ debugName: "ariaLabelledbyAttr" }] : 	/* istanbul ignore next */ []);
-	boxClasses = computed(() => {
-		const size = this.resolvedSize();
-		const mode = this.disabled() ? "disabled" : this.readonly() ? "readonly" : "editable";
-		return [
-			BOX,
-			BOX_SIZE[size],
-			ɵFIELD_PADDING_START[size].text,
-			COMBOBOX_PADDING_END[size],
-			COMBOBOX_CHEVRON,
-			COMBOBOX_CHEVRON_INSET[size],
-			MODE[mode],
-			mode === "disabled" ? "" : this.showError() ? "border-danger-border hover:not-focus-within:border-danger" : "border-border-strong hover:not-focus-within:border-text-muted"
-		].filter(Boolean).join(" ");
-	}, ...ngDevMode ? [{ debugName: "boxClasses" }] : 	/* istanbul ignore next */ []);
-	inputClasses = INPUT;
-	tagClasses = TAG;
-	removeClasses = REMOVE;
-	crossClasses = CROSS;
+	wrapperClasses = computed(() => `${COMBOBOX_CHEVRON} ${COMBOBOX_CHEVRON_INSET[this.resolvedSize()]}`, ...ngDevMode ? [{ debugName: "wrapperClasses" }] : 	/* istanbul ignore next */ []);
+	classes = computed(() => [
+		BASE,
+		ɵFIELD_BOX[this.resolvedSize()],
+		ɵFIELD_PADDING_START[this.resolvedSize()].text,
+		COMBOBOX_PADDING_END[this.resolvedSize()],
+		MODE[this.readonly() ? "readonly" : "editable"],
+		this.showError() ? "border-danger-border hover:border-danger" : "border-border-strong hover:border-text-muted",
+		this.selectedIndex() === -1 ? "text-text-muted" : ""
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "classes" }] : 	/* istanbul ignore next */ []);
+	typeahead = "";
+	typedAt = 0;
 	constructor() {
-		afterRenderEffect({ write: () => {
-			this.tags();
-			this.core.reposition();
-		} });
+		const media = this.document.defaultView?.matchMedia?.("(pointer: coarse)");
+		if (media) {
+			this.coarse.set(media.matches);
+			const onChange = (event) => this.coarse.set(event.matches);
+			media.addEventListener?.("change", onChange);
+			inject(DestroyRef).onDestroy(() => media.removeEventListener?.("change", onChange));
+		}
+		effect(() => {
+			if (this.coarse() || this.disabled() || this.readonly()) this.core.close();
+		});
 	}
 	focus(options) {
-		this.el().nativeElement.focus(options);
+		const native = this.nativeSelect();
+		if (native) native.focus(options);
+		else this.fieldEl()?.nativeElement.focus(options);
 	}
-	onInput(el) {
-		if (this.editable()) this.core.typed(el.value);
+	onHostClick(event) {
+		if (!this.coarse() && !this.disabled() && event.target instanceof Element && event.target.closest("label")) this.focus();
 	}
 	onClick() {
-		if (this.editable()) this.core.open();
-	}
-	onBoxMousedown(event) {
-		const target = event.target;
-		if (!(target instanceof Element) || target.closest("button, input") || this.disabled()) return;
-		event.preventDefault();
-		this.focus();
-		this.onClick();
+		if (this.core.isOpen()) this.core.close();
+		else this.openList();
 	}
 	onKeydown(event) {
-		if (!this.editable() || this.core.keydown(event)) return;
-		const query = this.core.query() ?? "";
-		if (event.key === "Backspace" && query === "" && this.value().length) {
+		if (this.disabled()) return;
+		if (this.readonly()) {
+			if (SCROLL_KEYS.has(event.key)) event.preventDefault();
+			return;
+		}
+		const key = event.key;
+		if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && (key !== " " || this.typing())) {
+			this.search(key);
 			event.preventDefault();
-			this.remove(this.value().length - 1);
-		} else if (event.key === "Escape" && !this.core.isOpen() && query !== "") this.resetQuery(null);
+			return;
+		}
+		if (!this.core.isOpen()) {
+			if (key === "Enter" || key === " " || key === "ArrowDown" || key === "ArrowUp") {
+				this.openList();
+				event.preventDefault();
+			}
+			return;
+		}
+		switch (key) {
+			case " ":
+				this.pickActive();
+				event.preventDefault();
+				return;
+			case "Tab":
+				this.pickActive();
+				this.core.close();
+				return;
+			case "PageUp":
+			case "PageDown":
+				this.page(key === "PageDown" ? PAGE : -10);
+				event.preventDefault();
+				return;
+			default: this.core.keydown(event);
+		}
 	}
 	onBlur(event) {
 		this.core.close();
-		this.resetQuery(null);
 		this.blurred.emit(event);
 		this.touch.emit();
 	}
-	remove(index) {
-		const next = this.value().filter((_, i) => i !== index);
-		this.value.set(next);
-		this.changed.emit(next);
-		this.focus();
+	openList() {
+		if (this.disabled() || this.readonly() || this.core.isOpen()) return;
+		const items = this.enabledItems();
+		if (!items.length) return;
+		this.core.open();
+		const selected = items.find((item) => this.core.host.isSelected(item.option));
+		this.core.activate(selected ?? items[0]);
 	}
-	toggle(item) {
-		const at = this.indexOf(item.option.value);
-		let next;
-		if (at >= 0) next = this.value().filter((_, i) => i !== at);
-		else {
-			next = [...this.value(), item.option.value];
-			const tag = {
-				value: item.option.value,
-				label: item.option.label
-			};
-			this.pickedLabels.update((tags) => [...tags, tag]);
-		}
-		this.value.set(next);
-		this.changed.emit(next);
-		this.resetQuery("");
+	pick(item) {
+		if (this.listOptions().indexOf(item.option) !== this.selectedIndex()) {
+			this.value.set(item.option.value);
+			this.changed.emit(item.option.value);
+		}
+		this.core.close();
 	}
-	indexOf(value) {
-		const compare = this.compareWith();
-		return this.value().findIndex((v) => compare(value, v));
+	pickActive() {
+		const active = this.core.active();
+		if (active) this.pick(active);
+	}
+	page(step) {
+		const items = this.enabledItems();
+		const at = items.findIndex((item) => item.index === this.core.active()?.index);
+		const item = items[Math.min(Math.max((at < 0 ? 0 : at) + step, 0), items.length - 1)];
+		if (item) this.core.activate(item);
+	}
+	typing() {
+		return this.typeahead !== "" && Date.now() - this.typedAt <= TYPEAHEAD_MS;
+	}
+	search(key) {
+		this.typeahead = (this.typing() ? this.typeahead : "") + key;
+		this.typedAt = Date.now();
+		const typed = foldText(this.typeahead);
+		const repeated = [...typed].every((char) => char === typed[0]);
+		const query = repeated ? typed[0] : typed;
+		const items = this.enabledItems();
+		const from = this.core.isOpen() ? this.core.active() : items.find((item) => this.core.host.isSelected(item.option));
+		const at = from ? items.findIndex((item) => item.index === from.index) : -1;
+		const start = at < 0 ? 0 : repeated ? at + 1 : at;
+		const match = [...items.slice(start), ...items.slice(0, start)].find((item) => foldText(item.option.label).startsWith(query));
+		if (match) {
+			this.openList();
+			this.core.activate(match);
+		}
 	}
-	resetQuery(query) {
-		this.core.setQuery(query);
-		this.el().nativeElement.value = "";
+	enabledItems() {
+		return this.core.items().filter((item) => !item.option.disabled);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.1.7",
 		ngImport: i0,
-		type: BfMultiComboboxComponent,
+		type: BfSelectComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.1.7",
-		type: BfMultiComboboxComponent,
+		type: BfSelectComponent,
 		isStandalone: true,
-		selector: "bf-multi-combobox",
+		selector: "bf-select",
 		inputs: {
 			value: {
 				classPropertyName: "value",
@@ -5330,13 +6713,6 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
-			filter: {
-				classPropertyName: "filter",
-				publicName: "filter",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
 			size: {
 				classPropertyName: "size",
 				publicName: "size",
@@ -5386,20 +6762,6 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
-			emptyLabel: {
-				classPropertyName: "emptyLabel",
-				publicName: "emptyLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			loading: {
-				classPropertyName: "loading",
-				publicName: "loading",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -5460,87 +6822,116 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 		outputs: {
 			value: "valueChange",
 			changed: "changed",
-			queried: "queried",
 			focused: "focused",
 			blurred: "blurred",
 			touch: "touch"
 		},
 		host: {
+			listeners: { "click": "onHostClick($event)" },
 			properties: { "attr.id": "null" },
 			classAttribute: "block"
 		},
-		viewQueries: [{
-			propertyName: "el",
-			first: true,
-			predicate: ["el"],
-			descendants: true,
-			isSignal: true
-		}, {
-			propertyName: "anchorEl",
-			first: true,
-			predicate: ["anchor"],
-			descendants: true,
-			isSignal: true
-		}],
+		viewQueries: [
+			{
+				propertyName: "fieldEl",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "anchorEl",
+				first: true,
+				predicate: ["anchor"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "nativeSelect",
+				first: true,
+				predicate: ["native"],
+				descendants: true,
+				isSignal: true
+			}
+		],
 		ngImport: i0,
 		template: `
-    <bf-field
-      [label]="label()"
-      [helpText]="helpText()"
-      [error]="errorText()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [controlId]="id()"
-    >
-      <!-- A press on the box outside the tags puts the caret in the input. -->
-      <div #anchor [class]="boxClasses()" (mousedown)="onBoxMousedown($event)">
-        @for (tag of tags(); track $index) {
-          <span data-chip [class]="tagClasses">
-            <span data-label class="min-w-0 truncate">{{ tag.label }}</span>
-            @if (editable()) {
-              <button
-                type="button"
-                [class]="removeClasses"
-                [attr.aria-label]="labels.comboboxRemove(tag.label)"
-                (click)="remove($index)"
-              >
-                <span aria-hidden="true" [class]="crossClasses"></span>
-              </button>
-            } @else {
-              <span class="pe-2"></span>
-            }
-          </span>
+    @if (coarse()) {
+      <bf-native-select
+        #native
+        [options]="options()"
+        [compareWith]="compareWith()"
+        [size]="size()"
+        [label]="label()"
+        [ariaLabel]="ariaLabel()"
+        [ariaLabelledby]="ariaLabelledby()"
+        [placeholder]="placeholder()"
+        [helpText]="helpText()"
+        [errorMessage]="errorMessage()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [invalid]="invalid()"
+        [touched]="touched()"
+        [errors]="errors()"
+        [name]="name()"
+        [id]="id()"
+        [(value)]="value"
+        (changed)="changed.emit($event)"
+        (focused)="focused.emit($event)"
+        (blurred)="blurred.emit($event)"
+        (touch)="touch.emit()"
+      />
+    } @else {
+      <bf-field
+        #box
+        [label]="label()"
+        [helpText]="helpText()"
+        [error]="errorText()"
+        [required]="required()"
+        [disabled]="disabled()"
+        [controlId]="id()"
+      >
+        <div #anchor [class]="wrapperClasses()">
+          <div
+            #field
+            role="combobox"
+            aria-haspopup="listbox"
+            [id]="id()"
+            [attr.tabindex]="disabled() ? null : 0"
+            [attr.aria-disabled]="disabled() ? 'true' : null"
+            [attr.aria-readonly]="readonly() ? 'true' : null"
+            [attr.aria-required]="required() ? 'true' : null"
+            [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
+            [attr.aria-controls]="core.controls()"
+            [attr.aria-activedescendant]="core.active()?.id ?? null"
+            [attr.aria-label]="ariaLabelAttr()"
+            [attr.aria-labelledby]="label() ? box.labelId() : ariaLabelledbyAttr()"
+            [attr.aria-invalid]="showError() ? 'true' : null"
+            [attr.aria-describedby]="describedBy()"
+            [attr.aria-errormessage]="errorMessageId()"
+            [attr.data-placeholder]="selectedIndex() === -1 ? '' : null"
+            [class]="classes()"
+            (click)="onClick()"
+            (keydown)="onKeydown($event)"
+            (focus)="focused.emit($event)"
+            (blur)="onBlur($event)"
+          >
+            <span class="min-w-0 truncate">{{ selectedLabel() ?? placeholder() }}</span>
+          </div>
+        </div>
+        @if (name()) {
+          <input type="hidden" [name]="name()" [value]="formKey()" [disabled]="disabled()" />
         }
-        <input
-          #el
-          type="text"
-          role="combobox"
-          autocomplete="off"
-          aria-autocomplete="list"
-          [id]="id()"
-          [attr.name]="name() || null"
-          [value]="core.query() ?? ''"
-          [placeholder]="tags().length ? '' : placeholder()"
-          [disabled]="disabled()"
-          [readOnly]="readonly()"
-          [required]="required() && !tags().length"
-          [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
-          [attr.aria-controls]="core.controls()"
-          [attr.aria-activedescendant]="core.active()?.id ?? null"
-          [attr.aria-label]="ariaLabelAttr()"
-          [attr.aria-labelledby]="ariaLabelledbyAttr()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="describedBy()"
-          [attr.aria-errormessage]="errorMessageId()"
-          [class]="inputClasses"
-          (input)="onInput(el)"
-          (keydown)="onKeydown($event)"
-          (click)="onClick()"
-          (focus)="focused.emit($event)"
-          (blur)="onBlur($event)"
-        />
-      </div>
-    </bf-field>
+        <!-- The option labels for BfSelectHarness, readable while the list cannot open (disabled,
+             read-only); hidden, so never rendered or announced. -->
+        <span hidden data-bf-select-options>
+          @for (option of options(); track $index) {
+            <span [attr.data-disabled]="option.disabled ? '' : null">{{ option.label }}</span>
+          }
+        </span>
+      </bf-field>
+    }
   `,
 		isInline: true,
 		dependencies: [{
@@ -5555,6 +6946,37 @@ var BfMultiComboboxComponent = class BfMultiComboboxComponent {
 				"disabled",
 				"controlId"
 			]
+		}, {
+			kind: "component",
+			type: ɵBfNativeSelectComponent,
+			selector: "bf-native-select",
+			inputs: [
+				"value",
+				"options",
+				"compareWith",
+				"size",
+				"label",
+				"ariaLabel",
+				"ariaLabelledby",
+				"placeholder",
+				"helpText",
+				"errorMessage",
+				"disabled",
+				"readonly",
+				"required",
+				"invalid",
+				"touched",
+				"errors",
+				"name",
+				"id"
+			],
+			outputs: [
+				"valueChange",
+				"changed",
+				"focused",
+				"blurred",
+				"touch"
+			]
 		}]
 	});
 };
@@ -5562,74 +6984,94 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.1.7",
 	ngImport: i0,
-	type: BfMultiComboboxComponent,
+	type: BfSelectComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "bf-multi-combobox",
-			imports: [BfFieldComponent],
+			selector: "bf-select",
+			imports: [BfFieldComponent, ɵBfNativeSelectComponent],
 			host: {
 				class: "block",
-				"[attr.id]": "null"
+				"[attr.id]": "null",
+				"(click)": "onHostClick($event)"
 			},
 			template: `
-    <bf-field
-      [label]="label()"
-      [helpText]="helpText()"
-      [error]="errorText()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [controlId]="id()"
-    >
-      <!-- A press on the box outside the tags puts the caret in the input. -->
-      <div #anchor [class]="boxClasses()" (mousedown)="onBoxMousedown($event)">
-        @for (tag of tags(); track $index) {
-          <span data-chip [class]="tagClasses">
-            <span data-label class="min-w-0 truncate">{{ tag.label }}</span>
-            @if (editable()) {
-              <button
-                type="button"
-                [class]="removeClasses"
-                [attr.aria-label]="labels.comboboxRemove(tag.label)"
-                (click)="remove($index)"
-              >
-                <span aria-hidden="true" [class]="crossClasses"></span>
-              </button>
-            } @else {
-              <span class="pe-2"></span>
-            }
-          </span>
+    @if (coarse()) {
+      <bf-native-select
+        #native
+        [options]="options()"
+        [compareWith]="compareWith()"
+        [size]="size()"
+        [label]="label()"
+        [ariaLabel]="ariaLabel()"
+        [ariaLabelledby]="ariaLabelledby()"
+        [placeholder]="placeholder()"
+        [helpText]="helpText()"
+        [errorMessage]="errorMessage()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [invalid]="invalid()"
+        [touched]="touched()"
+        [errors]="errors()"
+        [name]="name()"
+        [id]="id()"
+        [(value)]="value"
+        (changed)="changed.emit($event)"
+        (focused)="focused.emit($event)"
+        (blurred)="blurred.emit($event)"
+        (touch)="touch.emit()"
+      />
+    } @else {
+      <bf-field
+        #box
+        [label]="label()"
+        [helpText]="helpText()"
+        [error]="errorText()"
+        [required]="required()"
+        [disabled]="disabled()"
+        [controlId]="id()"
+      >
+        <div #anchor [class]="wrapperClasses()">
+          <div
+            #field
+            role="combobox"
+            aria-haspopup="listbox"
+            [id]="id()"
+            [attr.tabindex]="disabled() ? null : 0"
+            [attr.aria-disabled]="disabled() ? 'true' : null"
+            [attr.aria-readonly]="readonly() ? 'true' : null"
+            [attr.aria-required]="required() ? 'true' : null"
+            [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
+            [attr.aria-controls]="core.controls()"
+            [attr.aria-activedescendant]="core.active()?.id ?? null"
+            [attr.aria-label]="ariaLabelAttr()"
+            [attr.aria-labelledby]="label() ? box.labelId() : ariaLabelledbyAttr()"
+            [attr.aria-invalid]="showError() ? 'true' : null"
+            [attr.aria-describedby]="describedBy()"
+            [attr.aria-errormessage]="errorMessageId()"
+            [attr.data-placeholder]="selectedIndex() === -1 ? '' : null"
+            [class]="classes()"
+            (click)="onClick()"
+            (keydown)="onKeydown($event)"
+            (focus)="focused.emit($event)"
+            (blur)="onBlur($event)"
+          >
+            <span class="min-w-0 truncate">{{ selectedLabel() ?? placeholder() }}</span>
+          </div>
+        </div>
+        @if (name()) {
+          <input type="hidden" [name]="name()" [value]="formKey()" [disabled]="disabled()" />
         }
-        <input
-          #el
-          type="text"
-          role="combobox"
-          autocomplete="off"
-          aria-autocomplete="list"
-          [id]="id()"
-          [attr.name]="name() || null"
-          [value]="core.query() ?? ''"
-          [placeholder]="tags().length ? '' : placeholder()"
-          [disabled]="disabled()"
-          [readOnly]="readonly()"
-          [required]="required() && !tags().length"
-          [attr.aria-expanded]="core.isOpen() ? 'true' : 'false'"
-          [attr.aria-controls]="core.controls()"
-          [attr.aria-activedescendant]="core.active()?.id ?? null"
-          [attr.aria-label]="ariaLabelAttr()"
-          [attr.aria-labelledby]="ariaLabelledbyAttr()"
-          [attr.aria-invalid]="showError() ? 'true' : null"
-          [attr.aria-describedby]="describedBy()"
-          [attr.aria-errormessage]="errorMessageId()"
-          [class]="inputClasses"
-          (input)="onInput(el)"
-          (keydown)="onKeydown($event)"
-          (click)="onClick()"
-          (focus)="focused.emit($event)"
-          (blur)="onBlur($event)"
-        />
-      </div>
-    </bf-field>
+        <!-- The option labels for BfSelectHarness, readable while the list cannot open (disabled,
+             read-only); hidden, so never rendered or announced. -->
+        <span hidden data-bf-select-options>
+          @for (option of options(); track $index) {
+            <span [attr.data-disabled]="option.disabled ? '' : null">{{ option.label }}</span>
+          }
+        </span>
+      </bf-field>
+    }
   `
 		}]
 	}],
@@ -5662,14 +7104,6 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		filter: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "filter",
-				required: false
-			}]
-		}],
 		size: [{
 			type: i0.Input,
 			args: [{
@@ -5726,22 +7160,6 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		emptyLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "emptyLabel",
-				required: false
-			}]
-		}],
-		loading: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "loading",
-				required: false
-			}]
-		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{
@@ -5810,10 +7228,6 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["changed"]
 		}],
-		queried: [{
-			type: i0.Output,
-			args: ["queried"]
-		}],
 		focused: [{
 			type: i0.Output,
 			args: ["focused"]
@@ -5826,16 +7240,26 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["touch"]
 		}],
-		el: [{
+		fieldEl: [{
 			type: i0.ViewChild,
-			args: ["el", { isSignal: true }]
+			args: ["field", { isSignal: true }]
 		}],
 		anchorEl: [{
 			type: i0.ViewChild,
-			args: ["anchor", { isSignal: true }]
+			args: ["anchor", { isSignal: true }]
+		}],
+		nativeSelect: [{
+			type: i0.ViewChild,
+			args: ["native", { isSignal: true }]
 		}]
 	}
 });
+function provideBfSelect() {
+	return makeEnvironmentProviders([{
+		provide: BF_TABLE_SORT_SELECT,
+		useValue: BfSelectComponent
+	}]);
+}
 const DATE_KINDS = [
 	"day",
 	"month",
@@ -6171,7 +7595,7 @@ function localDate(iso) {
 	return date;
 }
 var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
-	overlay = inject(Overlay);
+	environment = inject(EnvironmentInjector);
 	document = inject(DOCUMENT);
 	injector = inject(Injector);
 	viewContainer = inject(ViewContainerRef);
@@ -6379,6 +7803,7 @@ var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
 	}, ...ngDevMode ? [{ debugName: "timeOptionViews" }] : 	/* istanbul ignore next */ []);
 	activeOptionId = computed(() => this.timeOptionViews().find((option) => option.active)?.id ?? null, ...ngDevMode ? [{ debugName: "activeOptionId" }] : 	/* istanbul ignore next */ []);
 	anchored = null;
+	motion = new AnchoredMotion();
 	subscriptions = [];
 	stopNavigation = null;
 	constructor() {
@@ -6389,7 +7814,10 @@ var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
 			media.addEventListener?.("change", onChange);
 			inject(DestroyRef).onDestroy(() => media.removeEventListener?.("change", onChange));
 		}
-		inject(DestroyRef).onDestroy(() => this.teardown());
+		inject(DestroyRef).onDestroy(() => {
+			this.teardown(false);
+			this.motion.flush();
+		});
 	}
 	focus(options) {
 		const native = this.hostEl.querySelector("input");
@@ -6404,15 +7832,16 @@ var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
 	openPicker() {
 		const box = this.box()?.nativeElement;
 		if (this.anchored || !box || !this.picker() || this.disabled() || this.readonly()) return;
+		this.motion.flush();
 		const direction = getComputedStyle(box).direction === "rtl" ? "rtl" : "ltr";
-		const anchored = createAnchoredOverlay(this.overlay, box, {
+		const anchored = createAnchoredOverlay(this.environment, box, {
 			positions: blockPositions("below-start"),
 			direction,
 			panelClass: ["bf-date-time-panel"]
 		});
 		this.anchored = anchored;
 		this.activeTime.set(this.initialTime());
-		anchored.ref.attach(new TemplatePortal(this.panel(), this.viewContainer, void 0, this.injector));
+		const view = anchored.ref.attach(new TemplatePortal(this.panel(), this.viewContainer, void 0, this.injector));
 		const pane = anchored.ref.overlayElement;
 		this.subscriptions = [anchored.ref.keydownEvents().subscribe((event) => {
 			if (event.key === "Escape") {
@@ -6428,11 +7857,12 @@ var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
 		pane.addEventListener("keydown", (event) => this.tabbed(event, pane));
 		this.stopNavigation = watchPathChange(this.location, () => this.closePicker(false));
 		this.pickerOpen.set(true);
+		this.motion.enter(anchored.ref, box, view);
 		afterNextRender(() => this.focusPanel(pane), { injector: this.injector });
 	}
 	closePicker(restoreFocus = true) {
 		if (!this.anchored) return;
-		this.teardown();
+		this.teardown(true);
 		this.pickerOpen.set(false);
 		if (restoreFocus) this.trigger()?.nativeElement.focus({ preventScroll: true });
 		else if (!this.hostEl.contains(this.document.activeElement)) this.markLeft();
@@ -6710,13 +8140,16 @@ var BfDateTimeFieldComponent = class BfDateTimeFieldComponent {
 		if (event.shiftKey) event.preventDefault();
 		this.closePicker(true);
 	}
-	teardown() {
+	teardown(animate) {
 		this.subscriptions.forEach((s) => s.unsubscribe());
 		this.subscriptions = [];
 		this.stopNavigation?.();
 		this.stopNavigation = null;
-		this.anchored?.ref.dispose();
+		const ref = this.anchored?.ref;
 		this.anchored = null;
+		const box = this.box()?.nativeElement;
+		if (ref && animate && box) this.motion.leave(ref, box);
+		else ref?.dispose();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -9198,6 +10631,639 @@ 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, 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 };
+function onScreen(rect, view) {
+	if (!view || rect.width <= 0 || rect.height <= 0) return false;
+	return rect.bottom > 0 && rect.right > 0 && rect.top < view.innerHeight && rect.left < view.innerWidth;
+}
+function zoomedFrame(frame, origin, radius) {
+	if (frame.width <= 0 || frame.height <= 0 || origin.width <= 0 || origin.height <= 0) return null;
+	const scale = Math.max(origin.width / frame.width, origin.height / frame.height);
+	const dx = origin.left + origin.width / 2 - (frame.left + frame.width / 2);
+	const dy = origin.top + origin.height / 2 - (frame.top + frame.height / 2);
+	const insetX = Math.max(0, (frame.width - origin.width / scale) / 2);
+	const insetY = Math.max(0, (frame.height - origin.height / scale) / 2);
+	const round = radius > 0 ? radius / scale : 0;
+	return {
+		transform: `translate(${dx}px, ${dy}px) scale(${scale})`,
+		clipPath: `inset(${insetY}px ${insetX}px round ${round}px)`
+	};
+}
+const OPEN_FRAME = {
+	transform: "none",
+	clipPath: "inset(0px 0px round 0px)"
+};
+function fade(el, entering, duration, easing) {
+	return animateOrSettle(el, entering ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }], {
+		duration,
+		easing,
+		fill: entering ? "backwards" : "forwards"
+	});
+}
+function playViewerMotion(parts, origin, entering, reduced) {
+	if (reduced) return fade(parts.host, entering, 150, "linear");
+	const view = parts.host.ownerDocument.defaultView;
+	const originRect = origin?.isConnected ? origin.getBoundingClientRect() : null;
+	const zoomed = origin && originRect && onScreen(originRect, view) ? zoomedFrame(parts.frame.getBoundingClientRect(), originRect, radiusOf(origin, view)) : null;
+	if (!zoomed) return fade(parts.host, entering, 260, OVERLAY_EASING);
+	for (const el of parts.chrome) fade(el, entering, 260, OVERLAY_EASING);
+	return animateOrSettle(parts.frame, entering ? [zoomed, OPEN_FRAME] : [OPEN_FRAME, zoomed], {
+		duration: 260,
+		easing: OVERLAY_EASING,
+		fill: entering ? "backwards" : "forwards"
+	});
+}
+function radiusOf(origin, view) {
+	const value = view?.getComputedStyle(origin).borderTopLeftRadius ?? "";
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+var BfImageViewerRef = class {
+	overlayRef;
+	id;
+	images;
+	afterClosed;
+	closed;
+	current;
+	index;
+	constructor(overlayRef, images, start) {
+		this.overlayRef = overlayRef;
+		this.id = overlayRef.id;
+		this.images = images;
+		this.current = signal(start, ...ngDevMode ? [{ debugName: "current" }] : 		/* istanbul ignore next */ []);
+		this.index = this.current.asReadonly();
+		this.afterClosed = overlayRef.afterClosed.then(() => void 0);
+		this.closed = overlayRef.closed;
+	}
+	next() {
+		this.goTo(this.current() + 1);
+	}
+	previous() {
+		this.goTo(this.current() - 1);
+	}
+	goTo(index) {
+		const count = this.images.length;
+		if (count === 0 || !Number.isFinite(index)) return;
+		this.current.set((Math.trunc(index) % count + count) % count);
+	}
+	close() {
+		this.overlayRef.close();
+	}
+};
+const BF_IMAGE_VIEWER_CONTEXT = new InjectionToken("BF_IMAGE_VIEWER_CONTEXT");
+const KEEP_OPEN = "[data-frame], button, a, input, select, textarea, label, [data-caption], [data-actions]";
+const FRAME = "relative max-h-full max-w-full";
+const FRAME_SIZED = "aspect-(--bf-image-viewer-ratio) w-[min(100cqw,calc(100cqh*var(--bf-image-viewer-ratio)))]";
+const NAV = "pointer-events-auto absolute top-1/2 -translate-y-1/2";
+var BfImageViewerComponent = class BfImageViewerComponent {
+	labels = inject(BF_LABELS);
+	ref = inject(BfImageViewerRef);
+	context = inject(BF_IMAGE_VIEWER_CONTEXT);
+	injector = inject(Injector);
+	document = inject(DOCUMENT);
+	host = inject(ElementRef);
+	closeIcon = X;
+	previousIcon = ChevronLeft;
+	nextIcon = ChevronRight;
+	previousClasses = `${NAV} start-3`;
+	nextClasses = `${NAV} end-3`;
+	frame = viewChild.required("frame", ...ngDevMode ? [{ debugName: "frame" }] : 	/* istanbul ignore next */ []);
+	scrim = viewChild.required("scrim", ...ngDevMode ? [{ debugName: "scrim" }] : 	/* istanbul ignore next */ []);
+	top = viewChild.required("top", ...ngDevMode ? [{ debugName: "top" }] : 	/* istanbul ignore next */ []);
+	bottom = viewChild.required("bottom", ...ngDevMode ? [{ debugName: "bottom" }] : 	/* istanbul ignore next */ []);
+	statuses = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "statuses" }] : 	/* istanbul ignore next */ []);
+	ratios = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "ratios" }] : 	/* istanbul ignore next */ []);
+	count = computed(() => this.ref.images.length, ...ngDevMode ? [{ debugName: "count" }] : 	/* istanbul ignore next */ []);
+	index = this.ref.index;
+	image = computed(() => this.ref.images[this.index()] ?? {
+		src: "",
+		label: ""
+	}, ...ngDevMode ? [{ debugName: "image" }] : 	/* istanbul ignore next */ []);
+	status = computed(() => this.statuses().get(this.index()) ?? "pending", ...ngDevMode ? [{ debugName: "status" }] : 	/* istanbul ignore next */ []);
+	shown = computed(() => this.status() === "error" ? [] : [{
+		index: this.index(),
+		image: this.image()
+	}], ...ngDevMode ? [{ debugName: "shown" }] : 	/* istanbul ignore next */ []);
+	counter = computed(() => this.labels.imageViewerPosition(this.index() + 1, this.count()), ...ngDevMode ? [{ debugName: "counter" }] : 	/* istanbul ignore next */ []);
+	stepped = linkedSignal({
+		...ngDevMode ? { debugName: "stepped" } : 		/* istanbul ignore next */ {},
+		source: this.index,
+		computation: (_, previous) => previous !== void 0
+	});
+	announcement = computed(() => {
+		if (!this.stepped()) return "";
+		const alt = this.image().label;
+		return alt ? `${this.counter()}, ${alt}` : this.counter();
+	}, ...ngDevMode ? [{ debugName: "announcement" }] : 	/* istanbul ignore next */ []);
+	placeholder = computed(() => {
+		if (this.status() === "loaded") return null;
+		const img = thumbnailImage(this.originFor(this.index()));
+		if (!img) return null;
+		const src = img.currentSrc ? img.currentSrc : img.getAttribute("src");
+		return src === "" ? null : src;
+	}, ...ngDevMode ? [{ debugName: "placeholder" }] : 	/* istanbul ignore next */ []);
+	ratio = computed(() => {
+		const own = this.ratios().get(this.index());
+		if (own) return own;
+		const img = thumbnailImage(this.originFor(this.index()));
+		return img && img.naturalWidth > 0 && img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : null;
+	}, ...ngDevMode ? [{ debugName: "ratio" }] : 	/* istanbul ignore next */ []);
+	frameClasses = computed(() => this.ratio() ? `${FRAME} ${FRAME_SIZED}` : `${FRAME} size-full`, ...ngDevMode ? [{ debugName: "frameClasses" }] : 	/* istanbul ignore next */ []);
+	actionsContext = computed(() => ({
+		$implicit: this.image(),
+		index: this.index(),
+		ref: this.ref
+	}), ...ngDevMode ? [{ debugName: "actionsContext" }] : 	/* istanbul ignore next */ []);
+	constructor() {
+		this.context.register(this);
+	}
+	enter() {
+		return playViewerMotion(this.parts(), this.originFor(this.index()), true, this.reduced());
+	}
+	exit() {
+		return playViewerMotion(this.parts(), this.originFor(this.index()), false, this.reduced());
+	}
+	imageLoaded(event, index) {
+		const img = event.target;
+		if (img instanceof HTMLImageElement && img.naturalWidth > 0 && img.naturalHeight > 0) {
+			const ratio = img.naturalWidth / img.naturalHeight;
+			this.ratios.update((map) => new Map(map).set(index, ratio));
+		}
+		this.statuses.update((map) => new Map(map).set(index, "loaded"));
+	}
+	imageFailed(index) {
+		this.statuses.update((map) => new Map(map).set(index, "error"));
+	}
+	keydown(event) {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const target = event.target;
+		if (target instanceof HTMLElement && (target.isContentEditable || target.matches("input, textarea, select"))) return;
+		const rtl = this.document.defaultView?.getComputedStyle(this.host.nativeElement).direction === "rtl";
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const backward = rtl ? "ArrowRight" : "ArrowLeft";
+		switch (event.key) {
+			case forward:
+				this.ref.next();
+				break;
+			case backward:
+				this.ref.previous();
+				break;
+			case "Home":
+				this.ref.goTo(0);
+				break;
+			case "End":
+				this.ref.goTo(this.count() - 1);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	}
+	clicked(event) {
+		const target = event.target;
+		if (target instanceof Element && !target.closest(KEEP_OPEN)) this.ref.close();
+	}
+	originFor(index) {
+		const origin = this.context.origin;
+		if (typeof origin === "function") return origin(index) ?? null;
+		return index === this.context.start ? origin : null;
+	}
+	parts() {
+		const host = this.host.nativeElement;
+		const navigation = Array.from(host.querySelectorAll("bf-icon-button[data-chrome]"));
+		return {
+			host,
+			frame: this.frame().nativeElement,
+			chrome: [
+				this.scrim().nativeElement,
+				this.top().nativeElement,
+				this.bottom().nativeElement,
+				...navigation
+			]
+		};
+	}
+	reduced() {
+		return prefersReducedMotion(this.document.defaultView);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfImageViewerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfImageViewerComponent,
+		isStandalone: true,
+		selector: "bf-image-viewer",
+		host: {
+			attributes: { "data-bf-image-viewer": "" },
+			listeners: {
+				"keydown": "keydown($event)",
+				"click": "clicked($event)"
+			},
+			properties: {
+				"style.--bf-image-viewer-ratio": "ratio()",
+				"attr.data-index": "index()",
+				"attr.data-count": "count()",
+				"attr.data-label": "context.label"
+			},
+			classAttribute: "dark fixed inset-0 flex flex-col text-text"
+		},
+		viewQueries: [
+			{
+				propertyName: "frame",
+				first: true,
+				predicate: ["frame"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "scrim",
+				first: true,
+				predicate: ["scrim"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "top",
+				first: true,
+				predicate: ["top"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "bottom",
+				first: true,
+				predicate: ["bottom"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    <div #scrim data-scrim class="bg-scrim/90 absolute inset-0"></div>
+    <div #top data-chrome class="relative flex shrink-0 items-center gap-3 p-3">
+      <span data-counter class="text-label min-w-0 flex-1 ps-2" [class.invisible]="count() < 2">
+        {{ counter() }}
+      </span>
+      <bf-icon-button data-close cdkFocusInitial [label]="labels.close" (clicked)="ref.close()">
+        <bf-icon [icon]="closeIcon" />
+      </bf-icon-button>
+    </div>
+    <div class="relative min-h-0 flex-1">
+      <div
+        data-stage
+        class="[container-type:size] absolute inset-0 grid place-items-center px-3 sm:px-16"
+      >
+        <div #frame data-frame [attr.data-status]="status()" [class]="frameClasses()">
+          @if (placeholder(); as thumb) {
+            <img
+              data-placeholder
+              aria-hidden="true"
+              alt=""
+              class="absolute inset-0 size-full object-contain"
+              [src]="thumb"
+            />
+          }
+          @for (item of shown(); track item.index) {
+            <img
+              bfFadeIn
+              data-image
+              class="absolute inset-0 size-full object-contain"
+              animate.leave="opacity-0 transition-opacity duration-slow ease-md motion-reduce:transition-none"
+              [src]="item.image.src"
+              [alt]="item.image.label"
+              (load)="imageLoaded($event, item.index)"
+              (error)="imageFailed(item.index)"
+            />
+          }
+          @if (status() === 'pending') {
+            <div class="absolute inset-0 grid place-items-center">
+              <bf-spinner size="lg" />
+            </div>
+          } @else if (status() === 'error') {
+            <p
+              data-failed
+              class="text-body text-text-secondary absolute inset-0 grid place-items-center p-4 text-center"
+            >
+              {{ labels.imageLoadFailed }}
+            </p>
+          }
+        </div>
+      </div>
+      @if (count() > 1) {
+        <bf-icon-button
+          data-chrome
+          data-previous
+          [class]="previousClasses"
+          [label]="labels.imageViewerPrevious"
+          (clicked)="ref.previous()"
+        >
+          <bf-icon class="rtl:-scale-x-100" [icon]="previousIcon" />
+        </bf-icon-button>
+        <bf-icon-button
+          data-chrome
+          data-next
+          [class]="nextClasses"
+          [label]="labels.imageViewerNext"
+          (clicked)="ref.next()"
+        >
+          <bf-icon class="rtl:-scale-x-100" [icon]="nextIcon" />
+        </bf-icon-button>
+      }
+    </div>
+    <div
+      #bottom
+      data-chrome
+      class="relative flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-5 pt-2 pb-4 empty:hidden"
+    >
+      @if (image().caption; as caption) {
+        <p data-caption class="text-body min-w-0 flex-1 wrap-anywhere">{{ caption }}</p>
+      }
+      @if (context.actions; as actions) {
+        <div data-actions class="ms-auto flex flex-wrap items-center gap-2">
+          <ng-container
+            [ngTemplateOutlet]="actions"
+            [ngTemplateOutletContext]="actionsContext()"
+            [ngTemplateOutletInjector]="injector"
+          />
+        </div>
+      }
+    </div>
+    <div data-announcement aria-live="polite" class="sr-only">{{ announcement() }}</div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: BfFadeInDirective,
+				selector: "img[bfFadeIn]"
+			},
+			{
+				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"
+				]
+			},
+			{
+				kind: "component",
+				type: BfSpinnerComponent,
+				selector: "bf-spinner",
+				inputs: [
+					"size",
+					"label",
+					"decorative"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfImageViewerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-image-viewer",
+			imports: [
+				NgTemplateOutlet,
+				BfFadeInDirective,
+				BfIconButtonComponent,
+				BfIconComponent,
+				BfSpinnerComponent
+			],
+			host: {
+				class: "dark fixed inset-0 flex flex-col text-text",
+				"data-bf-image-viewer": "",
+				"[style.--bf-image-viewer-ratio]": "ratio()",
+				"[attr.data-index]": "index()",
+				"[attr.data-count]": "count()",
+				"[attr.data-label]": "context.label",
+				"(keydown)": "keydown($event)",
+				"(click)": "clicked($event)"
+			},
+			template: `
+    <div #scrim data-scrim class="bg-scrim/90 absolute inset-0"></div>
+    <div #top data-chrome class="relative flex shrink-0 items-center gap-3 p-3">
+      <span data-counter class="text-label min-w-0 flex-1 ps-2" [class.invisible]="count() < 2">
+        {{ counter() }}
+      </span>
+      <bf-icon-button data-close cdkFocusInitial [label]="labels.close" (clicked)="ref.close()">
+        <bf-icon [icon]="closeIcon" />
+      </bf-icon-button>
+    </div>
+    <div class="relative min-h-0 flex-1">
+      <div
+        data-stage
+        class="[container-type:size] absolute inset-0 grid place-items-center px-3 sm:px-16"
+      >
+        <div #frame data-frame [attr.data-status]="status()" [class]="frameClasses()">
+          @if (placeholder(); as thumb) {
+            <img
+              data-placeholder
+              aria-hidden="true"
+              alt=""
+              class="absolute inset-0 size-full object-contain"
+              [src]="thumb"
+            />
+          }
+          @for (item of shown(); track item.index) {
+            <img
+              bfFadeIn
+              data-image
+              class="absolute inset-0 size-full object-contain"
+              animate.leave="opacity-0 transition-opacity duration-slow ease-md motion-reduce:transition-none"
+              [src]="item.image.src"
+              [alt]="item.image.label"
+              (load)="imageLoaded($event, item.index)"
+              (error)="imageFailed(item.index)"
+            />
+          }
+          @if (status() === 'pending') {
+            <div class="absolute inset-0 grid place-items-center">
+              <bf-spinner size="lg" />
+            </div>
+          } @else if (status() === 'error') {
+            <p
+              data-failed
+              class="text-body text-text-secondary absolute inset-0 grid place-items-center p-4 text-center"
+            >
+              {{ labels.imageLoadFailed }}
+            </p>
+          }
+        </div>
+      </div>
+      @if (count() > 1) {
+        <bf-icon-button
+          data-chrome
+          data-previous
+          [class]="previousClasses"
+          [label]="labels.imageViewerPrevious"
+          (clicked)="ref.previous()"
+        >
+          <bf-icon class="rtl:-scale-x-100" [icon]="previousIcon" />
+        </bf-icon-button>
+        <bf-icon-button
+          data-chrome
+          data-next
+          [class]="nextClasses"
+          [label]="labels.imageViewerNext"
+          (clicked)="ref.next()"
+        >
+          <bf-icon class="rtl:-scale-x-100" [icon]="nextIcon" />
+        </bf-icon-button>
+      }
+    </div>
+    <div
+      #bottom
+      data-chrome
+      class="relative flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-5 pt-2 pb-4 empty:hidden"
+    >
+      @if (image().caption; as caption) {
+        <p data-caption class="text-body min-w-0 flex-1 wrap-anywhere">{{ caption }}</p>
+      }
+      @if (context.actions; as actions) {
+        <div data-actions class="ms-auto flex flex-wrap items-center gap-2">
+          <ng-container
+            [ngTemplateOutlet]="actions"
+            [ngTemplateOutletContext]="actionsContext()"
+            [ngTemplateOutletInjector]="injector"
+          />
+        </div>
+      }
+    </div>
+    <div data-announcement aria-live="polite" class="sr-only">{{ announcement() }}</div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		frame: [{
+			type: i0.ViewChild,
+			args: ["frame", { isSignal: true }]
+		}],
+		scrim: [{
+			type: i0.ViewChild,
+			args: ["scrim", { isSignal: true }]
+		}],
+		top: [{
+			type: i0.ViewChild,
+			args: ["top", { isSignal: true }]
+		}],
+		bottom: [{
+			type: i0.ViewChild,
+			args: ["bottom", { isSignal: true }]
+		}]
+	}
+});
+function thumbnailImage(origin) {
+	if (!origin) return null;
+	return origin instanceof HTMLImageElement ? origin : origin.querySelector("img");
+}
+var BfImageViewerService = class BfImageViewerService {
+	overlays = inject(BfOverlayService);
+	injector = inject(Injector);
+	open(options) {
+		const images = [...options.images];
+		if (images.length === 0) throw new Error("BfImageViewerService: open() needs at least one image");
+		const requested = Math.trunc(options.index ?? 0);
+		const start = Number.isFinite(requested) ? (requested % images.length + images.length) % images.length : 0;
+		const injector = options.injector ?? this.injector;
+		const label = options.ariaLabel?.length ? options.ariaLabel : injector.get(BF_LABELS).imageViewer;
+		let viewerRef = null;
+		let motion = null;
+		const context = {
+			start,
+			label,
+			origin: options.origin ?? null,
+			actions: options.actions ?? null,
+			register: (viewer) => {
+				motion = viewer;
+			}
+		};
+		const providers = (ref) => {
+			viewerRef = new BfImageViewerRef(ref, images, start);
+			return [{
+				provide: BfImageViewerRef,
+				useValue: viewerRef
+			}, {
+				provide: BF_IMAGE_VIEWER_CONTEXT,
+				useValue: context
+			}];
+		};
+		this.overlays.open(BfImageViewerComponent, {
+			position: "fullscreen",
+			backdrop: false,
+			role: "dialog",
+			ariaLabel: label,
+			closeOnNavigation: options.closeOnNavigation,
+			panelClass: ["bf-image-viewer-panel"],
+			injector,
+			providers,
+			enter: (panel) => motion ? motion.enter() : fadeIn(panel),
+			exit: (panel) => motion ? motion.exit() : fadeOut(panel)
+		});
+		if (!viewerRef) throw new Error("BfImageViewerService: the overlay core did not build the viewer providers");
+		return viewerRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfImageViewerService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfImageViewerService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfImageViewerService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+export { BF_DESKTOP_TOAST_DEFAULTS, BF_DIALOG_DATA, BF_OVERLAY_DATA, BF_OVERLAY_HOST, BF_SIDE_PANEL_DATA, BfChatComposerComponent, BfComboboxComponent, BfComponentOverlayRef, BfDateInputComponent, BfDateTimeInputComponent, BfDesktopToastComponent, BfDesktopToastService, BfDialogComponent, BfDialogRef, BfDialogService, BfImageViewerComponent, BfImageViewerRef, BfImageViewerService, BfMenuButtonComponent, BfMenuComponent, BfMenuDividerDirective, BfMenuGroupDirective, BfMenuItemCheckboxDirective, BfMenuItemDirective, BfMenuItemRadioDirective, BfMenuTriggerDirective, BfMultiComboboxComponent, BfOverlayRef, BfOverlayService, BfOverlayStack, BfPopoverComponent, BfPopoverTriggerDirective, BfSelectComponent, BfSidePanelComponent, BfSidePanelRef, BfSidePanelService, BfSidebarToggleComponent, BfThemeMenuButtonComponent, BfTimeInputComponent, BfToastRef, BfTooltipComponent, BfTooltipDirective, OVERLAY_DURATION, OVERLAY_EASING, OVERLAY_REDUCED_DURATION, fadeDown, fadeIn, fadeOut, fadeUp, prefersReducedMotion, provideBfDesktopToast, provideBfSelect, scaleIn, slideDown, slideInFromEnd, slideOutToEnd, slideUp, ɵBfToastQueue, labelPanelByHeading as ɵlabelPanelByHeading, watchPanelHeading as ɵwatchPanelHeading };
 
 //# sourceMappingURL=bitforgehq-ui-overlay.mjs.map