diff --git a/examples/js/autocomplete.css b/examples/js/autocomplete.css
index ea4ab1cd5..ad5cbecc4 100644
--- a/examples/js/autocomplete.css
+++ b/examples/js/autocomplete.css
@@ -77,7 +77,7 @@
   z-index: 2;
 }
 
-.aa-ListContainer {
+.aa-Panel {
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
   border-radius: 3px;
@@ -89,18 +89,18 @@
   width: 100%;
 }
 
-.aa-ListContainer--stalled {
+.aa-Panel--stalled {
   filter: grayscale(1);
   opacity: 0.5;
   transition: opacity 200ms ease-in;
 }
 
-.aa-ListContainer a {
+.aa-Panel a {
   color: inherit;
   text-decoration: none;
 }
 
-.aa-ListContainer ul {
+.aa-Panel ul {
   list-style: none;
   margin: 0;
   padding: 0;
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
index 0a2cff553..55619c55b 100644
--- a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
+++ b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -47,7 +47,7 @@ describe('autocomplete-js', () => {
               class="aa-InputWrapper"
             >
               <input
-                aria-autocomplete="list"
+                aria-autocomplete="both"
                 aria-labelledby="autocomplete-label"
                 autocapitalize="off"
                 autocomplete="off"
@@ -109,7 +109,7 @@ describe('autocomplete-js', () => {
             </div>
           </form>
           <div
-            class="aa-ListContainer"
+            class="aa-Panel"
             hidden=""
             style="top: 0px; left: 0px; right: 0px; max-width: unset;"
           />
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 860777eb6..95bb876c9 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -36,7 +36,7 @@ export function autocomplete<TItem>({
   const form = document.createElement('form');
   const label = document.createElement('label');
   const resetButton = document.createElement('button');
-  const listContainer = document.createElement('div');
+  const panel = document.createElement('div');
 
   const autocomplete = createAutocomplete<TItem>({
     ...props,
@@ -51,13 +51,13 @@ export function autocomplete<TItem>({
   });
 
   const onResize = debounce(() => {
-    if (!listContainer.hasAttribute('hidden')) {
+    if (!panel.hasAttribute('hidden')) {
       setDropdownPosition();
     }
   }, 100);
 
   function setDropdownPosition() {
-    setProperties(listContainer, {
+    setProperties(panel, {
       style: getDropdownPositionStyle({
         dropdownPlacement,
         container: root,
@@ -70,7 +70,7 @@ export function autocomplete<TItem>({
   setProperties(window as any, {
     ...autocomplete.getEnvironmentProps({
       searchBoxElement: form,
-      dropdownElement: listContainer,
+      dropdownElement: panel,
       inputElement: input,
     }),
     onResize,
@@ -85,9 +85,7 @@ export function autocomplete<TItem>({
     class: concatClassNames(['aa-Form', classNames.form]),
   });
   setProperties(inputWrapper, {
-    class: ['aa-InputWrapper', classNames.inputWrapper]
-      .filter(Boolean)
-      .join(' '),
+    class: concatClassNames(['aa-InputWrapper', classNames.inputWrapper]),
   });
   setProperties(input, {
     ...autocomplete.getInputProps({ inputElement: input }),
@@ -104,10 +102,10 @@ export function autocomplete<TItem>({
     class: concatClassNames(['aa-ResetButton', classNames.resetButton]),
     innerHTML: resetIcon,
   });
-  setProperties(listContainer, {
+  setProperties(panel, {
     ...autocomplete.getDropdownProps(),
     hidden: true,
-    class: concatClassNames(['aa-ListContainer', classNames.listContainer]),
+    class: concatClassNames(['aa-Panel', classNames.panel]),
   });
 
   function render(state: AutocompleteCoreState<TItem>) {
@@ -117,23 +115,23 @@ export function autocomplete<TItem>({
       autocomplete.getInputProps({ inputElement: input })
     );
 
-    listContainer.innerHTML = '';
+    panel.innerHTML = '';
 
     if (state.isOpen) {
-      setProperties(listContainer, {
+      setProperties(panel, {
         hidden: false,
       });
     } else {
-      setProperties(listContainer, {
+      setProperties(panel, {
         hidden: true,
       });
       return;
     }
 
     if (state.status === 'stalled') {
-      listContainer.classList.add('aa-ListContainer--stalled');
+      panel.classList.add('aa-panel--stalled');
     } else {
-      listContainer.classList.remove('aa-ListContainer--stalled');
+      panel.classList.remove('aa-panel--stalled');
     }
 
     const sections = state.collections.map((collection) => {
@@ -197,7 +195,7 @@ export function autocomplete<TItem>({
       return section;
     });
 
-    renderDropdown({ root: listContainer, sections, state });
+    renderDropdown({ root: panel, sections, state });
   }
 
   inputWrapper.appendChild(input);
@@ -205,7 +203,7 @@ export function autocomplete<TItem>({
   inputWrapper.appendChild(resetButton);
   form.appendChild(inputWrapper);
   root.appendChild(form);
-  root.appendChild(listContainer);
+  root.appendChild(panel);
   containerElement.appendChild(root);
 
   setDropdownPosition();
diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
index a99c26c56..e3685ca52 100644
--- a/packages/autocomplete-js/src/types/index.ts
+++ b/packages/autocomplete-js/src/types/index.ts
@@ -84,7 +84,7 @@ export interface AutocompleteOptions<TItem>
     input?: string;
     completion?: string;
     resetButton?: string;
-    listContainer?: string;
+    panel?: string;
     source?: string;
     sourceHeader?: string;
     list?: string;
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
index 14c28ccec..17dbf9615 100644
--- a/packages/website/docs/autocomplete-js.md
+++ b/packages/website/docs/autocomplete-js.md
@@ -90,7 +90,7 @@ type ClassNames = {
   input?: string;
   completion?: string;
   resetButton?: string;
-  listContainer?: string;
+  panel?: string;
   source?: string;
   sourceHeader?: string;
   list?: string;