diff --git a/src/lib/components/search-attribute-filter/dropdown-filter-chip.svelte b/src/lib/components/search-attribute-filter/dropdown-filter-chip.svelte
index 59b03277ef..0c505056ba 100644
--- a/src/lib/components/search-attribute-filter/dropdown-filter-chip.svelte
+++ b/src/lib/components/search-attribute-filter/dropdown-filter-chip.svelte
@@ -226,12 +226,12 @@
     return false;
   }
 
-  const onStartDateChange = (d: CustomEvent) => {
-    start.date = startOfDay(d.detail);
+  const onStartDateChange = (d: Date) => {
+    start.date = startOfDay(d);
   };
 
-  const onEndDateChange = (d: CustomEvent) => {
-    end.date = startOfDay(d.detail);
+  const onEndDateChange = (d: Date) => {
+    end.date = startOfDay(d);
   };
 
   const applyTimeChanges = (
@@ -377,7 +377,7 @@
               <div class="flex flex-col gap-2">
                 <DatePicker
                   label={translate('common.start')}
-                  on:datechange={onStartDateChange}
+                  onDateChange={onStartDateChange}
                   selected={new Date(start.date)}
                   todayLabel={translate('common.today')}
                   closeLabel={translate('common.close')}
@@ -393,7 +393,7 @@
               <div class="flex flex-col gap-2">
                 <DatePicker
                   label={translate('common.end')}
-                  on:datechange={onEndDateChange}
+                  onDateChange={onEndDateChange}
                   selected={new Date(end.date)}
                   todayLabel={translate('common.today')}
                   closeLabel={translate('common.close')}
@@ -455,7 +455,7 @@
                   <DatePicker
                     label=""
                     labelHidden
-                    on:datechange={onStartDateChange}
+                    onDateChange={onStartDateChange}
                     selected={new Date(start.date)}
                     todayLabel={translate('common.today')}
                     closeLabel={translate('common.close')}
diff --git a/src/lib/components/search-attribute-filter/manual-query.svelte b/src/lib/components/search-attribute-filter/manual-query.svelte
index fb52eae196..6f788391b5 100644
--- a/src/lib/components/search-attribute-filter/manual-query.svelte
+++ b/src/lib/components/search-attribute-filter/manual-query.svelte
@@ -89,7 +89,7 @@
       clearable
       copyButtonLabel={translate('common.copy-icon-title')}
       clearButtonLabel={translate('common.clear-input-button-label')}
-      on:clear={handleClearInput}
+      onClear={handleClearInput}
       bind:value={manualSearchString}
       maxLength={MAX_QUERY_LENGTH}
       hideCount={!manualSearchString ||
diff --git a/src/lib/components/search.svelte b/src/lib/components/search.svelte
index 6cb9ff2d46..62c3dd272c 100644
--- a/src/lib/components/search.svelte
+++ b/src/lib/components/search.svelte
@@ -5,18 +5,38 @@
   import Input from '$lib/holocene/input/input.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  export let placeholder = `${translate('common.search')}…`;
-  export let label = translate('common.search');
-  export let value = '';
-  export let name = 'query';
-  export let icon = false;
-  export let id = kebabCase(`${label}-${name}`);
+  interface Props {
+    placeholder?: string;
+    label?: string;
+    value?: string;
+    name?: string;
+    icon?: boolean;
+    id?: string;
+    'data-testid'?: string;
+    oninput?: (e: Event) => void;
+    onsubmit?: (e: SubmitEvent) => void;
+  }
 
-  let testId = $$props['data-testid'] || id;
+  let {
+    placeholder = `${translate('common.search')}…`,
+    label = translate('common.search'),
+    value = $bindable(''),
+    name = 'query',
+    icon = false,
+    id = kebabCase(`${label}-${name}`),
+    'data-testid': dataTestId,
+    oninput,
+    onsubmit,
+  }: Props = $props();
+
+  const testId = $derived(dataTestId || id);
 </script>
 
 <form
-  on:submit|preventDefault
+  onsubmit={(e) => {
+    e.preventDefault();
+    onsubmit?.(e);
+  }}
   role="search"
   class="flex items-center"
   data-testid={`${testId}-form`}
@@ -32,10 +52,12 @@
     {value}
     {placeholder}
     data-testid={`${testId}-input`}
-    on:input
+    {oninput}
   >
-    <Button slot="after-input" type="submit" data-testid={`${testId}-button`}>
-      {label}
-    </Button>
+    {#snippet afterInput()}
+      <Button type="submit" data-testid={`${testId}-button`}>
+        {label}
+      </Button>
+    {/snippet}
   </Input>
 </form>
diff --git a/src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte b/src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
index c18c110bd3..ef12d2bc1f 100644
--- a/src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
+++ b/src/lib/components/standalone-activities/start-standalone-activity-form/form.svelte
@@ -247,14 +247,15 @@
     error={!!$errors?.activityId}
     hintText={$errors?.activityId?.[0]}
   >
-    <Button
-      class="ml-2.5"
-      variant="secondary"
-      slot="after-input"
-      on:click={generateRandomId}
-      leadingIcon="retry"
-      >{translate('standalone-activities.form-random-uuid')}</Button
-    >
+    {#snippet afterInput()}
+      <Button
+        class="ml-2.5"
+        variant="secondary"
+        on:click={generateRandomId}
+        leadingIcon="retry"
+        >{translate('standalone-activities.form-random-uuid')}</Button
+      >
+    {/snippet}
   </Input>
 
   <Input
@@ -264,7 +265,7 @@
     bind:value={$form.taskQueue}
     error={!!$errors.taskQueue}
     hintText={$errors.taskQueue?.[0]}
-    on:blur={() => checkTaskQueue($form.taskQueue)}
+    onblur={() => checkTaskQueue($form.taskQueue)}
   />
   {#if taskQueueActive !== null}
     <Alert
diff --git a/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte b/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte
index 1a532d3e03..2f871f1711 100644
--- a/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte
+++ b/src/lib/components/workflow/client-actions/batch-operation-confirmation-form.svelte
@@ -134,7 +134,7 @@
       : translate('batch.job-id-input-error')}
     bind:value={jobId}
     placeholder={jobIdPlaceholder}
-    on:input={handleJobIdChange}
+    oninput={handleJobIdChange}
     valid={jobIdValid}
   />
   {@render children?.()}
diff --git a/src/lib/components/workflow/filter-bar/manual-query.svelte b/src/lib/components/workflow/filter-bar/manual-query.svelte
index c68098c2b3..3e25d6542f 100644
--- a/src/lib/components/workflow/filter-bar/manual-query.svelte
+++ b/src/lib/components/workflow/filter-bar/manual-query.svelte
@@ -73,7 +73,7 @@
       clearable
       copyButtonLabel={translate('common.copy-icon-title')}
       clearButtonLabel={translate('common.clear-input-button-label')}
-      on:clear={handleClearInput}
+      onClear={handleClearInput}
       bind:value={manualSearchString}
       maxLength={MAX_QUERY_LENGTH}
       hideCount={!manualSearchString ||
diff --git a/src/lib/components/workflow/filter-bar/view-modal.svelte b/src/lib/components/workflow/filter-bar/view-modal.svelte
index 6fe76a5510..c47e9bcce1 100644
--- a/src/lib/components/workflow/filter-bar/view-modal.svelte
+++ b/src/lib/components/workflow/filter-bar/view-modal.svelte
@@ -171,7 +171,7 @@
       required
       maxLength={255}
       bind:value={name}
-      on:input={() => (touched = true)}
+      oninput={() => (touched = true)}
       valid={!touched || nameValid}
       hintText={touched && !nameValid ? nameError() : ''}
       error={touched && !nameValid}
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 6b3cdab859..a89d57f533 100644
--- a/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
+++ b/src/lib/components/workflow/search-attribute-input/datetime-input.svelte
@@ -28,8 +28,8 @@
     if (!value) updateDatetime();
   });
 
-  const onDateChange = (d: CustomEvent) => {
-    date = startOfDay(d.detail);
+  const onDateChange = (d: Date) => {
+    date = startOfDay(d);
     updateDatetime();
   };
 
@@ -41,7 +41,7 @@
 <div class="flex flex-col gap-2">
   <DatePicker
     label="{translate('common.value')} ({translate('common.utc')})"
-    on:datechange={onDateChange}
+    {onDateChange}
     selected={date}
     todayLabel={translate('common.today')}
     closeLabel={translate('common.close')}
diff --git a/src/lib/components/workflow/workflow-advanced-search.svelte b/src/lib/components/workflow/workflow-advanced-search.svelte
index 22bcbe40eb..74ccc73f35 100644
--- a/src/lib/components/workflow/workflow-advanced-search.svelte
+++ b/src/lib/components/workflow/workflow-advanced-search.svelte
@@ -70,7 +70,7 @@
       class="grow lg:w-3/4 [&_*]:border-r-0"
       clearable
       clearButtonLabel={translate('common.clear-input-button-label')}
-      on:clear={handleClearInput}
+      onClear={handleClearInput}
       bind:value={manualSearchString}
       maxLength={MAX_QUERY_LENGTH}
       hideCount={!manualSearchString ||
diff --git a/src/lib/components/workflow/workflow-filters.svelte b/src/lib/components/workflow/workflow-filters.svelte
index 91f4e29442..534feee51e 100644
--- a/src/lib/components/workflow/workflow-filters.svelte
+++ b/src/lib/components/workflow/workflow-filters.svelte
@@ -92,7 +92,7 @@
       id="advanced-search"
       placeholder={translate('common.query')}
       value={query}
-      on:submit={updateQuery}
+      onsubmit={updateQuery}
     />
   {:else}
     <div
@@ -107,7 +107,7 @@
         label={translate('common.workflow-id')}
         labelHidden
         bind:value={parameters.workflowId}
-        on:input={handleParameterChange}
+        oninput={handleParameterChange}
       />
       <Input
         icon="search"
@@ -117,7 +117,7 @@
         label={translate('common.workflow-type')}
         labelHidden
         bind:value={parameters.workflowType}
-        on:input={handleParameterChange}
+        oninput={handleParameterChange}
       />
       <Select
         id="time-range-filter"
diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
index 99d0cc9c52..b23986a4e7 100644
--- a/src/lib/holocene/api-pagination.svelte
+++ b/src/lib/holocene/api-pagination.svelte
@@ -235,8 +235,8 @@
         label={filterInputPlaceholder}
         labelHidden
         placeholder={filterInputPlaceholder}
-        on:input={debouncedHandleFilter}
-        on:clear={handleFilter}
+        oninput={debouncedHandleFilter}
+        onClear={handleFilter}
         clearable
       />
     {/if}
diff --git a/src/lib/holocene/calendar.svelte b/src/lib/holocene/calendar.svelte
index 8e599c7d59..474140ac56 100644
--- a/src/lib/holocene/calendar.svelte
+++ b/src/lib/holocene/calendar.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
   import { getDateRows, weekDays } from '$lib/utilities/calendar';
 
-  const dispatch = createEventDispatcher();
-
   type Props = {
     date: Date;
     month: number;
     year: number;
     isAllowed?: (date: Date) => boolean;
+    onDateChange?: (date: Date) => void;
   };
 
   let {
@@ -17,10 +14,11 @@
     month,
     year,
     isAllowed = (_date: Date) => true,
+    onDateChange,
   }: Props = $props();
 
   const onChange = (selectedDay: number) => {
-    dispatch('datechange', new Date(year, month, selectedDay));
+    onDateChange?.(new Date(year, month, selectedDay));
   };
 
   const allow = (year: number, month: number, day: number | undefined) => {
diff --git a/src/lib/holocene/date-picker.stories.svelte b/src/lib/holocene/date-picker.stories.svelte
index ce1e61da80..1bc110a7e7 100644
--- a/src/lib/holocene/date-picker.stories.svelte
+++ b/src/lib/holocene/date-picker.stories.svelte
@@ -3,6 +3,7 @@
 <script lang="ts" module>
   import type { Meta } from '@storybook/svelte';
   import { within } from '@storybook/test';
+  import type { ComponentProps } from 'svelte';
 
   import DatePicker from '$lib/holocene/date-picker.svelte';
 
@@ -40,7 +41,7 @@
         table: { category: 'Accessibility' },
       },
     },
-  } satisfies Meta<DatePicker>;
+  } satisfies Meta<ComponentProps<typeof DatePicker>>;
 </script>
 
 <script lang="ts">
@@ -60,7 +61,7 @@
 </script>
 
 <Template let:args>
-  <DatePicker {...args} on:datechange={action('date-change')} />
+  <DatePicker {...args} onDateChange={action('date-change')} />
 </Template>
 
 <Story name="Default" play={focus} />
diff --git a/src/lib/holocene/date-picker.svelte b/src/lib/holocene/date-picker.svelte
index eaca0bc64e..eec2a4d27e 100644
--- a/src/lib/holocene/date-picker.svelte
+++ b/src/lib/holocene/date-picker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import type { Snippet } from 'svelte';
 
   import { clickoutside } from '$lib/holocene/outside-click';
   import { translate } from '$lib/i18n/translate';
@@ -9,26 +9,37 @@
   import Icon from './icon/icon.svelte';
   import Input from './input/input.svelte';
 
-  const dispatch = createEventDispatcher();
-
-  export let isAllowed: (d: Date) => boolean = () => true;
-  export let selected = new Date();
-  export let label: string;
-  export let labelHidden = false;
-  export let todayLabel: string;
-  export let closeLabel: string;
-  export let clearLabel: string;
-  export let disabled = false;
+  interface Props {
+    isAllowed?: (d: Date) => boolean;
+    selected?: Date;
+    label: string;
+    afterLabel?: Snippet;
+    labelIcon?: Snippet;
+    labelHidden?: boolean;
+    todayLabel: string;
+    closeLabel: string;
+    clearLabel: string;
+    disabled?: boolean;
+    onDateChange?: (date: Date) => void;
+  }
 
-  let month: number | undefined;
-  let year: number | undefined;
-  let showDatePicker = false;
+  let {
+    isAllowed = () => true,
+    selected = $bindable(new Date()),
+    label,
+    afterLabel,
+    labelHidden = false,
+    todayLabel,
+    closeLabel,
+    clearLabel,
+    disabled = false,
+    onDateChange,
+  }: Props = $props();
 
-  // so that these change with props
-  $: {
-    month = selected.getMonth();
-    year = selected.getFullYear();
-  }
+  // derived from selected, but prev/next can override until selected changes
+  let month = $derived(selected.getMonth());
+  let year = $derived(selected.getFullYear());
+  let showDatePicker = $state(false);
 
   // handlers
   const onFocus = () => {
@@ -45,7 +56,7 @@
       const month = parseInt(inputDateSplit[0]) - 1;
       const date = parseInt(inputDateSplit[1]);
       const newDate = new Date(year, month, date);
-      dispatch('datechange', newDate);
+      onDateChange?.(newDate);
     }
   };
 
@@ -67,9 +78,9 @@
     month -= 1;
   };
 
-  const onDateChange = (d: CustomEvent) => {
+  const handleDateChange = (d: Date) => {
     showDatePicker = false;
-    dispatch('datechange', d.detail);
+    onDateChange?.(d);
   };
 
   const previousMonth = translate('date-picker.previous-month');
@@ -80,11 +91,12 @@
   <Input
     id="datepicker"
     {label}
+    {afterLabel}
     {labelHidden}
     icon="calendar-plus"
     type="text"
-    on:focus={onFocus}
-    on:input={onInput}
+    onfocus={onFocus}
+    oninput={onInput}
     placeholder="MM/DD/YY"
     value={selected.toDateString()}
     clearable
@@ -97,7 +109,7 @@
     >
       <div class="mx-3 my-2 flex items-center justify-around">
         <div class="flex items-center justify-center">
-          <button type="button" on:click={prev} title={previousMonth}>
+          <button type="button" onclick={prev} title={previousMonth}>
             <span class="sr-only">{previousMonth}</span>
             <Icon name="chevron-left" /></button
           >
@@ -108,7 +120,7 @@
         </div>
         <div class="flex items-center justify-center">
           <span class="sr-only">Next Month</span>
-          <button type="button" on:click={next} title={nextMonth}>
+          <button type="button" onclick={next} title={nextMonth}>
             <span class="sr-only">{nextMonth}</span>
             <Icon name="chevron-right" />
           </button>
@@ -119,20 +131,20 @@
         {year}
         date={selected}
         {isAllowed}
-        on:datechange={onDateChange}
+        onDateChange={handleDateChange}
       />
       <div class="my-1 flex justify-between px-2">
         <button
           type="button"
           class="cursor-pointer text-[12px]"
-          on:click={() => (selected = new Date())}
+          onclick={() => (selected = new Date())}
         >
           {todayLabel}
         </button>
         <button
           type="button"
           class="cursor-pointer text-[12px]"
-          on:click={() => (showDatePicker = false)}
+          onclick={() => (showDatePicker = false)}
         >
           {closeLabel}
         </button>
diff --git a/src/lib/holocene/input/input.stories.svelte b/src/lib/holocene/input/input.stories.svelte
index 804e245542..8e18f8ca17 100644
--- a/src/lib/holocene/input/input.stories.svelte
+++ b/src/lib/holocene/input/input.stories.svelte
@@ -3,6 +3,7 @@
 <script lang="ts" module>
   import type { Meta } from '@storybook/svelte';
   import { expect, userEvent, within } from '@storybook/test';
+  import type { ComponentProps } from 'svelte';
 
   import { iconNames } from '$lib/holocene/icon';
 
@@ -68,7 +69,7 @@
         table: { category: 'Styling (Deprecated)' },
       },
     },
-  } satisfies Meta<Input>;
+  } satisfies Meta<ComponentProps<typeof Input>>;
 </script>
 
 <script lang="ts">
