@placeholderco/placeholder-ui 2.6.0 → 2.6.2

package/dist/form/SegmentedControl.svelte

@@ -33,11 +33,27 @@
 	// Calculate selected index for background positioning using derived state
 	const selectedIndex = $derived(options.findIndex((option) => option.value === value));
 
+	// Pending timers, cleared on destroy so they never read state after the component is gone
+	const pendingTimers = new Set<ReturnType<typeof setTimeout>>();
+
+	function scheduleRecalculate(delay: number) {
+		const id = setTimeout(() => {
+			pendingTimers.delete(id);
+			recalculateBackground();
+		}, delay);
+		pendingTimers.add(id);
+	}
+
 	onMount(() => {
 		// recalculate 10 times on startup to ensure background is positioned correctly
 		for (let i = 0; i < 10; i++) {
-			setTimeout(() => recalculateBackground(), 100 * i);
+			scheduleRecalculate(100 * i);
 		}
+
+		return () => {
+			for (const id of pendingTimers) clearTimeout(id);
+			pendingTimers.clear();
+		};
 	});
 
 	// Update background position and size based on selected element
@@ -60,7 +76,7 @@
 	 */
 	export function recalculateBackground(delay?: number) {
 		if (delay) {
-			setTimeout(() => recalculateBackground(), delay);
+			scheduleRecalculate(delay);
 			return;
 		}
 

package/dist/form/TimePicker.svelte

@@ -8,7 +8,7 @@
 		required?: boolean;
 		/** CSS classes for the container element */
 		containerClass?: string;
-		/** Selected time value in HH:mm format (bindable) */
+		/** Selected time value in HH:mm:ss format (bindable). Accepts HH:mm or HH:mm:ss on input; always emits HH:mm:ss. */
 		value?: string | undefined;
 		/** Use rounded time increments */
 		rounded?: boolean;
@@ -19,7 +19,7 @@
 		/** Currently selected date (for date-time combinations) */
 		selectedDate?: string | undefined;
 		/** Callback when selected time changes */
-		onchange?: (date: string | undefined) => void;
+		onchange?: (time: string | undefined) => void;
 	}
 </script>
 
@@ -151,7 +151,7 @@
 			value = timeString;
 			return;
 		}
-		value = dayjs().format('HH:mm');
+		value = dayjs().format('HH:mm:ss');
 	};
 
 	if (value === undefined) {

package/dist/form/TimePicker.svelte.d.ts

@@ -7,7 +7,7 @@ export interface TimePickerProps {
     required?: boolean;
     /** CSS classes for the container element */
     containerClass?: string;
-    /** Selected time value in HH:mm format (bindable) */
+    /** Selected time value in HH:mm:ss format (bindable). Accepts HH:mm or HH:mm:ss on input; always emits HH:mm:ss. */
     value?: string | undefined;
     /** Use rounded time increments */
     rounded?: boolean;
@@ -18,7 +18,7 @@ export interface TimePickerProps {
     /** Currently selected date (for date-time combinations) */
     selectedDate?: string | undefined;
     /** Callback when selected time changes */
-    onchange?: (date: string | undefined) => void;
+    onchange?: (time: string | undefined) => void;
 }
 declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
 type TimePicker = ReturnType<typeof TimePicker>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",