From 2614e920453cc3e3042b04fc861875507dcb1793 Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Fri, 5 Jan 2024 10:58:07 -0500
Subject: [PATCH] APP-3126: clean up various interfaces for searchable select
 fixes (#458)

---
 .vscode/settings.json                         |   9 +-
 packages/core/.eslintrc.cjs                   |   9 +
 .../core/src/lib/floating/floating-style.ts   |  12 +-
 .../core/src/lib/floating/floating.svelte     |  16 +-
 packages/core/src/lib/icon/index.ts           |   2 +
 packages/core/src/lib/index.ts                |  14 +-
 packages/core/src/lib/input/index.ts          |   3 +-
 packages/core/src/lib/input/input-state.ts    |   8 +
 packages/core/src/lib/input/input.svelte      |  48 ++---
 packages/core/src/lib/input/text-input.svelte |   3 +-
 packages/core/src/lib/radio.svelte            |   7 +-
 .../lib/select/__tests__/multiselect.spec.ts  |   4 +-
 .../src/lib/select/__tests__/search.spec.ts   | 175 +++++-------------
 .../__tests__/searchable-select.spec.ts       |   4 +-
 .../lib/select/__tests__/select.spec.svelte   |   4 +-
 packages/core/src/lib/select/index.ts         |   6 +
 .../core/src/lib/select/multiselect.svelte    |  16 +-
 packages/core/src/lib/select/search.ts        |  85 ++++-----
 .../src/lib/select/searchable-select.svelte   |  16 +-
 .../core/src/lib/select/select-input.svelte   |  51 +++--
 packages/core/src/lib/select/select.svelte    |  18 +-
 21 files changed, 236 insertions(+), 274 deletions(-)
 create mode 100644 packages/core/src/lib/icon/index.ts
 create mode 100644 packages/core/src/lib/input/input-state.ts
 create mode 100644 packages/core/src/lib/select/index.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index cabf3fcc..6c242e3c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,5 +22,12 @@
   ],
   "[svelte]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "cSpell.words": [
+    "activedescendant",
+    "combobox",
+    "listbox",
+    "radiobox",
+    "viamrobotics"
+  ]
 }
diff --git a/packages/core/.eslintrc.cjs b/packages/core/.eslintrc.cjs
index c172db4b..baa52fdb 100644
--- a/packages/core/.eslintrc.cjs
+++ b/packages/core/.eslintrc.cjs
@@ -22,6 +22,8 @@ module.exports = {
   rules: {
     // TODO(mc, 2023-12-15): remove overrides, fix issues
     '@typescript-eslint/no-non-null-assertion': 'warn',
+    // TODO(mc, 2024-01-03): move to base config?
+    'multiline-comment-style': 'off',
   },
   overrides: [
     {
@@ -37,5 +39,12 @@ module.exports = {
         '@typescript-eslint/no-unsafe-assignment': 'off',
       },
     },
+    // TODO(mc, 2024-01-03): remove when no-non-null-assertion errors fixed
+    {
+      files: ['**/__tests__/**'],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
   ],
 };
diff --git a/packages/core/src/lib/floating/floating-style.ts b/packages/core/src/lib/floating/floating-style.ts
index fb1f34ff..8b16d4dd 100644
--- a/packages/core/src/lib/floating/floating-style.ts
+++ b/packages/core/src/lib/floating/floating-style.ts
@@ -6,6 +6,7 @@ import {
   flip as flipMiddleware,
   shift as shiftMiddleware,
   arrow as arrowMiddleware,
+  size as sizeMiddleware,
   type Placement,
   type Side,
   type ComputePositionConfig,
@@ -46,6 +47,7 @@ export interface State {
   offset?: number;
   flip?: boolean;
   shift?: number;
+  matchWidth?: boolean;
   auto?: boolean;
 }
 
@@ -109,7 +111,7 @@ const calculateStyle = async (state: State): Promise<FloatingStyle> => {
 };
 
 const getConfig = (state: State): ComputePositionConfig => {
-  const { arrowElement, placement, offset, flip, shift } = state;
+  const { arrowElement, placement, offset, flip, shift, matchWidth } = state;
 
   return {
     placement: placement ?? 'top',
@@ -122,6 +124,14 @@ const getConfig = (state: State): ComputePositionConfig => {
         }),
       shift !== undefined && shiftMiddleware({ padding: shift }),
       arrowElement && arrowMiddleware({ element: arrowElement }),
+      matchWidth &&
+        sizeMiddleware({
+          apply({ rects, elements }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+            });
+          },
+        }),
     ],
   };
 };
diff --git a/packages/core/src/lib/floating/floating.svelte b/packages/core/src/lib/floating/floating.svelte
index a898d9e3..275041eb 100644
--- a/packages/core/src/lib/floating/floating.svelte
+++ b/packages/core/src/lib/floating/floating.svelte
@@ -7,18 +7,26 @@ import {
   type FloatingPlacement,
 } from './floating-style';
 
