From 97dd71e32815804af01f92575d283e88a6f128eb Mon Sep 17 00:00:00 2001
From: Tegan Churchill <tegan.churchill@temporal.io>
Date: Wed, 29 Jul 2026 13:59:11 -0700
Subject: [PATCH] Update holocene time-picker to runes syntax

---
 .../datetime-input.svelte                     |  2 +-
 src/lib/holocene/time-picker.svelte           | 38 ++++++++++++-------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
index a89d57f533..9246e307b7 100644
--- a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
+++ b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
@@ -52,6 +52,6 @@
     bind:minute
     bind:second
     twelveHourClock={false}
-    on:timechange={updateDatetime}
+    onTimeChange={updateDatetime}
   />
 </div>
diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
index 4fb76fb70a..bf38772d20 100644
--- a/src/lib/holocene/time-picker.svelte
+++ b/src/lib/holocene/time-picker.svelte
@@ -1,25 +1,37 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
   import Input from '$lib/holocene/input/input.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
 
-  export let hour = '';
-  export let minute = '';
-  export let second = '';
-  export let half: 'AM' | 'PM' = 'AM';
-  export let twelveHourClock = true;
-  export let includeSeconds = true;
-  export let disabled = false;
-  export let error = false;
-  export let idPrefix = '';
+  interface Props {
+    hour?: string;
+    minute?: string;
+    second?: string;
+    half?: 'AM' | 'PM';
+    twelveHourClock?: boolean;
+    includeSeconds?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    idPrefix?: string;
+    onTimeChange?: (value: string) => void;
+  }
 
-  const dispatch = createEventDispatcher();
+  let {
+    hour = $bindable(''),
+    minute = $bindable(''),
+    second = $bindable(''),
+    half = $bindable('AM'),
+    twelveHourClock = true,
+    includeSeconds = true,
+    disabled = false,
+    error = false,
+    idPrefix = '',
+    onTimeChange,
+  }: Props = $props();
 
   const onInput = (e: Event) => {
     const target = e.target as HTMLInputElement;
-    dispatch('timechange', target.value);
+    onTimeChange?.(target.value);
   };
 </script>