From 32c1e88db4ffe938fa7a8ff1e58d81374b463c99 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 11 Nov 2023 19:47:31 -0500
Subject: [PATCH 1/4] Re-add "npm run changeset" instead of requiring changeset
 installed globally

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 9244907f7..d99576d39 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "build": "rimraf packages/*/dist && pnpm -r build",
     "lint": "pnpm -r lint",
     "format": "pnpm -r format",
+    "changeset": "changeset",
     "changeset:version": "changeset version",
     "changeset:release": "changeset publish",
     "up-dep": "pnpm -r up --latest"

From a730969f0a30271b9c6aec84df83a5c9b35e5eaa Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 11 Nov 2023 19:47:49 -0500
Subject: [PATCH 2/4] [ScrollingValue] Add `single` prop to enable individual
 number display (proper handling of 9)

---
 .changeset/sixty-mangos-melt.md                    |  5 +++++
 .../src/lib/components/ScrollingValue.svelte       |  3 ++-
 .../docs/components/ScrollingValue/+page.svelte    | 14 ++++++++------
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/sixty-mangos-melt.md

diff --git a/.changeset/sixty-mangos-melt.md b/.changeset/sixty-mangos-melt.md
new file mode 100644
index 000000000..e145b8620
--- /dev/null
+++ b/.changeset/sixty-mangos-melt.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[ScrollingValue] Add `single` prop to enable individual number display (proper handling of 9)
diff --git a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
index d9cdda5f0..f537848f0 100644
--- a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
+++ b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte
@@ -6,6 +6,7 @@
   import { getComponentTheme } from './theme';
 
   export let value = 0;
