From d4dc0fc54eb4547250a2c9198b0fea76eaed2916 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 1 Sep 2023 12:21:06 -0700
Subject: [PATCH 01/12] Remove on:blur from TextFilter

---
 src/lib/components/workflow/filter-search/text-filter.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/text-filter.svelte b/src/lib/components/workflow/filter-search/text-filter.svelte
index 981b2b0d4..1b914dc08 100644
--- a/src/lib/components/workflow/filter-search/text-filter.svelte
+++ b/src/lib/components/workflow/filter-search/text-filter.svelte
@@ -6,8 +6,7 @@
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
-  const { filter, handleSubmit, resetFilter } =
-    getContext<FilterContext>(FILTER_CONTEXT);
+  const { filter, handleSubmit } = getContext<FilterContext>(FILTER_CONTEXT);
 
   let value = $filter.value;
 
@@ -31,5 +30,4 @@
   unroundLeft
   bind:value
   on:keydown={handleKeydown}
-  on:blur={resetFilter}
 />

From 25e8f64455ad071dfb85309115ec8bb1e47192ee Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 1 Sep 2023 14:02:09 -0700
Subject: [PATCH 02/12] Add close button button to filters

---
 .../filter-search/boolean-filter.svelte       |  8 +++++++-
 .../filter-search/close-filter-button.svelte  | 19 +++++++++++++++++++
 .../filter-search/datetime-filter.svelte      |  5 ++---
 .../workflow/filter-search/index.svelte       | 15 ++++++++++-----
 .../filter-search/number-filter.svelte        |  2 ++
 .../workflow/filter-search/text-filter.svelte |  1 +
 6 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/workflow/filter-search/close-filter-button.svelte

diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
index 6690cd784..d7515d6cb 100644
--- a/src/lib/components/workflow/filter-search/boolean-filter.svelte
+++ b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -23,7 +23,13 @@
 </script>
 
 <MenuContainer>
-  <MenuButton unroundLeft class="!border-l-0" id="boolean-filter" controls="boolean-filter-menu">
+  <MenuButton
+    unroundLeft
+    unroundRight
+    class="!border-l-0"
+    id="boolean-filter"
+    controls="boolean-filter-menu"
+  >
     {selectedLabel}
   </MenuButton>
   <Menu id="boolean-filter-menu">
