Combobox: fix icon padding issue with compact mode

src/lib/Combobox.svelte

@@ -41,7 +41,7 @@
 	import Label from './Label.svelte';
 	import StyledRawInput from './StyledRawInput.svelte';
 	import { InputValidatorEvent, validate, type ValidatorOptions } from '@svelte-toolkit/validate';
-	import { untrack, type Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import { scale } from 'svelte/transition';
 	import { generateIdentifier, type IconDef } from './util';
 	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
@@ -314,11 +314,7 @@
 		easing: cubicOut
 	});
 	$effect(() => {
-		if (iconWidth >= 0) {
+		inputPadding.target = calculatePadding();
-			untrack(() => {
-				inputPadding.target = calculatePadding();
-			});
-		}
 	});
 
 	/*** HELPER FUNCTIONS ***/

src/lib/floating.svelte.ts

@@ -4,7 +4,7 @@
  * for more details, examples, and original source.
  */
 
-import { computePosition, autoUpdate, flip, offset, type Placement } from '@floating-ui/dom';
+import { computePosition, autoUpdate, flip, offset, type Placement, size } from '@floating-ui/dom';
 import { createAttachmentKey } from 'svelte/attachments';
 
 /**
@@ -17,6 +17,13 @@ export interface PopoverOptions {
 	placement?: Placement;
 	/** Offset distance between the reference and floating elements (default: 8) */
 	offset?: number;
+	/**
+	 * Constraints the width and height of the popover to prevent it from
+	 * overflowing the viewport. If true, the popover will adjust its max-width
+	 * and max-height to fit. Scrolling is the responsibility of the parent
+	 * element. Default is true.
+	 */
+	constrainSize?: boolean;
 	/** Callback when the popover is opened or closed */
 	ontoggle?: (open: boolean) => void;
 }
@@ -29,10 +36,12 @@ export class Popover {
 	private options: PopoverOptions = {
 		interaction: 'click',
 		placement: 'bottom-start',
-		offset: 8
+		offset: 8,
+		constrainSize: true
 	};
 	private referenceElement: HTMLElement | undefined = $state();
 	private floatingElement: HTMLElement | undefined = $state();
+	private positionElement: HTMLElement | undefined = $state();
 	private open = $state(false);
 
 	/**
@@ -87,6 +96,23 @@ export class Popover {
 		return attrs;
 	}
 
+	/**
+	 * Optionally sets the positioning element for the popover, which is used
+	 * for calculating the position of the floating element. If not set, the
+	 * reference element is used by default.
+	 * @returns An object containing an attachment key for the positioning element.
+	 */
+	positionReference() {
+		return {
+			[createAttachmentKey()]: (node: HTMLElement) => {
+				this.positionElement = node;
+				return () => {
+					this.positionElement = undefined;
+				};
+			}
+		};
+	}
+
 	/** Returns whether the popover is open */
 	isOpen() {
 		return this.open;
@@ -122,6 +148,38 @@ export class Popover {
 		};
 	}
 
+	/**
+	 * Callback function that closes the popover when the Escape key is pressed.
+	 * Can be applied to the window, typically via <svelte:window onkeydown={popover.handleEscape} />,
+	 * or to any other element that will receive keyboard events while the popover is open.
+	 * @param event - The keyboard event to handle.
+	 */
+	handleEscape(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			this.setOpen(false);
+		}
+	}
+
+	/**
+	 * Callback function that closes the popover when a click occurs outside of the
+	 * reference and floating elements. Should be applied to the window, typically
+	 * via <svelte:window onclick={popover.handleClickOutside} />.
+	 * @param event - The click event to handle.
+	 */
+	handleClickOutside(event: MouseEvent) {
+		if (!this.isOpen() || !this.referenceElement || !this.floatingElement) {
+			return;
+		}
+
+		if (
+			event.target instanceof Node &&
+			!this.referenceElement.contains(event.target) &&
+			!this.floatingElement.contains(event.target)
+		) {
+			this.setOpen(false);
+		}
+	}
+
 	/**
 	 * Updates the position of the floating element based on the reference element using
 	 * the computePosition function from floating-ui. It applies the calculated
@@ -131,9 +189,24 @@ export class Popover {
 		if (!this.referenceElement || !this.floatingElement) {
 			return;
 		}
-		const position = await computePosition(this.referenceElement, this.floatingElement, {
+		const reference = this.positionElement || this.referenceElement;
+		const position = await computePosition(reference, this.floatingElement, {
 			placement: this.options.placement,
-			middleware: [flip(), offset(this.options.offset)]
+			middleware: [
+				flip(),
+				offset(this.options.offset),
+				size({
+					apply: ({ availableWidth, availableHeight, elements }) => {
+						if (this.options.constrainSize) {
+							elements.floating.style.maxWidth = `${availableWidth}px`;
+							elements.floating.style.maxHeight = `${availableHeight}px`;
+						} else {
+							elements.floating.style.maxWidth = '';
+							elements.floating.style.maxHeight = '';
+						}
+					}
+				})
+			]
 		});
 		const { x, y } = position;
 		Object.assign(this.floatingElement.style, {