diff --git a/examples/astro/src/pages/web-components.astro b/examples/astro/src/pages/web-components.astro
index b38e81cfcb..939751d696 100644
--- a/examples/astro/src/pages/web-components.astro
+++ b/examples/astro/src/pages/web-components.astro
@@ -124,11 +124,71 @@ import Layout from '../layouts/Layout.astro';
       <hr class="ds-u-margin-y--4">
 
       <ds-pagination id="pagination" total-pages="10" class="ds-u-margin-y--4"></ds-pagination>
+
+      <h2 class="ds-text-heading--2xl">Controlled text field example</h2>
+      <ds-text-field value="" id="the-text-field" label="Text field example"></ds-text-field>
+
+      <hr class="ds-u-margin-y--4">
+
+      <h2 class="ds-text-heading--2xl">Autocomplete example</h2>
+      <ds-autocomplete
+        id="the-autocomplete"
+        items='[{"id":"71","name":"Acetaminophen"},{"id":"72","name":"Advil"},{"id":"73","name":"Benadryl"},{"id":"74","name":"Claritin"},{"id":"75","name":"Detrol"},{"id":"76","name":"Excedrin"}]'
+        label="Enter and select a drug to see its cost under each plan."
+        hint="Type a letter to see results, then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss."
+        clear-search-button="true"
+        class-name="ds-u-padding-bottom--7"
+      >
+      </ds-autocomplete>
     </div>
   </main>
 </Layout>
 
 <script>
