feat: improve styling and accessibility of Select component test page

Author: derekhearst

src/lib/Select.svelte

@@ -101,6 +101,7 @@
 
 	// Generate unique ID for popover
 	const popoverId = `select-popover-${Math.random().toString(36).slice(2, 9)}`
+	const anchorName = `--anchor-${popoverId}`
 
 	// Ensure value is properly typed for single/multiple mode
 	// Normalize on access rather than maintaining separate state
@@ -258,7 +259,6 @@
 	})
 
 	let searchEL: HTMLInputElement | undefined = $state(undefined)
-	let triggerEl: HTMLButtonElement | undefined = $state(undefined)
 	let popoverEl: HTMLElement | undefined = $state(undefined)
 	let scrollContainerEl: HTMLDivElement | undefined = $state(undefined)
 
@@ -347,55 +347,8 @@
 	// Virtual list implementation
 	let scrollTop = $state(0)
 	const itemHeight = 40 // Approximate height of each item in pixels
-	const maxContainerHeight = 320 // max-h-80 = 320px
-	const minContainerHeight = 120
-	let listViewportHeight = $state(maxContainerHeight)
+	const listViewportHeight = 320 // max-h-80 = 320px
 	let visibleCount = $derived(Math.ceil(listViewportHeight / itemHeight) + 2) // Add buffer items
-	let dropdownPanelStyle = $state('')
-	const dropdownGap = 8
-
-	function updateDropdownPosition() {
-		if (!triggerEl || !popoverEl) return
-
-		const rect = triggerEl.getBoundingClientRect()
-		const viewportHeight = window.innerHeight
-		const viewportWidth = window.innerWidth
-		const viewportPadding = 8
-
-		const spaceBelow = viewportHeight - rect.bottom - dropdownGap - viewportPadding
-		const spaceAbove = rect.top - dropdownGap - viewportPadding
-		const openUpward = spaceBelow < minContainerHeight && spaceAbove > spaceBelow
-
-		const availableHeight = Math.max(minContainerHeight, openUpward ? spaceAbove : spaceBelow)
-		listViewportHeight = Math.min(maxContainerHeight, availableHeight)
-
-		const maxLeft = Math.max(viewportPadding, viewportWidth - rect.width - viewportPadding)
-		const left = Math.min(Math.max(viewportPadding, rect.left), maxLeft)
-
-		const minWidthStyle = dropdownMinWidth ? `min-width: ${dropdownMinWidth};` : ''
-		if (openUpward) {
-			const bottom = Math.max(viewportPadding, viewportHeight - rect.top + dropdownGap)
-			dropdownPanelStyle = `position: fixed; left: ${left}px; bottom: ${bottom}px; width: ${rect.width}px; max-height: ${availableHeight}px; ${minWidthStyle}`
-		} else {
-			const top = Math.max(viewportPadding, rect.bottom + dropdownGap)
-			dropdownPanelStyle = `position: fixed; left: ${left}px; top: ${top}px; width: ${rect.width}px; max-height: ${availableHeight}px; ${minWidthStyle}`
-		}
-	}
-
-	$effect(() => {
-		if (!dropdownOpen) return
-
-		updateDropdownPosition()
-		const reposition = () => updateDropdownPosition()
-
-		window.addEventListener('resize', reposition)
-		window.addEventListener('scroll', reposition, true)
-
-		return () => {
-			window.removeEventListener('resize', reposition)
-			window.removeEventListener('scroll', reposition, true)
-		}
-	})
 
 	// Calculate visible items based on scroll position (for flatList)
 	let visibleItems = $derived.by(() => {
@@ -529,10 +482,7 @@
 	function handlePopoverToggle(e: ToggleEvent) {
 		dropdownOpen = e.newState === 'open'
 		if (dropdownOpen) {
-			requestAnimationFrame(() => {
-				updateDropdownPosition()
-				if (scrollContainerEl) scrollTop = scrollContainerEl.scrollTop
-			})
+			if (scrollContainerEl) scrollTop = scrollContainerEl.scrollTop
 			searchEL?.focus()
 		} else {
 			hasScrolledOnOpen = false
@@ -555,7 +505,6 @@
 	{#if !disabled}
 		<!-- Trigger button with popover target and anchor positioning -->
 		<button
-			bind:this={triggerEl}
 			type="button"
 			popovertarget={popoverId}
 			popovertargetaction="show"
@@ -565,6 +514,7 @@
 			aria-controls={popoverId}
 			tabindex="-1"
 			class="select relative h-max min-h-10 w-full min-w-12 cursor-pointer bg-none! pr-1 text-left"
+			style="anchor-name: {anchorName}"
 			title={tooltipText}
 			onclick={() => {
 				searchEL?.focus()
@@ -659,7 +609,7 @@
 			role="listbox"
 			inert={!dropdownOpen}
 			class="menu bg-base-100 rounded-box z-50 m-0 flex flex-col flex-nowrap gap-1 overflow-hidden p-2 shadow outline"
-			style={dropdownPanelStyle}
+			style="position: fixed; position-anchor: {anchorName}; top: anchor(bottom); left: anchor(left); width: anchor-size(width); max-width: calc(100vw - 1rem); margin-top: 0.5rem; margin-bottom: 0;{dropdownMinWidth ? ` min-width: ${dropdownMinWidth};` : ''} position-try-fallbacks: --select-above, --select-below-right, --select-above-right;"
 			ontoggle={handlePopoverToggle}>
 			{#if multiple && filteredItems.length > 1}
 				<!-- Select All / Clear All options for multi-select -->
@@ -778,6 +728,33 @@
 </Label>
 
 <style>
+	@position-try --select-above {
+		top: unset;
+		bottom: anchor(top);
+		left: anchor(left);
+		right: unset;
+		margin-top: 0;
+		margin-bottom: 0.5rem;
+	}
+
+	@position-try --select-below-right {
+		top: anchor(bottom);
+		bottom: unset;
+		left: unset;
+		right: anchor(right);
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+
+	@position-try --select-above-right {
+		top: unset;
+		bottom: anchor(top);
+		left: unset;
+		right: anchor(right);
+		margin-top: 0;
+		margin-bottom: 0.5rem;
+	}
+
 	/* The `menu` DaisyUI class applies display:flex as an author style, which has higher
 	   cascade priority than the UA stylesheet's display:none for closed [popover] elements.
 	   This rule restores the correct hide behavior without relying on UA defaults. */