@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-combobox.mjs

@@ -0,0 +1,1584 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injector, TemplateRef, ViewContainerRef, booleanAttribute, computed, contentChild, effect, forwardRef, inject, input, isDevMode, linkedSignal, output, signal, untracked, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import { ActiveDescendantKeyManager, InteractivityChecker } from "@angular/cdk/a11y";
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay } from "@angular/cdk/overlay";
+import { ViewportRuler } from "@angular/cdk/scrolling";
+import { RaqmButton } from "@raqm/ui/button";
+import { RaqmInput } from "@raqm/ui/input";
+import * as i1 from "@raqm/ui/input-group";
+import { RaqmInputGroup } from "@raqm/ui/input-group";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+const collator = new Intl.Collator(void 0, {
+	usage: "search",
+	sensitivity: "base",
+	ignorePunctuation: true
+});
+function labelContains(label, query) {
+	if (!query) return true;
+	for (let i = 0; i <= label.length - query.length; i += 1) if (collator.compare(label.slice(i, i + query.length), query) === 0) return true;
+	return false;
+}
+function normalizeMultiple(value) {
+	if (!Array.isArray(value)) return [];
+	const result = [];
+	for (const member of value) if (typeof member === "string" && !result.includes(member)) result.push(member);
+	return result;
+}
+function normalizePopup(value) {
+	return typeof value === "string" ? value : null;
+}
+function normalizeModel(value, mode) {
+	return mode === "multiple" ? normalizeMultiple(value) : normalizePopup(value);
+}
+function reportDuplicateValues(items) {
+	if (!isDevMode()) return;
+	const seen = /* @__PURE__ */ new Set();
+	const duplicates = /* @__PURE__ */ new Set();
+	for (const item of items) if (seen.has(item.value)) duplicates.add(item.value);
+	else seen.add(item.value);
+	if (duplicates.size > 0) console.error(`[raqm-combobox] Duplicate option value(s) ${[...duplicates].map((value) => JSON.stringify(value)).join(", ")}; Combobox option values must be unique.`);
+}
+var RaqmComboboxControl = class {
+	host;
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	onChange;
+	onTouched;
+	disabled = this.cvaDisabled.asReadonly();
+	constructor(host) {
+		this.host = host;
+	}
+	writeValue(value) {
+		this.host.setSelected(normalizeModel(value, this.host.mode()));
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.cvaDisabled.set(isDisabled);
+		if (isDisabled) this.host.close(false);
+	}
+	commit(item) {
+		if (this.host.disabled() || item.disabled === true) return;
+		if (this.host.mode() === "multiple") {
+			const selected = this.host.selected();
+			const current = Array.isArray(selected) ? selected : [];
+			const next = current.includes(item.value) ? current.filter((value) => value !== item.value) : [...current, item.value];
+			this.emit(next);
+			if (this.host.query().trim() === "") return;
+			this.host.close(true);
+			return;
+		}
+		const next = item.value;
+		if (this.host.selected() === next) {
+			this.host.close(true);
+			return;
+		}
+		if (!this.host.selectionRemovable()) return;
+		this.emit(next);
+		this.host.close(true);
+	}
+	emit(next) {
+		const normalized = normalizeModel(next, this.host.mode());
+		this.host.setSelected(normalized);
+		this.onChange?.(normalized);
+		this.host.publish(normalized);
+	}
+	touch() {
+		this.onTouched?.();
+	}
+};
+function connectComboboxEffects(host) {
+	let lastMode;
+	effect(() => {
+		const mode = host.mode();
+		if (mode === lastMode) return;
+		const isFirstRender = lastMode === void 0;
+		lastMode = mode;
+		untracked(() => {
+			if (!isFirstRender) host.resetForMode();
+		});
+	});
+	effect(() => reportDuplicateValues(host.flatItems()));
+	effect(() => {
+		host.popupWidth();
+		host.alignOffset();
+		host.dir();
+		if (host.open()) untracked(() => host.reposition());
+	});
+	effect(() => {
+		const views = host.views();
+		const disabled = host.disabled();
+		host.selectionRemovable();
+		host.autoHighlight();
+		host.open();
+		if (disabled) {
+			untracked(() => host.close());
+			return;
+		}
+		untracked(() => host.reconcile(views));
+	});
+}
+const INTERACTIVE_SELECTOR = "button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+var RaqmComboboxField = class {
+	host;
+	document;
+	interactivityChecker;
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	composingValue = signal(null, ...ngDevMode ? [{ debugName: "composingValue" }] : /* istanbul ignore next */ []);
+	suppressBlurTouched = false;
+	composing = false;
+	constructor(host, document, interactivityChecker) {
+		this.host = host;
+		this.document = document;
+		this.interactivityChecker = interactivityChecker;
+	}
+	get isComposing() {
+		return this.composing;
+	}
+	reset() {
+		this.query.set("");
+		this.composingValue.set(null);
+	}
+	resetQuery() {
+		this.query.set("");
+	}
+	onChipsPointerDown(event) {
+		if (this.host.disabled()) return;
+		if (event.target?.closest(INTERACTIVE_SELECTOR)) return;
+		event.preventDefault();
+		this.focusInput();
+		if (!this.host.open()) this.host.openPopup();
+	}
+	onInputPointerDown() {
+		if (this.host.disabled() || this.host.open()) return;
+		this.host.openPopup();
+	}
+	onInlineFocus(event) {
+		if (this.host.open() || this.host.disabled()) return;
+		event.target.select();
+	}
+	onClearClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (this.host.disabled() || !this.host.selectionRemovable()) return;
+		this.host.emit(null);
+		this.host.markTouched();
+		this.focusInput();
+	}
+	onTriggerClick() {
+		if (this.host.disabled()) return;
+		if (this.host.open()) this.host.close(true);
+		else this.host.openPopup();
+	}
+	onFocusOut(event) {
+		if (this.suppressBlurTouched) return;
+		const next = event.relatedTarget;
+		const overlayElement = this.host.overlayElement();
+		if (next && (this.host.element().contains(next) || overlayElement?.contains(next) === true)) return;
+		if (this.host.open()) this.host.close(true, false);
+		else this.host.markTouched();
+	}
+	onInput(event) {
+		if (this.host.disabled()) return;
+		const input = event.target;
+		if (this.composing) {
+			this.composingValue.set(input.value);
+			return;
+		}
+		this.query.set(input.value);
+		this.applyQueryHighlight(input.value);
+	}
+	onCompositionStart(event) {
+		this.composing = true;
+		this.composingValue.set(event.target.value);
+	}
+	onCompositionEnd(event) {
+		this.composing = false;
+		this.composingValue.set(null);
+		const input = event.target;
+		this.query.set(input.value);
+		this.applyQueryHighlight(input.value);
+	}
+	onOptionPointerMove(view, event) {
+		if (event.pointerType === "touch") return;
+		if (this.host.isOptionDisabled(view.item) || this.host.activeId() === view.id) return;
+		const index = this.host.optionViews().findIndex((candidate) => candidate.id === view.id);
+		if (index === -1) return;
+		this.host.activateOption(index);
+	}
+	onOptionPointerLeave(event) {
+		if (event.pointerType === "touch") return;
+		const related = event.relatedTarget;
+		if (related instanceof Element && related.closest(".raqm-combobox-option")) return;
+		this.host.resetActive();
+	}
+	onOptionClick(item) {
+		if (this.host.isOptionDisabled(item)) return;
+		this.host.select(item);
+	}
+	isSelected(item) {
+		const value = this.host.selected();
+		if (Array.isArray(value)) return value.includes(item.value);
+		return value === item.value;
+	}
+	leavePopupByTab(event) {
+		const trigger = this.host.trigger();
+		if (!trigger) return;
+		const overlay = this.host.overlayElement();
+		const candidates = Array.from(this.document.querySelectorAll("a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]")).filter((element) => !overlay?.contains(element) && this.interactivityChecker.isTabbable(element));
+		candidates.sort((a, b) => (a.tabIndex || Infinity) - (b.tabIndex || Infinity));
+		const index = candidates.indexOf(trigger);
+		const target = index < 0 ? void 0 : candidates[index + (event.shiftKey ? -1 : 1)];
+		if (target) {
+			event.preventDefault();
+			target.focus();
+			this.host.close(true, false);
+		} else {
+			trigger.focus();
+			this.host.close(true, false);
+		}
+	}
+	onChipRemoveClick(index, event) {
+		event.stopPropagation();
+		this.removeAt(index);
+	}
+	removeAt(index) {
+		if (this.host.disabled()) return;
+		const chip = this.host.chipViews()[index];
+		if (!chip || !chip.removable) return;
+		const removeButton = this.chipButton(index);
+		const heldFocus = removeButton !== null && this.host.element().ownerDocument.activeElement === removeButton;
+		const selected = this.host.selected();
+		const current = Array.isArray(selected) ? selected : [];
+		const activeView = this.host.optionViews().find((view) => view.item.value === chip.value);
+		if (activeView && this.host.activeId() === activeView.id) this.host.resetActive();
+		this.host.emit(current.filter((value) => value !== chip.value));
+		if (heldFocus) {
+			const remaining = this.host.chipViews();
+			if (remaining.length === 0) this.focusInput();
+			else this.focusChip(Math.min(index, remaining.length - 1));
+		}
+	}
+	focusInput() {
+		const input = this.inputElement();
+		if (input && !input.disabled) input.focus();
+	}
+	focusChip(index) {
+		const button = this.chipButton(index);
+		if (button && !button.disabled) button.focus();
+	}
+	restoreTriggerFocus() {
+		const trigger = this.host.trigger();
+		if (trigger && !trigger.disabled) trigger.focus();
+	}
+	applyQueryHighlight(value) {
+		if (value.trim() !== "" && !this.host.open()) this.host.openPopup();
+		this.host.reconcileActive();
+	}
+	inputElement() {
+		const inHost = this.host.element().querySelector(".raqm-combobox-input");
+		if (inHost) return inHost;
+		return this.host.overlayElement()?.querySelector(".raqm-combobox-input") ?? null;
+	}
+	chipButton(index) {
+		return this.host.element().querySelectorAll(".raqm-combobox-chip-remove")[index] ?? null;
+	}
+};
+var RaqmComboboxOptionRef = class {
+	view;
+	activate;
+	isDisabled;
+	constructor(view, activate, isDisabled) {
+		this.view = view;
+		this.activate = activate;
+		this.isDisabled = isDisabled;
+	}
+	get disabled() {
+		return this.isDisabled(this.view.item);
+	}
+	getLabel() {
+		return this.view.item.label;
+	}
+	setActiveStyles() {
+		this.activate(this);
+	}
+	setInactiveStyles() {}
+};
+var RaqmComboboxKeyboard = class {
+	host;
+	injector;
+	keyManager;
+	suppressActivationScroll = false;
+	activeValue = signal(null, ...ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []);
+	activeId = computed(() => {
+		if (!this.host.open() || this.host.disabled()) return null;
+		const value = this.activeValue();
+		return this.host.views().find((view) => view.item.value === value && !this.host.isOptionDisabled(view.item))?.id ?? null;
+	}, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	optionRefs = computed(() => this.host.views().map((view) => new RaqmComboboxOptionRef(view, (ref) => {
+		this.activeValue.set(ref.view.item.value);
+		if (!this.suppressActivationScroll) this.host.scrollTo(ref.view.id);
+	}, (item) => this.host.isOptionDisabled(item))), ...ngDevMode ? [{ debugName: "optionRefs" }] : /* istanbul ignore next */ []);
+	constructor(host, injector) {
+		this.host = host;
+		this.injector = injector;
+	}
+	init() {
+		this.keyManager = new ActiveDescendantKeyManager(this.optionRefs, this.injector).withWrap(false).withVerticalOrientation(true).withHomeAndEnd(true);
+	}
+	destroy() {
+		this.keyManager?.destroy();
+	}
+	onTriggerKeydown(event) {
+		if (this.host.disabled()) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			if (!this.host.open()) this.host.openPopup();
+		}
+	}
+	onKeydown(event) {
+		if (this.host.mode() === "multiple" && this.handleChipNavigation(event)) return;
+		if (this.host.composing() || event.isComposing || event.keyCode === 229) return;
+		switch (event.key) {
+			case "Escape":
+				if (this.host.open()) {
+					event.preventDefault();
+					this.host.close(true);
+				}
+				return;
+			case "Tab":
+				if (this.host.mode() === "popup" && this.host.open()) this.host.leavePopupByTab(event);
+				return;
+			case "Enter": {
+				if (!this.host.open()) return;
+				this.reconcile(this.host.views());
+				const active = this.host.views().find((view) => view.item.value === this.activeValue());
+				if (active && !this.host.isOptionDisabled(active.item) && !this.host.disabled()) {
+					event.preventDefault();
+					this.host.select(active.item);
+				}
+				return;
+			}
+			case "ArrowDown":
+			case "ArrowUp":
+				event.preventDefault();
+				if (!this.host.open()) this.host.openPopup();
+				else {
+					this.reconcile(this.host.views());
+					this.keyManager?.onKeydown(event);
+				}
+				return;
+			case "Home":
+			case "End":
+				if (this.host.open()) {
+					event.preventDefault();
+					this.reconcile(this.host.views());
+					this.keyManager?.onKeydown(event);
+				}
+				return;
+			default: return;
+		}
+	}
+	onChipKeydown(index, event) {
+		if (this.host.disabled()) return;
+		const rtl = this.host.direction() === "rtl";
+		const previousKey = rtl ? "ArrowRight" : "ArrowLeft";
+		const nextKey = rtl ? "ArrowLeft" : "ArrowRight";
+		switch (event.key) {
+			case "Backspace":
+			case "Delete":
+				event.preventDefault();
+				this.host.removeChip(index);
+				return;
+			case previousKey:
+				event.preventDefault();
+				if (index > 0) this.host.focusChip(index - 1);
+				else this.host.focusInput();
+				return;
+			case nextKey:
+				event.preventDefault();
+				if (index < this.host.chipCount() - 1) this.host.focusChip(index + 1);
+				else this.host.focusInput();
+				return;
+			case "ArrowDown":
+			case "ArrowUp":
+				event.preventDefault();
+				if (!this.host.open()) this.host.openPopup();
+				return;
+			default:
+				if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) this.host.focusInput();
+				return;
+		}
+	}
+	activateIndex(index, scroll) {
+		if (!this.keyManager) return;
+		if (scroll) {
+			this.keyManager.setActiveItem(index);
+			return;
+		}
+		this.suppressActivationScroll = true;
+		try {
+			this.keyManager.setActiveItem(index);
+		} finally {
+			this.suppressActivationScroll = false;
+		}
+	}
+	activateFirst() {
+		const index = this.host.views().findIndex((view) => !this.host.isOptionDisabled(view.item));
+		if (index === -1) return;
+		this.keyManager?.setActiveItem(index);
+	}
+	reconcile(views) {
+		if (!this.host.open() || this.host.disabled() || !this.keyManager) return;
+		const value = this.activeValue();
+		const index = value === null ? -1 : views.findIndex((view) => view.item.value === value && !this.host.isOptionDisabled(view.item));
+		if (index >= 0) {
+			const current = this.optionRefs()[index];
+			if (this.keyManager.activeItem !== current) this.keyManager.setActiveItem(index);
+			return;
+		}
+		this.reset();
+		if (this.host.autoHighlight() && this.host.query().trim() !== "") this.activateFirst();
+	}
+	reset() {
+		this.keyManager?.setActiveItem(-1);
+		this.activeValue.set(null);
+	}
+	handleChipNavigation(event) {
+		if (this.host.chipCount() === 0) return false;
+		const previousKey = this.host.direction() === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const input = event.currentTarget;
+		const caret = input.selectionStart ?? 0;
+		if (event.key === previousKey && caret === 0) {
+			event.preventDefault();
+			this.host.focusChip(this.host.chipCount() - 1);
+			return true;
+		}
+		if (event.key === "Backspace" && input.value === "") {
+			event.preventDefault();
+			this.host.removeChip(this.host.chipCount() - 1);
+			return true;
+		}
+		return false;
+	}
+};
+const OVERLAY_GAP = 6;
+const VIEWPORT_MARGIN = 10;
+var RaqmComboboxOverlay = class {
+	overlay;
+	viewportRuler;
+	viewContainerRef;
+	host;
+	overlayRef;
+	releaseOverlayOwnership;
+	outsideSubscription;
+	detachSubscription;
+	positionStrategy;
+	resizeSubscription;
+	directionSubscription;
+	directionObserver;
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	dir = signal("ltr", ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	constructor(overlay, viewportRuler, viewContainerRef, host) {
+		this.overlay = overlay;
+		this.viewportRuler = viewportRuler;
+		this.viewContainerRef = viewContainerRef;
+		this.host = host;
+	}
+	get element() {
+		return this.overlayRef?.overlayElement;
+	}
+	get hasPane() {
+		return this.overlayRef !== void 0;
+	}
+	openLayer() {
+		const anchor = this.host.anchor();
+		if (!anchor) return false;
+		const direction = this.host.direction();
+		this.dir.set(direction);
+		const anchorWidth = anchor.getBoundingClientRect().width;
+		const width = this.host.width() || anchorWidth;
+		const strategy = this.overlay.position().flexibleConnectedTo(anchor).withPositions(this.positions()).withFlexibleDimensions(true).withGrowAfterOpen(true).withPush(true).withViewportMargin(VIEWPORT_MARGIN);
+		const config = {
+			positionStrategy: strategy,
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			hasBackdrop: false,
+			panelClass: "raqm-combobox-overlay-pane",
+			disposeOnNavigation: true,
+			width,
+			direction
+		};
+		this.positionStrategy = strategy;
+		this.overlayRef = this.overlay.create(config);
+		this.overlayRef.overlayElement.style.setProperty("--raqm-combobox-viewport-margin", `${VIEWPORT_MARGIN}px`);
+		this.applyAvailableHeight();
+		this.overlayRef.attach(new TemplatePortal(this.host.template(), this.viewContainerRef));
+		this.releaseOverlayOwnership = registerOverlayOwnership(anchor, this.overlayRef);
+		this.open.set(true);
+		this.observeDirection();
+		this.outsideSubscription = this.overlayRef.outsidePointerEvents().subscribe((event) => {
+			const target = event.target;
+			if (target && this.host.element.contains(target)) return;
+			this.host.onOutside();
+		});
+		this.detachSubscription = this.overlayRef.detachments().subscribe(() => this.host.onDetached());
+		this.resizeSubscription = this.viewportRuler.change(0).subscribe(() => {
+			this.updateDirection();
+			this.applyAnchorWidth();
+			this.applyAvailableHeight();
+			this.positionStrategy?.apply();
+		});
+		return true;
+	}
+	reposition() {
+		this.updateDirection();
+		this.applyAnchorWidth();
+		this.positionStrategy?.withPositions(this.positions());
+		this.positionStrategy?.apply();
+	}
+	detach() {
+		const overlayRef = this.overlayRef;
+		this.stopObservingDirection();
+		this.releaseOverlayOwnership?.();
+		this.releaseOverlayOwnership = void 0;
+		this.outsideSubscription?.unsubscribe();
+		this.outsideSubscription = void 0;
+		this.detachSubscription?.unsubscribe();
+		this.detachSubscription = void 0;
+		this.resizeSubscription?.unsubscribe();
+		this.resizeSubscription = void 0;
+		this.positionStrategy = void 0;
+		this.overlayRef = void 0;
+		this.open.set(false);
+		return overlayRef;
+	}
+	scrollOptionIntoView(id) {
+		const overlayRef = this.overlayRef;
+		if (!overlayRef || !id) return;
+		const list = overlayRef.overlayElement.querySelector(".raqm-combobox-list");
+		const row = Array.from(overlayRef.overlayElement.querySelectorAll(".raqm-combobox-option")).find((option) => option.id === id);
+		if (!list || !row) return;
+		const listRect = list.getBoundingClientRect();
+		const rowRect = row.getBoundingClientRect();
+		const rowTop = rowRect.top - listRect.top - list.clientTop + list.scrollTop;
+		const rowBottom = rowRect.bottom - listRect.top - list.clientTop + list.scrollTop;
+		const viewTop = list.scrollTop;
+		const viewBottom = viewTop + list.clientHeight;
+		let target = null;
+		if (rowTop < viewTop) target = rowTop;
+		else if (rowBottom > viewBottom) target = rowBottom - list.clientHeight;
+		if (target === null) return;
+		const maxScrollTop = Math.max(list.scrollHeight - list.clientHeight, 0);
+		list.scrollTop = Math.min(Math.max(target, 0), maxScrollTop);
+	}
+	positions() {
+		const offset = Number.isFinite(this.host.alignOffset()) ? this.host.alignOffset() : 0;
+		const offsetX = this.dir() === "rtl" ? -offset : offset;
+		return [{
+			originX: "start",
+			originY: "bottom",
+			overlayX: "start",
+			overlayY: "top",
+			offsetY: OVERLAY_GAP,
+			offsetX
+		}, {
+			originX: "start",
+			originY: "top",
+			overlayX: "start",
+			overlayY: "bottom",
+			offsetY: -6,
+			offsetX
+		}];
+	}
+	observeDirection() {
+		this.directionSubscription = this.host.directionality?.change.subscribe(() => this.updateDirection());
+		if (typeof MutationObserver === "undefined") return;
+		this.directionObserver = new MutationObserver(() => this.updateDirection());
+		for (let element = this.host.element; element; element = element.parentElement) this.directionObserver.observe(element, {
+			attributes: true,
+			attributeFilter: [
+				"dir",
+				"class",
+				"style"
+			]
+		});
+	}
+	updateDirection() {
+		const ref = this.overlayRef;
+		if (!ref) return;
+		const direction = this.host.direction();
+		if (direction === this.dir()) return;
+		this.dir.set(direction);
+		ref.setDirection(direction);
+		this.positionStrategy?.withPositions(this.positions());
+		ref.updatePosition();
+	}
+	stopObservingDirection() {
+		this.directionObserver?.disconnect();
+		this.directionObserver = void 0;
+		this.directionSubscription?.unsubscribe();
+		this.directionSubscription = void 0;
+	}
+	applyAnchorWidth() {
+		const overlayRef = this.overlayRef;
+		const anchor = this.host.anchor();
+		if (!overlayRef || !anchor || !anchor.isConnected) return;
+		const width = this.host.width();
+		const anchorWidth = anchor.getBoundingClientRect().width;
+		if (!width && (!Number.isFinite(anchorWidth) || anchorWidth <= 0)) return;
+		overlayRef.updateSize({ width: width || `${anchorWidth}px` });
+	}
+	applyAvailableHeight() {
+		const overlayRef = this.overlayRef;
+		const anchor = this.host.anchor();
+		if (!overlayRef || !anchor) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const below = this.viewportRuler.getViewportSize().height - anchorRect.bottom - OVERLAY_GAP - VIEWPORT_MARGIN;
+		const above = anchorRect.top - OVERLAY_GAP - VIEWPORT_MARGIN;
+		const available = Math.max(below, above, 0);
+		overlayRef.overlayElement.style.setProperty("--raqm-combobox-available-height", `${available}px`);
+	}
+};
+function resolveComboboxDirection(dir, element, directionality) {
+	if (dir === "ltr" || dir === "rtl") return dir;
+	const computed = getComputedStyle(element).direction;
+	if (computed === "rtl" || computed === "ltr") return computed;
+	return directionality?.value ?? "ltr";
+}
+var RaqmComboboxPopup = class {
+	host;
+	constructor(host) {
+		this.host = host;
+	}
+	show() {
+		if (this.host.layer.open() || this.host.disabled()) return;
+		if (!this.host.layer.openLayer()) return;
+		this.host.keyboard.reset();
+		if (this.host.mode() === "popup") this.host.field.focusInput();
+		else if (this.host.mode() === "inline") this.host.field.focusInput();
+		else if (this.host.autoHighlight() && this.host.query().trim() !== "") this.host.keyboard.activateFirst();
+	}
+	close(touched, restoreFocus = true) {
+		if (!this.host.layer.open() && !this.host.layer.hasPane) return;
+		this.destroy(restoreFocus);
+		if (touched) this.host.touched();
+	}
+	destroy(restoreFocus) {
+		const wasOpen = this.host.layer.open();
+		const overlayRef = this.host.layer.detach();
+		this.host.keyboard.reset();
+		this.host.field.reset();
+		this.host.field.suppressBlurTouched = true;
+		overlayRef?.dispose();
+		this.host.field.suppressBlurTouched = false;
+		if (restoreFocus && wasOpen && this.host.mode() === "popup") this.host.field.restoreTriggerFocus();
+	}
+	handleDetached() {
+		this.host.layer.detach();
+		this.host.keyboard.reset();
+		this.host.field.resetQuery();
+	}
+	resetForMode() {
+		this.destroy(false);
+		this.host.field.resetQuery();
+		this.host.keyboard.reset();
+	}
+};
+var RaqmComboboxItemDirective = class RaqmComboboxItemDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmComboboxItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmComboboxItemDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-combobox-item]",
+		exportAs: ["raqmComboboxItem"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmComboboxItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-combobox-item]",
+			exportAs: "raqmComboboxItem"
+		}]
+	}]
+});
+var RaqmComboboxPrefixDirective = class RaqmComboboxPrefixDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmComboboxPrefixDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmComboboxPrefixDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-combobox-prefix]",
+		exportAs: ["raqmComboboxPrefix"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmComboboxPrefixDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[raqm-combobox-prefix]",
+			exportAs: "raqmComboboxPrefix"
+		}]
+	}]
+});
+function flattenItems(items) {
+	return items.flatMap((entry) => "options" in entry ? entry.options : [entry]);
+}
+function filterOptions(items, query, mode, selectedLabel) {
+	if (mode !== "multiple") {
+		if (!query) return items;
+		return items.filter((item) => {
+			if (selectedLabel !== null && selectedLabel.length === query.length && labelContains(selectedLabel, query)) return true;
+			return labelContains(item.label, query);
+		});
+	}
+	return items.filter((item) => labelContains(item.label, query));
+}
+function optionDomId(inputId, value) {
+	return `${inputId}-option-${Array.from({ length: value.length }, (_, i) => value.charCodeAt(i).toString(16).padStart(4, "0")).join("")}`;
+}
+function buildOptionViews(items, inputId) {
+	return items.map((item, index) => ({
+		item,
+		id: optionDomId(inputId, item.value),
+		index
+	}));
+}
+function buildRenderEntries(items, views, listboxId) {
+	const byValue = new Map(views.map((view) => [view.item.value, view]));
+	return items.flatMap((entry, index) => {
+		if ("options" in entry) {
+			const options = entry.options.flatMap((item) => {
+				const view = byValue.get(item.value);
+				return view ? [view] : [];
+			});
+			return options.length ? [{
+				label: entry.label,
+				id: `${listboxId}-group-${index}`,
+				options,
+				separatorBefore: entry.separatorBefore === true
+			}] : [];
+		}
+		const view = byValue.get(entry.value);
+		return view ? [{
+			label: null,
+			id: "",
+			options: [view],
+			separatorBefore: false
+		}] : [];
+	});
+}
+function buildSelectedLabel(selected, items) {
+	if (typeof selected !== "string") return null;
+	const match = items.find((item) => item.value === selected);
+	return match ? match.label : selected;
+}
+function buildSelectionRemovable(selected, items) {
+	return typeof selected !== "string" || !items.find((item) => item.value === selected)?.disabled;
+}
+function buildChipViews(selected, items) {
+	if (!Array.isArray(selected)) return [];
+	return selected.map((value) => {
+		const match = items.find((item) => item.value === value);
+		return {
+			value,
+			label: match ? match.label : value,
+			removable: match ? match.disabled !== true : true
+		};
+	});
+}
+var RaqmComboboxViewState = class {
+	host;
+	resolvedInputId = computed(() => this.host.inputId() || this.host.autoId(), ...ngDevMode ? [{ debugName: "resolvedInputId" }] : /* istanbul ignore next */ []);
+	labelId = computed(() => `${this.resolvedInputId()}-label`, ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+	listboxId = computed(() => `${this.resolvedInputId()}-listbox`, ...ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []);
+	popupId = computed(() => `${this.resolvedInputId()}-popup`, ...ngDevMode ? [{ debugName: "popupId" }] : /* istanbul ignore next */ []);
+	searchId = computed(() => `${this.resolvedInputId()}-search`, ...ngDevMode ? [{ debugName: "searchId" }] : /* istanbul ignore next */ []);
+	inputLabelledBy = computed(() => this.host.labelledBy() ?? (this.host.label() ? this.labelId() : null), ...ngDevMode ? [{ debugName: "inputLabelledBy" }] : /* istanbul ignore next */ []);
+	flatItems = computed(() => flattenItems(this.host.items()), ...ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []);
+	filteredItems = computed(() => filterOptions(this.flatItems(), this.host.query(), this.host.mode(), this.selectedLabel()), ...ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []);
+	optionViews = computed(() => buildOptionViews(this.filteredItems(), this.resolvedInputId()), ...ngDevMode ? [{ debugName: "optionViews" }] : /* istanbul ignore next */ []);
+	renderEntries = computed(() => buildRenderEntries(this.host.items(), this.optionViews(), this.listboxId()), ...ngDevMode ? [{ debugName: "renderEntries" }] : /* istanbul ignore next */ []);
+	selectedLabel = computed(() => buildSelectedLabel(this.host.selected(), this.flatItems()), ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	selectionRemovable = computed(() => buildSelectionRemovable(this.host.selected(), this.flatItems()), ...ngDevMode ? [{ debugName: "selectionRemovable" }] : /* istanbul ignore next */ []);
+	inlineValue = computed(() => {
+		const composing = this.host.composingValue();
+		if (composing !== null) return composing;
+		return this.host.open() ? this.host.query() : this.selectedLabel() ?? "";
+	}, ...ngDevMode ? [{ debugName: "inlineValue" }] : /* istanbul ignore next */ []);
+	chipViews = computed(() => buildChipViews(this.host.selected(), this.flatItems()), ...ngDevMode ? [{ debugName: "chipViews" }] : /* istanbul ignore next */ []);
+	constructor(host) {
+		this.host = host;
+	}
+};
+let nextComboboxId = 0;
+var RaqmCombobox = class RaqmCombobox {
+	host = inject(ElementRef);
+	document = inject(DOCUMENT);
+	interactivityChecker = inject(InteractivityChecker);
+	overlay = inject(Overlay);
+	viewportRuler = inject(ViewportRuler);
+	viewContainerRef = inject(ViewContainerRef);
+	injector = inject(Injector);
+	directionality = inject(Directionality, { optional: true });
+	popupTemplate = viewChild.required("popup", {
+		...ngDevMode ? { debugName: "popupTemplate" } : /* istanbul ignore next */ {},
+		read: TemplateRef
+	});
+	itemTemplateDirective = contentChild(RaqmComboboxItemDirective, ...ngDevMode ? [{ debugName: "itemTemplateDirective" }] : /* istanbul ignore next */ []);
+	inlinePrefixDirective = contentChild(RaqmComboboxPrefixDirective, ...ngDevMode ? [{ debugName: "inlinePrefixDirective" }] : /* istanbul ignore next */ []);
+	chipsRef = viewChild("chips", ...ngDevMode ? [{ debugName: "chipsRef" }] : /* istanbul ignore next */ []);
+	triggerRef = viewChild("trigger", {
+		...ngDevMode ? { debugName: "triggerRef" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	inlineGroupRef = viewChild("inlineGroup", {
+		...ngDevMode ? { debugName: "inlineGroupRef" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	autoId = `raqm-combobox-${++nextComboboxId}`;
+	mode = input("multiple", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	inlinePrefix = computed(() => this.inlinePrefixDirective()?.template ?? null, ...ngDevMode ? [{ debugName: "inlinePrefix" }] : /* istanbul ignore next */ []);
+	itemTemplate = computed(() => this.itemTemplateDirective()?.template ?? null, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	popupWidth = input(null, ...ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []);
+	popupAlignOffset = input(0, ...ngDevMode ? [{ debugName: "popupAlignOffset" }] : /* istanbul ignore next */ []);
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	inputId = input("", ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	labelledBy = input(void 0, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
+	describedBy = input(void 0, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	searchPlaceholder = input(null, ...ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []);
+	emptyText = input(null, ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	removeLabel = input(null, ...ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	dir = input(void 0, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	autoHighlight = input(true, {
+		...ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTrigger = input(true, {
+		...ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showClear = input(false, {
+		...ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input(null, ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	triggerLabel = input(null, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	selected = linkedSignal(() => normalizeModel(this.value(), this.mode()), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	view = new RaqmComboboxViewState({
+		items: () => this.items(),
+		selected: () => this.selected(),
+		mode: () => this.mode(),
+		inputId: () => this.inputId(),
+		autoId: () => this.autoId,
+		labelledBy: () => this.labelledBy(),
+		label: () => this.label(),
+		open: () => this.open(),
+		query: () => this.query(),
+		composingValue: () => this.composingValue()
+	});
+	resolvedInputId = this.view.resolvedInputId;
+	labelId = this.view.labelId;
+	listboxId = this.view.listboxId;
+	popupId = this.view.popupId;
+	searchId = this.view.searchId;
+	inputLabelledBy = this.view.inputLabelledBy;
+	flatItems = this.view.flatItems;
+	filteredItems = this.view.filteredItems;
+	optionViews = this.view.optionViews;
+	renderEntries = this.view.renderEntries;
+	selectedLabel = this.view.selectedLabel;
+	selectionRemovable = this.view.selectionRemovable;
+	inlineValue = this.view.inlineValue;
+	chipViews = this.view.chipViews;
+	control = new RaqmComboboxControl({
+		mode: () => this.mode(),
+		selected: () => this.selected(),
+		setSelected: (value) => this.selected.set(value),
+		query: () => this.query(),
+		disabled: () => this.effectiveDisabled(),
+		selectionRemovable: () => this.selectionRemovable(),
+		close: (touched) => this.popup.close(touched),
+		publish: (value) => this.valueChange.emit(value)
+	});
+	effectiveDisabled = computed(() => this.disabled() || this.control.disabled(), ...ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []);
+	field = new RaqmComboboxField({
+		open: () => this.open(),
+		disabled: () => this.effectiveDisabled(),
+		selectionRemovable: () => this.selectionRemovable(),
+		chipViews: () => this.chipViews(),
+		optionViews: () => this.optionViews(),
+		activeId: () => this.activeId(),
+		selected: () => this.selected(),
+		isOptionDisabled: (item) => this.isOptionDisabled(item),
+		trigger: () => this.triggerRef()?.nativeElement ?? null,
+		element: () => this.host.nativeElement,
+		overlayElement: () => this.layer.element,
+		openPopup: () => this.popup.show(),
+		close: (touched, restoreFocus) => this.popup.close(touched, restoreFocus),
+		select: (item) => this.control.commit(item),
+		emit: (value) => this.control.emit(value),
+		resetActive: () => this.keyboard.reset(),
+		reconcileActive: () => this.keyboard.reconcile(this.optionViews()),
+		markTouched: () => this.control.touch(),
+		activateOption: (index) => this.keyboard.activateIndex(index, false)
+	}, this.document, this.interactivityChecker);
+	keyboard = new RaqmComboboxKeyboard({
+		views: () => this.optionViews(),
+		open: () => this.open(),
+		disabled: () => this.effectiveDisabled(),
+		composing: () => this.field.isComposing,
+		mode: () => this.mode(),
+		autoHighlight: () => this.autoHighlight(),
+		query: () => this.query(),
+		direction: () => resolveComboboxDirection(this.dir(), this.host.nativeElement, this.directionality),
+		isOptionDisabled: (item) => this.isOptionDisabled(item),
+		chipCount: () => this.chipViews().length,
+		scrollTo: (id) => this.layer.scrollOptionIntoView(id),
+		openPopup: () => this.popup.show(),
+		close: (touched) => this.popup.close(touched),
+		select: (item) => this.control.commit(item),
+		removeChip: (index) => this.field.removeAt(index),
+		focusChip: (index) => this.field.focusChip(index),
+		focusInput: () => this.field.focusInput(),
+		leavePopupByTab: (event) => this.field.leavePopupByTab(event)
+	}, this.injector);
+	layer = new RaqmComboboxOverlay(this.overlay, this.viewportRuler, this.viewContainerRef, {
+		element: this.host.nativeElement,
+		directionality: this.directionality,
+		anchor: () => this.mode() === "popup" ? this.triggerRef()?.nativeElement ?? null : this.mode() === "inline" ? this.inlineGroupRef()?.nativeElement ?? null : this.chipsRef()?.nativeElement ?? null,
+		template: () => this.popupTemplate(),
+		direction: () => resolveComboboxDirection(this.dir(), this.host.nativeElement, this.directionality),
+		width: () => this.popupWidth(),
+		alignOffset: () => this.popupAlignOffset(),
+		onOutside: () => this.popup.close(true, false),
+		onDetached: () => this.popup.handleDetached()
+	});
+	popup = new RaqmComboboxPopup({
+		layer: this.layer,
+		keyboard: this.keyboard,
+		field: this.field,
+		mode: () => this.mode(),
+		disabled: () => this.effectiveDisabled(),
+		autoHighlight: () => this.autoHighlight(),
+		query: () => this.query(),
+		touched: () => this.control.touch()
+	});
+	open = this.layer.open;
+	overlayDir = this.layer.dir;
+	activeId = this.keyboard.activeId;
+	query = this.field.query;
+	composingValue = this.field.composingValue;
+	constructor() {
+		connectComboboxEffects({
+			mode: () => this.mode(),
+			popupWidth: () => this.popupWidth(),
+			alignOffset: () => this.popupAlignOffset(),
+			dir: () => this.dir(),
+			open: () => this.open(),
+			reposition: () => this.layer.reposition(),
+			flatItems: () => this.flatItems(),
+			views: () => this.optionViews(),
+			disabled: () => this.effectiveDisabled(),
+			selectionRemovable: () => this.selectionRemovable(),
+			autoHighlight: () => this.autoHighlight(),
+			close: () => this.popup.close(false),
+			reconcile: (views) => this.keyboard.reconcile(views),
+			resetForMode: () => this.popup.resetForMode()
+		});
+	}
+	ngOnInit() {
+		this.keyboard.init();
+	}
+	ngOnDestroy() {
+		this.keyboard.destroy();
+		this.popup.destroy(false);
+	}
+	isOptionDisabled(item) {
+		return item.disabled === true || this.mode() !== "multiple" && !this.selectionRemovable();
+	}
+	writeValue(value) {
+		this.control.writeValue(value);
+	}
+	registerOnChange(fn) {
+		this.control.registerOnChange(fn);
+	}
+	registerOnTouched(fn) {
+		this.control.registerOnTouched(fn);
+	}
+	setDisabledState(isDisabled) {
+		this.control.setDisabledState(isDisabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCombobox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmCombobox,
+		isStandalone: true,
+		selector: "raqm-combobox",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			popupWidth: {
+				classPropertyName: "popupWidth",
+				publicName: "popupWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			popupAlignOffset: {
+				classPropertyName: "popupAlignOffset",
+				publicName: "popupAlignOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelledBy: {
+				classPropertyName: "labelledBy",
+				publicName: "labelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchPlaceholder: {
+				classPropertyName: "searchPlaceholder",
+				publicName: "searchPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoHighlight: {
+				classPropertyName: "autoHighlight",
+				publicName: "autoHighlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTrigger: {
+				classPropertyName: "showTrigger",
+				publicName: "showTrigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClear: {
+				classPropertyName: "showClear",
+				publicName: "showClear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerLabel: {
+				classPropertyName: "triggerLabel",
+				publicName: "triggerLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		host: {
+			properties: {
+				"attr.data-raqm-mode": "mode()",
+				"attr.data-raqm-disabled": "effectiveDisabled() ? \"true\" : null",
+				"attr.data-raqm-invalid": "invalid() ? \"true\" : null",
+				"attr.data-raqm-open": "open() ? \"true\" : null"
+			},
+			classAttribute: "raqm-combobox"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RaqmCombobox),
+			multi: true
+		}],
+		queries: [{
+			propertyName: "itemTemplateDirective",
+			first: true,
+			predicate: RaqmComboboxItemDirective,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "inlinePrefixDirective",
+			first: true,
+			predicate: RaqmComboboxPrefixDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "popupTemplate",
+				first: true,
+				predicate: ["popup"],
+				descendants: true,
+				read: TemplateRef,
+				isSignal: true
+			},
+			{
+				propertyName: "chipsRef",
+				first: true,
+				predicate: ["chips"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "triggerRef",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			},
+			{
+				propertyName: "inlineGroupRef",
+				first: true,
+				predicate: ["inlineGroup"],
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: "@if (label(); as labelText) {\r\n  <!-- `for` targets the real control id, not the custom-element host. -->\r\n  <label class=\"raqm-combobox-label\" [attr.for]=\"resolvedInputId()\" [attr.id]=\"labelId()\">\r\n    {{ labelText }}\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'multiple') {\r\n  <!-- Multiple chip field: the overlay anchor, owning the focus and invalid boundary. -->\r\n  <div\r\n    #chips\r\n    class=\"raqm-combobox-chips\"\r\n    [attr.data-raqm-invalid]=\"invalid() ? 'true' : null\"\r\n    (pointerdown)=\"field.onChipsPointerDown($event)\"\r\n  >\r\n    @for (chip of chipViews(); track chip.value) {\r\n      <span class=\"raqm-combobox-chip\">\r\n        <span class=\"raqm-combobox-chip-label\">{{ chip.label }}</span>\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-chip-remove\"\r\n          [disabled]=\"effectiveDisabled() || !chip.removable\"\r\n          [attr.aria-label]=\"removeLabel() ? removeLabel() + ' ' + chip.label : null\"\r\n          (click)=\"field.onChipRemoveClick($index, $event)\"\r\n          (keydown)=\"keyboard.onChipKeydown($index, $event)\"\r\n        >\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"M18 6 6 18\" />\r\n            <path d=\"m6 6 12 12\" />\r\n          </svg>\r\n        </button>\r\n      </span>\r\n    }\r\n\r\n    <!-- The one editable control; `role=\"combobox\"` and `aria-activedescendant` wire the listbox. -->\r\n    <input\r\n      raqm-input\r\n      type=\"text\"\r\n      class=\"raqm-combobox-input raqm-combobox-chip-input\"\r\n      role=\"combobox\"\r\n      aria-haspopup=\"listbox\"\r\n      aria-autocomplete=\"list\"\r\n      autocomplete=\"off\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.aria-expanded]=\"open()\"\r\n      [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n      [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.aria-describedby]=\"describedBy() ?? null\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [disabled]=\"effectiveDisabled()\"\r\n      [value]=\"composingValue() ?? query()\"\r\n      (pointerdown)=\"field.onInputPointerDown()\"\r\n      (input)=\"field.onInput($event)\"\r\n      (compositionstart)=\"field.onCompositionStart($event)\"\r\n      (compositionend)=\"field.onCompositionEnd($event)\"\r\n      (keydown)=\"keyboard.onKeydown($event)\"\r\n      (focusout)=\"field.onFocusOut($event)\"\r\n    />\r\n  </div>\r\n} @else if (mode() === 'inline') {\r\n  <!-- Inline: the Input Group is the anchor; the clear button replaces the chevron trigger. -->\r\n  <raqm-input-group #inlineGroup class=\"raqm-combobox-inline\">\r\n    @if (inlinePrefix(); as prefix) {\r\n      <raqm-input-group-addon align=\"inline-start\">\r\n        <ng-container [ngTemplateOutlet]=\"prefix\" />\r\n      </raqm-input-group-addon>\r\n    }\r\n    <input\r\n      raqm-input\r\n      type=\"text\"\r\n      class=\"raqm-combobox-input\"\r\n      role=\"combobox\"\r\n      aria-haspopup=\"listbox\"\r\n      aria-autocomplete=\"list\"\r\n      autocomplete=\"off\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.aria-expanded]=\"open()\"\r\n      [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n      [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.aria-describedby]=\"describedBy() ?? null\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [disabled]=\"effectiveDisabled()\"\r\n      [value]=\"inlineValue()\"\r\n      (focus)=\"field.onInlineFocus($event)\"\r\n      (pointerdown)=\"field.onInputPointerDown()\"\r\n      (input)=\"field.onInput($event)\"\r\n      (compositionstart)=\"field.onCompositionStart($event)\"\r\n      (compositionend)=\"field.onCompositionEnd($event)\"\r\n      (keydown)=\"keyboard.onKeydown($event)\"\r\n      (focusout)=\"field.onFocusOut($event)\"\r\n    />\r\n    <raqm-input-group-addon align=\"inline-end\">\r\n      @if (showClear() && selectedLabel() !== null) {\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          raqm-input-group-button\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-clear\"\r\n          [attr.aria-label]=\"clearLabel()\"\r\n          [disabled]=\"effectiveDisabled() || !selectionRemovable()\"\r\n          (click)=\"field.onClearClick($event)\"\r\n        >\r\n          <svg\r\n            class=\"raqm-combobox-clear-icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"M18 6 6 18\" />\r\n            <path d=\"m6 6 12 12\" />\r\n          </svg>\r\n        </button>\r\n      } @else if (showTrigger()) {\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          raqm-input-group-button\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-inline-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-label]=\"triggerLabel()\"\r\n          [attr.aria-expanded]=\"open()\"\r\n          [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n          [disabled]=\"effectiveDisabled()\"\r\n          (click)=\"field.onTriggerClick()\"\r\n          (keydown)=\"keyboard.onTriggerKeydown($event)\"\r\n        >\r\n          <svg\r\n            class=\"raqm-combobox-trigger-icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </raqm-input-group-addon>\r\n  </raqm-input-group>\r\n} @else {\r\n  <!-- Popup trigger; it never holds focus while the search field does. -->\r\n  <button\r\n    raqm-button=\"outline\"\r\n    #trigger\r\n    type=\"button\"\r\n    class=\"raqm-combobox-trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.id]=\"resolvedInputId()\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n    [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n    [attr.aria-describedby]=\"describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"field.onTriggerClick()\"\r\n    (keydown)=\"keyboard.onTriggerKeydown($event)\"\r\n    (focusout)=\"field.onFocusOut($event)\"\r\n  >\r\n    <span class=\"raqm-combobox-trigger-value\">{{ selectedLabel() ?? placeholder() }}</span>\r\n    <svg\r\n      class=\"raqm-combobox-trigger-icon\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\"\r\n    >\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  </button>\r\n}\r\n\r\n<!-- Instantiated into a CDK overlay from this view, so component styles apply. -->\r\n<ng-template #popup>\r\n  <div\r\n    class=\"raqm-combobox-popup\"\r\n    [attr.id]=\"popupId()\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-anchor]=\"mode()\"\r\n  >\r\n    @if (mode() === 'popup') {\r\n      <!-- Inner search field; deliberately no inner trigger or clear. -->\r\n      <raqm-input-group class=\"raqm-combobox-search\">\r\n        <input\r\n          raqm-input\r\n          type=\"text\"\r\n          class=\"raqm-combobox-input raqm-combobox-search-input\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-autocomplete=\"list\"\r\n          autocomplete=\"off\"\r\n          [attr.id]=\"searchId()\"\r\n          [attr.aria-expanded]=\"open()\"\r\n          [attr.aria-controls]=\"listboxId()\"\r\n          [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n          [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n          [attr.aria-describedby]=\"describedBy() ?? null\"\r\n          [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n          [attr.placeholder]=\"searchPlaceholder()\"\r\n          [disabled]=\"effectiveDisabled()\"\r\n          [value]=\"composingValue() ?? query()\"\r\n          (input)=\"field.onInput($event)\"\r\n          (compositionstart)=\"field.onCompositionStart($event)\"\r\n          (compositionend)=\"field.onCompositionEnd($event)\"\r\n          (keydown)=\"keyboard.onKeydown($event)\"\r\n          (focusout)=\"field.onFocusOut($event)\"\r\n        />\r\n        <raqm-input-group-addon align=\"inline-end\"></raqm-input-group-addon>\r\n      </raqm-input-group>\r\n    }\r\n\r\n    <!-- No-results message; the list collapses to zero padding while it shows. -->\r\n    @if (filteredItems().length === 0 && emptyText(); as emptyMessage) {\r\n      <div class=\"raqm-combobox-empty\">{{ emptyMessage }}</div>\r\n    }\r\n\r\n    <!-- Real listbox; `aria-multiselectable` only in Multiple. -->\r\n    <div\r\n      class=\"raqm-combobox-list\"\r\n      role=\"listbox\"\r\n      [attr.id]=\"listboxId()\"\r\n      [attr.aria-multiselectable]=\"mode() === 'multiple' ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.data-raqm-empty]=\"filteredItems().length === 0 ? '' : null\"\r\n    >\r\n      @for (entry of renderEntries(); track $index) {\r\n        @if (entry.separatorBefore && !$first) {\r\n          <div class=\"raqm-combobox-separator\" role=\"presentation\" aria-hidden=\"true\"></div>\r\n        }\r\n        @if (entry.label !== null) {\r\n          <div role=\"group\" [attr.aria-labelledby]=\"entry.id\">\r\n            <div class=\"raqm-combobox-group-label\" [attr.id]=\"entry.id\">{{ entry.label }}</div>\r\n            @for (view of entry.options; track view.id) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"option\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\r\n              />\r\n            }\r\n          </div>\r\n        } @else {\r\n          @for (view of entry.options; track view.id) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"option\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: view }\"\r\n            />\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #option let-view>\r\n  <div\r\n    class=\"raqm-combobox-option\"\r\n    role=\"option\"\r\n    [attr.id]=\"view.id\"\r\n    [attr.aria-selected]=\"field.isSelected(view.item) ? 'true' : 'false'\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(view.item) ? 'true' : null\"\r\n    [attr.aria-label]=\"view.item.label\"\r\n    [attr.aria-describedby]=\"view.item.description ? view.id + '-description' : null\"\r\n    [class.raqm-combobox-option--active]=\"view.id === activeId()\"\r\n    [attr.data-raqm-highlighted]=\"view.id === activeId() ? '' : null\"\r\n    (pointerdown)=\"$event.preventDefault()\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (pointermove)=\"field.onOptionPointerMove(view, $event)\"\r\n    (pointerleave)=\"field.onOptionPointerLeave($event)\"\r\n    (click)=\"field.onOptionClick(view.item)\"\r\n  >\r\n    @if (view.item.description) {\r\n      <span class=\"raqm-combobox-option-description\" [attr.id]=\"view.id + '-description'\">{{\r\n        view.item.description\r\n      }}</span>\r\n    }\r\n    <span class=\"raqm-combobox-option-indicator\" aria-hidden=\"true\">\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"M20 6 9 17l-5-5\" />\r\n      </svg>\r\n    </span>\r\n    <span class=\"raqm-combobox-option-text\">\r\n      @if (itemTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: view.item,\r\n            item: view.item,\r\n            selected: field.isSelected(view.item),\r\n            active: view.id === activeId(),\r\n          }\"\r\n        />\r\n      } @else {\r\n        {{ view.item.label }}\r\n      }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [".raqm-combobox-chips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--raqm-spacing) * 1);min-block-size:calc(var(--raqm-spacing) * 8);inline-size:100%;box-sizing:border-box;border:1px solid var(--raqm-input);border-radius:var(--raqm-radius-lg);background-color:var(--raqm-control-bg);background-clip:padding-box;padding-inline:calc(var(--raqm-spacing) * 2.5);padding-block:calc(var(--raqm-spacing) * 1);font-size:var(--raqm-font-size-sm);color:var(--raqm-foreground);transition:color var(--raqm-duration-base) var(--raqm-ease-standard),background-color var(--raqm-duration-base) var(--raqm-ease-standard),border-color var(--raqm-duration-base) var(--raqm-ease-standard),box-shadow var(--raqm-duration-base) var(--raqm-ease-standard)}.raqm-combobox-chips:has(>.raqm-combobox-chip){padding-inline:calc(var(--raqm-spacing) * 1)}.raqm-combobox-chips:focus-within{border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-combobox-chips[data-raqm-invalid=true]{border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-combobox-chips:has(>.raqm-combobox-chip-input:disabled){background-color:var(--raqm-input-disabled-bg);opacity:var(--raqm-disabled-opacity);cursor:not-allowed}.raqm-combobox-chip{display:flex;inline-size:fit-content;align-items:center;justify-content:center;gap:calc(var(--raqm-spacing) * 1);block-size:calc(var(--raqm-spacing) * 5.25);border-radius:var(--raqm-radius-sm);padding-inline:calc(var(--raqm-spacing) * 1.5);background-color:var(--raqm-muted);color:var(--raqm-foreground);font-size:var(--raqm-font-size-xs);font-weight:var(--raqm-font-weight-medium);white-space:nowrap}.raqm-combobox-chip:has(>.raqm-combobox-chip-remove){padding-inline-end:0}.raqm-combobox-chip-label{pointer-events:none}.raqm-combobox-chip-input{flex:1 1 auto;min-inline-size:calc(var(--raqm-spacing) * 16);inline-size:auto;block-size:auto;align-self:center;border:0;border-radius:0;background-color:transparent;box-shadow:none;padding:0;font-size:var(--raqm-font-size-sm);color:var(--raqm-foreground)}.raqm-combobox-chip-input:focus-visible{border-color:transparent;box-shadow:none}.raqm-combobox-chip-input::placeholder{color:var(--raqm-muted-foreground)}.raqm-combobox-trigger{inline-size:calc(var(--raqm-spacing) * 64);justify-content:space-between;font-weight:var(--raqm-font-weight-normal)}.raqm-combobox-trigger-value{display:flex;flex:1 1 auto;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.raqm-combobox-inline{inline-size:auto;max-inline-size:100%}.raqm-button.raqm-combobox-inline-trigger[data-raqm-size],.raqm-button.raqm-combobox-clear[data-raqm-size]{inline-size:calc(var(--raqm-spacing) * 6);padding-inline:0}.raqm-combobox-trigger-icon{color:var(--raqm-muted-foreground)}.raqm-combobox-popup{box-sizing:border-box;position:relative;inline-size:100%;max-block-size:min(var(--raqm-spacing) * 72,var(--raqm-combobox-available-height, 100vh));min-inline-size:calc(var(--raqm-spacing) * 36);overflow:hidden;border-radius:var(--raqm-radius-lg);background-color:color-mix(in oklch,var(--raqm-popover) 70%,transparent);color:var(--raqm-popover-foreground);box-shadow:var(--raqm-shadow-md),0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);transition-duration:var(--raqm-duration-fast)}.raqm-combobox-popup:before{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%)}.raqm-combobox-search{inline-size:auto;margin:var(--raqm-spacing);margin-block-end:0;block-size:calc(var(--raqm-spacing) * 8);box-shadow:none;background-color:color-mix(in oklch,var(--raqm-input) 30%,transparent);border-color:color-mix(in oklch,var(--raqm-input) 30%,transparent)}.raqm-combobox-list{max-block-size:min(var(--raqm-spacing) * 72 - var(--raqm-spacing) * 9,var(--raqm-combobox-available-height, 100vh) - var(--raqm-spacing) * 9);scroll-padding-block:var(--raqm-spacing);overflow-y:auto;overscroll-behavior:contain;padding:var(--raqm-spacing);scrollbar-width:none}.raqm-combobox-list::-webkit-scrollbar{display:none}.raqm-combobox-list[data-raqm-empty]{padding:0}.raqm-combobox-group-label{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-xs);color:var(--raqm-muted-foreground)}.raqm-combobox-separator{background-color:var(--raqm-border);block-size:1px;margin-inline:calc(var(--raqm-spacing) * -1);margin-block:var(--raqm-spacing)}.raqm-combobox-option-description{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.raqm-combobox-option{position:relative;display:flex;inline-size:100%;align-items:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;gap:calc(var(--raqm-spacing) * 2);border-radius:var(--raqm-radius-md);padding-block:var(--raqm-spacing);padding-inline-start:calc(var(--raqm-spacing) * 1.5);padding-inline-end:calc(var(--raqm-spacing) * 8);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-combobox-option[aria-disabled=true]{pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-combobox-option--active,.raqm-combobox-option[data-raqm-highlighted]{background-color:var(--raqm-accent);color:var(--raqm-accent-foreground)}.raqm-combobox-option-indicator{position:absolute;inset-inline-end:calc(var(--raqm-spacing) * 2);display:flex;inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);align-items:center;justify-content:center;pointer-events:none;visibility:hidden}.raqm-combobox-option[aria-selected=true] .raqm-combobox-option-indicator{visibility:visible}.raqm-combobox-option-indicator svg{inline-size:100%;block-size:100%}.raqm-combobox-option-text{display:flex;flex:1 1 auto;gap:calc(var(--raqm-spacing) * 2)}.raqm-combobox-empty{display:flex;inline-size:100%;justify-content:center;padding-block:calc(var(--raqm-spacing) * 2);text-align:center;font-size:var(--raqm-font-size-sm);color:var(--raqm-muted-foreground)}:host{display:inline-block;max-inline-size:100%}.raqm-combobox-label{display:block;margin-block-end:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);color:var(--raqm-foreground)}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: RaqmButton,
+				selector: "button[raqm-button], a[raqm-button]",
+				inputs: [
+					"raqm-button",
+					"extra-small",
+					"small",
+					"large",
+					"icon",
+					"icon-extra-small",
+					"icon-small",
+					"icon-large",
+					"disabled",
+					"tabindex"
+				]
+			},
+			{
+				kind: "directive",
+				type: RaqmInput,
+				selector: "input[raqm-input]",
+				inputs: ["raqm-input"]
+			},
+			{
+				kind: "component",
+				type: i1.RaqmInputGroupComponent,
+				selector: "raqm-input-group"
+			},
+			{
+				kind: "component",
+				type: i1.RaqmInputGroupAddonComponent,
+				selector: "raqm-input-group-addon",
+				inputs: ["align"]
+			},
+			{
+				kind: "directive",
+				type: i1.RaqmInputGroupButtonDirective,
+				selector: "button[raqm-button][raqm-input-group-button]"
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCombobox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-combobox",
+			imports: [
+				RaqmButton,
+				RaqmInput,
+				RaqmInputGroup,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RaqmCombobox),
+				multi: true
+			}],
+			host: {
+				class: "raqm-combobox",
+				"[attr.data-raqm-mode]": "mode()",
+				"[attr.data-raqm-disabled]": "effectiveDisabled() ? \"true\" : null",
+				"[attr.data-raqm-invalid]": "invalid() ? \"true\" : null",
+				"[attr.data-raqm-open]": "open() ? \"true\" : null"
+			},
+			template: "@if (label(); as labelText) {\r\n  <!-- `for` targets the real control id, not the custom-element host. -->\r\n  <label class=\"raqm-combobox-label\" [attr.for]=\"resolvedInputId()\" [attr.id]=\"labelId()\">\r\n    {{ labelText }}\r\n  </label>\r\n}\r\n\r\n@if (mode() === 'multiple') {\r\n  <!-- Multiple chip field: the overlay anchor, owning the focus and invalid boundary. -->\r\n  <div\r\n    #chips\r\n    class=\"raqm-combobox-chips\"\r\n    [attr.data-raqm-invalid]=\"invalid() ? 'true' : null\"\r\n    (pointerdown)=\"field.onChipsPointerDown($event)\"\r\n  >\r\n    @for (chip of chipViews(); track chip.value) {\r\n      <span class=\"raqm-combobox-chip\">\r\n        <span class=\"raqm-combobox-chip-label\">{{ chip.label }}</span>\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-chip-remove\"\r\n          [disabled]=\"effectiveDisabled() || !chip.removable\"\r\n          [attr.aria-label]=\"removeLabel() ? removeLabel() + ' ' + chip.label : null\"\r\n          (click)=\"field.onChipRemoveClick($index, $event)\"\r\n          (keydown)=\"keyboard.onChipKeydown($index, $event)\"\r\n        >\r\n          <svg\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"M18 6 6 18\" />\r\n            <path d=\"m6 6 12 12\" />\r\n          </svg>\r\n        </button>\r\n      </span>\r\n    }\r\n\r\n    <!-- The one editable control; `role=\"combobox\"` and `aria-activedescendant` wire the listbox. -->\r\n    <input\r\n      raqm-input\r\n      type=\"text\"\r\n      class=\"raqm-combobox-input raqm-combobox-chip-input\"\r\n      role=\"combobox\"\r\n      aria-haspopup=\"listbox\"\r\n      aria-autocomplete=\"list\"\r\n      autocomplete=\"off\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.aria-expanded]=\"open()\"\r\n      [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n      [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.aria-describedby]=\"describedBy() ?? null\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [disabled]=\"effectiveDisabled()\"\r\n      [value]=\"composingValue() ?? query()\"\r\n      (pointerdown)=\"field.onInputPointerDown()\"\r\n      (input)=\"field.onInput($event)\"\r\n      (compositionstart)=\"field.onCompositionStart($event)\"\r\n      (compositionend)=\"field.onCompositionEnd($event)\"\r\n      (keydown)=\"keyboard.onKeydown($event)\"\r\n      (focusout)=\"field.onFocusOut($event)\"\r\n    />\r\n  </div>\r\n} @else if (mode() === 'inline') {\r\n  <!-- Inline: the Input Group is the anchor; the clear button replaces the chevron trigger. -->\r\n  <raqm-input-group #inlineGroup class=\"raqm-combobox-inline\">\r\n    @if (inlinePrefix(); as prefix) {\r\n      <raqm-input-group-addon align=\"inline-start\">\r\n        <ng-container [ngTemplateOutlet]=\"prefix\" />\r\n      </raqm-input-group-addon>\r\n    }\r\n    <input\r\n      raqm-input\r\n      type=\"text\"\r\n      class=\"raqm-combobox-input\"\r\n      role=\"combobox\"\r\n      aria-haspopup=\"listbox\"\r\n      aria-autocomplete=\"list\"\r\n      autocomplete=\"off\"\r\n      [attr.id]=\"resolvedInputId()\"\r\n      [attr.aria-expanded]=\"open()\"\r\n      [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n      [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.aria-describedby]=\"describedBy() ?? null\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.placeholder]=\"placeholder()\"\r\n      [disabled]=\"effectiveDisabled()\"\r\n      [value]=\"inlineValue()\"\r\n      (focus)=\"field.onInlineFocus($event)\"\r\n      (pointerdown)=\"field.onInputPointerDown()\"\r\n      (input)=\"field.onInput($event)\"\r\n      (compositionstart)=\"field.onCompositionStart($event)\"\r\n      (compositionend)=\"field.onCompositionEnd($event)\"\r\n      (keydown)=\"keyboard.onKeydown($event)\"\r\n      (focusout)=\"field.onFocusOut($event)\"\r\n    />\r\n    <raqm-input-group-addon align=\"inline-end\">\r\n      @if (showClear() && selectedLabel() !== null) {\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          raqm-input-group-button\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-clear\"\r\n          [attr.aria-label]=\"clearLabel()\"\r\n          [disabled]=\"effectiveDisabled() || !selectionRemovable()\"\r\n          (click)=\"field.onClearClick($event)\"\r\n        >\r\n          <svg\r\n            class=\"raqm-combobox-clear-icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"M18 6 6 18\" />\r\n            <path d=\"m6 6 12 12\" />\r\n          </svg>\r\n        </button>\r\n      } @else if (showTrigger()) {\r\n        <button\r\n          raqm-button=\"ghost\"\r\n          raqm-input-group-button\r\n          type=\"button\"\r\n          icon-extra-small\r\n          class=\"raqm-combobox-inline-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-label]=\"triggerLabel()\"\r\n          [attr.aria-expanded]=\"open()\"\r\n          [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n          [disabled]=\"effectiveDisabled()\"\r\n          (click)=\"field.onTriggerClick()\"\r\n          (keydown)=\"keyboard.onTriggerKeydown($event)\"\r\n        >\r\n          <svg\r\n            class=\"raqm-combobox-trigger-icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n          >\r\n            <path d=\"m6 9 6 6 6-6\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n    </raqm-input-group-addon>\r\n  </raqm-input-group>\r\n} @else {\r\n  <!-- Popup trigger; it never holds focus while the search field does. -->\r\n  <button\r\n    raqm-button=\"outline\"\r\n    #trigger\r\n    type=\"button\"\r\n    class=\"raqm-combobox-trigger\"\r\n    role=\"combobox\"\r\n    aria-haspopup=\"listbox\"\r\n    [attr.id]=\"resolvedInputId()\"\r\n    [attr.aria-expanded]=\"open()\"\r\n    [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n    [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n    [attr.aria-describedby]=\"describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n    [disabled]=\"effectiveDisabled()\"\r\n    (click)=\"field.onTriggerClick()\"\r\n    (keydown)=\"keyboard.onTriggerKeydown($event)\"\r\n    (focusout)=\"field.onFocusOut($event)\"\r\n  >\r\n    <span class=\"raqm-combobox-trigger-value\">{{ selectedLabel() ?? placeholder() }}</span>\r\n    <svg\r\n      class=\"raqm-combobox-trigger-icon\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\"\r\n    >\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  </button>\r\n}\r\n\r\n<!-- Instantiated into a CDK overlay from this view, so component styles apply. -->\r\n<ng-template #popup>\r\n  <div\r\n    class=\"raqm-combobox-popup\"\r\n    [attr.id]=\"popupId()\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-anchor]=\"mode()\"\r\n  >\r\n    @if (mode() === 'popup') {\r\n      <!-- Inner search field; deliberately no inner trigger or clear. -->\r\n      <raqm-input-group class=\"raqm-combobox-search\">\r\n        <input\r\n          raqm-input\r\n          type=\"text\"\r\n          class=\"raqm-combobox-input raqm-combobox-search-input\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-autocomplete=\"list\"\r\n          autocomplete=\"off\"\r\n          [attr.id]=\"searchId()\"\r\n          [attr.aria-expanded]=\"open()\"\r\n          [attr.aria-controls]=\"listboxId()\"\r\n          [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n          [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n          [attr.aria-describedby]=\"describedBy() ?? null\"\r\n          [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n          [attr.placeholder]=\"searchPlaceholder()\"\r\n          [disabled]=\"effectiveDisabled()\"\r\n          [value]=\"composingValue() ?? query()\"\r\n          (input)=\"field.onInput($event)\"\r\n          (compositionstart)=\"field.onCompositionStart($event)\"\r\n          (compositionend)=\"field.onCompositionEnd($event)\"\r\n          (keydown)=\"keyboard.onKeydown($event)\"\r\n          (focusout)=\"field.onFocusOut($event)\"\r\n        />\r\n        <raqm-input-group-addon align=\"inline-end\"></raqm-input-group-addon>\r\n      </raqm-input-group>\r\n    }\r\n\r\n    <!-- No-results message; the list collapses to zero padding while it shows. -->\r\n    @if (filteredItems().length === 0 && emptyText(); as emptyMessage) {\r\n      <div class=\"raqm-combobox-empty\">{{ emptyMessage }}</div>\r\n    }\r\n\r\n    <!-- Real listbox; `aria-multiselectable` only in Multiple. -->\r\n    <div\r\n      class=\"raqm-combobox-list\"\r\n      role=\"listbox\"\r\n      [attr.id]=\"listboxId()\"\r\n      [attr.aria-multiselectable]=\"mode() === 'multiple' ? 'true' : null\"\r\n      [attr.aria-labelledby]=\"inputLabelledBy()\"\r\n      [attr.data-raqm-empty]=\"filteredItems().length === 0 ? '' : null\"\r\n    >\r\n      @for (entry of renderEntries(); track $index) {\r\n        @if (entry.separatorBefore && !$first) {\r\n          <div class=\"raqm-combobox-separator\" role=\"presentation\" aria-hidden=\"true\"></div>\r\n        }\r\n        @if (entry.label !== null) {\r\n          <div role=\"group\" [attr.aria-labelledby]=\"entry.id\">\r\n            <div class=\"raqm-combobox-group-label\" [attr.id]=\"entry.id\">{{ entry.label }}</div>\r\n            @for (view of entry.options; track view.id) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"option\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: view }\"\r\n              />\r\n            }\r\n          </div>\r\n        } @else {\r\n          @for (view of entry.options; track view.id) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"option\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: view }\"\r\n            />\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #option let-view>\r\n  <div\r\n    class=\"raqm-combobox-option\"\r\n    role=\"option\"\r\n    [attr.id]=\"view.id\"\r\n    [attr.aria-selected]=\"field.isSelected(view.item) ? 'true' : 'false'\"\r\n    [attr.aria-disabled]=\"isOptionDisabled(view.item) ? 'true' : null\"\r\n    [attr.aria-label]=\"view.item.label\"\r\n    [attr.aria-describedby]=\"view.item.description ? view.id + '-description' : null\"\r\n    [class.raqm-combobox-option--active]=\"view.id === activeId()\"\r\n    [attr.data-raqm-highlighted]=\"view.id === activeId() ? '' : null\"\r\n    (pointerdown)=\"$event.preventDefault()\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n    (pointermove)=\"field.onOptionPointerMove(view, $event)\"\r\n    (pointerleave)=\"field.onOptionPointerLeave($event)\"\r\n    (click)=\"field.onOptionClick(view.item)\"\r\n  >\r\n    @if (view.item.description) {\r\n      <span class=\"raqm-combobox-option-description\" [attr.id]=\"view.id + '-description'\">{{\r\n        view.item.description\r\n      }}</span>\r\n    }\r\n    <span class=\"raqm-combobox-option-indicator\" aria-hidden=\"true\">\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"M20 6 9 17l-5-5\" />\r\n      </svg>\r\n    </span>\r\n    <span class=\"raqm-combobox-option-text\">\r\n      @if (itemTemplate(); as template) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"template\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: view.item,\r\n            item: view.item,\r\n            selected: field.isSelected(view.item),\r\n            active: view.id === activeId(),\r\n          }\"\r\n        />\r\n      } @else {\r\n        {{ view.item.label }}\r\n      }\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [".raqm-combobox-chips{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--raqm-spacing) * 1);min-block-size:calc(var(--raqm-spacing) * 8);inline-size:100%;box-sizing:border-box;border:1px solid var(--raqm-input);border-radius:var(--raqm-radius-lg);background-color:var(--raqm-control-bg);background-clip:padding-box;padding-inline:calc(var(--raqm-spacing) * 2.5);padding-block:calc(var(--raqm-spacing) * 1);font-size:var(--raqm-font-size-sm);color:var(--raqm-foreground);transition:color var(--raqm-duration-base) var(--raqm-ease-standard),background-color var(--raqm-duration-base) var(--raqm-ease-standard),border-color var(--raqm-duration-base) var(--raqm-ease-standard),box-shadow var(--raqm-duration-base) var(--raqm-ease-standard)}.raqm-combobox-chips:has(>.raqm-combobox-chip){padding-inline:calc(var(--raqm-spacing) * 1)}.raqm-combobox-chips:focus-within{border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-combobox-chips[data-raqm-invalid=true]{border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-combobox-chips:has(>.raqm-combobox-chip-input:disabled){background-color:var(--raqm-input-disabled-bg);opacity:var(--raqm-disabled-opacity);cursor:not-allowed}.raqm-combobox-chip{display:flex;inline-size:fit-content;align-items:center;justify-content:center;gap:calc(var(--raqm-spacing) * 1);block-size:calc(var(--raqm-spacing) * 5.25);border-radius:var(--raqm-radius-sm);padding-inline:calc(var(--raqm-spacing) * 1.5);background-color:var(--raqm-muted);color:var(--raqm-foreground);font-size:var(--raqm-font-size-xs);font-weight:var(--raqm-font-weight-medium);white-space:nowrap}.raqm-combobox-chip:has(>.raqm-combobox-chip-remove){padding-inline-end:0}.raqm-combobox-chip-label{pointer-events:none}.raqm-combobox-chip-input{flex:1 1 auto;min-inline-size:calc(var(--raqm-spacing) * 16);inline-size:auto;block-size:auto;align-self:center;border:0;border-radius:0;background-color:transparent;box-shadow:none;padding:0;font-size:var(--raqm-font-size-sm);color:var(--raqm-foreground)}.raqm-combobox-chip-input:focus-visible{border-color:transparent;box-shadow:none}.raqm-combobox-chip-input::placeholder{color:var(--raqm-muted-foreground)}.raqm-combobox-trigger{inline-size:calc(var(--raqm-spacing) * 64);justify-content:space-between;font-weight:var(--raqm-font-weight-normal)}.raqm-combobox-trigger-value{display:flex;flex:1 1 auto;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.raqm-combobox-inline{inline-size:auto;max-inline-size:100%}.raqm-button.raqm-combobox-inline-trigger[data-raqm-size],.raqm-button.raqm-combobox-clear[data-raqm-size]{inline-size:calc(var(--raqm-spacing) * 6);padding-inline:0}.raqm-combobox-trigger-icon{color:var(--raqm-muted-foreground)}.raqm-combobox-popup{box-sizing:border-box;position:relative;inline-size:100%;max-block-size:min(var(--raqm-spacing) * 72,var(--raqm-combobox-available-height, 100vh));min-inline-size:calc(var(--raqm-spacing) * 36);overflow:hidden;border-radius:var(--raqm-radius-lg);background-color:color-mix(in oklch,var(--raqm-popover) 70%,transparent);color:var(--raqm-popover-foreground);box-shadow:var(--raqm-shadow-md),0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);transition-duration:var(--raqm-duration-fast)}.raqm-combobox-popup:before{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%)}.raqm-combobox-search{inline-size:auto;margin:var(--raqm-spacing);margin-block-end:0;block-size:calc(var(--raqm-spacing) * 8);box-shadow:none;background-color:color-mix(in oklch,var(--raqm-input) 30%,transparent);border-color:color-mix(in oklch,var(--raqm-input) 30%,transparent)}.raqm-combobox-list{max-block-size:min(var(--raqm-spacing) * 72 - var(--raqm-spacing) * 9,var(--raqm-combobox-available-height, 100vh) - var(--raqm-spacing) * 9);scroll-padding-block:var(--raqm-spacing);overflow-y:auto;overscroll-behavior:contain;padding:var(--raqm-spacing);scrollbar-width:none}.raqm-combobox-list::-webkit-scrollbar{display:none}.raqm-combobox-list[data-raqm-empty]{padding:0}.raqm-combobox-group-label{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-xs);color:var(--raqm-muted-foreground)}.raqm-combobox-separator{background-color:var(--raqm-border);block-size:1px;margin-inline:calc(var(--raqm-spacing) * -1);margin-block:var(--raqm-spacing)}.raqm-combobox-option-description{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.raqm-combobox-option{position:relative;display:flex;inline-size:100%;align-items:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;gap:calc(var(--raqm-spacing) * 2);border-radius:var(--raqm-radius-md);padding-block:var(--raqm-spacing);padding-inline-start:calc(var(--raqm-spacing) * 1.5);padding-inline-end:calc(var(--raqm-spacing) * 8);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-combobox-option[aria-disabled=true]{pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-combobox-option--active,.raqm-combobox-option[data-raqm-highlighted]{background-color:var(--raqm-accent);color:var(--raqm-accent-foreground)}.raqm-combobox-option-indicator{position:absolute;inset-inline-end:calc(var(--raqm-spacing) * 2);display:flex;inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);align-items:center;justify-content:center;pointer-events:none;visibility:hidden}.raqm-combobox-option[aria-selected=true] .raqm-combobox-option-indicator{visibility:visible}.raqm-combobox-option-indicator svg{inline-size:100%;block-size:100%}.raqm-combobox-option-text{display:flex;flex:1 1 auto;gap:calc(var(--raqm-spacing) * 2)}.raqm-combobox-empty{display:flex;inline-size:100%;justify-content:center;padding-block:calc(var(--raqm-spacing) * 2);text-align:center;font-size:var(--raqm-font-size-sm);color:var(--raqm-muted-foreground)}:host{display:inline-block;max-inline-size:100%}.raqm-combobox-label{display:block;margin-block-end:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);color:var(--raqm-foreground)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		popupTemplate: [{
+			type: i0.ViewChild,
+			args: ["popup", {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		itemTemplateDirective: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmComboboxItemDirective), { isSignal: true }]
+		}],
+		inlinePrefixDirective: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RaqmComboboxPrefixDirective), { isSignal: true }]
+		}],
+		chipsRef: [{
+			type: i0.ViewChild,
+			args: ["chips", { isSignal: true }]
+		}],
+		triggerRef: [{
+			type: i0.ViewChild,
+			args: ["trigger", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		inlineGroupRef: [{
+			type: i0.ViewChild,
+			args: ["inlineGroup", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		popupWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupWidth",
+				required: false
+			}]
+		}],
+		popupAlignOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupAlignOffset",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		labelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelledBy",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		searchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchPlaceholder",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		autoHighlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoHighlight",
+				required: false
+			}]
+		}],
+		showTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTrigger",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		triggerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "triggerLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { RaqmCombobox, RaqmComboboxItemDirective, RaqmComboboxPrefixDirective };
+
+//# sourceMappingURL=raqm-ui-combobox.mjs.map