+  document.getElementById('the-text-field')?.addEventListener('ds-change', ((
+    e: CustomEvent<{ target: { value: string } }>
+  ) => {
+    const newValue = e.detail.target.value;
+    document.getElementById('the-text-field')?.setAttribute('value', newValue);
+  }) as EventListener);
+
+  let items: { id: string; name: string }[] | null = null;
+  window.addEventListener("load", () => {
+    const initialItems = document?.getElementById('the-autocomplete')?.getAttribute('items');
+    if (typeof initialItems === 'string') {
+      items = JSON.parse(initialItems)
+    }
+  })
+
+  const autocompleteElement = document.getElementById('the-autocomplete');
+  autocompleteElement?.addEventListener('ds-input-value-change', ((
+    e: CustomEvent<{ value: string }>
+  ) => {
+    const input = e?.detail?.value ?? '';
+
+    // reset items to original value
+    if (input.length === 0) {
+      autocompleteElement.setAttribute('items', JSON.stringify(items));
+      return;
+    }
+
+    if (input.length > 0 && items) {
+      const filteredItems = items.filter(
+        (item) => !item.name || item.name.toLowerCase().includes(input.toLowerCase())
+      );
+      autocompleteElement.setAttribute('items', JSON.stringify(filteredItems));
+    }
+  }) as EventListener);
+
+
+  document
+  .getElementById('the-autocomplete')
+  ?.addEventListener('ds-change', function (
+    e: CustomEvent<{ selectedItem: { id: string; name: string } }>
+  ) {
+    console.log(`Autocomplete selection: ${JSON.stringify(e.detail.selectedItem)}`);
+  } as EventListener);
+
   document.getElementById('the-button').addEventListener('click', function () {
     const alert = document.getElementById('alert');
     alert.setAttribute('variation', 'error');
@@ -162,10 +222,12 @@ import Layout from '../layouts/Layout.astro';
 <script src="@cmsgov/design-system/dist/web-components/bundle/base.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-accordion.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-alert.js"></script>
+<script src="@cmsgov/design-system/dist/web-components/bundle/ds-autocomplete.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-button.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-choice.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-dropdown.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-month-picker.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-pagination.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-spinner.js"></script>
+<script src="@cmsgov/design-system/dist/web-components/bundle/ds-text-field.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-usa-banner.js"></script>
\ No newline at end of file
diff --git a/packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx
index debf97bc87..0e880ab6a1 100644
--- a/packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/design-system/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -203,6 +203,6 @@ export const NoResults: Story = {
     items: [],
     clearSearchButton: false,
     textFieldLabel: 'This will show a "no results" message.',
-    textFieldHint: "Start typing, but you'll only get a loading message.",
+    textFieldHint: 'Start typing, but you’ll only get a "no results" message.',
   } as any,
 };
diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/__snapshots__/ds-autocomplete.test.tsx.snap b/packages/design-system/src/components/web-components/ds-autocomplete/__snapshots__/ds-autocomplete.test.tsx.snap
new file mode 100644
index 0000000000..4150358db9
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-autocomplete/__snapshots__/ds-autocomplete.test.tsx.snap
@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Autocomplete renders correctly 1`] = `
+<DocumentFragment>
+  <ds-autocomplete
+    aria-clear-label="Clear search to try again"
+    clear-input-text="Clear search"
+    clear-search-button="true"
+    items="[{\\"id\\":\\"kRf6c2fY\\",\\"name\\":\\"Cook County, IL\\"}]"
+    label="autocomplete label"
+    loading-message="Loading..."
+    no-results-message="No results"
+  >
+    <div
+      class="ds-c-autocomplete"
+    >
+      <div
+        class="ds-u-clearfix"
+      >
+        <label
+          class="ds-c-label"
+          for="autocomplete--1"
+          id="autocomplete--1__label"
+        >
+          autocomplete label
+        </label>
+        <p
+          aria-atomic="true"
+          aria-live="assertive"
+          class="ds-c-inline-error"
+          id="autocomplete--1__error"
+        />
+        <input
+          aria-autocomplete="list"
+          aria-controls="autocomplete--1__menu"
+          aria-expanded="false"
+          aria-invalid="false"
+          aria-labelledby="autocomplete--1__label"
+          autocomplete="off"
+          autocorrect="off"
+          class="ds-c-field"
+          id="autocomplete--1"
+          name="autocomplete"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+        />
+      </div>
+      <button
+        aria-label="Clear search to try again"
+        class="ds-c-button ds-c-button--small ds-c-button--ghost ds-u-padding-right--0 ds-c-autocomplete__clear-btn"
+        type="button"
+      >
+        Clear search
+      </button>
+    </div>
+    <template />
+  </ds-autocomplete>
+</DocumentFragment>
+`;
+
+exports[`Autocomplete renders item with custom className 1`] = `
+Array [
+  <li
+    aria-selected="false"
+    class="ds-c-autocomplete__menu-item"
+    data-key="1a"
+    id="autocomplete--13__item--0"
+    role="option"
+  >
+    <span>
+      Normal item
+    </span>
+  </li>,
+  <li
+    aria-selected="false"
+    class="custom-class ds-c-autocomplete__menu-item"
+    data-key="5b"
+    id="autocomplete--13__item--1"
+    role="option"
+  >
+    <span>
+      Special item
+    </span>
+  </li>,
+]
+`;
diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx
new file mode 100644
index 0000000000..365893afba
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx
@@ -0,0 +1,293 @@
+import { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+import WebComponentDocTemplate from '../../../../../../.storybook/docs/WebComponentDocTemplate.mdx';
+import { webComponentDecorator } from '../storybook';
+import './ds-autocomplete';
+import { AutocompleteItem } from '../../Autocomplete';
+import uniqueId from 'lodash/uniqueId';
+import '../ds-text-field';
+
+const meta: Meta = {
+  title: 'Web Components/ds-autocomplete',
+  decorators: [webComponentDecorator],
+  parameters: {
+    docs: {
+      page: WebComponentDocTemplate,
+    },
+  },
+  args: {
+    'clear-input-text': 'Clear search',
+    'clear-search-button': true,
+    'loading-message': 'Loading...',
+    'no-results-message': 'No results',
+    name: 'ds-autocomplete',
+  },
+  argTypes: {
+    'aria-clear-label': {
+      description:
+        "Screen reader-specific label for the Clear search `<button>`. Intended to provide a longer, more descriptive explanation of the button's behavior.",
+      control: 'text',
+    },
+    'aria-complete-label': {
+      description:
+        'Control the `TextField` autocomplete attribute. Defaults to "off" to support accessibility. [Read more.](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)',
+      control: 'text',
+    },
+    autofocus: {
+      description: 'Sets the focus on the select during the first mount',
+      control: 'boolean',
+    },
+    children: { control: false, table: { disable: true } },
+    'class-name': {
+      description:
+        'Additional classes to be added to the root element. Useful for adding utility classes.',
+      control: 'text',
+    },
+    'clear-input-text': {
+      description:
+        'Text rendered on the page if `clearInput` prop is passed. Default is "Clear search".',
+      control: 'text',
+    },
+    'clear-search-button': {
+      description: 'Removes the Clear search button when set to `false`',
+      control: 'boolean',
+    },
+    hint: {
+      description: 'An optional hint for the label',
+      control: 'text',
+    },
+    items: {
+      description:
+        'An array of objects used to populate the suggestion list that appears below the input as users type. Passing an empty array will show a "No results" message. If you do not yet want to show results, this props should be undefined. This parameter needs to be stringified (please see examples for usage and [read more on the autocomplete docs](https://design.cms.gov/storybook/?path=/docs/components-autocomplete--docs):).',
+      control: 'text',
+    },
+    label: {
+      description: 'A label for the input',
+      control: 'text',
+    },
+    loading: {
+      description:
+        'Can be called when the `items` array is being fetched remotely, or will be delayed for more than 1-2 seconds.',
+      control: 'boolean',
+    },
+    'loading-message': {
+      description: 'Message users will see when the `loading` prop is passed to `Autocomplete`.',
+      control: 'text',
+    },
+    'menu-heading': {
+      description:
+        "Adds a heading to the top of the autocomplete list. This can be used to convey to the user that they're required to select an option from the autocomplete list.",
+      control: 'text',
+    },
+    'menu-heading-id': {
+      description: 'A unique `id` to be used on the child `TextField` label tag',
+      control: 'text',
+    },
+    name: {
+      description: "The `input` field's `name` attribute.",
+      control: 'text',
+    },
+    'no-results-message': {
+      description:
+        'Message users will see when the `items` array returns empty and the `loading` prop is passed to `<Autocomplete />`.',
+      control: 'text',
+    },
+    'root-id': {
+      description:
+        "A unique ID for this element. A unique ID will be generated if one isn't provided.",
+      control: 'text',
+    },
+    textFieldHint: {
+      table: { disable: true },
+    },
+    textFieldLabel: {
+      table: { disable: true },
+    },
+    value: {
+      description: 'Input value',
+      control: 'text',
+    },
+  },
+};
+export default meta;
+
+const Template = (args) => {
+  const { items, textFieldLabel, textFieldHint, ...autocompleteArgs } = args;
+  const [input, setInput] = useState('');
+
+  let filteredItems = null;
+  if (input.length > 0 && items) {
+    filteredItems = items.filter(
+      (item) => !item.name || item.name.toLowerCase().includes(input.toLowerCase())
+    );
+  }
+
+  useEffect(() => {
+    const element = document.querySelector('ds-autocomplete');
+    if (element) {
+      const handleOnChange = (event: CustomEvent<{ selectedItem: AutocompleteItem }>) => {
+        setInput(event.detail.selectedItem.name);
+        return action('ds-change')(event);
+      };
+      const handleOnInputValueChange = (event: CustomEvent<{ value: string }>) => {
+        action('ds-input-value-change')(event);
+        setInput(event.detail.value);
+      };
+      element.addEventListener('ds-change', handleOnChange);
+      element.addEventListener('ds-input-value-change', handleOnInputValueChange);
+      return () => {
+        element.removeEventListener('ds-change', handleOnChange);
+        element.removeEventListener('ds-input-value-change', handleOnInputValueChange);
+      };
+    }
+  }, []);
+
+  return (
+    <ds-autocomplete
+      {...autocompleteArgs}
+      items={JSON.stringify(filteredItems)}
+      label={textFieldLabel}
+      hint={textFieldHint}
+      value={input}
+    />
+  );
+};
+
+function makeItem(name: string, children?: React.ReactNode) {
+  return {
+    id: uniqueId(),
+    name,
+    children,
+  };
+}
+
+export const Default = {
+  render: Template,
+  args: {
+    textFieldLabel: 'Enter and select a drug to see its cost under each plan.',
+    textFieldHint:
+      'Type a letter to see results, then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss.',
+    items: [
+      makeItem('Acetaminophen'),
+      makeItem('Advil'),
+      makeItem('Benadryl'),
+      makeItem('Claritin'),
+      makeItem('Detrol'),
+      makeItem('Excedrin'),
+      makeItem('Flonase'),
+      makeItem('Gas-X'),
+      makeItem('Hydrocortisone'),
+      makeItem('Ibuprofen'),
+      makeItem('Insulin glargine'),
+      makeItem('Jublia'),
+      makeItem('Ketoprofen'),
+      makeItem('Lidocaine'),
+      makeItem('Lunestra'),
+      makeItem('Melatonin'),
+      makeItem('Meloxicam'),
+      makeItem('Neosporin'),
+      makeItem('Oxycodone'),
+      makeItem('Prednisone'),
+      makeItem('Prilosec'),
+      makeItem('Quinine'),
+      makeItem('Robitussin'),
+      makeItem('Sudafed'),
+      makeItem('Tamiflu'),
+      makeItem('Unisom'),
+      makeItem('Vicodin'),
+      makeItem('Warfarin'),
+      makeItem('Xanax'),
+      makeItem('Yonsa'),
+      makeItem('Zyrtec'),
+    ],
+  },
+};
+
+export const LabeledList = {
+  render: Template,
+  args: {
+    textFieldLabel: 'Search for and select your county.',
+    textFieldHint:
+      'Type "C" then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss.',
+    'menu-heading': 'Select from the options below:',
+    items: [
+      makeItem('Cook County, IL'),
+      makeItem('Cook County, MD'),
+      makeItem('Cook County, TN'),
+      makeItem('Cook County, AK'),
+      makeItem('Cook County, FL'),
+      makeItem('Cook County, AL'),
+      makeItem('Cook County, WA'),
+      makeItem('Cook County, OR'),
+    ],
+  } as any,
+};
+
+// export const CustomMarkup = {
+//   render: Template,
+//   args: {
+//     textFieldLabel: 'Select a snack that starts with "C".',
+//     textFieldHint:
+//       'Type "C" to start seeing a list of snacks. Clicking the last item should not change the input value to "Search all snacks"',
+//     label: 'Select from the options below:',
+//     items: [
+//       makeItem(
+//         'Carrots (1)',
+//         <>
+//           Carrots <strong>(1)</strong>
+//         </>
+//       ),
+//       makeItem(
+//         'Cookies (3)',
+//         <>
+//           Cookies <strong>(3)</strong>
+//         </>
+//       ),
+//       makeItem(
+//         'Crackers (2)',
+//         <>
+//           Crackers <strong>(2)</strong>
+//         </>
+//       ),
+//       {
+//         children: (
+//           <a href="#snacks" onClick={() => console.log('Searching for all the snacks!')}>
+//             Search all snacks
+//           </a>
+//         ),
+//         className: 'ds-c-autocomplete__search-all',
+//         isResult: false,
+//       },
+//     ],
+//   } as any,
+
+//   parameters: {
+//     docs: {
+//       source: {
+//         code: 'Disabled for this story. See https://github.com/storybookjs/storybook/issues/11554',
+//       },
+//     },
+//   },
+// };
+
+export const LoadingMessage = {
+  render: Template,
+  args: {
+    clearSearchButton: false,
+    loading: true,
+    items: [],
+    textFieldLabel: 'This will only show a loading message.',
+    textFieldHint: 'List should return string Loading to simulate async data call.',
+  } as any,
+};
+
+export const NoResults = {
+  render: Template,
+  args: {
+    items: [],
+    clearSearchButton: false,
+    textFieldLabel: 'This will show a "no results" message.',
+    textFieldHint: 'Start typing, but you’ll only get a "no results" message.',
+  } as any,
+};
diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.test.tsx b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.test.tsx
new file mode 100644
index 0000000000..4ffbda5e68
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.test.tsx
@@ -0,0 +1,434 @@
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import './ds-autocomplete';
+
+const defaultItems = JSON.stringify([{ id: 'kRf6c2fY', name: 'Cook County, IL' }]);
+
+type AutocompleteProps = JSX.IntrinsicElements['ds-autocomplete'];
+
+function makeAutocomplete(customProps: AutocompleteProps = {}) {
+  const props = {
+    'aria-clear-label': 'Clear search to try again',
+    'clear-input-text': 'Clear search',
+    'clear-search-button': 'true',
+    'loading-message': 'Loading...',
+    'no-results-message': 'No results',
+    label: 'autocomplete label',
+    ...customProps,
+  };
+
+  return <ds-autocomplete {...props} />;
+}
+
+function renderAutocomplete(customProps: AutocompleteProps = { items: defaultItems }) {
+  return render(makeAutocomplete(customProps));
+}
+
+function open() {
+  const autocompleteField = screen.getByRole('combobox');
+  userEvent.click(autocompleteField);
+  userEvent.type(autocompleteField, 'c');
+}
+
+function expectMenuToBeOpen() {
+  expect(screen.getByRole('listbox')).toBeInTheDocument();
+}
+
+function expectMenuToBeClosed() {
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describe('Autocomplete', () => {
+  it('renders correctly', () => {
+    const { asFragment } = renderAutocomplete();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders a closed Autocomplete component', () => {
+    const { container } = renderAutocomplete({ items: defaultItems });
+
+    const wrapperEl = container.querySelectorAll('.ds-c-autocomplete');
+    expect(wrapperEl.length).toEqual(1);
+
+    const input = screen.getByRole('combobox');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    expect(input).toHaveAttribute('aria-controls');
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(input).toHaveAttribute('role', 'combobox');
+    expect(input).toHaveAttribute('type', 'text');
+
+    const labelId = input.getAttribute('aria-labelledby');
+    const label = container.querySelector(`#${labelId}`);
+    expect(label).toBeInTheDocument();
+
+    const menuEl = container.querySelector('.ds-c-autocomplete__menu-container');
+    expect(menuEl).not.toBeInTheDocument();
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button.classList).toContain('ds-c-autocomplete__clear-btn');
+    expect(button).toHaveAttribute('type', 'button');
+    expect(button).toHaveAccessibleName('Clear search to try again');
+  });
+
+  it('renders items', () => {
+    renderAutocomplete({ items: defaultItems });
+
+    open();
+    expectMenuToBeOpen();
+
+    const items = screen.getByRole('option');
+    expect(items).toBeInTheDocument();
+    expect(items).toHaveTextContent('Cook County, IL');
+  });
+
+  // TODO: Fix how items with children are rendered
+  // it('renders items with children property', () => {
+  //   const items = [
+  //     {
+  //       id: '1',
+  //       name: 'Carrots (1)',
+  //       children: (
+  //         <>
+  //           Carrots <strong>(1)</strong>
+  //         </>
+  //       ),
+  //     },
+  //     {
+  //       id: '2',
+  //       name: 'Cookies (3)',
+  //       children: (
+  //         <>
+  //           Cookies <strong>(3)</strong>
+  //         </>
+  //       ),
+  //     },
+  //     {
+  //       id: '3',
+  //       name: 'Crackers (2)',
+  //       children: (
+  //         <>
+  //           Crackers <strong>(2)</strong>
+  //         </>
+  //       ),
+  //     },
+  //     {
+  //       id: '4',
+  //       name: 'Search all snacks',
+  //       children: <a href="https://duckduckgo.com/?q=snacks">Search all snacks</a>,
+  //     },
+  //   ];
+
+  //   renderAutocomplete({ items: JSON.stringify(items) });
+
+  //   open();
+  //   const ul = screen.getByRole('listbox');
+  //   expect(ul).toMatchSnapshot();
+  // });
+
+  it('generates ids when no id is provided', () => {
+    renderAutocomplete({ id: undefined, items: defaultItems });
+    open();
+    const idRegex = /autocomplete--\d+/;
+    expect(screen.getByRole('listbox').id).toMatch(idRegex);
+    expect(screen.getByRole('combobox').id).toMatch(idRegex);
+  });
+
+  it('renders item with custom className', () => {
+    const items = [
+      { id: '1a', name: 'Normal item' },
+      { id: '5b', name: 'Special item', className: 'custom-class' },
+    ];
+    renderAutocomplete({ items: JSON.stringify(items) });
+
+    open();
+    expectMenuToBeOpen();
+
+    const listItems = screen.queryAllByRole('option');
+    expect(listItems[1]).toHaveClass('custom-class');
+    expect(listItems).toMatchSnapshot();
+  });
+
+  it('renders Autocomplete component without items', () => {
+    renderAutocomplete({ items: 'null' });
+    open();
+    expectMenuToBeClosed();
+  });
+
+  it('renders Autocomplete component no results', () => {
+    renderAutocomplete({ items: JSON.stringify([]) });
+    open();
+    expect(screen.queryByRole('listbox').children.length).toEqual(1);
+    expect(screen.queryByRole('option')).toHaveTextContent('No results');
+  });
+
+  it('shows the menu when open', () => {
+    renderAutocomplete();
+    open();
+    expectMenuToBeOpen();
+  });
+
+  it('opens the menu when focusing on an input that has text in it', async () => {
+    renderAutocomplete();
+    const autocompleteField = screen.getByRole('combobox');
+
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'no-results-found');
+
+    expect(autocompleteField).toHaveValue('no-results-found');
+    userEvent.tab();
+    expect(autocompleteField).not.toHaveFocus();
+    userEvent.tab({ shift: true });
+    expect(autocompleteField).toHaveFocus();
+    expectMenuToBeOpen();
+  });
+
+  it('opens the menu if typing resulted in results that were delayed by async data fetching', async () => {
+    const { rerender } = renderAutocomplete({ items: undefined });
+    const autocompleteField = screen.getByRole('combobox');
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+
+    rerender(makeAutocomplete({ items: defaultItems }));
+    expectMenuToBeOpen();
+  });
+
+  it('does not render a clear search button when clearSearchButton is set to false', () => {
+    renderAutocomplete({ 'clear-search-button': 'false', items: defaultItems });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders custom class names', () => {
+    const { container } = renderAutocomplete({
+      'class-name': 'additional-class',
+      items: defaultItems,
+    });
+    const child = container.querySelector('.ds-c-autocomplete');
+
+    expect(child).toHaveClass('additional-class');
+  });
+
+  describe('default props', () => {
+    it('defaults ariaClearLabel', () => {
+      renderAutocomplete();
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+
+      expect(button).toHaveAttribute('aria-label', 'Clear search to try again');
+    });
+
+    it('defaults clearInputText', () => {
+      renderAutocomplete();
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+
+      expect(button).toHaveTextContent('Clear search');
+    });
+  });
+
+  it('should set the input value correctly when a listbox selection is clicked', () => {
+    renderAutocomplete();
+
+    const autocompleteRoot = document.querySelector('ds-autocomplete');
+    const mockHandler = jest.fn();
+    autocompleteRoot.addEventListener('ds-change', mockHandler);
+
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+
+    const listboxItem = screen.getByRole('option');
+    userEvent.click(listboxItem);
+
+    expect(autocompleteField.value).toBe('Cook County, IL');
+    expect(mockHandler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: {
+          selectedItem: JSON.parse(defaultItems)[0],
+        },
+      })
+    );
+    expect(mockHandler).toHaveBeenCalledTimes(1);
+
+    expectMenuToBeClosed();
+    autocompleteRoot.removeEventListener('ds-change', mockHandler);
+  });
+
+  it('should set the input value to empty when "Clear search" is clicked', () => {
+    renderAutocomplete();
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+
+    const listboxItem = screen.getByRole('option');
+    userEvent.click(listboxItem);
+
+    const clearButton = screen.getByText('Clear search');
+    userEvent.click(clearButton);
+
+    expect(autocompleteField.value).toBe('');
+  });
+
+  it('should call onChange with null item when "Clear search" is clicked', () => {
+    renderAutocomplete();
+
+    const autocompleteRoot = document.querySelector('ds-autocomplete');
+    const mockChangeHandler = jest.fn();
+    autocompleteRoot.addEventListener('ds-change', mockChangeHandler);
+
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+
+    const listboxItem = screen.getByRole('option');
+    userEvent.click(listboxItem);
+
+    const clearButton = screen.getByText('Clear search');
+    userEvent.click(clearButton);
+
+    expect(autocompleteField.value).toBe('');
+    expect(mockChangeHandler).toHaveBeenCalledTimes(2);
+    // expect the last call to contain null
+    expect(mockChangeHandler.mock.calls[1][0].detail).toEqual({
+      selectedItem: null,
+    });
+
+    expectMenuToBeClosed();
+    autocompleteRoot.removeEventListener('ds-change', mockChangeHandler);
+  });
+
+  it('should select list items by keyboard', () => {
+    renderAutocomplete();
+
+    const autocompleteRoot = document.querySelector('ds-autocomplete');
+    const mockChangeHandler = jest.fn();
+    autocompleteRoot.addEventListener('ds-change', mockChangeHandler);
+
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+    userEvent.type(autocompleteField, '{arrowdown}');
+    userEvent.type(autocompleteField, '{enter}');
+
+    expect(autocompleteField.value).toBe('Cook County, IL');
+    expect(mockChangeHandler).toHaveBeenCalledTimes(1);
+    expect(mockChangeHandler.mock.calls[0][0].detail).toEqual({
+      selectedItem: JSON.parse(defaultItems)[0],
+    });
+
+    expectMenuToBeClosed();
+    autocompleteRoot.removeEventListener('ds-change', mockChangeHandler);
+  });
+
+  it('should not call onChange when an item was not selected', () => {
+    renderAutocomplete();
+
+    const autocompleteRoot = document.querySelector('ds-autocomplete');
+    const mockChangeHandler = jest.fn();
+    autocompleteRoot.addEventListener('ds-change', mockChangeHandler);
+
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+    userEvent.type(autocompleteField, 'o');
+    userEvent.type(autocompleteField, '{enter}');
+    expect(mockChangeHandler).not.toHaveBeenCalled();
+
+    autocompleteRoot.removeEventListener('ds-change', mockChangeHandler);
+  });
+
+  it('should clear the input value by keyboard', () => {
+    renderAutocomplete();
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    autocompleteField.focus();
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+    userEvent.type(autocompleteField, '{arrowdown}');
+    userEvent.type(autocompleteField, '{enter}');
+
+    expect(autocompleteField.value).toBe('Cook County, IL');
+
+    userEvent.tab();
+
+    const clearButton = screen.getByText('Clear search');
+    userEvent.click(clearButton);
+
+    expect(autocompleteField.value).toBe('');
+  });
+
+  it('closes the listbox when ESC is pressed', () => {
+    renderAutocomplete();
+    const autocompleteField = screen.getByRole('combobox') as HTMLInputElement;
+    userEvent.click(autocompleteField);
+    userEvent.type(autocompleteField, 'c');
+
+    expectMenuToBeOpen();
+
+    expect(autocompleteField.value).toEqual('c');
+
+    userEvent.type(autocompleteField, '{esc}');
+
+    expectMenuToBeClosed();
+  });
+
+  // it("calls child TextField's event handlers", () => {
+  //   const props = {
+  //     label: 'autocomplete',
+  //     name: 'autocomplete_field',
+  //     onFocus: jest.fn(),
+  //     onChange: jest.fn(),
+  //     onKeyDown: jest.fn(),
+  //     // onTouchEnd : jest.fn(), Doesn't look like we can actually test onTouchEnd
+  //     onBlur: jest.fn(),
+  //   };
+  //   renderAutocomplete({ children: <TextField {...props} /> });
+  //   const field = screen.getByRole('combobox');
+  //   userEvent.click(field);
+  //   expect(props.onFocus).toHaveBeenCalledTimes(1);
+  //   userEvent.type(field, 'c');
+  //   expect(props.onKeyDown).toHaveBeenCalledTimes(1);
+  //   expect(props.onChange).toHaveBeenCalledTimes(1);
+  //   userEvent.tab();
+  //   expect(props.onBlur).toHaveBeenCalledTimes(1);
+  // });
+
+  // it('allows arbitrary props to remain on the TextField', () => {
+  //   const props = {
+  //     label: 'autocomplete',
+  //     name: 'autocomplete_field',
+  //     placeholder: 'Hello world!',
+  //     fieldClassName: 'a-custom-class',
+  //   };
+  //   renderAutocomplete({ children: <TextField {...props} /> });
+  //   const field = screen.getByRole('combobox');
+  //   expect(field).toHaveAttribute('placeholder', props.placeholder);
+  //   expect(field).toHaveClass(props.fieldClassName);
+  // });
+
+  // it('inherits size prop from the TextField', () => {
+  //   const { container } = renderAutocomplete({
+  //     children: <TextField label="autocomplete" name="field" size="medium" />,
+  //   });
+  //   const field = screen.getByRole('combobox');
+  //   expect(field).toHaveClass('ds-c-field--medium');
+  //   open();
+  //   const menuContainer = container.querySelector('.ds-c-autocomplete__menu-container');
+  //   expect(menuContainer).toHaveClass('ds-c-field--medium');
+  // });
+
+  // it('can have a disabled TextField', () => {
+  //   renderAutocomplete({
+  //     children: <TextField label="autocomplete" name="field" disabled />,
+  //   });
+  //   const field = screen.getByRole('combobox');
+  //   expect(field).toHaveAttribute('disabled');
+  //   const clearButton = screen.getByText('Clear search');
+  //   expect(clearButton).toHaveAttribute('disabled');
+  // });
+});
diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx
new file mode 100644
index 0000000000..e97ef104d3
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx
@@ -0,0 +1,109 @@
+import { define } from '../preactement/define';
+import { Autocomplete, AutocompleteItem, AutocompleteProps } from '../../Autocomplete';
+import { parseBooleanAttr, parseJsonAttr } from '../wrapperUtils';
+import { TextField } from '../../TextField';
+import { formAttrs } from '../shared-attributes/form';
+import { UseLabelPropsProps } from '../../Label/useLabelProps';
+import { UseHintProps } from '../../Hint/useHint';
+import { UseInlineErrorProps } from '../../InlineError/useInlineError';
+
+const attributes = [
+  'aria-clear-label',
+  'aria-complete-label',
+  // Using the lowercase HTML attribute name rather than `auto-focus` so it's
+  // more natural. There's no reason for us to worry about name collisions.
+  'autofocus',
+  'class-name',
+  'clear-input-text',
+  'clear-search-button',
+  'value',
+  'items',
+  'loading-message',
+  'loading',
+  'menu-heading-id',
+  'menu-heading',
+  'name',
+  'no-results-message',
+  'root-id',
+  ...formAttrs,
+] as const;
+
+type IncompatibleProps =
+  | 'autoFocus'
+  | 'clearSearchButton'
+  | 'items'
+  | 'label-id'
+  | 'label'
+  | 'loading';
+
+interface WrapperProps
+  extends Omit<UseLabelPropsProps & UseHintProps & UseInlineErrorProps, 'id' | 'inversed'>,
+    Omit<AutocompleteProps, IncompatibleProps> {
+  autofocus?: string;
+  clearSearchButton?: string;
+  value: string;
+  items?: string;
+  loading?: string;
+  menuHeading?: string;
+  menuHeadingId?: string;
+  rootId: string;
+}
+
+const Wrapper = ({
+  autofocus,
+  clearSearchButton,
+  hint,
+  value,
+  items,
+  label,
+  loading,
+  menuHeading,
+  menuHeadingId,
+  rootId,
+  ...otherProps
+}: WrapperProps) => {
+  return (
+    <Autocomplete
+      {...otherProps}
+      label={menuHeading}
+      labelId={menuHeadingId}
+      autoFocus={parseBooleanAttr(autofocus)}
+      clearSearchButton={parseBooleanAttr(clearSearchButton)}
+      id={rootId}
+      items={parseJsonAttr(items)}
+      loading={parseBooleanAttr(loading)}
+    >
+      <TextField label={label} hint={hint} name="autocomplete" value={value} />
+    </Autocomplete>
+  );
+};
+
+/* eslint-disable @typescript-eslint/no-namespace */
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'ds-autocomplete': JSX.IntrinsicElements['div'] & {
+        [K in (typeof attributes)[number]]?: string;
+      };
+    }
+  }
+}
+/* eslint-enable */
+
+define('ds-autocomplete', () => Wrapper, {
+  attributes,
+  events: [
+    [
+      'onChange',
+      (selectedItem: AutocompleteItem) => ({
+        detail: { selectedItem },
+      }),
+    ],
+    [
+      'onInputValueChange',
+      (value: string) => ({
+        detail: { value },
+      }),
+    ],
+  ],
+});
diff --git a/packages/design-system/src/components/web-components/ds-autocomplete/index.ts b/packages/design-system/src/components/web-components/ds-autocomplete/index.ts
new file mode 100644
index 0000000000..fbf549b7e7
--- /dev/null
+++ b/packages/design-system/src/components/web-components/ds-autocomplete/index.ts
@@ -0,0 +1 @@
+import './ds-autocomplete';
diff --git a/packages/design-system/src/components/web-components/ds-tabs/ds-tab-panel.tsx b/packages/design-system/src/components/web-components/ds-tabs/ds-tab-panel.tsx
index 67fc55677b..e8edebc221 100644
--- a/packages/design-system/src/components/web-components/ds-tabs/ds-tab-panel.tsx
+++ b/packages/design-system/src/components/web-components/ds-tabs/ds-tab-panel.tsx
@@ -1,7 +1,7 @@
 import { define } from '../preactement/define';
 import { TabPanel } from '../../Tabs';
 import { TabPanelProps } from '../../Tabs/TabPanel';
