refactor: Input & DatePicker - Svelte 5 & afterLabel snippet

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')}

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 ||

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>

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

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?.()}

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 ||

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}

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')}

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 ||

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"

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}

src/lib/holocene/calendar.svelte

@@ -1,26 +1,24 @@
 <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 {
     date,
     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) => {

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} />