@joewinke/jatui 0.8.3 → 0.8.5

package/dist/components/SearchDropdown.svelte

@@ -32,6 +32,7 @@
 		dropup = false,
 		appendToBody = false,
 		clearable = false,
+		clearLabel = 'Clear selection',
 		triggerAttrs,
 		embedded = false,
 		onChange,
@@ -57,6 +58,8 @@
 		appendToBody?: boolean;
 		/** Show an × button on the trigger when a value is selected */
 		clearable?: boolean;
+		/** Accessible label for the clear (×) button. */
+		clearLabel?: string;
 		/** Extra attributes forwarded to the trigger button (e.g. data-rail-id) */
 		triggerAttrs?: Record<string, string>;
 		/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
@@ -194,6 +197,35 @@
 		}
 	}
 
+	function positionPanel() {
+		if (!triggerRef) return;
+		const rect = triggerRef.getBoundingClientRect();
+		const width = Math.max(rect.width, 192);
+		// Viewport-aware flip: if there isn't room below the trigger but there
+		// is above, anchor the panel to the trigger's top and grow upward. This
+		// keeps the panel on-screen for rows near the bottom of a scroll area
+		// (e.g. suggested-task rows in the completed-session overlay).
+		const estPanelHeight = 300;
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+		const flipUp = spaceBelow < estPanelHeight && spaceAbove > spaceBelow;
+		// Clamp left so a right-edge trigger doesn't push the panel off-screen.
+		const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
+		// .sd-panel's class rule always sets `top: 100%`, so each branch must
+		// explicitly reset the property it isn't using — otherwise the flip-up
+		// branch ends up with both top (100% = viewport height) and bottom set
+		// while height is auto, which over-constrains to a negative (clamped
+		// to 0) height and the whole panel silently renders invisible.
+		const vertical = flipUp
+			? `bottom: ${window.innerHeight - rect.top + 4}px; top: auto;`
+			: `top: ${rect.bottom + 4}px; bottom: auto;`;
+		// min-width override is required: .sd-panel's class rule sets
+		// `min-width: max(100%, 14rem)`, and for a position:fixed element
+		// that 100% resolves against the viewport, not the trigger — without
+		// this override the panel balloons to ~100vw wide.
+		panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; min-width: ${width}px; margin-top: 0;`;
+	}
+
 	$effect(() => {
 		if (embedded) {
 			tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });
@@ -201,31 +233,26 @@
 		}
 		if (open) {
 			if (appendToBody && triggerRef) {
-				const rect = triggerRef.getBoundingClientRect();
-				const width = Math.max(rect.width, 192);
-				// Viewport-aware flip: if there isn't room below the trigger but there
-				// is above, anchor the panel to the trigger's top and grow upward. This
-				// keeps the panel on-screen for rows near the bottom of a scroll area
-				// (e.g. suggested-task rows in the completed-session overlay).
-				const estPanelHeight = 300;
-				const spaceBelow = window.innerHeight - rect.bottom;
-				const spaceAbove = rect.top;
-				const flipUp = spaceBelow < estPanelHeight && spaceAbove > spaceBelow;
-				// Clamp left so a right-edge trigger doesn't push the panel off-screen.
-				const left = Math.max(8, Math.min(rect.left, window.innerWidth - width - 8));
-				// .sd-panel's class rule always sets `top: 100%`, so each branch must
-				// explicitly reset the property it isn't using — otherwise the flip-up
-				// branch ends up with both top (100% = viewport height) and bottom set
-				// while height is auto, which over-constrains to a negative (clamped
-				// to 0) height and the whole panel silently renders invisible.
-				const vertical = flipUp
-					? `bottom: ${window.innerHeight - rect.top + 4}px; top: auto;`
-					: `top: ${rect.bottom + 4}px; bottom: auto;`;
-				// min-width override is required: .sd-panel's class rule sets
-				// `min-width: max(100%, 14rem)`, and for a position:fixed element
-				// that 100% resolves against the viewport, not the trigger — without
-				// this override the panel balloons to ~100vw wide.
-				panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; min-width: ${width}px; margin-top: 0;`;
+				positionPanel();
+				// A position:fixed panel is anchored to the VIEWPORT, so without this it
+				// stays put while the page scrolls and appears to follow the reader down
+				// the page (Joe UAT 2026-09-25). Re-anchor on every scroll (capture: any
+				// scroll container) and resize; close once the trigger leaves the view.
+				const reanchor = (e?: Event) => {
+					if (e && e.target instanceof Node && containerRef?.contains(e.target)) return;
+					const r = triggerRef?.getBoundingClientRect();
+					if (!r || r.bottom < 0 || r.top > window.innerHeight) { open = false; searchQuery = ''; return; }
+					positionPanel();
+				};
+				window.addEventListener('scroll', reanchor, { capture: true, passive: true });
+				window.addEventListener('resize', reanchor, { passive: true });
+				document.addEventListener('mousedown', handleClickOutside);
+				tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });
+				return () => {
+					window.removeEventListener('scroll', reanchor, { capture: true });
+					window.removeEventListener('resize', reanchor);
+					document.removeEventListener('mousedown', handleClickOutside);
+				};
 			}
 			document.addEventListener('mousedown', handleClickOutside);
 			tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });
