@joewinke/jatui 0.2.13 → 0.2.17

package/dist/components/SearchDropdown.svelte

@@ -183,10 +183,19 @@
 				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: ${rect.bottom + 4}px;`;
-				panelStyle = `position: fixed; z-index: 9999; ${vertical} left: ${left}px; width: ${width}px; margin-top: 0;`;
+					? `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;`;
 			}
 			document.addEventListener('mousedown', handleClickOutside);
 			tick().then(() => { searchInput?.focus(); scrollHighlightedIntoView(); });

package/dist/components/TimeSlotPicker.svelte

@@ -14,14 +14,22 @@
 		slots,
 		loading = false,
 		onSelect,
+		selectedSlot = null,
 		accentColor = 'primary',
 	}: {
 		slots: TimeSlot[];
 		loading?: boolean;
 		onSelect: (slot: TimeSlot) => void;
+		/** The currently-selected slot — rendered with an active highlight.
+		 * Compared by start-time value (not object identity) so a re-fetched
+		 * slots array still matches the selection. */
+		selectedSlot?: TimeSlot | null;
 		accentColor?: string;
 	} = $props();
 
+	const isSelected = (slot: TimeSlot): boolean =>
+		selectedSlot != null && slot.start.getTime() === selectedSlot.start.getTime();
+
 	const groupedSlots = $derived(() => {
 		const morning: TimeSlot[] = [];
 		const afternoon: TimeSlot[] = [];
@@ -97,7 +105,9 @@
 								disabled={!slot.available}
 								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
-										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										? isSelected(slot)
+											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
+											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
 							>
 								{formatTime(slot.start)}
@@ -122,7 +132,9 @@
 								disabled={!slot.available}
 								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
-										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										? isSelected(slot)
+											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
+											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
 							>
 								{formatTime(slot.start)}
@@ -148,7 +160,9 @@
 								disabled={!slot.available}
 								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
-										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
+										? isSelected(slot)
+											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
+											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
 							>
 								{formatTime(slot.start)}

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

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     slots: TimeSlot[];
     loading?: boolean;
     onSelect: (slot: TimeSlot) => void;
+    /** The currently-selected slot — rendered with an active highlight.
+     * Compared by start-time value (not object identity) so a re-fetched
+     * slots array still matches the selection. */
+    selectedSlot?: TimeSlot | null;
     accentColor?: string;
 };
 declare const TimeSlotPicker: import("svelte").Component<$$ComponentProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.13",
+  "version": "0.2.17",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",
@@ -67,10 +67,10 @@
     "build": "vite build",
     "build:site": "npm run package && vite build",
     "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs && node scripts/verify-dist.mjs",
-    "test:dist": "vitest run --config vitest.dist.config.ts",
+    "package": "svelte-package --input src/lib --output dist && node scripts/compile-rune-modules.mjs",
     "check:demos": "node scripts/check-demo-coverage.mjs",
     "guard": "node scripts/check-demo-coverage.mjs",
+    "test:dist": "vitest run --config vitest.dist.config.ts",
     "prepublishOnly": "node scripts/guard-ci-publish.mjs && npm run package"
   },
   "peerDependencies": {
@@ -159,10 +159,7 @@
     "svelte": "^5.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.0.0",
-    "vite": "^6.0.0",
-    "@vitest/browser": "^3.2.0",
-    "playwright": "^1.53.0",
-    "vitest": "^3.2.0"
+    "vite": "^6.0.0"
   },
   "dependencies": {
     "diff": "^9.0.0",