-export { className as cx };
-export let referenceElement: FloatingReferenceElement;
+export let referenceElement: FloatingReferenceElement | undefined;
 export let placement: FloatingPlacement = 'bottom-start';
 export let offset = 0;
+export let matchWidth = false;
 export let onClickOutside: ((target: Element) => unknown) | undefined =
   undefined;
 
+let className: cx.Argument = undefined;
+export { className as cx };
+
 const style = floatingStyle();
 let floatingElement: HTMLElement | undefined;
-let className: cx.Argument = undefined;
 
-$: style.register({ referenceElement, floatingElement, placement, offset });
+$: style.register({
+  referenceElement,
+  floatingElement,
+  placement,
+  offset,
+  matchWidth,
+});
 </script>
 
 <div
diff --git a/packages/core/src/lib/icon/index.ts b/packages/core/src/lib/icon/index.ts
new file mode 100644
index 00000000..af057785
--- /dev/null
+++ b/packages/core/src/lib/icon/index.ts
@@ -0,0 +1,2 @@
+export { default as Icon } from './icon.svelte';
+export type { IconName } from './icons';
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index e5e499a1..e4a49577 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -23,8 +23,7 @@ export {
   type FloatingStyle,
 } from './floating';
 
-export { default as Icon } from './icon/icon.svelte';
-export type { IconName } from './icon/icons';
+export * from './icon';
 
 export {
   Input,
@@ -33,6 +32,7 @@ export {
   RestrictedTextInput,
   SliderInput,
   TextInput,
+  InputStates,
   type InputState,
   type NumericInputTypes,
   type TextInputTypes,
@@ -60,15 +60,7 @@ export { persisted } from './persisted';
 export { default as Pill } from './pill.svelte';
 export { preventHandler, preventKeyboardHandler } from './prevent-handler';
 
-export { selectControls } from './select/controls';
-export { createSearchableSelectDispatcher } from './select/dispatcher';
-export { default as Multiselect } from './select/multiselect.svelte';
-export { getSearchResults } from './select/search';
-export { default as Select, type SelectState } from './select/select.svelte';
-export { default as SearchableSelect } from './select/searchable-select.svelte';
-export { default as SelectInput } from './select/select-input.svelte';
-export { default as SelectMenu } from './select/select-menu.svelte';
-export { type SortOptions } from './select/search';
+export * from './select';
 
 export { default as Switch } from './switch.svelte';
 export { default as Radio } from './radio.svelte';
diff --git a/packages/core/src/lib/input/index.ts b/packages/core/src/lib/input/index.ts
index 24ed8399..86ab4283 100644
--- a/packages/core/src/lib/input/index.ts
+++ b/packages/core/src/lib/input/index.ts
@@ -1,4 +1,5 @@
-export { default as Input, type InputState } from './input.svelte';
+export { InputStates, type InputState } from './input-state';
+export { default as Input } from './input.svelte';
 export { default as NumericInput } from './numeric-input.svelte';
 export { default as SliderInput } from './slider-input.svelte';
 export { type NumericInputTypes } from './utils';
diff --git a/packages/core/src/lib/input/input-state.ts b/packages/core/src/lib/input/input-state.ts
new file mode 100644
index 00000000..52ba1658
--- /dev/null
+++ b/packages/core/src/lib/input/input-state.ts
@@ -0,0 +1,8 @@
+export const InputStates = {
+  INFO: 'info',
+  WARN: 'warn',
+  ERROR: 'error',
+  NONE: 'none',
+};
+
+export type InputState = (typeof InputStates)[keyof typeof InputStates];
diff --git a/packages/core/src/lib/input/input.svelte b/packages/core/src/lib/input/input.svelte
index bda3a944..f8a807c5 100644
--- a/packages/core/src/lib/input/input.svelte
+++ b/packages/core/src/lib/input/input.svelte
@@ -13,18 +13,11 @@ NumberInput or DateInput are preferable.
 -->
 <svelte:options immutable />
 
-<script
-  lang="ts"
-  context="module"
->
-export type InputState = 'info' | 'warn' | 'error' | 'none';
-</script>
-
 <script lang="ts">
-import Icon from '$lib/icon/icon.svelte';
-import type { IconName } from '$lib/icon/icons';
-import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
 import cx from 'classnames';
+import { Icon, type IconName } from '$lib/icon';
+import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
+import { InputStates, type InputState } from './input-state';
 
 export let value: string | number | undefined = '';
 
@@ -35,7 +28,7 @@ export let readonly = false;
 export let disabled = false;
 
 /** The state of the input (info, warn, error, success), if any. */
-export let state: InputState | undefined = 'none';
+export let state: InputState | undefined = InputStates.NONE;
 
 /** The HTML input element. */
 export let input: HTMLInputElement | undefined = undefined;
@@ -44,30 +37,22 @@ export let input: HTMLInputElement | undefined = undefined;
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
 
-$: isInfo = state === 'info';
-$: isWarn = state === 'warn';
-$: isError = state === 'error';
+$: isInfo = state === InputStates.INFO;
+$: isWarn = state === InputStates.WARN;
+$: isError = state === InputStates.ERROR;
 $: isInputReadOnly = disabled || readonly;
 $: handleDisabled = preventHandler(isInputReadOnly);
 $: handleDisabledKeydown = preventKeyboardHandler(isInputReadOnly);
 
-let icon: IconName | null;
-$: icon = (() => {
-  switch (state) {
-    case 'info': {
-      return 'information';
-    }
-    case 'warn': {
-      return 'alert';
-    }
-    case 'error': {
-      return 'alert-circle';
-    }
-    default: {
-      return null;
-    }
-  }
-})();
+$: icon = state
+  ? (
+      {
+        [InputStates.INFO]: 'information',
+        [InputStates.WARN]: 'alert',
+        [InputStates.ERROR]: 'alert-circle',
+      } as Record<InputState, IconName>
+    )[state]
+  : undefined;
 
 $: defaultClasses =
   !disabled &&
@@ -109,6 +94,7 @@ $: errorClasses =
     on:change|capture={handleDisabled}
     on:keydown
     on:keydown|capture={handleDisabledKeydown}
+    on:focus
     on:blur
   />
 
diff --git a/packages/core/src/lib/input/text-input.svelte b/packages/core/src/lib/input/text-input.svelte
index 240f4284..48860d3b 100644
--- a/packages/core/src/lib/input/text-input.svelte
+++ b/packages/core/src/lib/input/text-input.svelte
@@ -1,6 +1,6 @@
 <!--
 @component
-  
+
 For text-based user inputs.
 
 ```svelte
@@ -42,5 +42,6 @@ export { extraClasses as cx };
   bind:input
   on:input
   on:keydown
+  on:focus
   on:blur
 />
diff --git a/packages/core/src/lib/radio.svelte b/packages/core/src/lib/radio.svelte
index 449fc31d..24e5a486 100644
--- a/packages/core/src/lib/radio.svelte
+++ b/packages/core/src/lib/radio.svelte
@@ -15,10 +15,9 @@ For users to choose only one of a predefined set of mutually exclusive options.
 
 <script lang="ts">
 import cx from 'classnames';
-import Label from './label.svelte';
-import Icon from './icon/icon.svelte';
-import { preventHandler, preventKeyboardHandler } from './prevent-handler';
-import type { IconName } from './icon/icons';
+import Label from '$lib/label.svelte';
+import { Icon, type IconName } from '$lib/icon';
+import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
 
 /** The set of options that is available in the radio button. */
 export let options: string[];
diff --git a/packages/core/src/lib/select/__tests__/multiselect.spec.ts b/packages/core/src/lib/select/__tests__/multiselect.spec.ts
index 33c432e9..fd48d5a7 100644
--- a/packages/core/src/lib/select/__tests__/multiselect.spec.ts
+++ b/packages/core/src/lib/select/__tests__/multiselect.spec.ts
@@ -49,7 +49,7 @@ describe('Multiselect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-warning-bright group-focus:outline-warning-bright group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-warning-bright focus:outline-warning-bright focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });
 
@@ -62,7 +62,7 @@ describe('Multiselect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-danger-dark group-focus:outline-danger-dark group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-danger-dark focus:outline-danger-dark focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });
 
diff --git a/packages/core/src/lib/select/__tests__/search.spec.ts b/packages/core/src/lib/select/__tests__/search.spec.ts
index 6458892b..3a13038b 100644
--- a/packages/core/src/lib/select/__tests__/search.spec.ts
+++ b/packages/core/src/lib/select/__tests__/search.spec.ts
@@ -1,15 +1,7 @@
 import { describe, expect, it } from 'vitest';
-import {
-  getSearchHighlight,
-  getSearchMatch,
-  getSearchMatches,
-  getSearchResults,
-  getWordIndex,
-  prioritizeMatches,
-} from '../search';
-import { escapeRegExp } from 'lodash-es';
+import { getSearchResults } from '../search';
 
-describe('search', () => {
+describe('getSearchResults', () => {
   const options = [
     'First Option',
     'Option 2',
@@ -18,132 +10,65 @@ describe('search', () => {
     'With A Whole Lot Of Parts',
   ];
 
-  describe('getWordIndex', () => {
-    it('should return the index of the word containing the character at the passed index', () => {
-      const option = 'With A Whole Lot Of Parts';
-      const index = option.indexOf('c');
-      expect(getWordIndex(option, index)).toBe(5);
-    });
+  it('returns an array of search results sorted by priority', () => {
+    const matches = getSearchResults(options, 's');
+
+    expect(matches).toEqual([
+      {
+        option: 'Something Else',
+        priority: 0,
+        highlight: ['', 'S', 'omething Else'],
+      },
+      {
+        option: 'First Option',
+        priority: 1,
+        highlight: ['Fir', 's', 't Option'],
+      },
+      {
+        option: 'With A Whole Lot Of Parts',
+        priority: 6,
+        highlight: ['With A Whole Lot Of Part', 's', ''],
+      },
+      { option: 'Option 2', priority: -1 },
+      { option: 'C.) Option', priority: -1 },
+    ]);
   });
 
-  describe('getSearchHighlight', () => {
-    const option = 'Test Option';
+  it('returns an array of search results sorted by priority without any non-matches', () => {
+    const matches = getSearchResults(options, 's', 'reduce');
 
-    it('should return a highlighting breakdown of the passed option with a term matching the start of a word', () => {
-      const search = 'Opt';
-      const match = new RegExp(escapeRegExp(search), 'giu').exec(option);
-      const highlight = getSearchHighlight(option, search, match!);
-
-      expect(highlight[0]).toBe('Test ');
-      expect(highlight[1]).toBe(search);
-      expect(highlight[2]).toBe('ion');
-    });
-
-    it('should return a highlighting breakdown of the passed option with a term matching anywhere', () => {
-      const search = 'pt';
-      const match = new RegExp(escapeRegExp(search), 'giu').exec(option);
-      const highlight = getSearchHighlight(option, search, match!);
-
-      expect(highlight[0]).toBe('Test O');
-      expect(highlight[1]).toBe(search);
-      expect(highlight[2]).toBe('ion');
-    });
+    expect(matches).toEqual([
+      expect.objectContaining({ option: 'Something Else' }),
+      expect.objectContaining({ option: 'First Option' }),
+      expect.objectContaining({ option: 'With A Whole Lot Of Parts' }),
+    ]);
   });
 
-  describe('getSearchMatch', () => {
-    const option = 'Test Option';
-
-    it('should return a priority 0 match (start of word)', () => {
-      const search = 'Opt';
-      const match = getSearchMatch(option, search);
-
-      expect(match.priority).toBe(0);
-    });
-
-    it('should return a priority 1 match (in first word)', () => {
-      const search = 'est';
-      const match = getSearchMatch(option, search);
-
-      expect(match.priority).toBe(1);
-    });
-
-    it('should return a priority 2 match (in second word)', () => {
-      const search = 'pt';
-      const match = getSearchMatch(option, search);
-
-      expect(match.priority).toBe(2);
-    });
-
-    it('should return a priority -1 match (no match)', () => {
-      const search = 'rf';
-      const match = getSearchMatch(option, search);
+  it('returns an array of search results with highlights but no sorting', () => {
+    const matches = getSearchResults(options, 's', 'off');
 
-      expect(match.priority).toBe(-1);
-    });
+    expect(matches).toEqual([
+      expect.objectContaining({ option: 'First Option' }),
+      expect.objectContaining({ option: 'Option 2' }),
+      expect.objectContaining({ option: 'C.) Option' }),
+      expect.objectContaining({ option: 'Something Else' }),
+      expect.objectContaining({ option: 'With A Whole Lot Of Parts' }),
+    ]);
   });
 
-  describe('prioritizeMatches', () => {
-    it('should return a prioritized map of matches', () => {
-      const matches = prioritizeMatches(options, 's');
+  it('matches and highlights special character at the start of an option', () => {
+    const matches = getSearchResults(options, 'C.)', 'reduce');
 
-      expect(matches['-1'].length).toBe(2);
-      expect(matches['0'].length).toBe(1);
-      expect(matches['1']?.length).toBe(1);
-      expect(matches['6']?.length).toBe(1);
-    });
+    expect(matches).toEqual([
+      { option: 'C.) Option', priority: 0, highlight: ['', 'C.)', ' Option'] },
+    ]);
   });
 
-  describe('getSearchMatches', () => {
-    it('should return an array of search matches sorted by their priority', () => {
-      const matches = getSearchMatches(options, 's');
-
-      expect(matches[0]?.priority).toBe(0);
-      expect(matches[1]?.priority).toBe(1);
-      expect(matches[2]?.priority).toBe(6);
-      expect(matches[3]?.priority).toBe(-1);
-      expect(matches[4]?.priority).toBe(-1);
-    });
-
-    it('should return an array of search matches sorted by their priority without any non-matches', () => {
-      const matches = getSearchMatches(options, 's', 'reduce');
-
-      expect(matches[0]?.priority).toBe(0);
-      expect(matches[1]?.priority).toBe(1);
-      expect(matches[2]?.priority).toBe(6);
-      expect(matches[3]).toBe(undefined);
-      expect(matches[4]).toBe(undefined);
-    });
-  });
-
-  describe('getSearchResults', () => {
-    it('should return an array of search results sorted by priority', () => {
-      const matches = getSearchResults(options, 's');
-
-      expect(matches[0]?.option).toBe('Something Else');
-      expect(matches[1]?.option).toBe('First Option');
-      expect(matches[2]?.option).toBe('With A Whole Lot Of Parts');
-      expect(matches[3]?.option).toBe('Option 2');
-      expect(matches[4]?.option).toBe('C.) Option');
-    });
-
-    it('should return an array of search results sorted by priority without any non-matches', () => {
-      const matches = getSearchResults(options, 's', 'reduce');
-
-      expect(matches[0]?.option).toBe('Something Else');
-      expect(matches[1]?.option).toBe('First Option');
-      expect(matches[2]?.option).toBe('With A Whole Lot Of Parts');
-      expect(matches[3]).toBe(undefined);
-      expect(matches[4]).toBe(undefined);
-    });
-
-    it('should return an array of search results with highlights but no sorting', () => {
-      const matches = getSearchResults(options, 's', 'off');
+  it('matches and highlights special character in the middle of an option', () => {
+    const matches = getSearchResults(options, '.)', 'reduce');
 
-      expect(matches[0]?.option).toBe(options[0]);
-      expect(matches[1]?.option).toBe(options[1]);
-      expect(matches[2]?.option).toBe(options[2]);
-      expect(matches[3]?.option).toBe(options[3]);
-      expect(matches[4]?.option).toBe(options[4]);
-    });
+    expect(matches).toEqual([
+      { option: 'C.) Option', priority: 1, highlight: ['C', '.)', ' Option'] },
+    ]);
   });
 });
diff --git a/packages/core/src/lib/select/__tests__/searchable-select.spec.ts b/packages/core/src/lib/select/__tests__/searchable-select.spec.ts
index 59b4d0f9..b6b4c93c 100644
--- a/packages/core/src/lib/select/__tests__/searchable-select.spec.ts
+++ b/packages/core/src/lib/select/__tests__/searchable-select.spec.ts
@@ -49,7 +49,7 @@ describe('SearchableSelect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-warning-bright group-focus:outline-warning-bright group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-warning-bright focus:outline-warning-bright focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });
 
@@ -62,7 +62,7 @@ describe('SearchableSelect', () => {
     const select = screen.getByPlaceholderText('Select an option');
 
     expect(select).toHaveClass(
-      'border-danger-dark group-focus:outline-danger-dark group-focus:outline-[1.5px] group-focus:-outline-offset-1'
+      'border-danger-dark focus:outline-danger-dark focus:outline-[1.5px] focus:-outline-offset-1'
     );
   });
 
diff --git a/packages/core/src/lib/select/__tests__/select.spec.svelte b/packages/core/src/lib/select/__tests__/select.spec.svelte
index 9c0aaba5..7e2493fc 100644
--- a/packages/core/src/lib/select/__tests__/select.spec.svelte
+++ b/packages/core/src/lib/select/__tests__/select.spec.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-import { Select, type SelectState } from '$lib';
+import { Select, InputStates, type InputState } from '$lib';
 
 export let value: string | undefined = undefined;
 export let disabled = false;
-export let state: SelectState = 'none';
+export let state: InputState = InputStates.NONE;
 </script>
 
 <Select
diff --git a/packages/core/src/lib/select/index.ts b/packages/core/src/lib/select/index.ts
new file mode 100644
index 00000000..83c03a00
--- /dev/null
+++ b/packages/core/src/lib/select/index.ts
@@ -0,0 +1,6 @@
+export { SortOptions, type SortOption } from './search';
+export { default as SearchableSelect } from './searchable-select.svelte';
+export { default as Multiselect } from './multiselect.svelte';
+export { default as Select } from './select.svelte';
+export { default as SelectInput } from './select-input.svelte';
+export { default as SelectMenu } from './select-menu.svelte';
diff --git a/packages/core/src/lib/select/multiselect.svelte b/packages/core/src/lib/select/multiselect.svelte
index 10426080..1d771aa8 100644
--- a/packages/core/src/lib/select/multiselect.svelte
+++ b/packages/core/src/lib/select/multiselect.svelte
@@ -1,11 +1,11 @@
 <!--
 @component
-  
+
 For selecting multiple options from a list.
 
 ```svelte
-<Multiselect 
-  options={["Option 1", "Option 2", "Option 3"]} 
+<Multiselect
+  options={["Option 1", "Option 2", "Option 3"]}
   on:input={onSelect}
 />
 ```
@@ -16,17 +16,17 @@ For selecting multiple options from a list.
 import cx from 'classnames';
 
 import { clickOutside } from '$lib/click-outside';
-import type { IconName } from '$lib/icon/icons';
+import type { IconName } from '$lib/icon';
+import { InputStates, type InputState } from '$lib/input';
 import Pill from '$lib/pill.svelte';
 import { uniqueId } from '$lib/unique-id';
 
 import { selectControls } from './controls';
 import { createSearchableSelectDispatcher } from './dispatcher';
-import { getSearchResults, type SortOptions } from './search';
+import { SortOptions, getSearchResults, type SortOption } from './search';
 import SelectMenuButton from './select-menu-button.svelte';
 import SelectInput from './select-input.svelte';
 import SelectMenu from './select-menu.svelte';
-import type { SelectState } from './select.svelte';
 
 /** The options the user should be allowed to search and select from. */
 export let options: string[] = [];
@@ -41,7 +41,7 @@ export let value: string | undefined = undefined;
 export let disabled = false;
 
 /** The state of the select (info, warn, error, success), if any. */
-export let state: SelectState = 'none';
+export let state: InputState = InputStates.NONE;
 
 /**
  * How to handle sorting for the select:
@@ -51,7 +51,7 @@ export let state: SelectState = 'none';
  * no match.
  * - `off` will apply no sorting or filtering.
  */
-export let sort: SortOptions = 'default';
+export let sort: SortOption = SortOptions.DEFAULT;
 
 /** Whether or not to show selected values below the input at pills. */
 export let showPills = true;
diff --git a/packages/core/src/lib/select/search.ts b/packages/core/src/lib/select/search.ts
index e2651074..9348f2db 100644
--- a/packages/core/src/lib/select/search.ts
+++ b/packages/core/src/lib/select/search.ts
@@ -1,6 +1,16 @@
 import { escapeRegExp } from 'lodash-es';
 
-export type SortOptions = 'default' | 'reduce' | 'off';
+/** How to handle sorting select options. */
+export const SortOptions = {
+  /** Sort matches at the beginning, prioritizing the beginnings of words. */
+  DEFAULT: 'default',
+  /** Sort matches by priority and remove any non-matches. */
+  REDUCE: 'reduce',
+  /** Neither sort nor remove options. */
+  OFF: 'off',
+} as const;
+
+export type SortOption = (typeof SortOptions)[keyof typeof SortOptions];
 
 /**
  * A breakdown of how a search result should be highlighted. `before` is the
@@ -14,40 +24,15 @@ export type SearchHighlight = [
   after: string,
 ];
 
-/**
- * A search result with highlighting for potential matches
- *
- * @export
- * @interface SearchResult
- */
+/** A search result with highlighting for potential matches */
 export interface SearchResult {
-  /**
-   * How the option should be highlighted.
-   *
-   * @type {(SearchHighlight | undefined)}
-   * @memberof SearchResult
-   */
+  /** How the option should be highlighted. */
   highlight: SearchHighlight | undefined;
 
-  /**
-   * The select option that had a potential match.
-   *
-   * @type {string}
-   * @memberof SearchResult
-   */
+  /** The select option that had a potential match. */
   option: string;
-}
 
-/**
- * A search result with a priority for sorting.
- *
- * @export
- * @interface SearchMatch
- */
-export interface SearchMatch extends SearchResult {
-  /**
-   * The sorting priority for the option.
-   */
+  /** The sorting priority for the option. */
   priority: number;
 }
 
@@ -55,17 +40,17 @@ export interface SearchMatch extends SearchResult {
  * A map of search results prioritized by where the match occurred in the
  * option.
  */
-export interface SearchMatches {
-  [priority: number]: SearchMatch[] | undefined;
-  0: SearchMatch[];
-  '-1': SearchMatch[];
+export interface PrioritizedSearchResults {
+  [priority: number]: SearchResult[] | undefined;
+  0: SearchResult[];
+  '-1': SearchResult[];
 }
 
 /**
  * Returns the index of the word where the character with the passed index
  * occurs.
  */
-export const getWordIndex = (option: string, index: number) => {
+const getWordIndex = (option: string, index: number) => {
   const preceding = option.slice(0, index);
   return (preceding.match(/\s/gu) ?? []).length;
 };
@@ -74,7 +59,7 @@ export const getWordIndex = (option: string, index: number) => {
  * Returns the passed option broken down into segments to apply highlighting
  * to the portion of the option that matches the passed search term.
  */
-export const getSearchHighlight = (
+const getSearchHighlight = (
   option: string,
   searchTerm: string,
   { index }: RegExpExecArray
@@ -94,10 +79,10 @@ export const getSearchHighlight = (
  * - The index of the word in the option that matched
  * - `-1` for non-matches
  */
-export const getSearchMatch = (
+export const getSearchResult = (
   option: string,
   searchTerm: string
-): SearchMatch => {
+): SearchResult => {
   // Match on the initial character of any word in the option
   const initialCharacterMatch = new RegExp(
     `(^${searchTerm}|(?<=\\s)${searchTerm})`,
@@ -139,16 +124,18 @@ export const getSearchMatch = (
  * Checks each passed option if it matches with the passed search term, and
  * returns a prioritized map of the results.
  */
-export const prioritizeMatches = (options: string[], searchTerm: string) => {
-  const results: SearchMatches = {
+const prioritizeMatches = (options: string[], searchTerm: string) => {
+  const results: PrioritizedSearchResults = {
     '0': [],
     '-1': [],
   };
 
   for (const option of options) {
-    const match = getSearchMatch(option, searchTerm);
-    results[match.priority] ||= [];
-    results[match.priority]!.push(match);
+    const match = getSearchResult(option, searchTerm);
+    const priorityResults = results[match.priority] ?? [];
+
+    priorityResults.push(match);
+    results[match.priority] = priorityResults;
   }
 
   return results;
@@ -160,19 +147,19 @@ export const prioritizeMatches = (options: string[], searchTerm: string) => {
  * for the match. If the passed sort option is `reduce`, options with no match
  * (-1 priority) will not be included in the results.
  */
-export const getSearchMatches = (
+const getSearchMatches = (
   options: string[],
   searchTerm: string,
-  sort: SortOptions = 'default'
+  sort: SortOption = SortOptions.DEFAULT
 ) => {
   // Just highlight search matches and return an unsorted array
   if (sort === 'off') {
-    return options.map((option) => getSearchMatch(option, searchTerm));
+    return options.map((option) => getSearchResult(option, searchTerm));
   }
 
   // Prioritize and sort results by how they matched
   const prioritized = prioritizeMatches(options, searchTerm);
-  const results: SearchMatch[] = [];
+  const results: SearchResult[] = [];
   const reduce = sort === 'reduce';
 
   for (const key of Object.keys(prioritized)) {
@@ -200,7 +187,7 @@ export const getSearchMatches = (
 export const getSearchResults = (
   options: string[],
   searchTerm?: string,
-  sort: SortOptions = 'default'
+  sort: SortOption = SortOptions.DEFAULT
 ): SearchResult[] => {
   if (!searchTerm) {
     return options.map((option) => ({
@@ -210,7 +197,7 @@ export const getSearchResults = (
     }));
   }
 
-  const matches: SearchMatch[] = [];
+  const matches: SearchResult[] = [];
   const noMatches = [];
   const escaped = escapeRegExp(searchTerm);
   const results = getSearchMatches(options, escaped, sort);
diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
index 802fde7b..685e72b9 100644
--- a/packages/core/src/lib/select/searchable-select.svelte
+++ b/packages/core/src/lib/select/searchable-select.svelte
@@ -1,11 +1,11 @@
 <!--
 @component
-  
+
 For selecting from a list of options.
 
 ```svelte
-<SearchableSelect 
-  options={["Option 1", "Option 2", "Option 3"]} 
+<SearchableSelect
+  options={["Option 1", "Option 2", "Option 3"]}
   on:input={onSelect}
 />
 ```
@@ -16,15 +16,15 @@ For selecting from a list of options.
 import cx from 'classnames';
 import { uniqueId } from '$lib/unique-id';
 import { clickOutside } from '$lib/click-outside';
-import type { IconName } from '$lib/icon/icons';
+import type { IconName } from '$lib/icon';
+import { InputStates, type InputState } from '$lib/input';
 
 import { selectControls } from './controls';
 import { createSearchableSelectDispatcher } from './dispatcher';
-import { type SortOptions, getSearchResults } from './search';
+import { SortOptions, getSearchResults, type SortOption } from './search';
 import SelectInput from './select-input.svelte';
 import SelectMenuButton from './select-menu-button.svelte';
 import SelectMenu from './select-menu.svelte';
-import type { SelectState } from './select.svelte';
 
 /** The options the user should be allowed to search and select from. */
 export let options: string[] = [];
@@ -36,7 +36,7 @@ export let value: string | undefined = undefined;
 export let disabled = false;
 
 /** The state of the select (info, warn, error, success), if any. */
-export let state: SelectState = 'none';
+export let state: InputState = InputStates.NONE;
 
 /**
  * How to handle sorting for the select:
@@ -46,7 +46,7 @@ export let state: SelectState = 'none';
  * no match.
  * - `off` will apply no sorting or filtering.
  */
-export let sort: SortOptions = 'default';
+export let sort: SortOption = SortOptions.DEFAULT;
 
 /**
  * An optional call-to-action button to render at the bottom of the select menu
diff --git a/packages/core/src/lib/select/select-input.svelte b/packages/core/src/lib/select/select-input.svelte
index ebbe9a47..bc7e490f 100644
--- a/packages/core/src/lib/select/select-input.svelte
+++ b/packages/core/src/lib/select/select-input.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
 import cx from 'classnames';
-import type { SelectState } from './select.svelte';
-import Icon from '$lib/icon/icon.svelte';
+import { Icon } from '$lib/icon';
+import { InputStates, type InputState } from '$lib/input';
 
 export let value: string | undefined;
 export let menuId: string;
 export let isOpen: boolean;
-export let disabled: boolean;
-export let state: SelectState;
+export let isFocused: boolean | undefined = undefined;
+export let disabled = false;
+export let state: InputState = InputStates.NONE;
+export let inputElement: HTMLInputElement | undefined = undefined;
 
 /** Additional CSS classes to pass to the input. */
 let extraClasses: cx.Argument = '';
@@ -20,31 +22,50 @@ $: defaultClasses =
   !disabled &&
   !isError &&
   !isWarn &&
-  'border-light group-hover:border-gray-6 group-focus:border-gray-9 bg-white';
+  cx('border-light bg-white group-hover/select-input:border-gray-6', {
+    'focus:border-gray-9': isFocused !== false,
+  });
 
 $: disabledClasses =
   disabled &&
-  'border-disabled-light group-focus:border-disabled-dark bg-disabled-light text-disabled-dark cursor-not-allowed';
+  cx(
+    'cursor-not-allowed border-disabled-light bg-disabled-light text-disabled-dark',
+    { 'focus:border-disabled-dark': isFocused !== false }
+  );
 
 $: warnClasses =
   isWarn &&
   !disabled &&
-  'border-warning-bright group-hover:outline-warning-bright group-focus:outline-warning-bright group-hover:outline-[1.5px] group-hover:-outline-offset-1 group-focus:outline-[1.5px] group-focus:-outline-offset-1';
+  cx(
+    'border-warning-bright group-hover/select-input:outline-[1.5px] group-hover/select-input:-outline-offset-1 group-hover/select-input:outline-warning-bright',
+    {
+      'focus:outline-[1.5px] focus:-outline-offset-1 focus:outline-warning-bright':
+        isFocused !== false,
+    }
+  );
 
 $: errorClasses =
   isError &&
   !disabled &&
-  'border-danger-dark group-hover:outline-danger-dark group-hover:outline-[1.5px] group-hover:-outline-offset-1 group-focus:outline-danger-dark group-focus:outline-[1.5px] group-focus:-outline-offset-1';
+  cx(
+    'border-danger-dark group-hover/select-input:outline-[1.5px] group-hover/select-input:-outline-offset-1 group-hover/select-input:outline-danger-dark',
+    {
+      'focus:outline-[1.5px] focus:-outline-offset-1 focus:outline-danger-dark':
+        isFocused !== false,
+    }
+  );
 </script>
 
-<div class="group flex w-full">
+<div class="group/select-input relative flex w-full">
   <input
     bind:value
+    bind:this={inputElement}
     role="combobox"
+    readonly={disabled ? true : undefined}
     aria-controls={menuId}
     aria-expanded={isOpen}
-    readonly={disabled ? true : undefined}
     aria-disabled={disabled ? true : undefined}
+    aria-invalid={isError}
     type="text"
     class={cx(
       'h-7.5 w-full grow appearance-none border py-1.5 pl-2 pr-1 text-xs leading-tight outline-none',
@@ -58,18 +79,24 @@ $: errorClasses =
     on:input
     on:keydown
     on:focus
+    on:blur
     on:mousemove
   />
   <button
-    class="absolute right-2 top-1.5"
+    type="button"
+    class="absolute right-2 top-1/2 -translate-y-1/2 transform"
     tabindex="-1"
     aria-label="Toggle menu"
+    aria-controls={menuId}
+    aria-expanded={isOpen}
     on:click
     on:keydown
+    on:mousedown|preventDefault
+    on:pointerdown|preventDefault
   >
     <Icon
       name="chevron-down"
-      cx={['cursor-pointer text-gray-6 transition', { 'rotate-180': isOpen }]}
+      cx={['text-gray-6 transition', { 'rotate-180': isOpen }]}
     />
   </button>
 </div>
diff --git a/packages/core/src/lib/select/select.svelte b/packages/core/src/lib/select/select.svelte
index dac01823..442629d7 100644
--- a/packages/core/src/lib/select/select.svelte
+++ b/packages/core/src/lib/select/select.svelte
@@ -1,6 +1,6 @@
 <!--
 @component
-  
+
 For selecting from a list of options.
 
 ```svelte
@@ -13,16 +13,10 @@ For selecting from a list of options.
 -->
 <svelte:options immutable />
 
-<script
-  lang="ts"
-  context="module"
->
-export type SelectState = 'error' | 'warn' | 'none';
-</script>
-
 <script lang="ts">
 import cx from 'classnames';
-import { Icon } from '$lib';
+import { Icon } from '$lib/icon';
+import { InputStates, type InputState } from '$lib/input';
 import { preventHandler, preventKeyboardHandler } from '$lib/prevent-handler';
 
 /** The selected option value, if any */
@@ -32,7 +26,7 @@ export let value: string | undefined = undefined;
 export let disabled = false;
 
 /** The state of the select (info, warn, error, success), if any. */
-export let state: SelectState = 'none';
+export let state: InputState = InputStates.NONE;
 
 /** Additional CSS classes to pass to the select container. */
 let extraClasses: cx.Argument = '';
@@ -41,8 +35,8 @@ export { extraClasses as cx };
 $: handleDisabled = preventHandler(disabled);
 $: handleDisabledKeydown = preventKeyboardHandler(disabled);
 
-$: isWarn = state === 'warn';
-$: isError = state === 'error';
+$: isWarn = state === InputStates.WARN;
+$: isError = state === InputStates.ERROR;
 
 $: defaultClasses =
   !disabled &&