@@ -349,6 +376,7 @@
 			class:sd-disabled={disabled}
 			class:sd-chip={variant === 'chip'}
 			class:sd-sm={size === 'sm'}
+			class:sd-has-clear={clearable && value !== ''}
 			style={activeColor
 				? variant === 'chip'
 					? `--sd-color: ${activeColor};`
@@ -371,20 +399,23 @@
 				{/if}
 				<span class="truncate">{triggerLabel}</span>
 			</span>
-			{#if clearable && value !== ''}
-				<button
-					type="button"
-					class="sd-clear"
-					aria-label="Clear filter"
-					onclick={(e) => { e.stopPropagation(); onChange(''); }}
-				>
-					<svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-				</button>
-			{/if}
 			<svg class="sd-chevron" class:sd-chevron-open={open} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 			</svg>
 		</button>
+		<!-- The clear control is a SIBLING of the trigger (a <button> inside a
+		     <button> is invalid HTML and unreachable by keyboard), pinned to the
+		     trigger's right edge beside the chevron (mos-hhzd0). -->
+		{#if clearable && value !== ''}
+			<button
+				type="button"
+				class="sd-clear"
+				aria-label={clearLabel}
+				onclick={(e) => { e.stopPropagation(); onChange(''); }}
+			>
+				<svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+			</button>
+		{/if}
 
 		{#if open}
 			<div
@@ -494,6 +525,7 @@
 	}
 
 	.sd-trigger-label {
+		flex: 1 1 auto;
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
@@ -520,7 +552,16 @@
 		font-size: 0.75rem;
 	}
 
+	/* Room for the absolutely-positioned × between the label and the chevron
+	   (the chevron stays at the trigger's right edge). */
+	.sd-has-clear .sd-trigger-label {
+		padding-right: 1.25rem;
+	}
 	.sd-clear {
+		position: absolute;
+		top: 50%;
+		right: 1.5rem;
+		transform: translateY(-50%);
 		display: flex;
 		align-items: center;
 		justify-content: center;

package/dist/components/SearchDropdown.svelte.d.ts

@@ -29,6 +29,8 @@ type $$ComponentProps = {
     appendToBody?: boolean;
     /** Show an × button on the trigger when a value is selected */
     clearable?: boolean;
+    /** Accessible label for the clear (×) button. */
+    clearLabel?: string;
     /** Extra attributes forwarded to the trigger button (e.g. data-rail-id) */
     triggerAttrs?: Record<string, string>;
     /** Render inline without a trigger button — panel content is always visible, no dropdown behavior */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",