+  export let single = false;
   export let format: (value: number) => string | number = (value) => value;
 
   export let classes: {
@@ -33,7 +34,7 @@
     class={cls('col-span-full row-span-full', theme.value, classes.value)}
     style:transform="translateY({-100 + 100 * offset}%)"
   >
-    {format(Math.floor($displayValue + 1))}
+    {format(Math.floor(single && $displayValue >= 9 ? 0 : $displayValue + 1))}
   </div>
   <div
     class={cls('col-span-full row-span-full', theme.value, classes.value)}
diff --git a/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte b/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
index 993cc478d..33b7c71bb 100644
--- a/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
+++ b/packages/svelte-ux/src/routes/docs/components/ScrollingValue/+page.svelte
@@ -67,6 +67,14 @@
   <ScrollingValue bind:value />
 </Preview>
 
+<h2>Individual numbers</h2>
+
+<Preview>
+  {#each Math.abs(value).toString().split('') as num}
+    <ScrollingValue value={Number(num)} single class="text-3xl tabular-nums" />
+  {/each}
+</Preview>
+
 <h2>Formatted</h2>
 
 <Preview>
@@ -86,12 +94,6 @@
   </span>
 </Preview>
 
-<h2>Font-size</h2>
-
-<Preview>
-  <ScrollingValue bind:value class="text-6xl" />
-</Preview>
-
 <h2>Field</h2>
 <h3>With label and appended actions</h3>
 

From 8a23f6b0973f298b963ee4b505247c7a701ca31d Mon Sep 17 00:00:00 2001
From: Will Nations <willnationsdev@gmail.com>
Date: Sat, 11 Nov 2023 22:00:19 -0600
Subject: [PATCH 3/4] Fix type errors for Button's use of Icon data. (#125)

---
 .changeset/slimy-starfishes-report.md           |  6 ++++++
 .../svelte-ux/src/lib/components/Button.svelte  |  5 +++--
 .../svelte-ux/src/lib/components/Icon.svelte    | 13 ++++++++-----
 .../src/lib/components/TextField.svelte         | 13 +++++++------
 packages/svelte-ux/src/lib/utils/icons.ts       | 17 +++++++++++++++++
 5 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/slimy-starfishes-report.md
 create mode 100644 packages/svelte-ux/src/lib/utils/icons.ts

diff --git a/.changeset/slimy-starfishes-report.md b/.changeset/slimy-starfishes-report.md
new file mode 100644
index 000000000..b691f6652
--- /dev/null
+++ b/.changeset/slimy-starfishes-report.md
@@ -0,0 +1,6 @@
+---
+'svelte-ux': patch
+---
+
+Added new `IconInput` and `IconData` types to enable inclusive & seamless passing of icon arguments between components. Also provides a `asIconData` utility function for type-safe conversion.
+Fixed type errors for Button & TextField's use of Icon data.
\ No newline at end of file
diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte
index 5ec447cfc..5c53299f7 100644
--- a/packages/svelte-ux/src/lib/components/Button.svelte
+++ b/packages/svelte-ux/src/lib/components/Button.svelte
@@ -10,12 +10,13 @@
   import type { TailwindColors } from '$lib/types';
   import { getComponentTheme } from './theme';
   import { getButtonGroup } from './ButtonGroup.svelte';
+  import { asIconData, type IconInput } from '$lib/utils/icons';
 
   export let type: 'button' | 'submit' | 'reset' = 'button';
   export let href: string | undefined = undefined;
   export let target: string | undefined = undefined;
   export let fullWidth: boolean = false;
-  export let icon: ComponentProps<Icon>['data'] | ComponentProps<Icon> | undefined = undefined;
+  export let icon: IconInput = undefined;
   export let iconOnly = icon !== undefined && $$slots.default !== true;
   export let actions: Actions<HTMLAnchorElement | HTMLButtonElement> | undefined = undefined;
 
@@ -261,7 +262,7 @@
     <span in:slide={{ axis: 'x', duration: 200 }}>
       {#if typeof icon === 'string' || 'icon' in icon}
         <!-- font path/url/etc or font-awesome IconDefinition -->
-        <Icon data={icon} class={cls('pointer-events-none', theme.icon, classes.icon)} />
+        <Icon data={asIconData(icon)} class={cls('pointer-events-none', theme.icon, classes.icon)} />
       {:else}
         <Icon class={cls('pointer-events-none', theme.icon, classes.icon)} {...icon} />
       {/if}
diff --git a/packages/svelte-ux/src/lib/components/Icon.svelte b/packages/svelte-ux/src/lib/components/Icon.svelte
index 39538dcfc..c29608ee2 100644
--- a/packages/svelte-ux/src/lib/components/Icon.svelte
+++ b/packages/svelte-ux/src/lib/components/Icon.svelte
@@ -14,7 +14,7 @@
   export let height = size;
   export let viewBox = '0 0 24 24';
   export let path: string | string[] = '';
-  export let data: IconDefinition | string | undefined = undefined;
+  export let data: IconDefinition | string | null | undefined = undefined;
   export let svg: string | undefined = undefined;
   export let svgUrl: string | undefined = undefined;
 
@@ -31,7 +31,7 @@
   } = {};
   const theme = getComponentTheme('Icon');
 
-  $: if (typeof data === 'object' && 'icon' in data) {
+  $: if (typeof data === 'object' && data && 'icon' in data) {
     // Font Awesome
     const [_width, _height, _ligatures, _unicode, _path] = data.icon;
     viewBox = `0 0 ${_width} ${_height}`;
@@ -59,15 +59,18 @@
   $: if (svgUrl) {
     let promise;
     if (cache.has(svgUrl)) {
-      cache.get(svgUrl).then((text) => (svg = text));
+      cache.get(svgUrl)?.then((text) => (svg = text));
     } else {
       promise = fetch(svgUrl)
         .then((resp) => resp.text())
-        .catch((e) => {
+        .catch(() => {
           // Failed request, remove promise so fetched again
-          cache.delete(svgUrl);
+          if (svgUrl && typeof(svgUrl) === "string") {
+            cache.delete(svgUrl);
+          }
           // TODO: Consider showing error icon
           // throw e;
+          return "";
         });
       cache.set(svgUrl, promise);
       promise.then((text) => {
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
index 92ed6184d..e4c5cb8ff 100644
--- a/packages/svelte-ux/src/lib/components/TextField.svelte
+++ b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -14,12 +14,13 @@
   import Button from './Button.svelte';
   import Icon from './Icon.svelte';
   import Input from './Input.svelte';
+  import { type IconInput, asIconData } from '$lib/utils/icons';
 
   type InputValue = string | number;
 
   const dispatch = createEventDispatcher<{
     clear: null;
-    change: { value: typeof value; inputValue: InputValue; operator: string };
+    change: { value: typeof value; inputValue: InputValue; operator?: string };
   }>();
 
   export let name: string | undefined = undefined;
@@ -45,8 +46,8 @@
   export let base = false;
   export let rounded = false;
   export let dense = false;
-  export let icon: string | null = null;
-  export let iconRight: string | null = null;
+  export let icon: IconInput = null;
+  export let iconRight: IconInput = null;
   export let align: 'left' | 'center' | 'right' = 'left';
   export let autofocus: boolean | Parameters<typeof autoFocus>[1] = false;
   // TODO: Find way to conditionally set type based on `multiline` value
@@ -176,7 +177,7 @@
   $: hasInputValue = inputValue != null && inputValue !== '';
   $: hasInsetLabel = ['inset', 'float'].includes(labelPlacement) && label !== '';
 
-  $: hasPrepend = $$slots.prepend || icon != null;
+  $: hasPrepend = $$slots.prepend || !!icon;
   $: hasAppend =
     $$slots.append || iconRight != null || clearable || error || operators || type === 'password';
   $: hasPrefix = $$slots.prefix || type === 'currency';
@@ -247,7 +248,7 @@
             <slot name="prepend" />
             {#if icon}
               <span class="mr-3">
-                <Icon path={icon} class="text-black/50" />
+                <Icon data={asIconData(icon)} class="text-black/50" />
               </span>
             {/if}
           </div>
@@ -417,7 +418,7 @@
             {#if error}
               <Icon path={mdiInformationOutline} class="text-red-500" />
             {:else if iconRight}
-              <Icon path={iconRight} class="text-black/50" />
+              <Icon data={asIconData(iconRight)} class="text-black/50" />
             {/if}
           </div>
         {/if}
diff --git a/packages/svelte-ux/src/lib/utils/icons.ts b/packages/svelte-ux/src/lib/utils/icons.ts
new file mode 100644
index 000000000..a862ed49b
--- /dev/null
+++ b/packages/svelte-ux/src/lib/utils/icons.ts
@@ -0,0 +1,17 @@
+
+import type { ComponentProps } from "svelte";
+import type { default as Icon } from "$lib/components/Icon.svelte";
+import { isLiteralObject } from "./object";
+
+export type IconInput = ComponentProps<Icon>['data'] | ComponentProps<Icon>;
+export type IconData = ComponentProps<Icon>['data'];
+
+export function asIconData(v: IconInput): IconData {
+  return isIconComponentProps(v) ? v.data : v;
+}
+
+function isIconComponentProps(v: any): v is ComponentProps<Icon> {
+	// `iconName` is a required property of `IconDefinition`, the only other object that `IconInput` supports.
+	// If it is undefined, then only ComponentProps<Icon> is viable.
+	return isLiteralObject(v) && typeof(v['iconName']) === "undefined";
+}

From 3c9bbea1208dc2fa0b828d924b2c5a9d5965df2d Mon Sep 17 00:00:00 2001
From: willnationsdev <willnationsdev@gmail.com>
Date: Wed, 8 Nov 2023 00:33:18 -0600
Subject: [PATCH 4/4] Replace SelectList with SelectField.

- Updates QuickSearch to use SelectField.
---
 .changeset/quick-avocados-hope.md             |   5 +
 .../src/lib/components/QuickSearch.svelte     |  13 +-
 .../src/lib/components/SelectField.svelte     |  51 ++-
 .../src/lib/components/SelectList.svelte      | 420 ------------------
 .../svelte-ux/src/lib/components/index.ts     |   1 -
 5 files changed, 54 insertions(+), 436 deletions(-)
 create mode 100644 .changeset/quick-avocados-hope.md
 delete mode 100644 packages/svelte-ux/src/lib/components/SelectList.svelte

diff --git a/.changeset/quick-avocados-hope.md b/.changeset/quick-avocados-hope.md
new file mode 100644
index 000000000..3c53722a6
--- /dev/null
+++ b/.changeset/quick-avocados-hope.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Removes SelectList. Updates SelectField features to support SelectList's use case via property/attribute overrides. Updates QuickSearch to use SelectField.
diff --git a/packages/svelte-ux/src/lib/components/QuickSearch.svelte b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
index c947973e7..cdef197e8 100644
--- a/packages/svelte-ux/src/lib/components/QuickSearch.svelte
+++ b/packages/svelte-ux/src/lib/components/QuickSearch.svelte
@@ -3,10 +3,11 @@
 
   import Button from '$lib/components/Button.svelte';
   import Dialog from '$lib/components/Dialog.svelte';
-  import SelectList from '$lib/components/SelectList.svelte';
+  import SelectField from '$lib/components/SelectField.svelte';
   import { getComponentTheme } from './theme';
   import { cls } from '$lib/utils/styles';
   import { smScreen } from '$lib/stores';
+  import { autoFocus, selectOnFocus } from '$lib/actions';
 
   export let options: { name: string; value: string; group?: string }[] = [];
 
@@ -18,10 +19,11 @@
 
   let open = false;
 
+  let fieldActions = (node: any) => [autoFocus(node), selectOnFocus(node)];
+
   /*
     TODO:
      - [ ] Sticky search
-     - [ ] Refine SelectList / reuse with SelectField (and maybe MultiSelect)
      - [ ] Improve size of Dialog (move class to Dialog without breaking overflow)
      - [ ] Load descriptions/meta from +page.ts
      - [ ] Improve dialog positioning on small viewports (consistent top/bottom with max height)
@@ -62,12 +64,15 @@
   }}
 >
   <div class="overflow-auto max-h-[min(90dvh,600px)] min-w-[400px] py-1">
-    <SelectList
+    <SelectField
       icon={mdiMagnify}
       placeholder="Search..."
+      showToggleIcon={false}
+      optionsMode="list"
       {options}
+      {fieldActions}
       on:change
-      on:change={(e) => (open = false)}
+      on:change={() => (open = false)}
       classes={{
         field: {
           container: 'border-none hover:shadow-none group-focus-within:shadow-none',
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
index b0c78e0dd..e3cda9030 100644
--- a/packages/svelte-ux/src/lib/components/SelectField.svelte
+++ b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -5,7 +5,7 @@
   import { mdiChevronDown, mdiClose } from '@mdi/js';
 
   import Logger from '../utils/logger';
-  import { selectOnFocus } from '../actions/input';
+  import { autoFocus, selectOnFocus } from '../actions/input';
   import { cls } from '../utils/styles';
 
   import Button from './Button.svelte';
@@ -14,6 +14,8 @@
   import MenuItem from './MenuItem.svelte';
   import TextField from './TextField.svelte';
   import { getComponentTheme } from './theme';
+  import Maybe from './Maybe.svelte';
+  import type { IconInput } from '$lib/utils/icons';
 
   const dispatch = createEventDispatcher<{
     change: { value: any; option: any };
@@ -31,16 +33,26 @@
   export let loading: boolean = false;
   export let disabled: boolean = false;
   export let readonly: boolean = false;
-  export let icon: string | null = null;
+  export let icon: IconInput = undefined;
+  export let toggleIcon: IconInput = mdiChevronDown;
+  export let closeIcon: IconInput = mdiClose;
   export let clearable = true;
   export let base = false;
   export let rounded = false;
   export let dense = false;
   export let clearSearchOnOpen = true;
+  export let tabIterable = false;
+  export let tabindex = 0;
+  export let autofocus: ComponentProps<TextField>['autofocus'] = undefined;
+  export let fieldActions: ComponentProps<TextField>['actions'] = autofocus
+    ? (node) => [autoFocus(node, typeof autofocus === 'object' ? autofocus : undefined), selectOnFocus(node)]
+    : undefined;
+
+  export let showToggleIcon = true;
 
   export let classes: {
     root?: string;
-    field?: string;
+    field?: string | ComponentProps<TextField>['classes'];
     options?: string;
     option?: string;
     selected?: string;
@@ -49,6 +61,9 @@
   } = {};
   const theme = getComponentTheme('SelectField');
 
+  let fieldClasses: ComponentProps<TextField>['classes'];
+  $: fieldClasses = typeof(classes.field) === "string" ? { root: classes.field } : classes.field;
+
   // Menu props
   export let placement: Placement = 'bottom-start';
   export let autoPlacement = true;
@@ -56,6 +71,7 @@
   export let resize = true;
   export let disableTransition = false;
   export let menuProps: ComponentProps<Menu> | undefined = undefined;
+  export let optionsMode: "list" | "menu" = "menu";
 
   $: filteredOptions = options ?? [];
   let searchText = '';
@@ -336,7 +352,14 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div role="button" tabindex="-1" aria-pressed={open ? "true" : "false"} class={cls('SelectField', theme.root, classes.root, $$props.class)} on:click={onClick}>
+<div
+  role="button"
+  {tabindex}
+  aria-pressed={open ? "true" : "false"}
+  aria-haspopup={optionsMode === "menu" ? "listbox" : undefined}
+  class={cls('SelectField', theme.root, classes.root, $$props.class)}
+  on:click={onClick}>
+
   <TextField
     {label}
     {placeholder}
@@ -352,10 +375,15 @@
     on:blur={onBlur}
     on:keydown={onKeyDown}
     on:keypress={onKeyPress}
-    actions={(node) => [selectOnFocus(node)]}
-    class={cls('h-full', theme.field, classes.field)}
+    actions={fieldActions}
+    classes={{
+      root: cls('h-full'),
+      ...theme.field,
+      ...fieldClasses,
+    }}
     role="combobox"
     aria-expanded={open ? "true" : "false"}
+    aria-autocomplete={optionsMode === "menu" ? "list" : undefined}
     {...$$restProps}
   >
     <slot slot="prepend" name="prepend" />
@@ -371,16 +399,16 @@
         <!-- Do not show chevron or clear buttons -->
       {:else if value && clearable}
         <Button
-          icon={mdiClose}
+          icon={closeIcon}
           class="text-black/50 p-1"
           on:click={(e) => {
             e.stopPropagation();
             clear();
           }}
         />
-      {:else}
+      {:else if showToggleIcon}
         <Button
-          icon={mdiChevronDown}
+          icon={toggleIcon}
           class="text-black/50 p-1 transform {open ? 'rotate-180' : ''}"
           tabindex="-1"
         />
@@ -390,7 +418,7 @@
 
   <!-- Improve initial open display, still needs work when switching from No options found (options.length === 0) -->
   {#if options?.length > 0 || loading !== true}
-    <Menu
+    <Maybe this={optionsMode === "menu" ? Menu : undefined}
       {placement}
       {autoPlacement}
       {matchWidth}
@@ -456,6 +484,7 @@
               role="option"
               aria-selected={option === selected ? "true" : "false"}
               aria-disabled={option?.disabled ? "true" : "false"}
+              tabindex={tabIterable ? 0 : -1}
             >
               {optionText(option)}
             </MenuItem>
@@ -469,6 +498,6 @@
         {/each}
       </div>
       <slot name="actions" {hide} />
-    </Menu>
+    </Maybe>
   {/if}
 </div>
diff --git a/packages/svelte-ux/src/lib/components/SelectList.svelte b/packages/svelte-ux/src/lib/components/SelectList.svelte
deleted file mode 100644
index fe970e716..000000000
--- a/packages/svelte-ux/src/lib/components/SelectList.svelte
+++ /dev/null
@@ -1,420 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, type ComponentEvents, type ComponentProps } from 'svelte';
-
-  import { mdiClose } from '@mdi/js';
-
-  import Logger from '../utils/logger';
-  import { autoFocus, selectOnFocus } from '../actions/input';
-  import { cls } from '../utils/styles';
-
-  import Button from './Button.svelte';
-  import ProgressCircle from './ProgressCircle.svelte';
-  import MenuItem from './MenuItem.svelte';
-  import TextField from './TextField.svelte';
-  import { getComponentTheme } from './theme';
-
-  const dispatch = createEventDispatcher<{
-    change: { value: any; option: any };
-    inputChange: string;
-  }>();
-
-  const logger = new Logger('SelectField');
-
-  export let options: any[] = [];
-  export let optionText = (option: any) => (option?.name as string) ?? '';
-  export let optionValue = (option: any) => option?.value ?? null;
-
-  export let label = '';
-  export let placeholder = '';
-  export let loading: boolean = false;
-  export let disabled: boolean = false;
-  export let readonly: boolean = false;
-  export let icon: string | null = null;
-  export let clearable = true;
-  export let base = false;
-  export let rounded = false;
-  export let dense = false;
-  export let clearSearchOnFocus = false;
-
-  export let classes: {
-    root?: string;
-    field?: ComponentProps<TextField>['classes'];
-    options?: string;
-    option?: string;
-    selected?: string;
-    group?: string;
-    empty?: string;
-  } = {};
-  const theme = getComponentTheme('SelectList');
-
-  $: filteredOptions = options ?? [];
-  let searchText = '';
-  $: logger.debug({ searchText });
-
-  export let value: any = undefined;
-  let prevValue = undefined;
-  export let selected = undefined;
-  let prevSelected = undefined;
-
-  function updateSelected(selected, value, options) {
-    logger.debug('updateSelected', {
-      value,
-      prevValue,
-      selected,
-      prevSelected,
-      options,
-      loading,
-    });
-
-    if (loading === true) {
-      // wait to apply any changes (initially could be loading selected option)
-    } else {
-      if (selected !== undefined && optionValue(selected) !== optionValue(prevSelected)) {
-        logger.info('selected changed', {
-          value,
-          prevValue,
-          selected,
-          prevSelected,
-          options,
-        });
-
-        // Capture for next change
-        prevValue = optionValue(selected);
-        prevSelected = selectOption(selected);
-      } else if (/*value !== undefined &&*/ value !== prevValue) {
-        // Removed `value !== undefined` to clear searchText when value is set to undefined.  Might be a breaking change
-        logger.info('value changed', {
-          value,
-          prevValue,
-          selected,
-          prevSelected,
-          options,
-        });
-
-        // Capture for next change
-        prevValue = value;
-        prevSelected = selectValue(value);
-      } else {
-        logger.info('neither selected or value changed (options only)');
-        // Reselect value if menu is not open and options possibly changed (which could result in new display text for the select value)
-        if (!open && prevValue !== undefined) {
-          selectValue(prevValue);
-        }
-      }
-    }
-  }
-  // Reactively call anytime `selected`, `value`, or `options` change
-  $: updateSelected(selected, value, options);
-
-  export let search = async (text: string) => {
-    logger.debug('search', text);
-
-    if (text === '') {
-      // Reset options
-      filteredOptions = options;
-    } else {
-      const words = text?.toLowerCase().split(' ') ?? [];
-      filteredOptions = options.filter((option) => {
-        const _optionText = optionText(option).toLowerCase();
-        return words.every((word) => _optionText.includes(word));
-      });
-    }
-  };
-
-  // UI state
-  export let open = false;
-  let highlightIndex = 0;
-
-  $: if (open === false) {
-    // Restore text if cleared but selection remains
-    if (selected) {
-      searchText = optionText(selected);
-    }
-  }
-
-  // Elements
-  let inputEl: HTMLInputElement | null = null;
-  let menuOptionsEl: HTMLDivElement;
-
-  $: {
-    search(searchText);
-    highlightIndex = 0;
-  }
-
-  function onChange(e: ComponentEvents<TextField>['change']) {
-    logger.debug('onChange');
-
-    searchText = e.detail.inputValue as string;
-    dispatch('inputChange', searchText);
-    show();
-  }
-
-  function onFocus() {
-    logger.debug('onFocus');
-    if (clearSearchOnFocus) {
-      searchText = ''; // Show all options on focus
-    }
-    show();
-  }
-
-  function onBlur(e: FocusEvent) {
-    logger.debug('onBlur', { target: e.target, relatedTarget: e.relatedTarget, menuOptionsEl });
-
-    // Hide if focus not moved to menu (option clicked)
-    if (
-      e.relatedTarget instanceof Node &&
-      !menuOptionsEl?.contains(e.relatedTarget) && // TODO: Oddly Safari does not set `relatedTarget` to the clicked on menu option (like Chrome and Firefox) but instead appears to take `tabindex` into consideration.  Currently resolves to `.options` after setting `tabindex="-1"
-      e.relatedTarget !== menuOptionsEl?.offsetParent // click on scroll bar
-    ) {
-      hide();
-    } else {
-      logger.debug('ignoring blur');
-    }
-  }
-
-  function onKeyDown(e: KeyboardEvent) {
-    logger.debug('onKeyDown', { key: e.key });
-
-    // e.preventDefault();
-
-    switch (e.key) {
-      case 'Tab':
-        if (e.shiftKey) {
-          // ShiftTab
-        }
-        break;
-
-      case 'ArrowDown':
-        show();
-        if (highlightIndex < filteredOptions.length - 1) {
-          highlightIndex++;
-        } else {
-          // wrap to top
-          highlightIndex = 0;
-        }
-        break;
-
-      case 'ArrowUp':
-        show();
-        if (highlightIndex > 0) {
-          highlightIndex--;
-        } else {
-          // wrap to bottom
-          highlightIndex = filteredOptions.length - 1;
-        }
-        break;
-
-      case 'Escape':
-        if (open) {
-          inputEl?.focus();
-          hide();
-        }
-        break;
-    }
-  }
-
-  function onKeyPress(e: KeyboardEvent) {
-    logger.debug('onKeyPress');
-
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      selectHighlighted();
-    }
-  }
-
-  function onClick() {
-    logger.debug('onClick');
-    if (clearSearchOnFocus) {
-      searchText = ''; // Show all options on focus
-    }
-    show();
-  }
-
-  function show() {
-    logger.debug('show');
-
-    if (!disabled && !readonly) {
-      open = true;
-      inputEl?.focus();
-    }
-  }
-
-  function hide() {
-    logger.debug('hide');
-    open = false;
-    highlightIndex = 0;
-  }
-
-  function selectHighlighted() {
-    logger.debug('selectHighlighted');
-
-    selectIndex(highlightIndex);
-  }
-
-  /**
-   * Select option by index
-   */
-  function selectIndex(index: number) {
-    logger.debug('selectIndex', { index });
-
-    const option = filteredOptions[index];
-    return selectOption(option);
-  }
-
-  /**
-   * Select option by value
-   */
-  function selectValue(value: any) {
-    logger.debug('selectValue', { value, options, filteredOptions });
-
-    const option = options?.find((option) => optionValue(option) === value);
-    return selectOption(option);
-  }
-
-  /**
-   * Select option by object
-   */
-  function selectOption(option: any) {
-    logger.info('selectOption', { option });
-
-    const previousValue = value;
-
-    value = optionValue(option);
-    selected = option;
-    searchText = optionText(option);
-
-    if (value != previousValue) {
-      dispatch('change', { option, value });
-    }
-
-    // Only hide if value changed (do not hide if opening initially and loading list)
-    // if (value != previousValue) {
-    //   hide();
-    // } else {
-    //   logger.debug('same value selected', { previousValue, value });
-    // }
-    hide();
-
-    return option;
-  }
-
-  function clear() {
-    logger.info('clear');
-    selectOption(null);
-    filteredOptions = options;
-    //inputEl?.focus();
-  }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class={cls('SelectList', theme.root, classes.root, $$props.class)} on:click={onClick}>
-  <TextField
-    {label}
-    {placeholder}
-    {base}
-    {rounded}
-    {icon}
-    {dense}
-    {disabled}
-    bind:inputEl
-    bind:value={searchText}
-    on:change={onChange}
-    on:focus={onFocus}
-    on:blur={onBlur}
-    on:keydown={onKeyDown}
-    on:keypress={onKeyPress}
-    actions={(node) => [autoFocus(node), selectOnFocus(node)]}
-    class={cls('h-full')}
-    classes={{ ...theme.field, ...classes.field }}
-    {...$$restProps}
-  >
-    <slot slot="prepend" name="prepend" />
-
-    <span slot="append" class="flex items-center">
-      <slot name="append" />
-
-      {#if loading}
-        <span class="inline-block w-[29px] h-[28px] text-center">
-          <ProgressCircle size={16} width={2} class="text-black/50" />
-        </span>
-      {:else if readonly}
-        <!-- Do not show chevron or clear buttons -->
-      {:else if value && clearable}
-        <Button
-          icon={mdiClose}
-          class="text-black/50 p-1"
-          on:click={(e) => {
-            e.stopPropagation();
-            clear();
-          }}
-        />
-      {/if}
-    </span>
-  </TextField>
-
-  <!-- Improve initial open display, still needs work when switching from No options found (options.length === 0) -->
-  {#if options?.length > 0 || loading !== true}
-    <div
-      tabindex="-1"
-      class={cls('options group focus:outline-none', theme.options, classes.options)}
-      class:opacity-50={loading}
-      bind:this={menuOptionsEl}
-      on:click|stopPropagation={(e) => {
-        logger.debug('options container clicked');
-
-        if (e.target instanceof HTMLElement) {
-          // Find slot parent of click target option, fallback to `e.target` if slot is not overridden
-          // Use `.options > ` in case slot is nested (ex. GraphQLSelect with slot)
-          const slotEl = e.target.closest('.options > [slot=option]') ?? e.target;
-          // Find the index of the clicked on element (ignoring group headers)
-          const optionIndex = slotEl
-            ? [...menuOptionsEl.children]
-                .filter((el) => !el.classList.contains('group-header'))
-                .indexOf(slotEl)
-            : -1;
-          logger.debug({ slotEl, optionIndex });
-          // ignore clicks on group options
-          if (optionIndex !== -1) {
-            selectIndex(optionIndex);
-          }
-        }
-      }}
-    >
-      {#each filteredOptions ?? [] as option, index (optionValue(option))}
-        {@const previousOption = filteredOptions[index - 1]}
-        {#if option.group && option.group !== previousOption?.group}
-          <div
-            class={cls(
-              'group-header text-xs leading-8 tracking-widest text-black/50 px-2',
-              theme.group,
-              classes.group
-            )}
-          >
-            {option.group}
-          </div>
-        {/if}
-
-        <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
-          <MenuItem
-            class={cls(
-              index === highlightIndex && '[:not(.group:hover)>&]:bg-black/5',
-              option.group ? 'px-4' : 'px-2',
-              theme.option,
-              classes.option
-            )}
-            selected={option === selected}
-            scrollIntoView={index === highlightIndex}
-          >
-            {optionText(option)}
-          </MenuItem>
-        </slot>
-      {:else}
-        <slot name="empty" {loading} {searchText}>
-          <div class={cls('p-3 text-black/50 italic text-sm', theme.empty, classes.empty)}>
-            {loading ? 'Loading...' : 'No options found'}
-          </div>
-        </slot>
-      {/each}
-    </div>
-  {/if}
-</div>
diff --git a/packages/svelte-ux/src/lib/components/index.ts b/packages/svelte-ux/src/lib/components/index.ts
index 4f8610c91..47e9b8a1d 100644
--- a/packages/svelte-ux/src/lib/components/index.ts
+++ b/packages/svelte-ux/src/lib/components/index.ts
@@ -68,7 +68,6 @@ export { default as ScrollingValue } from './ScrollingValue.svelte';
 export { default as SectionDivider } from './SectionDivider.svelte';
 export { default as Selection } from './Selection.svelte';
 export { default as SelectField } from './SelectField.svelte';
-export { default as SelectList } from './SelectList.svelte';
 export { default as Shine } from './Shine.svelte';
 export { default as SpringValue } from './SpringValue.svelte';
 export { default as Stack } from './Stack.svelte';