@@ -142,7 +143,11 @@
 
 <Story name="With Buttons" let:args let:context>
   <Input {...args} id={context.id} data-testid={context.id}>
-    <Button slot="before-input" type="button">Before</Button>
-    <Button slot="after-input" type="button">After</Button>
+    {#snippet beforeInput()}
+      <Button type="button">Before</Button>
+    {/snippet}
+    {#snippet afterInput()}
+      <Button type="button">After</Button>
+    {/snippet}
   </Input>
 </Story>
diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index 1890582cfc..f8318cc46a 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
 
-  import { createEventDispatcher } from 'svelte';
+  import type { Snippet } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
 
   import type { IconName } from '$lib/holocene/icon';
@@ -11,10 +11,11 @@
 
   import IconButton from '../icon-button.svelte';
 
-  type BaseProps = HTMLInputAttributes & {
+  interface Props extends HTMLInputAttributes {
     id: string;
     value: string;
     label: string;
+    afterLabel?: Snippet;
     labelHidden?: boolean;
     icon?: IconName;
     suffix?: string;
@@ -23,83 +24,88 @@
     hintText?: string;
     maxLength?: number;
     hideCount?: boolean;
-    spellcheck?: boolean;
     noBorder?: boolean;
     autoFocus?: boolean;
     error?: boolean;
+    autocomplete?: FullAutoFill;
+    copyable?: boolean;
+    copyButtonLabel?: string;
+    clearable?: boolean;
+    clearButtonLabel?: string;
     'data-testid'?: string;
     class?: string;
     inputContainerClass?: string;
-  };
-
-  type CopyableProps = BaseProps & {
-    copyable: boolean;
-    copyButtonLabel: string;
-  };
-
-  type ClearableProps = BaseProps & {
-    clearable: boolean;
-    clearButtonLabel: string;
-  };
-
-  type $$Props = BaseProps | CopyableProps | ClearableProps;
-
-  export let id: string;
-  export let value: string;
-  export let label: string;
-  export let labelHidden = false;
-  export let icon: IconName = null;
-  export let placeholder = '';
-  export let suffix = '';
-  export let prefix = '';
-  export let name = id;
-  export let copyable = false;
-  export let disabled = false;
-  export let clearable = false;
-  export let autocomplete: FullAutoFill = 'off';
-  export let valid = true;
-  export let hintText = '';
-  export let maxLength = 0;
-  export let hideCount = false;
-  export let spellcheck: boolean = null;
-  export let noBorder = false;
-  export let autoFocus = false;
-  export let error = false;
-  export let required = false;
-  export let copyButtonLabel = '';
-  export let clearButtonLabel = '';
+    onClear?: () => void;
+    beforeInput?: Snippet<[{ disabled: boolean }]>;
+    afterInput?: Snippet<[{ disabled: boolean }]>;
+  }
 
-  let className = '';
-  export { className as class };
-  export let inputContainerClass = '';
+  let {
+    id,
+    value = $bindable(),
+    label,
+    afterLabel,
+    labelHidden = false,
+    icon = null,
+    placeholder = '',
+    suffix = '',
+    prefix = '',
+    name = id,
+    copyable = false,
+    disabled = false,
+    clearable = false,
+    autocomplete = 'off',
+    valid = true,
+    hintText = '',
+    maxLength = 0,
+    hideCount = false,
+    spellcheck = null,
+    noBorder = false,
+    autoFocus = false,
+    error = false,
+    required = false,
+    copyButtonLabel = '',
+    clearButtonLabel = '',
+    class: className = '',
+    inputContainerClass = '',
+    'data-testid': dataTestId,
+    onClear,
+    onclick,
+    onkeydown,
+    beforeInput,
+    afterInput,
+    ...rest
+  }: Props = $props();
 
-  let testId = $$props['data-testid'] || id;
+  const isDisabled = $derived(disabled || copyable);
+  const testId = $derived(dataTestId || id);
 
   function callFocus(input: HTMLInputElement) {
     if (autoFocus && input) input.focus();
   }
 
-  const dispatch = createEventDispatcher();
-  function onClear() {
+  function handleClear() {
     value = '';
-    dispatch('clear', {});
+    onClear?.();
   }
 
   const { copy, copied } = copyToClipboard();
-  $: disabled = disabled || copyable;
 </script>
 
 <div class={merge('group flex flex-col gap-1', className)}>
-  <Label {required} {label} hidden={labelHidden} for={id} />
+  <div class="flex items-center justify-start gap-2">
+    <Label class="grow-0" {required} {label} hidden={labelHidden} for={id} />
+    {@render afterLabel?.()}
+  </div>
   <div class="input-group flex">
-    <slot name="before-input" {disabled} />
+    {@render beforeInput?.({ disabled: isDisabled })}
     <div
       class={merge(
         'input-container',
         'surface-primary relative box-border inline-flex h-10 w-full items-center border border-subtle text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70',
         inputContainerClass,
       )}
-      class:disabled
+      class:disabled={isDisabled}
       class:error
       class:noBorder
       class:invalid={!valid}
@@ -113,8 +119,8 @@
       {/if}
       <input
         class="input"
-        class:disabled
-        {disabled}
+        class:disabled={isDisabled}
+        disabled={isDisabled}
         data-lpignore="true"
         data-1p-ignore="true"
         maxlength={maxLength > 0 ? maxLength : undefined}
@@ -125,15 +131,17 @@
         {required}
         {autocomplete}
         bind:value
-        on:click|stopPropagation
-        on:input
-        on:keydown|stopPropagation
-        on:change
-        on:focus
-        on:blur
+        onclick={(e) => {
+          e.stopPropagation();
+          onclick?.(e);
+        }}
+        onkeydown={(e) => {
+          e.stopPropagation();
+          onkeydown?.(e);
+        }}
         use:callFocus
         data-testid={testId}
-        {...$$restProps}
+        {...rest}
       />
       {#if copyable}
         <div class="copy-icon-container">
@@ -142,7 +150,7 @@
             data-track-name="input-copy-button"
             data-track-intent="copy"
             data-track-text={label || copyButtonLabel}
-            on:click={(e) => copy(e, value)}
+            onclick={(e) => copy(e, value)}
           >
             {#if $copied}
               <Icon name="checkmark" />
@@ -151,7 +159,7 @@
             {/if}
           </button>
         </div>
-      {:else if disabled}
+      {:else if isDisabled}
         <div class="disabled-icon-container">
           <Icon name="lock" />
         </div>
@@ -159,7 +167,7 @@
         <div class="clear-icon-container" data-testid="clear-input">
           <IconButton
             label={clearButtonLabel}
-            on:click={onClear}
+            on:click={handleClear}
             icon="close"
           />
         </div>
@@ -170,12 +178,12 @@
         </div>
       {/if}
     </div>
-    <slot name="after-input" {disabled} />
+    {@render afterInput?.({ disabled: isDisabled })}
   </div>
 
   <div
     class="inline-flex justify-between gap-2"
-    class:hidden={!hintText && (!maxLength || disabled || hideCount)}
+    class:hidden={!hintText && (!maxLength || isDisabled || hideCount)}
   >
     <span
       class="hint-text inline-block"
@@ -185,7 +193,7 @@
     >
       {hintText}
     </span>
-    {#if maxLength && !disabled && !hideCount}
+    {#if maxLength && !isDisabled && !hideCount}
       <span
         class="invisible text-right text-xs tracking-widest group-focus-within:visible"
       >
diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
index 56df9d4faf..898a8de277 100644
--- a/src/lib/holocene/time-picker.svelte
+++ b/src/lib/holocene/time-picker.svelte
@@ -33,7 +33,7 @@
     hideCount
     error={twelveHourClock ? parseInt(hour) > 12 : parseInt(hour) > 23}
     {disabled}
-    on:input={onInput}
+    oninput={onInput}
   />
   <Input
     id="minute"
@@ -46,7 +46,7 @@
     hideCount
     error={Boolean(parseInt(hour) > 59)}
     {disabled}
-    on:input={onInput}
+    oninput={onInput}
   />
   {#if includeSeconds}
     <Input
@@ -60,7 +60,7 @@
       hideCount
       error={Boolean(parseInt(hour) > 59)}
       {disabled}
-      on:input={onInput}
+      oninput={onInput}
     />
   {/if}
   {#if twelveHourClock}
diff --git a/src/lib/pages/schedule-view.svelte b/src/lib/pages/schedule-view.svelte
index aac536df18..5fef2a453e 100644
--- a/src/lib/pages/schedule-view.svelte
+++ b/src/lib/pages/schedule-view.svelte
@@ -193,12 +193,12 @@
   let endMinute = '';
   let endSecond = '';
 
-  const onStartDateChange = (d: CustomEvent) => {
-    startDate = startOfDay(d.detail);
+  const onStartDateChange = (d: Date) => {
+    startDate = startOfDay(d);
   };
 
-  const onEndDateChange = (d: CustomEvent) => {
-    endDate = startOfDay(d.detail);
+  const onEndDateChange = (d: Date) => {
+    endDate = startOfDay(d);
   };
 
   const updateDefaultBackfillTimes = () => {
@@ -514,7 +514,7 @@
         <div class="flex flex-col gap-2 p-2">
           <DatePicker
             label={translate('common.start')}
-            on:datechange={onStartDateChange}
+            onDateChange={onStartDateChange}
             selected={startDate}
             todayLabel={translate('common.today')}
             closeLabel={translate('common.close')}
@@ -528,7 +528,7 @@
           />
           <DatePicker
             label={translate('common.end')}
-            on:datechange={onEndDateChange}
+            onDateChange={onEndDateChange}
             selected={endDate}
             todayLabel={translate('common.today')}
             closeLabel={translate('common.close')}
diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index fbf0100b88..0754bba480 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -264,7 +264,7 @@
         bind:value={workflowId}
         label="Workflow ID"
         class="w-full grow"
-        on:blur={(e) => onInputChange(e, 'workflowId')}
+        onblur={(e) => onInputChange(e, 'workflowId')}
       />
       <Button
         class="mt-0 md:mt-6"
@@ -280,7 +280,7 @@
         bind:value={taskQueue}
         label="Task Queue"
         class="grow"
-        on:blur={(e) => onInputChange(e, 'taskQueue')}
+        onblur={(e) => onInputChange(e, 'taskQueue')}
       />
     </div>
     {#if pollerCount !== undefined}
@@ -307,7 +307,7 @@
       required
       bind:value={workflowType}
       label="Workflow Type"
-      on:blur={(e) => onInputChange(e, 'workflowType')}
+      onblur={(e) => onInputChange(e, 'workflowType')}
     />
     <PayloadInputWithEncoding bind:input bind:encoding bind:messageType />
     {#if viewAdvancedOptions}