('input');
+ input!.value = 'asset';
+ input!.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+ input!.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+ await waitForUpdatesAsync();
+
+ expect(inputSpy).toHaveBeenCalledTimes(1);
+ expect(changeSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('defaults to outline appearance', async () => {
+ ({ element, connect, disconnect } = await setup());
+ await connect();
+
+ expect(element.appearance).toBe(SearchInputAppearance.outline);
+ });
+
+ it('supports super-ghost appearance', async () => {
+ ({ element, connect, disconnect } = await setup());
+ element.appearance = SearchInputAppearance.superGhost;
+ await connect();
+ await waitForUpdatesAsync();
+
+ expect(element.appearance).toBe(SearchInputAppearance.superGhost);
+ });
+});
\ No newline at end of file
diff --git a/packages/ok-components/src/search-input/types.ts b/packages/ok-components/src/search-input/types.ts
new file mode 100644
index 0000000000..af9460037b
--- /dev/null
+++ b/packages/ok-components/src/search-input/types.ts
@@ -0,0 +1,8 @@
+export const SearchInputAppearance = {
+ block: 'block',
+ outline: 'outline',
+ ghost: 'ghost',
+ superGhost: 'super-ghost'
+} as const;
+
+export type SearchInputAppearance = (typeof SearchInputAppearance)[keyof typeof SearchInputAppearance];
\ No newline at end of file
diff --git a/packages/storybook/src/ok/search-input/search-input-matrix.stories.ts b/packages/storybook/src/ok/search-input/search-input-matrix.stories.ts
new file mode 100644
index 0000000000..1c4c92481e
--- /dev/null
+++ b/packages/storybook/src/ok/search-input/search-input-matrix.stories.ts
@@ -0,0 +1,97 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+import { html, ViewTemplate } from '@ni/fast-element';
+import { waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';
+import { searchInputTag } from '@ni/ok-components/dist/esm/search-input';
+import { SearchInputAppearance } from '@ni/ok-components/dist/esm/search-input/types';
+import {
+ createMatrixInteractionsFromStates,
+ createMatrixThemeStory,
+ sharedMatrixParameters
+} from '../../utilities/matrix';
+
+const metadata: Meta = {
+ title: 'Tests Ok/Search Input',
+ parameters: {
+ ...sharedMatrixParameters()
+ }
+};
+
+export default metadata;
+
+type SearchInputMatrixState = readonly [string, keyof typeof SearchInputAppearance];
+
+const searchInputStates: SearchInputMatrixState[] = [
+ ['block', 'block'],
+ ['outline', 'outline'],
+ ['ghost', 'ghost'],
+ ['super-ghost', 'superGhost']
+];
+
+const searchField = (
+ label: string,
+ appearance: keyof typeof SearchInputAppearance
+): ViewTemplate => html`
+
+
${() => label}
+ <${searchInputTag}
+ appearance="${() => SearchInputAppearance[appearance]}"
+ placeholder="Search..."
+ style="width: 124px; --ok-search-input-height: 32px;"
+ >
+
+ ${searchField('Search_Block_Light_32', 'block')}
+ ${searchField('Search_Outline_Light_32', 'outline')}
+ ${searchField('Search_Ghost_Light_32', 'ghost')}
+ ${searchField('Search_SuperGhost_Light_32', 'superGhost')}
+
+`);
+
+export const interactionsThemeMatrix: StoryFn = createMatrixThemeStory(
+ createMatrixInteractionsFromStates(
+ (label: string, appearance: keyof typeof SearchInputAppearance): ViewTemplate => html`
+
+
${() => label}
+ <${searchInputTag}
+ appearance="${() => SearchInputAppearance[appearance]}"
+ placeholder="Search..."
+ style="width: 124px; --ok-search-input-height: 32px;"
+ >
+
+ ${searchField('Typed_Block_Light_32', 'block')}
+ ${searchField('Typed_Outline_Light_32', 'outline')}
+ ${searchField('Typed_Ghost_Light_32', 'ghost')}
+ ${searchField('Typed_SuperGhost_Light_32', 'superGhost')}
+
+`);
+
+typedThemeMatrix.play = async ({ step }): Promise => {
+ const searchInputs = Array.from(document.querySelectorAll(searchInputTag));
+
+ await step('Type search text into each input', async () => {
+ await Promise.all(searchInputs.map(async searchInput => {
+ const input = searchInput.shadowRoot?.querySelector('input');
+
+ if (input) {
+ input.value = 'Search';
+ input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+ await waitForUpdatesAsync();
+ }
+ }));
+ });
+};
\ No newline at end of file
diff --git a/packages/storybook/src/ok/search-input/search-input.mdx b/packages/storybook/src/ok/search-input/search-input.mdx
new file mode 100644
index 0000000000..bf62e0c892
--- /dev/null
+++ b/packages/storybook/src/ok/search-input/search-input.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
+import * as searchInputStories from './search-input.stories';
+
+
+
+
+A search field with a leading magnifying glass icon and a clear affordance when a value is present.
+
+It supports `block`, `outline`, `ghost`, and `super-ghost` appearances. Height can be adjusted by client CSS via `--ok-search-input-height` rather than separate built-in size variants.
+
+
+
+## API
+
+
\ No newline at end of file
diff --git a/packages/storybook/src/ok/search-input/search-input.stories.ts b/packages/storybook/src/ok/search-input/search-input.stories.ts
new file mode 100644
index 0000000000..3a718c0ed6
--- /dev/null
+++ b/packages/storybook/src/ok/search-input/search-input.stories.ts
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+import { html } from '@ni/fast-element';
+import { searchInputTag } from '@ni/ok-components/dist/esm/search-input';
+import { SearchInputAppearance } from '@ni/ok-components/dist/esm/search-input/types';
+import {
+ appearanceDescription,
+ apiCategory,
+ createUserSelectedThemeStory,
+ placeholderDescription
+} from '../../utilities/storybook';
+
+interface SearchInputArgs {
+ appearance: keyof typeof SearchInputAppearance;
+ placeholder: string;
+ initialSearchValue: string;
+ input?: (e: Event) => void;
+ change?: (e: Event) => void;
+}
+
+const metadata: Meta = {
+ title: 'Ok/Search Input',
+ render: createUserSelectedThemeStory(html`
+
+ <${searchInputTag}
+ appearance="${x => SearchInputAppearance[x.appearance]}"
+ placeholder="${x => x.placeholder}"
+ value="${x => x.initialSearchValue}"
+ >
+
+ `),
+ argTypes: {
+ appearance: {
+ description: appearanceDescription({ componentName: 'search input' }),
+ options: Object.keys(SearchInputAppearance),
+ control: { type: 'radio' },
+ table: { category: apiCategory.attributes }
+ },
+ placeholder: {
+ description: placeholderDescription({ componentName: 'search input' }),
+ table: { category: apiCategory.attributes }
+ },
+ initialSearchValue: {
+ description: 'Initial text rendered in the search input.',
+ table: { category: apiCategory.nonAttributeProperties }
+ },
+ input: {
+ table: { category: apiCategory.events },
+ control: false
+ },
+ change: {
+ table: { category: apiCategory.events },
+ control: false
+ }
+ },
+ args: {
+ appearance: 'outline',
+ placeholder: 'Search',
+ initialSearchValue: ''
+ }
+};
+
+export default metadata;
+
+export const defaultStory: StoryObj = {
+ name: 'default'
+};
\ No newline at end of file