diff --git a/src/lib/components/workflow/filter-search/close-filter-button.svelte b/src/lib/components/workflow/filter-search/close-filter-button.svelte
new file mode 100644
index 000000000..e55e91a14
--- /dev/null
+++ b/src/lib/components/workflow/filter-search/close-filter-button.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  
+  import Button from '$lib/holocene/button.svelte';
+  import { translate } from '$lib/i18n/translate';
+  
+  import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
+
+  const { resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
+</script>
+
+<Button
+  aria-label={translate('close')}
+  borderRadiusModifier="square-left"
+  leadingIcon="chevron-left"
+  on:click={resetFilter}
+  style="padding: 0"
+  variant="table-header"
+/>
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index fdde145a5..d17a1f9e8 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  
-  
   import {
     addHours,
     addMinutes,
@@ -9,7 +7,7 @@
     startOfDay,
   } from 'date-fns';
   import { getContext } from 'svelte';
-  
+
   import Button from '$lib/holocene/button.svelte';
   import DatePicker from '$lib/holocene/date-picker.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
@@ -144,6 +142,7 @@
   <MenuContainer>
     <MenuButton
       unroundLeft
+      unroundRight
       id="time-range-filter"
       controls="time-range-filter-menu"
     >
diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index 60885b203..5de4cd74e 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -22,7 +22,7 @@
   import WorkflowAdvancedSearch from '$lib/components/workflow/workflow-advanced-search.svelte';
   import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
-import Input from '$lib/holocene/input/input.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
   import {
     Menu,
     MenuButton,
@@ -51,6 +51,7 @@ import Input from '$lib/holocene/input/input.svelte';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
   import BooleanFilter from './boolean-filter.svelte';
+  import CloseFilter from './close-filter-button.svelte';
   import DateTimeFilter from './datetime-filter.svelte';
   import FilterList from './filter-list.svelte';
   import NumberFilter from './number-filter.svelte';
@@ -240,8 +241,9 @@ import Input from '$lib/holocene/input/input.svelte';
         {/if}
 
         {#if isTextFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
             <TextFilter />
+            <CloseFilter />
           </div>
           <!-- TODO: Add KeywordList support -->
           <!-- {:else if isListFilter($filter.attribute)}
@@ -249,16 +251,19 @@ import Input from '$lib/holocene/input/input.svelte';
           <ListFilter />
         </div> -->
         {:else if isNumberFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
             <NumberFilter />
+            <CloseFilter />
           </div>
         {:else if isDateTimeFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
             <DateTimeFilter />
+            <CloseFilter />
           </div>
         {:else if isBooleanFilter($filter.attribute)}
-          <div class="w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
             <BooleanFilter />
+            <CloseFilter />
           </div>
         {/if}
       </div>
diff --git a/src/lib/components/workflow/filter-search/number-filter.svelte b/src/lib/components/workflow/filter-search/number-filter.svelte
index 8babd97b6..138058340 100644
--- a/src/lib/components/workflow/filter-search/number-filter.svelte
+++ b/src/lib/components/workflow/filter-search/number-filter.svelte
@@ -34,6 +34,8 @@
     {min}
     on:keydown={handleKeydown}
     unroundLeft
+    unroundRight
     search
+    class="-mr-2"
   />
 </div>
diff --git a/src/lib/components/workflow/filter-search/text-filter.svelte b/src/lib/components/workflow/filter-search/text-filter.svelte
index 1b914dc08..d510ef8a5 100644
--- a/src/lib/components/workflow/filter-search/text-filter.svelte
+++ b/src/lib/components/workflow/filter-search/text-filter.svelte
@@ -28,6 +28,7 @@
   icon="search"
   class="w-full"
   unroundLeft
+  unroundRight
   bind:value
   on:keydown={handleKeydown}
 />

From 6dce2d394d3b024484d41fb611c73a79300577b0 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 1 Sep 2023 15:38:18 -0700
Subject: [PATCH 03/12] Update DatetimeFilter UI

---
 .../filter-search/datetime-filter.svelte      | 241 ++++++++++--------
 1 file changed, 134 insertions(+), 107 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index d17a1f9e8..86165d78b 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -50,6 +50,8 @@
   let timeUnit = TIME_UNIT_OPTIONS[0];
   let relativeTime = '';
 
+  let type: 'relative' | 'absolute' = 'relative';
+
   $: useBetweenDateTimeQuery = isTimeRange || !$supportsAdvancedVisibility;
 
   const onStartDateChange = (d: CustomEvent) => {
@@ -87,43 +89,41 @@
   };
 
   const onApply = () => {
-    let startDateWithTime = applyTimeChanges(startDate, {
-      hour: setHours(startHour, startHalf),
-      minute: startMinute,
-      second: startSecond,
-    });
-    let endDateWithTime = applyTimeChanges(endDate, {
-      hour: setHours(endHour, endHalf),
-      minute: endMinute,
-      second: endSecond,
-    });
+    if (type === 'relative') {
+      if (!relativeTime) return;
+      $filter.value = toDate(`${relativeTime} ${timeUnit}`);
+      $filter.customDate = false;
+    } else {
+      let startDateWithTime = applyTimeChanges(startDate, {
+        hour: setHours(startHour, startHalf),
+        minute: startMinute,
+        second: startSecond,
+      });
+      let endDateWithTime = applyTimeChanges(endDate, {
+        hour: setHours(endHour, endHalf),
+        minute: endMinute,
+        second: endSecond,
+      });
 
-    const value = useBetweenDateTimeQuery
-      ? `BETWEEN "${formatISO(startDateWithTime)}" AND "${formatISO(
-          endDateWithTime,
-        )}"`
-      : formatISO(startDateWithTime);
+      const value = useBetweenDateTimeQuery
+        ? `BETWEEN "${formatISO(startDateWithTime)}" AND "${formatISO(
+            endDateWithTime,
+          )}"`
+        : formatISO(startDateWithTime);
 
-    $filter.value = value;
+      $filter.value = value;
 
-    if (isTimeRange) {
-      $filter.customDate = true;
-      $filter.conditional = '';
-    } else {
-      $filter.customDate = false;
+      if (isTimeRange) {
+        $filter.customDate = true;
+        $filter.conditional = '';
+      } else {
+        $filter.customDate = false;
+      }
     }
 
     handleSubmit();
   };
 
-  const onApplyRelativeTime = () => {
-    if (!relativeTime) return;
-    $filter.value = toDate(`${relativeTime} ${timeUnit}`);
-    $filter.customDate = false;
-
-    handleSubmit();
-  };
-
   const error = (x: string) => {
     if (x) return isNaN(parseInt(x));
     return false;
@@ -134,9 +134,9 @@
   <ConditionalMenu
     inputId="time-range-filter"
     options={[
-      { value: '<=', label: translate('before').toUpperCase() },
-      { value: 'BETWEEN', label: translate('between').toUpperCase() },
-      { value: '>=', label: translate('after').toUpperCase() },
+      { value: '<=', label: translate('before') },
+      { value: 'BETWEEN', label: translate('between') },
+      { value: '>=', label: translate('after') },
     ]}
   />
   <MenuContainer>
@@ -154,80 +154,107 @@
       class="w-[25rem] !overflow-visible"
     >
       {#if isTimeRange}
-        <div class="flex flex-col gap-2 p-2">
-          <DatePicker
-            label={translate('start')}
-            on:datechange={onStartDateChange}
-            selected={startDate}
-            todayLabel={translate('today')}
-            closeLabel={translate('close')}
-            clearLabel={translate('clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={startHour}
-            bind:minute={startMinute}
-            bind:second={startSecond}
-            bind:half={startHalf}
-          />
-          <DatePicker
-            label={translate('end')}
-            on:datechange={onEndDateChange}
-            selected={endDate}
-            todayLabel={translate('today')}
-            closeLabel={translate('close')}
-            clearLabel={translate('clear-input-button-label')}
-          />
-          <TimePicker
-            bind:hour={endHour}
-            bind:minute={endMinute}
-            bind:second={endSecond}
-            bind:half={endHalf}
-          />
-          <div class="flex justify-end">
-            <Button variant="ghost" on:click={onApply}
-              >{translate('apply')}</Button
-            >
+        <MenuItem>
+          <div class="flex flex-col gap-2">
+            <DatePicker
+              label={translate('start')}
+              on:datechange={onStartDateChange}
+              selected={startDate}
+              todayLabel={translate('today')}
+              closeLabel={translate('close')}
+              clearLabel={translate('clear-input-button-label')}
+            />
+            <TimePicker
+              bind:hour={startHour}
+              bind:minute={startMinute}
+              bind:second={startSecond}
+              bind:half={startHalf}
+            />
+          </div>
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem>
+          <div class="flex flex-col gap-2">
+            <DatePicker
+              label={translate('end')}
+              on:datechange={onEndDateChange}
+              selected={endDate}
+              todayLabel={translate('today')}
+              closeLabel={translate('close')}
+              clearLabel={translate('clear-input-button-label')}
+            />
+            <TimePicker
+              bind:hour={endHour}
+              bind:minute={endMinute}
+              bind:second={endSecond}
+              bind:half={endHalf}
+            />
           </div>
-        </div>
+        </MenuItem>
       {:else}
-        <div class="flex flex-col gap-2">
-          <div class="p-2">
-            <p class="text-sm font-semibold">{translate('relative')}</p>
-            <div class="flex justify-between items-center gap-2">
-              <div class="flex gap-0">
-                <Input
-                  label={translate('relative')}
-                  labelHidden
-                  id="relative-datetime-input"
-                  bind:value={relativeTime}
-                  placeholder="00"
-                  error={error(relativeTime)}
-                  unroundRight
-                  class="h-10"
-                />
-                <Select
-                  unroundLeft
-                  bind:value={timeUnit}
-                  id="relative-datetime-unit-input"
-                  label={translate('time-unit')}
-                  labelHidden
-                >
-                  {#each TIME_UNIT_OPTIONS as unit}
-                    <Option value={unit}>{unit} {translate('ago')}</Option>
-                  {/each}
-                </Select>
-              </div>
-              <Button
-                variant="ghost"
-                disabled={error(relativeTime)}
-                on:click={onApplyRelativeTime}>{translate('apply')}</Button
+        <MenuItem on:click={() => (type = 'relative')}>
+          <div class="flex flex-col">
+            <label
+              class="flex flex-row items-center gap-2 cursor-pointer"
+              for="relative-time"
+            >
+              <input
+                on:click|stopPropagation={() => {
+                  type = 'relative';
+                }}
+                class="w-4 h-4 accent-gray-900"
+                type="radio"
+                checked={type === 'relative'}
+                id="relative-time"
+                tabindex="-1"
+              />
+              {translate('relative')}
+            </label>
+            <div class="ml-6 pt-2 flex gap-0">
+              <Input
+                label={translate('relative')}
+                labelHidden
+                id="relative-datetime-input"
+                bind:value={relativeTime}
+                placeholder="00"
+                error={error(relativeTime)}
+                unroundRight
+                class="h-10"
+              />
+              <Select
+                unroundLeft
+                bind:value={timeUnit}
+                id="relative-datetime-unit-input"
+                label={translate('time-unit')}
+                labelHidden
               >
+                {#each TIME_UNIT_OPTIONS as unit}
+                  <Option value={unit}>{unit} {translate('ago')}</Option>
+                {/each}
+              </Select>
             </div>
           </div>
-          <MenuDivider />
-          <div class="p-2 flex flex-col gap-2">
+        </MenuItem>
+        <MenuDivider />
+        <MenuItem on:click={() => (type = 'absolute')}>
+          <div class="flex flex-col gap-2">
+            <label
+              class="flex flex-row items-center gap-2 cursor-pointer"
+              for="absolute-time"
+            >
+              <input
+                on:click|stopPropagation={() => (type = 'absolute')}
+                class="w-4 h-4 accent-gray-900"
+                type="radio"
+                checked={type === 'absolute'}
+                id="absolute-time"
+                tabindex="-1"
+              />
+              {translate('absolute')}
+            </label>
             <DatePicker
-              label={translate('absolute')}
+              label={''}
+              labelHidden
               on:datechange={onStartDateChange}
               selected={startDate}
               todayLabel={translate('today')}
@@ -240,16 +267,16 @@
               bind:second={startSecond}
               bind:half={startHalf}
             />
-            <div class="flex justify-end">
-              <Button variant="ghost" on:click={onApply}
-                >{translate('apply')}</Button
-              >
-            </div>
           </div>
-        </div>
+        </MenuItem>
       {/if}
       <MenuDivider />
-      <MenuItem centered disabled>
+      <div class="p-2 flex items-center">
+        <Button size="xs" style="width: 100%" on:click={onApply}
+          >{translate('apply')}</Button
+        >
+      </div>
+      <MenuItem centered disabled class="!pt-0">
         <Icon name="clock" aria-hidden="true" />
         {translate('based-on-time-preface')}
         {localTime}

From c5435b4451d19538d9de813c70648f8de6c08967 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 1 Sep 2023 15:41:23 -0700
Subject: [PATCH 04/12] Update TimePicker to allow for 24 hour clock

---
 .../filter-search/datetime-filter.svelte      | 56 +++++++------------
 src/lib/holocene/time-picker.svelte           | 21 ++++---
 2 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 86165d78b..5a7fd0782 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -38,12 +38,10 @@
   let startHour = '';
   let startMinute = '';
   let startSecond = '';
-  let startHalf: 'AM' | 'PM' = 'AM';
 
   let endHour = '';
   let endMinute = '';
   let endSecond = '';
-  let endHalf: 'AM' | 'PM' = 'AM';
 
   const TIME_UNIT_OPTIONS = ['minutes', 'hours', 'days'];
 
@@ -74,20 +72,6 @@
     return _date;
   };
 
-  const setHours = (hour: string, half: 'AM' | 'PM') => {
-    if (hour) {
-      if (hour === '12') {
-        return half === 'AM' ? '00' : '12';
-      } else if (half === 'PM') {
-        return (parseInt(hour) + 12).toString();
-      } else {
-        return hour;
-      }
-    } else {
-      hour = '';
-    }
-  };
-
   const onApply = () => {
     if (type === 'relative') {
       if (!relativeTime) return;
@@ -95,12 +79,12 @@
       $filter.customDate = false;
     } else {
       let startDateWithTime = applyTimeChanges(startDate, {
-        hour: setHours(startHour, startHalf),
+        hour: startHour,
         minute: startMinute,
         second: startSecond,
       });
       let endDateWithTime = applyTimeChanges(endDate, {
-        hour: setHours(endHour, endHalf),
+        hour: endHour,
         minute: endMinute,
         second: endSecond,
       });
@@ -168,7 +152,7 @@
               bind:hour={startHour}
               bind:minute={startMinute}
               bind:second={startSecond}
-              bind:half={startHalf}
+              twelveHourClock={false}
             />
           </div>
         </MenuItem>
@@ -187,7 +171,7 @@
               bind:hour={endHour}
               bind:minute={endMinute}
               bind:second={endSecond}
-              bind:half={endHalf}
+              twelveHourClock={false}
             />
           </div>
         </MenuItem>
@@ -252,21 +236,23 @@
               />
               {translate('absolute')}
             </label>
-            <DatePicker
-              label={''}
-              labelHidden
-              on:datechange={onStartDateChange}
-              selected={startDate}
-              todayLabel={translate('today')}
-              closeLabel={translate('close')}
-              clearLabel={translate('clear-input-button-label')}
-            />
-            <TimePicker
-              bind:hour={startHour}
-              bind:minute={startMinute}
-              bind:second={startSecond}
-              bind:half={startHalf}
-            />
+            <div class="flex flex-col ml-6 gap-2">
+              <DatePicker
+                label={''}
+                labelHidden
+                on:datechange={onStartDateChange}
+                selected={startDate}
+                todayLabel={translate('today')}
+                closeLabel={translate('close')}
+                clearLabel={translate('clear-input-button-label')}
+              />
+              <TimePicker
+                bind:hour={startHour}
+                bind:minute={startMinute}
+                bind:second={startSecond}
+                twelveHourClock={false}
+              />
+            </div>
           </div>
         </MenuItem>
       {/if}
diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
index 2ebb24e4a..b823fc23b 100644
--- a/src/lib/holocene/time-picker.svelte
+++ b/src/lib/holocene/time-picker.svelte
@@ -7,6 +7,7 @@
   export let minute = '';
   export let second = '';
   export let half: 'AM' | 'PM' = 'AM';
+  export let twelveHourClock = true;
 </script>
 
 <div class="flex gap-2">
@@ -18,7 +19,7 @@
     placeholder="00"
     suffix="hrs"
     maxLength={2}
-    error={Boolean(parseInt(hour) > 12)}
+    error={twelveHourClock ? parseInt(hour) > 12 : parseInt(hour) > 23}
   />
   <Input
     id="minute"
@@ -41,12 +42,14 @@
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
   />
-  <ToggleButtons>
-    <ToggleButton active={half === 'AM'} on:click={() => (half = 'AM')}
-      >AM</ToggleButton
-    >
-    <ToggleButton active={half === 'PM'} on:click={() => (half = 'PM')}
-      >PM</ToggleButton
-    >
-  </ToggleButtons>
+  {#if twelveHourClock}
+    <ToggleButtons>
+      <ToggleButton active={half === 'AM'} on:click={() => (half = 'AM')}
+        >AM</ToggleButton
+      >
+      <ToggleButton active={half === 'PM'} on:click={() => (half = 'PM')}
+        >PM</ToggleButton
+      >
+    </ToggleButtons>
+  {/if}
 </div>

From 1cb6a6daadc8b1e9538c075794858da03f191f36 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 11:18:55 -0600
Subject: [PATCH 05/12] Disabled Apply when invalid or unspecified relative
 time

---
 .../workflow/filter-search/datetime-filter.svelte      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 5a7fd0782..2814e48e6 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -51,6 +51,10 @@
   let type: 'relative' | 'absolute' = 'relative';
 
   $: useBetweenDateTimeQuery = isTimeRange || !$supportsAdvancedVisibility;
+  $: disabled =
+    type === 'relative' &&
+    !useBetweenDateTimeQuery &&
+    (!relativeTime || error(relativeTime));
 
   const onStartDateChange = (d: CustomEvent) => {
     startDate = startOfDay(d.detail);
@@ -73,7 +77,7 @@
   };
 
   const onApply = () => {
-    if (type === 'relative') {
+    if (type === 'relative' && !useBetweenDateTimeQuery) {
       if (!relativeTime) return;
       $filter.value = toDate(`${relativeTime} ${timeUnit}`);
       $filter.customDate = false;
@@ -109,7 +113,7 @@
   };
 
   const error = (x: string) => {
-    if (x) return isNaN(parseInt(x));
+    if (x) return isNaN(Number(x)) || isNaN(parseFloat(x));
     return false;
   };
 </script>
@@ -258,7 +262,7 @@
       {/if}
       <MenuDivider />
       <div class="p-2 flex items-center">
-        <Button size="xs" style="width: 100%" on:click={onApply}
+        <Button size="xs" style="width: 100%" on:click={onApply} {disabled}
           >{translate('apply')}</Button
         >
       </div>

From 218ce19f3818601852e25ecd74f51ccb89527a76 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 12:35:25 -0600
Subject: [PATCH 06/12] Add check for selected prop to MenuItem

---
 src/lib/holocene/menu/menu-item.svelte | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index 6c29dac37..34b91d949 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -5,11 +5,11 @@
 
 <script lang="ts">
   import type { HTMLLiAttributes } from 'svelte/elements';
-  
+
   import { createEventDispatcher, getContext } from 'svelte';
-  
+
   import Icon from '$lib/holocene/icon/icon.svelte';
-  
+
   import { MENU_CONTEXT, type MenuContext } from './menu-container.svelte';
 
   type ExtendedLIEvent = KeyboardEvent & {
@@ -33,7 +33,7 @@
 
   let className = '';
   export { className as class };
-  export let selected = false;
+  export let selected = undefined;
   export let destructive = false;
   export let disabled = false;
   export let href = null;
@@ -140,11 +140,13 @@
       {:else}
         <slot />
       {/if}
-      <div class="flex w-6 h-6 shrink-0">
-        {#if selected}
-          <Icon name="checkmark" />
-        {/if}
-      </div>
+      {#if selected !== undefined}
+        <div class="flex w-6 h-6 shrink-0">
+          {#if selected}
+            <Icon name="checkmark" />
+          {/if}
+        </div>
+      {/if}
     </div>
     <slot name="trailing" />
   </li>

From 04927858e094aaaf4a8125514e365a2c69c2103b Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 14:17:14 -0600
Subject: [PATCH 07/12] Refactor SearchAttributeMenu

---
 .../workflow/filter-search/index.svelte       |  80 +-----------
 .../search-attribute-menu.svelte              | 114 ++++++++++++++++++
 2 files changed, 117 insertions(+), 77 deletions(-)
 create mode 100644 src/lib/components/workflow/filter-search/search-attribute-menu.svelte

diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index 5de4cd74e..0ad6464aa 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-  import { afterUpdate, noop } from 'svelte/internal';
+  import { afterUpdate } from 'svelte/internal';
   import { writable, type Writable } from 'svelte/store';
   import { fly } from 'svelte/transition';
 
@@ -21,19 +21,10 @@
 
   import WorkflowAdvancedSearch from '$lib/components/workflow/workflow-advanced-search.svelte';
   import Button from '$lib/holocene/button.svelte';
-  import Icon from '$lib/holocene/icon/icon.svelte';
-  import Input from '$lib/holocene/input/input.svelte';
-  import {
-    Menu,
-    MenuButton,
-    MenuContainer,
-    MenuItem,
-  } from '$lib/holocene/menu';
   import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { WorkflowFilter } from '$lib/models/workflow-filters';
   import { workflowFilters } from '$lib/stores/filters';
-  import { sortedSearchAttributeOptions } from '$lib/stores/search-attributes';
   import { refresh } from '$lib/stores/workflows';
   import {
     isBooleanFilter,
@@ -55,9 +46,9 @@
   import DateTimeFilter from './datetime-filter.svelte';
   import FilterList from './filter-list.svelte';
   import NumberFilter from './number-filter.svelte';
+  import SearchAttributeMenu from './search-attribute-menu.svelte';
   import StatusFilter from './status-filter.svelte';
   import TextFilter from './text-filter.svelte';
-
   const filter = writable<WorkflowFilter>(emptyFilter());
   const activeQueryIndex = writable<number>(null);
   const focusedElementId = writable<string>('');
@@ -100,7 +91,6 @@
       $workflowFilters = [...$workflowFilters, $filter];
     }
     filter.set(emptyFilter());
-    searchAttributeValue = '';
     onSearch();
   }
 
@@ -124,17 +114,6 @@
     return '';
   }
 
-  function isOptionDisabled(value: string, filters: WorkflowFilter[]) {
-    return filters.some(
-      (filter) => filter.conditional === '=' && filter.attribute === value,
-    );
-  }
-
-  function handleNewQuery(value: string) {
-    filter.set({ ...emptyFilter(), attribute: value, conditional: '=' });
-    $focusedElementId = getFocusedElementId(value);
-  }
-
   function updateFocusedElementId() {
     if ($activeQueryIndex !== null) {
       $focusedElementId = getFocusedElementId($filter.attribute);
@@ -143,18 +122,6 @@
 
   $: $activeQueryIndex, updateFocusedElementId();
 
-  let searchAttributeValue = '';
-  //  TODO: Add KeywordList support
-  $: options = $sortedSearchAttributeOptions.filter(
-    (option) => !isListFilter(option.value),
-  );
-
-  $: filteredOptions = !searchAttributeValue
-    ? options
-    : options.filter((option) =>
-        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
-      );
-
   function updateFocus() {
     if ($focusedElementId) {
       const element = document.getElementById($focusedElementId);
@@ -174,7 +141,6 @@
   function resetFilter() {
     activeQueryIndex.set(null);
     filter.set(emptyFilter());
-    searchAttributeValue = '';
   }
 
   function handleKeyUp(event: KeyboardEvent) {
@@ -197,47 +163,7 @@
         {#if isStatusFilter($filter.attribute)}
           <StatusFilter />
         {:else}
-          <MenuContainer>
-            <MenuButton
-              controls="search-attribute-menu"
-              unroundRight={Boolean($filter.attribute)}
-              disabled={$activeQueryIndex !== null}
-              count={$filter.attribute ? 0 : $workflowFilters.length}
-            >
-              <svelte:fragment slot="leading">
-                {#if !$filter.attribute}
-                  <Icon name="filter" />
-                {/if}
-              </svelte:fragment>
-              {$filter.attribute || translate('workflows', 'filter')}
-            </MenuButton>
-            <Menu id="search-attribute-menu">
-              <Input
-                label={translate('search')}
-                labelHidden
-                id="filter-search"
-                noBorder
-                bind:value={searchAttributeValue}
-                icon="search"
-                placeholder={translate('search')}
-                class="mb-1"
-              />
-
-              {#each filteredOptions as { value, label }}
-                {@const disabled = isOptionDisabled(value, $workflowFilters)}
-                <MenuItem
-                  on:click={() => {
-                    handleNewQuery(value);
-                  }}
-                  {disabled}
-                >
-                  {label}
-                </MenuItem>
-              {:else}
-                <MenuItem on:click={noop}>{translate('no-results')}</MenuItem>
-              {/each}
-            </Menu>
-          </MenuContainer>
+          <SearchAttributeMenu />
         {/if}
 
         {#if isTextFilter($filter.attribute)}
diff --git a/src/lib/components/workflow/filter-search/search-attribute-menu.svelte b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
new file mode 100644
index 000000000..d64b8cb1a
--- /dev/null
+++ b/src/lib/components/workflow/filter-search/search-attribute-menu.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Input from '$lib/holocene/input/input.svelte';
+  import {
+    Menu,
+    MenuButton,
+    MenuContainer,
+    MenuItem,
+  } from '$lib/holocene/menu';
+  import { translate } from '$lib/i18n/translate';
+  import type { WorkflowFilter } from '$lib/models/workflow-filters';
+  import { workflowFilters } from '$lib/stores/filters';
+  import { sortedSearchAttributeOptions } from '$lib/stores/search-attributes';
+  import {
+    isBooleanFilter,
+    isDateTimeFilter,
+    isListFilter,
+    isNumberFilter,
+    isStatusFilter,
+    isTextFilter,
+  } from '$lib/utilities/query/filter-search';
+  import { emptyFilter } from '$lib/utilities/query/to-list-workflow-filters';
+
+  import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
+
+  const { filter, activeQueryIndex, focusedElementId } =
+    getContext<FilterContext>(FILTER_CONTEXT);
+
+  function getFocusedElementId(attribute: string) {
+    if (isStatusFilter(attribute)) return 'status-filter';
+
+    if (isTextFilter(attribute)) return 'text-filter-search';
+
+    if (isListFilter(attribute)) return 'list-filter-search';
+
+    if (isNumberFilter(attribute) || isDateTimeFilter(attribute))
+      return 'conditional-menu-button';
+
+    if (isBooleanFilter(attribute)) return 'boolean-filter';
+
+    return '';
+  }
+
+  function isOptionDisabled(value: string, filters: WorkflowFilter[]) {
+    return filters.some(
+      (filter) => filter.conditional === '=' && filter.attribute === value,
+    );
+  }
+
+  function handleNewQuery(value: string) {
+    searchAttributeValue = '';
+    filter.set({ ...emptyFilter(), attribute: value, conditional: '=' });
+    $focusedElementId = getFocusedElementId(value);
+  }
+
+  let searchAttributeValue = '';
+  //  TODO: Add KeywordList support
+  $: options = $sortedSearchAttributeOptions.filter(
+    (option) => !isListFilter(option.value),
+  );
+
+  $: filteredOptions = !searchAttributeValue
+    ? options
+    : options.filter((option) =>
+        option.value.toLowerCase().includes(searchAttributeValue.toLowerCase()),
+      );
+</script>
+
+<MenuContainer>
+  <MenuButton
+    controls="search-attribute-menu"
+    unroundRight={Boolean($filter.attribute)}
+    disabled={$activeQueryIndex !== null}
+    count={$filter.attribute ? 0 : $workflowFilters.length}
+    on:click={() => (searchAttributeValue = '')}
+  >
+    <svelte:fragment slot="leading">
+      {#if !$filter.attribute}
+        <Icon name="filter" />
+      {/if}
+    </svelte:fragment>
+    {$filter.attribute || translate('workflows', 'filter')}
+  </MenuButton>
+  <Menu id="search-attribute-menu">
+    <Input
+      label={translate('search')}
+      labelHidden
+      id="filter-search"
+      noBorder
+      bind:value={searchAttributeValue}
+      icon="search"
+      placeholder={translate('search')}
+      class="mb-1"
+    />
+
+    {#each filteredOptions as { value, label }}
+      {@const disabled = isOptionDisabled(value, $workflowFilters)}
+      <MenuItem
+        on:click={() => {
+          handleNewQuery(value);
+        }}
+        {disabled}
+      >
+        {label}
+      </MenuItem>
+    {:else}
+      <MenuItem class="whitespace-nowrap" disabled
+        >{translate('no-results')}</MenuItem
+      >
+    {/each}
+  </Menu>
+</MenuContainer>

From 92794ac2e630fab97851cb504f1ad79caed60440 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 14:40:48 -0600
Subject: [PATCH 08/12] Use close icon and ghost variant for close filter
 button

---
 .../workflow/filter-search/boolean-filter.svelte      |  1 -
 .../workflow/filter-search/close-filter-button.svelte | 11 +++++------
 .../workflow/filter-search/datetime-filter.svelte     |  1 -
 .../components/workflow/filter-search/index.svelte    |  1 +
 .../workflow/filter-search/number-filter.svelte       |  1 -
 .../workflow/filter-search/text-filter.svelte         |  1 -
 6 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/boolean-filter.svelte b/src/lib/components/workflow/filter-search/boolean-filter.svelte
index d7515d6cb..eb80f2623 100644
--- a/src/lib/components/workflow/filter-search/boolean-filter.svelte
+++ b/src/lib/components/workflow/filter-search/boolean-filter.svelte
@@ -25,7 +25,6 @@
 <MenuContainer>
   <MenuButton
     unroundLeft
-    unroundRight
     class="!border-l-0"
     id="boolean-filter"
     controls="boolean-filter-menu"
diff --git a/src/lib/components/workflow/filter-search/close-filter-button.svelte b/src/lib/components/workflow/filter-search/close-filter-button.svelte
index e55e91a14..d4c726862 100644
--- a/src/lib/components/workflow/filter-search/close-filter-button.svelte
+++ b/src/lib/components/workflow/filter-search/close-filter-button.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  
+
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
-  
+
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
 
   const { resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
@@ -11,9 +11,8 @@
 
 <Button
   aria-label={translate('close')}
-  borderRadiusModifier="square-left"
-  leadingIcon="chevron-left"
+  leadingIcon="close"
   on:click={resetFilter}
-  style="padding: 0"
-  variant="table-header"
+  style="padding: 0; margin-left: 0.25rem"
+  variant="ghost"
 />
diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index 2814e48e6..db45abbf2 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -130,7 +130,6 @@
   <MenuContainer>
     <MenuButton
       unroundLeft
-      unroundRight
       id="time-range-filter"
       controls="time-range-filter-menu"
     >
diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index 0ad6464aa..e62865d61 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -162,6 +162,7 @@
       >
         {#if isStatusFilter($filter.attribute)}
           <StatusFilter />
+          <CloseFilter />
         {:else}
           <SearchAttributeMenu />
         {/if}
diff --git a/src/lib/components/workflow/filter-search/number-filter.svelte b/src/lib/components/workflow/filter-search/number-filter.svelte
index 138058340..aeaa7eac7 100644
--- a/src/lib/components/workflow/filter-search/number-filter.svelte
+++ b/src/lib/components/workflow/filter-search/number-filter.svelte
@@ -34,7 +34,6 @@
     {min}
     on:keydown={handleKeydown}
     unroundLeft
-    unroundRight
     search
     class="-mr-2"
   />
diff --git a/src/lib/components/workflow/filter-search/text-filter.svelte b/src/lib/components/workflow/filter-search/text-filter.svelte
index d510ef8a5..1b914dc08 100644
--- a/src/lib/components/workflow/filter-search/text-filter.svelte
+++ b/src/lib/components/workflow/filter-search/text-filter.svelte
@@ -28,7 +28,6 @@
   icon="search"
   class="w-full"
   unroundLeft
-  unroundRight
   bind:value
   on:keydown={handleKeydown}
 />

From 2e3b17f83eba67067ed0dcc924685f8a1c8522c9 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 15:54:46 -0600
Subject: [PATCH 09/12] Use IconButton for CloseFilter

---
 .../workflow/filter-search/close-filter-button.svelte | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/close-filter-button.svelte b/src/lib/components/workflow/filter-search/close-filter-button.svelte
index d4c726862..860bec117 100644
--- a/src/lib/components/workflow/filter-search/close-filter-button.svelte
+++ b/src/lib/components/workflow/filter-search/close-filter-button.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
 
-  import Button from '$lib/holocene/button.svelte';
+  import IconButton from '$lib/holocene/icon-button.svelte';
   import { translate } from '$lib/i18n/translate';
 
   import { FILTER_CONTEXT, type FilterContext } from './index.svelte';
@@ -9,10 +9,9 @@
   const { resetFilter } = getContext<FilterContext>(FILTER_CONTEXT);
 </script>
 
-<Button
-  aria-label={translate('close')}
-  leadingIcon="close"
+<IconButton
+  label={translate('close')}
+  icon="close"
   on:click={resetFilter}
-  style="padding: 0; margin-left: 0.25rem"
-  variant="ghost"
+  class="ml-1"
 />

From 9b8ea84262fcbbc5c5e7230a9a6aa01c27d5aa97 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 6 Sep 2023 16:07:54 -0600
Subject: [PATCH 10/12] Update snapshot

---
 .../tests/__snapshots__/table-header-cell.test.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
index f8b48fa54..7d0cc49f3 100644
--- a/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
+++ b/src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap
@@ -18,7 +18,7 @@ exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summa
 
 exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
 
-exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-63nj9m\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  <div class=\\"flex w-6 h-6 shrink-0\\"></div></div> </li></ul></div></th>"`;
+exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div class=\\"relative \\"><button type=\\"button\\" aria-haspopup=\\"true\\" aria-controls=\\"execution-status-filter\\" aria-expanded=\\"false\\" class=\\"menu-button table-header svelte-4tb2vr\\" data-testid=\\"execution-status-filter-button\\"> <div class=\\"flex items-center grow\\">Status</div>  <svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\"><title>filter</title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg> </button> <ul role=\\"menu\\" class=\\"menu left hidden svelte-63nj9m\\" aria-labelledby=\\"execution-status-filter\\" tabindex=\\"-1\\" id=\\"execution-status-filter\\"><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">All</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"absolute top-0 left-0 h-4 w-4\\" role=\\"img\\"><title>checkmark</title><path d=\\"M19.6992 7.60938L10.1367 17.1719C10.0312 17.2773 9.89062 17.3125 9.75 17.3125C9.57422 17.3125 9.43359 17.2773 9.32812 17.1719L4.26562 12.1094C4.05469 11.8984 4.05469 11.5117 4.26562 11.3008C4.47656 11.0898 4.86328 11.0898 5.07422 11.3008L9.75 15.9766L18.8906 6.80078C19.1016 6.58984 19.4883 6.58984 19.6992 6.80078C19.9102 7.01172 19.9102 7.39844 19.6992 7.60938Z\\" fill=\\"currentcolor\\"></path></svg></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\">All Statuses  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Running</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-blue-100 text-blue-700\\">Running <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">TimedOut</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-orange-100 text-orange-700\\">Timed Out </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Completed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-green-100 text-green-700\\">Completed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Failed</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Failed </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">ContinuedAsNew</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-gray-200 text-gray-900\\">Continued as New </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Canceled</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-yellow-100 text-yellow-900\\">Canceled </span></div>  </div> </li><li role=\\"menuitem\\" class=\\"menu-item svelte-1mz3qek\\" aria-hidden=\\"false\\" aria-disabled=\\"false\\" tabindex=\\"0\\"><div class=\\"relative undefined svelte-1ic6fbx\\"><label class=\\"checkbox svelte-1ic6fbx\\"><span class=\\"label svelte-1ic6fbx sr-only\\">Terminated</span> <input id=\\"\\" type=\\"checkbox\\" slot=\\"leading\\" tabindex=\\"-1\\" class=\\"svelte-1ic6fbx\\"> <span class=\\"checkmark svelte-1ic6fbx\\"></span></label></div> <div class=\\"menu-item-wrapper svelte-1mz3qek\\"><div class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"flex items-center rounded-sm px-1 py-0.5 font-secondary whitespace-nowrap bg-red-100 text-red-700\\">Terminated </span></div>  </div> </li></ul></div></th>"`;
 
 exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-x2wk3\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
 

From b02f7c80a8c574c7185d114a73e55a085f16ce8b Mon Sep 17 00:00:00 2001
From: Ross Edfort <rossedfort@gmail.com>
Date: Thu, 7 Sep 2023 09:42:09 -0600
Subject: [PATCH 11/12] fix icon button so it stays rounded

---
 .../workflow/filter-search/index.svelte           | 10 +++++-----
 src/lib/holocene/icon-button.svelte               | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/workflow/filter-search/index.svelte b/src/lib/components/workflow/filter-search/index.svelte
index e62865d61..1ce44c184 100644
--- a/src/lib/components/workflow/filter-search/index.svelte
+++ b/src/lib/components/workflow/filter-search/index.svelte
@@ -156,7 +156,7 @@
       <WorkflowAdvancedSearch />
     {:else}
       <div
-        class="flex"
+        class="flex items-center"
         class:filter={!showClearAllButton}
         on:keyup={handleKeyUp}
       >
@@ -168,7 +168,7 @@
         {/if}
 
         {#if isTextFilter($filter.attribute)}
-          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <TextFilter />
             <CloseFilter />
           </div>
@@ -178,17 +178,17 @@
           <ListFilter />
         </div> -->
         {:else if isNumberFilter($filter.attribute)}
-          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <NumberFilter />
             <CloseFilter />
           </div>
         {:else if isDateTimeFilter($filter.attribute)}
-          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <DateTimeFilter />
             <CloseFilter />
           </div>
         {:else if isBooleanFilter($filter.attribute)}
-          <div class="flex w-full" in:fly={{ x: -100, duration: 150 }}>
+          <div class="flex w-full items-center" in:fly={{ x: -100, duration: 150 }}>
             <BooleanFilter />
             <CloseFilter />
           </div>
diff --git a/src/lib/holocene/icon-button.svelte b/src/lib/holocene/icon-button.svelte
index a16ae7493..b57b8b34b 100644
--- a/src/lib/holocene/icon-button.svelte
+++ b/src/lib/holocene/icon-button.svelte
@@ -16,17 +16,22 @@
   export let label = '';
 </script>
 
-<button type="button" class="icon-button {className}" on:click aria-label={label} {...$$restProps}>
-  <Icon name={icon} class="h-auto" />
+<button
+  type="button"
+  class="icon-button {className}"
+  on:click
+  aria-label={label}
+  {...$$restProps}
+>
+  <Icon name={icon} />
 </button>
 
-
 <style lang="postcss">
   .icon-button {
-    @apply p-1 inline-block rounded-full border-2 border-[transparent];
+    @apply shrink-0 inline-flex items-center justify-center h-9 w-9 rounded-full border-2 border-[transparent];
 
     &:not(:disabled) {
-      @apply bg-gradient-to-br hover:text-gray-900 hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 hover:from-blue-100 hover:to-purple-100 focus-visible:text-gray-900 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100
+      @apply bg-gradient-to-br hover:text-gray-900 hover:border-indigo-600 hover:shadow-focus hover:shadow-blue-600/50 hover:from-blue-100 hover:to-purple-100 focus-visible:text-gray-900 focus-visible:outline-none focus-visible:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100;
     }
 
     &:disabled {

From 48f83ab4c2f8158f69087e77d3251a8274e18d91 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 7 Sep 2023 10:53:17 -0600
Subject: [PATCH 12/12] Disable relative vs absolute inputs

---
 .../components/workflow/filter-search/datetime-filter.svelte  | 4 ++++
 src/lib/holocene/date-picker.svelte                           | 2 ++
 src/lib/holocene/time-picker.svelte                           | 4 ++++
 3 files changed, 10 insertions(+)

diff --git a/src/lib/components/workflow/filter-search/datetime-filter.svelte b/src/lib/components/workflow/filter-search/datetime-filter.svelte
index db45abbf2..e88558cef 100644
--- a/src/lib/components/workflow/filter-search/datetime-filter.svelte
+++ b/src/lib/components/workflow/filter-search/datetime-filter.svelte
@@ -207,6 +207,7 @@
                 error={error(relativeTime)}
                 unroundRight
                 class="h-10"
+                disabled={type !== 'relative'}
               />
               <Select
                 unroundLeft
@@ -214,6 +215,7 @@
                 id="relative-datetime-unit-input"
                 label={translate('time-unit')}
                 labelHidden
+                disabled={type !== 'relative'}
               >
                 {#each TIME_UNIT_OPTIONS as unit}
                   <Option value={unit}>{unit} {translate('ago')}</Option>
@@ -248,12 +250,14 @@
                 todayLabel={translate('today')}
                 closeLabel={translate('close')}
                 clearLabel={translate('clear-input-button-label')}
+                disabled={type !== 'absolute'}
               />
               <TimePicker
                 bind:hour={startHour}
                 bind:minute={startMinute}
                 bind:second={startSecond}
                 twelveHourClock={false}
+                disabled={type !== 'absolute'}
               />
             </div>
           </div>
diff --git a/src/lib/holocene/date-picker.svelte b/src/lib/holocene/date-picker.svelte
index f2ab0064e..d2c37bd66 100644
--- a/src/lib/holocene/date-picker.svelte
+++ b/src/lib/holocene/date-picker.svelte
@@ -17,6 +17,7 @@
   export let todayLabel: string;
   export let closeLabel: string;
   export let clearLabel: string;
+  export let disabled = false;
 
   let month: number | undefined;
   let year: number | undefined;
@@ -88,6 +89,7 @@
     value={selected.toDateString()}
     clearable
     clearButtonLabel={clearLabel}
+    {disabled}
   />
   {#if showDatePicker}
     <div
diff --git a/src/lib/holocene/time-picker.svelte b/src/lib/holocene/time-picker.svelte
index b823fc23b..f78965ff3 100644
--- a/src/lib/holocene/time-picker.svelte
+++ b/src/lib/holocene/time-picker.svelte
@@ -8,6 +8,7 @@
   export let second = '';
   export let half: 'AM' | 'PM' = 'AM';
   export let twelveHourClock = true;
+  export let disabled = false;
 </script>
 
 <div class="flex gap-2">
@@ -20,6 +21,7 @@
     suffix="hrs"
     maxLength={2}
     error={twelveHourClock ? parseInt(hour) > 12 : parseInt(hour) > 23}
+    {disabled}
   />
   <Input
     id="minute"
@@ -31,6 +33,7 @@
     suffix="min"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
   <Input
     id="second"
@@ -41,6 +44,7 @@
     suffix="sec"
     maxLength={2}
     error={Boolean(parseInt(hour) > 59)}
+    {disabled}
   />
   {#if twelveHourClock}
     <ToggleButtons>