-import { parseBooleanAttr } from '../wrapperUtils';
+import { parseBooleanAttr, parseJsonAttr } from '../wrapperUtils';
 import { ReactNode } from 'react';
 
 const tabPanelAttributes = [
@@ -12,7 +12,7 @@ const tabPanelAttributes = [
   'tab',
   'tab-class-name',
   'tab-href',
-  'tab-id'
+  'tab-id',
 ] as const;
 
 interface WrapperProps extends Omit<TabPanelProps, 'selected' | 'disabled' | 'tab'> {
@@ -22,15 +22,6 @@ interface WrapperProps extends Omit<TabPanelProps, 'selected' | 'disabled' | 'ta
   tab: string;
 }
 
-const isJsonString = (str: string): boolean => {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-};
-
 const Wrapper = ({
   className,
   rootId,
@@ -43,14 +34,13 @@ const Wrapper = ({
   children,
   ...otherProps
 }: WrapperProps & { children?: ReactNode }) => {
-
   return (
     <TabPanel
       className={className}
       id={rootId}
       selected={parseBooleanAttr(selected)}
       disabled={parseBooleanAttr(disabled)}
-      tab={isJsonString(tab) ? JSON.parse(tab) : tab}
+      tab={parseJsonAttr(tab)}
       tabClassName={tabClassName}
       tabHref={tabHref}
       tabId={tabId}
diff --git a/packages/design-system/src/components/web-components/index.ts b/packages/design-system/src/components/web-components/index.ts
index bb76850a8b..f3c9c077e4 100644
--- a/packages/design-system/src/components/web-components/index.ts
+++ b/packages/design-system/src/components/web-components/index.ts
@@ -14,6 +14,7 @@ export * from '../i18n';
 
 import './ds-accordion';
 import './ds-alert';
+import './ds-autocomplete';
 import './ds-badge';
 import './ds-button';
 import './ds-choice';
diff --git a/packages/design-system/src/components/web-components/wrapperUtils.ts b/packages/design-system/src/components/web-components/wrapperUtils.ts
index b43584e384..7ba4e61250 100644
--- a/packages/design-system/src/components/web-components/wrapperUtils.ts
+++ b/packages/design-system/src/components/web-components/wrapperUtils.ts
@@ -10,3 +10,15 @@ export function parseDateAttr(attr?: string): Date | undefined {
 export function parseIntegerAttr(attr?: string): number | undefined {
   if (attr !== undefined) return parseInt(attr);
 }
+
+export function parseJsonAttr(attr?: string): any | string | undefined {
+  const isJsonString = (str?: string): boolean => {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  };
+  return isJsonString(attr) ? JSON.parse(attr) : attr;
+}
diff --git a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--Mobile-Chrome.png b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--Mobile-Chrome.png
index e6313ac5f5..928c97a647 100644
Binary files a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--Mobile-Chrome.png and b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium-forced-colors.png b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium-forced-colors.png
index e7baf9082b..b4a8be1f61 100644
Binary files a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium-forced-colors.png and b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium.png b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium.png
index e0035470b9..1911718745 100644
Binary files a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium.png and b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--chromium.png differ
diff --git a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--firefox.png b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--firefox.png
index 3444da4b3f..87bf4791e2 100644
Binary files a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--firefox.png and b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--firefox.png differ
diff --git a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--webkit.png b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--webkit.png
index 0b148a6f24..656d6bd08a 100644
Binary files a/tests/browser/snapshots/examples/astro-web-components/astro-web-components--webkit.png and b/tests/browser/snapshots/examples/astro-web-components/astro-web-components--webkit.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--Mobile-Chrome.png
index e06bce27e5..abe32ab812 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--Mobile-Chrome.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium-forced-colors.png
index 72d9f77ce1..67f055ff6b 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium-forced-colors.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium.png
index 308c506ea5..408506d0c7 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--firefox.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--firefox.png
index 5385c860db..62e5e79175 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--firefox.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--webkit.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--webkit.png
index c14f73e5ae..0f313bb71a 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--webkit.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--Mobile-Chrome.png
index 9833bf31e6..abe32ab812 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--Mobile-Chrome.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium-forced-colors.png
index 0e422b7105..67f055ff6b 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium-forced-colors.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium.png
index bcb6dd7160..408506d0c7 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--chromium.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--firefox.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--firefox.png
index 8886d9172b..62e5e79175 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--firefox.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--firefox.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--webkit.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--webkit.png
index 85dfda6f72..0f313bb71a 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-core--webkit.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-core--webkit.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--Mobile-Chrome.png
index a5f74c829e..b161405184 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--Mobile-Chrome.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium-forced-colors.png
index 74f5ec1d13..5a0e5520f1 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium-forced-colors.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium.png
index ccf8af01c0..5a929b3884 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--firefox.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--firefox.png
index 0af374c7be..455511b67b 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--firefox.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--webkit.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--webkit.png
index 32be211416..044a2a3004 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--webkit.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--Mobile-Chrome.png
index ec248af116..1ac8b33bc5 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--Mobile-Chrome.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium-forced-colors.png
index 8308ab5bb5..15de697496 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium-forced-colors.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium.png
index 745bdf938c..190578aea6 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--firefox.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--firefox.png
index 18d5f929a7..4e1d6edaa9 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--firefox.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--webkit.png b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--webkit.png
index fa8735adc1..9dadf1cc1f 100644
Binary files a/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--webkit.png and b/tests/browser/snapshots/stories/components-autocomplete--no-results-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--Mobile-Chrome.png
new file mode 100644
index 0000000000..2775240a1f
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium-forced-colors.png
new file mode 100644
index 0000000000..7501c406b0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium.png
new file mode 100644
index 0000000000..0f446c7257
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--firefox.png
new file mode 100644
index 0000000000..8885b55786
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--webkit.png
new file mode 100644
index 0000000000..3808adbdd7
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--Mobile-Chrome.png
new file mode 100644
index 0000000000..09f77b065c
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium-forced-colors.png
new file mode 100644
index 0000000000..7e4e1afcaf
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium.png
new file mode 100644
index 0000000000..0dc44d78a0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--firefox.png
new file mode 100644
index 0000000000..153d0e95d6
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--webkit.png
new file mode 100644
index 0000000000..2b61a529f8
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-core--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--Mobile-Chrome.png
new file mode 100644
index 0000000000..4d0066c681
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium-forced-colors.png
new file mode 100644
index 0000000000..15ce09d820
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium.png
new file mode 100644
index 0000000000..f44c2a424a
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--firefox.png
new file mode 100644
index 0000000000..ec6e0a947c
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--webkit.png
new file mode 100644
index 0000000000..e0dbfb94f9
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--Mobile-Chrome.png
new file mode 100644
index 0000000000..5908a63eb1
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium-forced-colors.png
new file mode 100644
index 0000000000..91c0b555a8
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium.png
new file mode 100644
index 0000000000..85eb964a71
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--firefox.png
new file mode 100644
index 0000000000..37391d4a24
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--webkit.png
new file mode 100644
index 0000000000..d3fa6bbdb7
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--default-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--Mobile-Chrome.png
new file mode 100644
index 0000000000..b02a60b795
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium-forced-colors.png
new file mode 100644
index 0000000000..3aebd7050e
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium.png
new file mode 100644
index 0000000000..00e67d73f9
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--firefox.png
new file mode 100644
index 0000000000..913b665b7e
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--webkit.png
new file mode 100644
index 0000000000..ff442c7ce0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--Mobile-Chrome.png
new file mode 100644
index 0000000000..289590242f
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium-forced-colors.png
new file mode 100644
index 0000000000..91727bd606
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium.png
new file mode 100644
index 0000000000..1aae74c8e7
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--firefox.png
new file mode 100644
index 0000000000..e3c6a3ffd3
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--webkit.png
new file mode 100644
index 0000000000..1991ac93b8
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-core--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--Mobile-Chrome.png
new file mode 100644
index 0000000000..22aa9e94dc
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium-forced-colors.png
new file mode 100644
index 0000000000..0ed34aa4d1
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium.png
new file mode 100644
index 0000000000..b72df08755
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--firefox.png
new file mode 100644
index 0000000000..7b34e4955f
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--webkit.png
new file mode 100644
index 0000000000..c78d715446
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--Mobile-Chrome.png
new file mode 100644
index 0000000000..85d88b34ce
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium-forced-colors.png
new file mode 100644
index 0000000000..2eed5dec59
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium.png
new file mode 100644
index 0000000000..d560bc58dd
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--firefox.png
new file mode 100644
index 0000000000..b6c7cc5de5
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--webkit.png
new file mode 100644
index 0000000000..dfe71fd7a2
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--labeled-list-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--Mobile-Chrome.png
new file mode 100644
index 0000000000..fa664b7de8
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium-forced-colors.png
new file mode 100644
index 0000000000..65854f48b3
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium.png
new file mode 100644
index 0000000000..d6e2921279
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--firefox.png
new file mode 100644
index 0000000000..577d0ef7cd
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--webkit.png
new file mode 100644
index 0000000000..b77817f2fb
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--Mobile-Chrome.png
new file mode 100644
index 0000000000..866a2caad4
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium-forced-colors.png
new file mode 100644
index 0000000000..78e6b98c61
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium.png
new file mode 100644
index 0000000000..9930149cdd
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--firefox.png
new file mode 100644
index 0000000000..39ec0ba2cf
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--webkit.png
new file mode 100644
index 0000000000..a7560ebf50
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-core--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--Mobile-Chrome.png
new file mode 100644
index 0000000000..4d11580bc4
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium-forced-colors.png
new file mode 100644
index 0000000000..327ad450ab
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium.png
new file mode 100644
index 0000000000..0a81c7f8ac
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--firefox.png
new file mode 100644
index 0000000000..5fcc0324c6
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--webkit.png
new file mode 100644
index 0000000000..bec6d952be
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--Mobile-Chrome.png
new file mode 100644
index 0000000000..e413dea5f0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium-forced-colors.png
new file mode 100644
index 0000000000..ada5e76835
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium.png
new file mode 100644
index 0000000000..5c7d8e6025
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--firefox.png
new file mode 100644
index 0000000000..a60de1e44b
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--webkit.png
new file mode 100644
index 0000000000..3c5a9472c0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--loading-message-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--Mobile-Chrome.png
new file mode 100644
index 0000000000..ff7841ce35
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium-forced-colors.png
new file mode 100644
index 0000000000..baa4f4d17c
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium.png
new file mode 100644
index 0000000000..81fbf21dd0
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--firefox.png
new file mode 100644
index 0000000000..91338e915e
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--webkit.png
new file mode 100644
index 0000000000..8e017cf1d7
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-cmsgov--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--Mobile-Chrome.png
new file mode 100644
index 0000000000..e26ef6c791
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium-forced-colors.png
new file mode 100644
index 0000000000..d60e27712a
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium.png
new file mode 100644
index 0000000000..32c8669348
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--firefox.png
new file mode 100644
index 0000000000..5d22dc23c4
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--webkit.png
new file mode 100644
index 0000000000..ee17ebf65a
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-core--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--Mobile-Chrome.png
new file mode 100644
index 0000000000..f8ddaf3965
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium-forced-colors.png
new file mode 100644
index 0000000000..bed9ee0ef7
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium.png
new file mode 100644
index 0000000000..778fa7ca18
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--firefox.png
new file mode 100644
index 0000000000..75a5043e90
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--webkit.png
new file mode 100644
index 0000000000..59784dcec5
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-healthcare--webkit.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--Mobile-Chrome.png
new file mode 100644
index 0000000000..cad3dee365
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--Mobile-Chrome.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium-forced-colors.png
new file mode 100644
index 0000000000..1f2bc17ec2
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium-forced-colors.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium.png
new file mode 100644
index 0000000000..413a09f9b4
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--chromium.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--firefox.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--firefox.png
new file mode 100644
index 0000000000..23c39a4e1c
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--firefox.png differ
diff --git a/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--webkit.png b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--webkit.png
new file mode 100644
index 0000000000..75d9b02aeb
Binary files /dev/null and b/tests/browser/snapshots/stories/web-components-ds-autocomplete--no-results-medicare--webkit.png differ
diff --git a/tests/browser/snapshots/storybook-docs/Docs-Web-Components-ds-autocomplete-Docs-prop-table-matches-snapshot-1.txt b/tests/browser/snapshots/storybook-docs/Docs-Web-Components-ds-autocomplete-Docs-prop-table-matches-snapshot-1.txt
new file mode 100644
index 0000000000..7101d4bf82
--- /dev/null
+++ b/tests/browser/snapshots/storybook-docs/Docs-Web-Components-ds-autocomplete-Docs-prop-table-matches-snapshot-1.txt
@@ -0,0 +1,87 @@
+[
+  [
+    "aria-clear-label",
+    "Screen reader-specific label for the Clear search `<button>`. Intended to provide a longer, more descriptive explanation of the button's behavior.",
+    "string"
+  ],
+  [
+    "aria-complete-label",
+    "Control the `TextField` autocomplete attribute. Defaults to \"off\" to support accessibility. [Read more.](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)",
+    "string"
+  ],
+  [
+    "autofocus",
+    "Sets the focus on the select during the first mount",
+    "\"true\"\"false\""
+  ],
+  [
+    "class-name",
+    "Additional classes to be added to the root element. Useful for adding utility classes.",
+    "string"
+  ],
+  [
+    "clear-input-text",
+    "Text rendered on the page if `clearInput` prop is passed. Default is \"Clear search\".",
+    "string"
+  ],
+  [
+    "clear-search-button",
+    "Removes the Clear search button when set to `false`",
+    "\"true\"\"false\""
+  ],
+  [
+    "hint",
+    "An optional hint for the label",
+    "string"
+  ],
+  [
+    "items",
+    "An array of objects used to populate the suggestion list that appears below the input as users type. Passing an empty array will show a \"No results\" message. If you do not yet want to show results, this props should be undefined. This parameter needs to be stringified (please see examples for usage and [read more on the autocomplete docs](https://design.cms.gov/storybook/?path=/docs/components-autocomplete--docs):).",
+    "string"
+  ],
+  [
+    "label",
+    "A label for the input",
+    "string"
+  ],
+  [
+    "loading",
+    "Can be called when the `items` array is being fetched remotely, or will be delayed for more than 1-2 seconds.",
+    "\"true\"\"false\""
+  ],
+  [
+    "loading-message",
+    "Message users will see when the `loading` prop is passed to `Autocomplete`.",
+    "string"
+  ],
+  [
+    "menu-heading",
+    "Adds a heading to the top of the autocomplete list. This can be used to convey to the user that they're required to select an option from the autocomplete list.",
+    "string"
+  ],
+  [
+    "menu-heading-id",
+    "A unique `id` to be used on the child `TextField` label tag",
+    "string"
+  ],
+  [
+    "name",
+    "The `input` field's `name` attribute.",
+    "string"
+  ],
+  [
+    "no-results-message",
+    "Message users will see when the `items` array returns empty and the `loading` prop is passed to `<Autocomplete />`.",
+    "string"
+  ],
+  [
+    "root-id",
+    "A unique ID for this element. A unique ID will be generated if one isn't provided.",
+    "string"
+  ],
+  [
+    "value",
+    "Input value",
+    "string"
+  ]
+]
\ No newline at end of file