diff --git a/tests/playwright/e2e/afd-page.spec.js b/tests/playwright/e2e/afd-page.spec.js
index 5230e153a..24fbfe561 100644
--- a/tests/playwright/e2e/afd-page.spec.js
+++ b/tests/playwright/e2e/afd-page.spec.js
@@ -5,22 +5,36 @@ const path = require("path");
 
 const { describe, beforeEach } = test;
 
-const PRODUCT_PATH = path.resolve(__dirname, "..", "..", "api", "data", "testing", "products");
+const PRODUCT_PATH = path.resolve(
+  __dirname,
+  "..",
+  "..",
+  "api",
+  "data",
+  "testing",
+  "products",
+);
 const OKX_REFERENCES = JSON.parse(
-  fs.readFileSync(path.join(PRODUCT_PATH, "types", "AFD", "locations", "OKX.json")).toString()
+  fs
+    .readFileSync(
+      path.join(PRODUCT_PATH, "types", "AFD", "locations", "OKX.json"),
+    )
+    .toString(),
 );
 const OVERALL_REFERENCES = JSON.parse(
-  fs.readFileSync(path.join(PRODUCT_PATH, "types", "AFD.json")).toString()
+  fs.readFileSync(path.join(PRODUCT_PATH, "types", "AFD.json")).toString(),
 );
 const firstId = OKX_REFERENCES["@graph"][0].id;
 
 describe("AFD Page Tests", () => {
   describe("Partial HTML routes", () => {
-    test("Can retrieve <option> elements html partial for version listing", async ({page}) => {
+    test("Can retrieve <option> elements html partial for version listing", async ({
+      page,
+    }) => {
       await page.goto("http://localhost:8081/play/testing");
       await page.goto("http://localhost:8080/wx/afd/locations/OKX");
 
-      const options = await page.locator('option:first-child');
+      const options = await page.locator("option:first-child");
       await expect(options).toHaveCount(1);
 
       // Make sure the first option has the same value/id
@@ -30,7 +44,7 @@ describe("AFD Page Tests", () => {
       await expect(val).toEqual(firstId);
     });
 
-    test("Can retreive html partial for AFD content", async({page}) => {
+    test("Can retreive html partial for AFD content", async ({ page }) => {
       await page.goto("http://localhost:8081/play/testing");
       // See tests/api/data/products/
       // This is our OKX first AFD testing example data
@@ -45,11 +59,13 @@ describe("AFD Page Tests", () => {
   });
 
   describe("Querystrings and Redirects", () => {
-    beforeEach(async ({page}) => {
+    beforeEach(async ({ page }) => {
       await page.goto("http://localhost:8081/play/testing");
     });
-    
-    test("Hitting /afd without any querystrings will redirect to the most recent anywhere", async ({page}) => {
+
+    test("Hitting /afd without any querystrings will redirect to the most recent anywhere", async ({
+      page,
+    }) => {
       const expectedId = OVERALL_REFERENCES["@graph"][0].id;
       await page.goto(`http://localhost:8080/afd`);
       await page.waitForURL(`http://localhost:8080/afd/TAE/${expectedId}`);
@@ -60,7 +76,9 @@ describe("AFD Page Tests", () => {
       await expect(actualId).toEqual(expectedId);
     });
 
-    test("Hitting /afd with a WFO code querystring will give the most recent for that location", async ({page}) => {
+    test("Hitting /afd with a WFO code querystring will give the most recent for that location", async ({
+      page,
+    }) => {
       const expectedId = OKX_REFERENCES["@graph"][0].id;
       await page.goto("http://localhost:8080/afd?wfo=OKX");
       await page.waitForURL(`http://localhost:8080/afd/OKX/${expectedId}`);
@@ -71,7 +89,9 @@ describe("AFD Page Tests", () => {
       await expect(actualId).toEqual(expectedId);
     });
 
-    test("Hitting /afd with a WFO code and and id as querystrings will give the right afd and selection in dropdown", async ({page}) => {
+    test("Hitting /afd with a WFO code and and id as querystrings will give the right afd and selection in dropdown", async ({
+      page,
+    }) => {
       const expectedId = OKX_REFERENCES["@graph"][1].id;
       await page.goto(`http://localhost:8080/afd?wfo=OKX&id=${expectedId}`);
       await page.waitForURL(`http://localhost:8080/afd/OKX/${expectedId}`);
@@ -80,7 +100,7 @@ describe("AFD Page Tests", () => {
       await expect(article).toHaveCount(1);
       const actualId = await article.getAttribute("data-afd-id");
       const select = await page.locator("form > select#version-selector");
-      const selectedId = await select.evaluate(el => el.value);
+      const selectedId = await select.evaluate((el) => el.value);
 
       await expect(actualId).toEqual(expectedId);
       await expect(selectedId).toEqual(expectedId);
@@ -94,60 +114,74 @@ describe("AFD Page Tests", () => {
    * how these tests run.
    */
   describe("Changing selections tests", () => {
-    beforeEach(async ({page}) => {
+    beforeEach(async ({ page }) => {
       await page.goto("http://localhost:8081/play/testing");
       await page.goto("http://localhost:8080/afd/OKX");
     });
 
     describe("WFO selector correctly populates based on path", () => {
       test("with uppercase WFO code", async ({ page }) => {
-        const selected = page.locator("wx-afd-selector #wfo-selector");
+        const selected = page.locator(`wx-combo-box input[name="wfo"]`);
         await expect(selected).toHaveValue("OKX");
       });
 
       test("with lowercase WFO code", async ({ page }) => {
         await page.goto("http://localhost:8080/afd/okx");
-        const selected = page.locator("wx-afd-selector #wfo-selector");
+        const selected = page.locator(`wx-combo-box input[name="wfo"]`);
         await expect(selected).toHaveValue("OKX");
       });
     });
 
-    test("Selecting third version and clicking button will load that version", async ({page}) => {
+    test("Selecting third version and clicking button will load that version", async ({
+      page,
+    }) => {
       const thirdId = OKX_REFERENCES["@graph"][2].id;
-      const versionSelect = await page.locator('select#version-selector');
+      const versionSelect = await page.locator("select#version-selector");
       await versionSelect.selectOption(thirdId);
 
-      const button = await page.locator(`form#afd-selection-form > button[type="submit"]`);
+      const button = await page.locator(
+        `form#afd-selection-form > button[type="submit"]`,
+      );
       await button.click();
 
       await page.waitForURL(`http://localhost:8080/afd/OKX/${thirdId}`);
 
       const article = await page.locator("article");
       const actualId = await article.getAttribute("data-afd-id");
-      const updatedSelect = await page.locator('select#version-selector');
-      const selectedValue = await updatedSelect.evaluate(el => el.value);
-      const wfoSelect = await page.locator('select#wfo-selector');
-      const wfoValue = await wfoSelect.evaluate(el => el.value);
+      const updatedSelect = await page.locator("select#version-selector");
+      const selectedValue = await updatedSelect.evaluate((el) => el.value);
+      const wfoSelect = await page.locator(`wx-combo-box input[name="wfo"]`);
+      const wfoValue = await wfoSelect.evaluate((el) => el.value);
 
       await expect(actualId).toEqual(thirdId);
       await expect(wfoValue).toEqual("OKX");
       await expect(selectedValue).toEqual(thirdId);
     });
 
-    test("Selecting an alternate WFO will update the version selector and document", async ({page}) => {
+    test("Selecting an alternate WFO will update the version selector and document", async ({
+      page,
+    }) => {
       const targetId = OVERALL_REFERENCES["@graph"][0].id;
-      const wfoSelect = await page.locator("select#wfo-selector");
-      await wfoSelect.selectOption("TAE");
-      
-      const button = await page.locator(`form#afd-selection-form > button[type="submit"]`);
+
+      // Playwright won't click things that aren't visible, so drop into the
+      // browser context and do it there. The browser don't care.
+      await page.evaluate(() => {
+        document.querySelector(`wx-combo-box ul li[data-value="TAE"]`).click();
+      });
+
+      const button = await page.locator(
+        `form#afd-selection-form > button[type="submit"]`,
+      );
       await button.click();
 
       const article = await page.locator("article");
       const articleId = await article.getAttribute("data-afd-id");
-      const updatedSelect = await page.locator("select#wfo-selector");
-      const selectedWFO = await updatedSelect.evaluate(el => el.value);
+      const updatedSelect = await page.locator(
+        `wx-combo-box input[name="wfo"]`,
+      );
+      const selectedWFO = await updatedSelect.evaluate((el) => el.value);
       const versionSelect = await page.locator("select#version-selector");
-      const selectedVersion = await versionSelect.evaluate(el => el.value);
+      const selectedVersion = await versionSelect.evaluate((el) => el.value);
 
       await expect(articleId).toEqual(targetId);
       await expect(selectedWFO).toEqual("TAE");
diff --git a/tests/playwright/e2e/combo-box-location.spec.js b/tests/playwright/e2e/combo-box-location.spec.js
new file mode 100644
index 000000000..0bb0a7c92
--- /dev/null
+++ b/tests/playwright/e2e/combo-box-location.spec.js
@@ -0,0 +1,151 @@
+/* eslint-disable no-await-in-loop, no-plusplus */
+const { test, expect } = require("@playwright/test");
+const arcQueryData = require("../mock-data/arc.query.json");
+const arcQueryItemsData = require("../mock-data/arc.query.items.json");
+
+const { describe, beforeEach } = test;
+
+describe("wx-combo-box-location tests", () => {
+  beforeEach(async ({ page }) => {
+    // Stub the ArcGIS API requests
+    // so that they use saved data
+    await page.route(
+      "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest*",
+      async (route) => {
+        await route.fulfill({ json: arcQueryData });
+      },
+    );
+    await page.route(
+      "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*",
+      async (route) => {
+        const url = new URL(route.request().url());
+        const key = url.searchParams.get("magicKey");
+        const mockData = arcQueryItemsData[key];
+        if (mockData) {
+          await route.fulfill({ json: mockData });
+        } else {
+          await route.abort();
+        }
+      },
+    );
+
+    await page.goto("http://localhost:8080");
+  });
+
+  test("Can find the combo-box element", async ({ page }) => {
+    const combobox = page.locator("wx-combo-box-location");
+
+    await expect(combobox).toHaveCount(1);
+    await expect(combobox).toBeVisible();
+  });
+
+  describe("When typing into the input", () => {
+    beforeEach(async ({ page }) => {
+      const comboInput = page.locator("wx-combo-box-location > input");
+      await comboInput.fill("Arlin");
+    });
+
+    test("it displays a visible dropdown list", async ({ page }) => {
+      const list = page.locator("wx-combo-box-location ul");
+
+      await expect(list).toBeVisible();
+    });
+
+    test("the first item in the dropdown list is aria-selected", async ({
+      page,
+    }) => {
+      const ariaSelectedItem = page.locator(
+        'wx-combo-box-location ul li:first-child[aria-selected="true"]',
+      );
+
+      await expect(ariaSelectedItem).toHaveCount(1);
+    });
+
+    test("typing the down key pseudo-focuses the second element", async ({
+      page,
+    }) => {
+      const correctSelection = page.locator(
+        'wx-combo-box-location ul > li[aria-selected="true"]:nth-child(2)',
+      );
+      await page.keyboard.press("ArrowDown");
+
+      await expect(correctSelection).toHaveCount(1);
+      await expect(correctSelection).toBeVisible();
+    });
+
+    test("typing down twice pseudo-focuses the third element", async ({
+      page,
+    }) => {
+      const correctSelection = page.locator(
+        'wx-combo-box-location ul > li[aria-selected="true"]:nth-child(3)',
+      );
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("ArrowDown");
+
+      await expect(correctSelection).toHaveCount(1);
+      await expect(correctSelection).toBeVisible();
+    });
+
+    test("pressing the up arrow collapses the search list", async ({
+      page,
+    }) => {
+      const resultList = page.locator("wx-combo-box-location ul");
+      await page.keyboard.press("ArrowUp");
+
+      await expect(resultList).not.toBeVisible();
+    });
+
+    test("pressing Enter selects an item, closing the list from view", async ({
+      page,
+    }) => {
+      // Ensure that the page doesn't navigate so we can test the presence of
+      // the loader
+      await page.route(
+        "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*",
+        async (route) => {
+          await route.abort();
+        },
+        { times: 1 },
+      );
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("ArrowDown");
+      await page.keyboard.press("Enter");
+      const list = page.locator("wx-combo-box-location ul");
+
+      await expect(list).not.toBeVisible();
+    });
+
+    test("clicking selects the second item and navigates to the location page", async ({
+      page,
+    }) => {
+      const thirdItem = page.locator(
+        "wx-combo-box-location ul > li:nth-child(3)",
+      );
+      await thirdItem.click();
+      await page.waitForNavigation();
+
+      await expect(page.url()).toMatch(/.*\/point\/.*/);
+    });
+
+    test("clicking the second item displays the loading element", async ({
+      page,
+    }) => {
+      // Ensure that the page doesn't navigate so we can test the presence of
+      // the loader
+      await page.route(
+        "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*",
+        async (route) => {
+          await route.abort();
+        },
+        { times: 1 },
+      );
+      const thirdItem = page.locator(
+        "wx-combo-box-location ul > li:nth-child(3)",
+      );
+      const loader = page.locator("wx-loader");
+      await thirdItem.click();
+
+      await expect(loader).toBeVisible();
+    });
+  });
+});
diff --git a/tests/playwright/e2e/combo-box.spec.js b/tests/playwright/e2e/combo-box.spec.js
deleted file mode 100644
index 67d6c7725..000000000
--- a/tests/playwright/e2e/combo-box.spec.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/* eslint-disable no-await-in-loop, no-plusplus */
-const { test, expect } = require("@playwright/test");
-const arcQueryData = require("../mock-data/arc.query.json");
-const arcQueryItemsData = require("../mock-data/arc.query.items.json");
-
-const { describe, beforeEach } = test;
-
-describe("wx-combo-box tests", () => {
-  beforeEach(async ({ page }) => {
-    // Stub the ArcGIS API requests
-    // so that they use saved data
-    await page.route("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest*", async route => {
-      await route.fulfill({ json: arcQueryData });
-    });
-    await page.route("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*", async route => {
-      const url = new URL(route.request().url());
-      const key = url.searchParams.get("magicKey");
-      const mockData = arcQueryItemsData[key];
-      if(mockData){
-        await route.fulfill({ json: mockData });
-      } else {
-        await route.abort();
-      }
-    });
-
-    await page.goto("http://localhost:8080");
-  });
-
-  test("Can find the combo-box element", async ({page}) => {
-    const combobox = page.locator("wx-combo-box");
-    
-    await expect(combobox).toHaveCount(1);
-    await expect(combobox).toBeVisible();
-  });
-
-  describe("When typing into the input", () => {
-    beforeEach(async ({page}) => {
-      const comboInput = page.locator("wx-combo-box > input");
-      await comboInput.fill("Arlin");
-    });
-
-    test("it displays a visible dropdown list", async ({page}) => {
-      const list = page.locator("wx-combo-box ul");
-
-      await expect(list).toBeVisible();
-    });
-
-    test("the first item in the dropdown list is aria-selected", async ({page}) => {
-      const ariaSelectedItem = page.locator('wx-combo-box ul li:first-child[aria-selected="true"]');
-
-      await expect(ariaSelectedItem).toHaveCount(1);
-    });
-
-    test("typing the down key pseudo-focuses the second element", async ({page}) => {
-      const correctSelection = page.locator('wx-combo-box ul > li[aria-selected="true"]:nth-child(2)');
-      await page.keyboard.press("ArrowDown");
-
-      await expect(correctSelection).toHaveCount(1);
-      await expect(correctSelection).toBeVisible();
-    });
-
-    test("typing down twice pseudo-focuses the third element", async ({page}) => {
-      const correctSelection = page.locator('wx-combo-box ul > li[aria-selected="true"]:nth-child(3)');
-      await page.keyboard.press("ArrowDown");
-      await page.keyboard.press("ArrowDown");
-
-      await expect(correctSelection).toHaveCount(1);
-      await expect(correctSelection).toBeVisible();
-    });
-
-    test("pressing the up arrow collapses the search list", async ({page}) => {
-      const resultList = page.locator("wx-combo-box ul");
-      await page.keyboard.press("ArrowUp");
-
-      await expect(resultList).not.toBeVisible();
-    });
-
-    test("pressing Enter selects an item, closing the list from view", async ({page}) => {
-      // Ensure that the page doesn't navigate so we can test the presence of
-      // the loader
-      await page.route("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*", async route => {
-        await route.abort();
-      }, { times: 1 });
-      await page.keyboard.press("ArrowDown");
-      await page.keyboard.press("ArrowDown");
-      await page.keyboard.press("Enter");
-      const list = page.locator("wx-combo-box ul");
-
-      await expect(list).not.toBeVisible();
-    });
-
-    test("clicking selects the second item and navigates to the location page", async ({page}) => {
-      const thirdItem = page.locator("wx-combo-box ul > li:nth-child(3)");
-      await thirdItem.click();
-      await page.waitForNavigation();
-
-      await expect(page.url()).toMatch(/.*\/point\/.*/);
-    });
-
-    test("clicking the second item displays the loading element", async ({page}) => {
-      // Ensure that the page doesn't navigate so we can test the presence of
-      // the loader
-      await page.route("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find*", async route => {
-        await route.abort();
-      }, { times: 1 });
-      const thirdItem = page.locator("wx-combo-box ul > li:nth-child(3)");
-      const loader = page.locator("wx-loader");
-      await thirdItem.click();
-
-      await expect(loader).toBeVisible();
-    });
-  });
-});
diff --git a/web/themes/new_weather_theme/assets/js/components/combo-box-location.js b/web/themes/new_weather_theme/assets/js/components/combo-box-location.js
new file mode 100644
index 000000000..ed050171f
--- /dev/null
+++ b/web/themes/new_weather_theme/assets/js/components/combo-box-location.js
@@ -0,0 +1,353 @@
+/* global ComboBox */
+
+const searchLocation = async (text) => {
+  const url = `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=json&countryCode=USA%2CPRI%2CVIR%2CGUM%2CASM&category=Land+Features%2CBay%2CChannel%2CCove%2CDam%2CDelta%2CGulf%2CLagoon%2CLake%2COcean%2CReef%2CReservoir%2CSea%2CSound%2CStrait%2CWaterfall%2CWharf%2CAmusement+Park%2CHistorical+Monument%2CLandmark%2CTourist+Attraction%2CZoo%2CCollege%2CBeach%2CCampground%2CGolf+Course%2CHarbor%2CNature+Reserve%2COther+Parks+and+Outdoors%2CPark%2CRacetrack%2CScenic+Overlook%2CSki+Resort%2CSports+Center%2CSports+Field%2CWildlife+Reserve%2CAirport%2CFerry%2CMarina%2CPier%2CPort%2CResort%2CPostal%2CPopulated+Place&maxSuggestions=10&_=1695666335097&text=${text}`;
+  return fetch(url, { headers: { "Content-Type": "application/json" } });
+};
+
+const getLocationGeodata = async (magicKey) => {
+  const url = `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find?magicKey=${magicKey}&f=json&_=1695666335115`;
+  const response = await fetch(url, {
+    headers: { "Content-Type": "application/json" },
+  });
+  const results = await response.json();
+
+  if (
+    !results.error &&
+    Array.isArray(results.locations) &&
+    results.locations.length > 0
+  ) {
+    const {
+      locations: [
+        {
+          feature: { geometry },
+        },
+      ],
+    } = results;
+
+    const lat = Math.round(geometry.y * 1_000) / 1_000;
+    const lon = Math.round(geometry.x * 1_000) / 1_000;
+    return { lat, lon };
+  }
+  return null;
+};
+
+/**
+ * This object uses the browser's SessionStorage
+ * to cache and retrieve ArcGIS magicKey data.
+ * Each time a user navigates to a list option,
+ * we fetch the result for that option asynchronously
+ * and store in this cache.
+ * Later, if the user selects an option, we first check
+ * for the cached data before sending a request.
+ * This can provide the perception of faster interaction.
+ */
+const ArcCache = {
+  getItem(magicKey) {
+    const found = window.sessionStorage.getItem(magicKey);
+    if (found) {
+      return JSON.parse(found);
+    }
+    return null;
+  },
+  setItem(magicKey, obj) {
+    const serialized = JSON.stringify(obj);
+    window.sessionStorage.setItem(magicKey, serialized);
+  },
+};
+
+class LocationComboBox extends ComboBox {
+  constructor() {
+    super();
+
+    // Private property defaults
+    this.inputDelay = 250;
+
+    // Bound component methods
+    this.updateSearch = this.updateSearch.bind(this);
+    this.cacheLocationGeodata = this.cacheLocationGeodata.bind(this);
+    this.getGeodataForKey = this.getGeodataForKey.bind(this);
+    this.updateAriaLive = this.updateAriaLive.bind(this);
+    this.saveSearchResult = this.saveSearchResult.bind(this);
+    this.getSavedResults = this.getSavedResults.bind(this);
+    this.getSearchResults = this.getSearchResults.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.dataset.place) {
+      this.saveSearchResult({
+        text: this.dataset.place,
+        url: window.location.pathname,
+      });
+    }
+  }
+
+  /**
+   * Handle input events on the custom element.
+   * These will be triggered by the slotted input
+   * element, then bubble up.
+   */
+  handleInput(event) {
+    if (this.inputDebounceTimer) {
+      window.clearTimeout(this.inputDebounceTimer);
+    }
+    this.inputDebounceTimer = window.setTimeout(async () => {
+      await this.updateSearch(event.target.value).then(() => {
+        this.updateAriaLive(
+          `Search updated. ${this.querySelectorAll("li").length} results available`,
+        );
+      });
+    }, this.inputDelay);
+
+    this.handleTextInput(event);
+  }
+
+  handleFocus() {
+    this.updateSearch("");
+  }
+
+  chooseOption(event) {
+    super.chooseOption(event);
+
+    // Always submit to the parent form
+    this.submit();
+  }
+
+  async getSearchResults(text) {
+    const response = await searchLocation(text);
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    }
+    return { suggestions: [] };
+  }
+
+  /**
+   * Triggered by input changes.
+   * Will make a request to the ArcGIS endpoint
+   * for search results.
+   * Clears out the current list items and select
+   * options, then creates new versions of each set,
+   * with the correct classes and event handlers
+   * set up.
+   */
+  async updateSearch(text) {
+    const data = await this.getSearchResults(text);
+
+    const makeSectionHeading = (title) => {
+      const heading = document.createElement("li");
+      heading.textContent = title;
+      heading.classList.add("font-mono-sm", "text-base", "padding-1");
+      heading.setAttribute("role", "presentation");
+      return heading;
+    };
+
+    const makeListItem = (suggestion, idx) => {
+      const li = document.createElement("li");
+      li.innerText = suggestion.text;
+      li.setAttribute("role", "option");
+      li.setAttribute("aria-setsize", data.suggestions.length);
+      li.setAttribute("aria-posinset", idx + 1);
+      li.setAttribute("aria-selected", "false");
+      if (suggestion.magicKey) {
+        li.setAttribute("data-value", suggestion.magicKey);
+      } else if (suggestion.url) {
+        li.setAttribute("data-url", suggestion.url);
+      } else {
+        return null;
+      }
+      li.classList.add(...["wx-combo-box__list-option"]);
+      li.id = `${this.id}--item-${idx + 1}`;
+
+      li.addEventListener("focus", (e) => {
+        this.cacheLocationGeodata(e.target.dataset.value);
+      });
+      li.addEventListener("mousedown", (event) => {
+        // Stop the input from losing focus by
+        // blocking normal browser behavior here
+        event.preventDefault();
+      });
+      li.addEventListener("click", this.chooseOption);
+      return li;
+    };
+
+    const saved = this.getSavedResults(text);
+
+    const items = [];
+
+    // If there are saved items, we want to put in a heading list item for them
+    // and possibly a heading list item for current search results as well.
+    if (saved.length) {
+      const list = document.createElement("ul");
+      list.setAttribute("aria-labeledby", `${this.id}--list`);
+      list.classList.add("wx-combo-box__list");
+
+      list.append(makeSectionHeading("recent locations"));
+      list.append(...saved.map(makeListItem));
+      items.push(list);
+    }
+
+    // Now add search results, if any.
+    if (data.suggestions.length) {
+      const list = document.createElement("ul");
+      list.setAttribute("aria-labeledby", `${this.id}--list`);
+      list.classList.add("wx-combo-box__list");
+
+      if (saved.length) {
+        list.append(makeSectionHeading("search results"));
+      }
+      list.append(...data.suggestions.map(makeListItem));
+
+      items.push(list);
+    }
+
+    // Append to shadow select element
+    this.querySelector('[slot="listbox"]').replaceChildren(...items);
+
+    // If there are results, show the area
+    if (saved.length || data.suggestions.length) {
+      this.showList();
+    } else {
+      this.hideList();
+    }
+  }
+
+  /**
+   * Triggers a submit call on an ancestor form element,
+   * if present.
+   */
+  submit() {
+    const formEl = this.closest("form[data-location-search]");
+
+    if (formEl) {
+      // If there is a loader component available,
+      // display it
+      const loader = document.querySelector("wx-loader");
+      if (loader) {
+        loader.classList.remove("display-none");
+      }
+
+      if (this.url) {
+        const result = {
+          text: this.input.value,
+          url: this.url,
+        };
+
+        this.saveSearchResult(result);
+        formEl.setAttribute("action", this.url);
+        return formEl.submit();
+      }
+
+      return this.getGeodataForKey(this.value).then((coordinates) => {
+        if (coordinates) {
+          const result = {
+            text: this.input.value,
+            url: `/point/${coordinates.lat}/${coordinates.lon}`,
+          };
+
+          this.saveSearchResult(result);
+
+          formEl.setAttribute("action", result.url);
+          formEl.submit();
+        }
+      });
+    }
+
+    return Promise.reject(
+      new Error("No form ancestor element found for this combobox"),
+    );
+  }
+
+  /**
+   * Asynchronously fetches specific location data
+   * for a given search result, stashing it away in
+   * the cache (See ArcCache)
+   */
+  async cacheLocationGeodata(magicKey) {
+    if (!window.sessionStorage.getItem(magicKey)) {
+      const result = await getLocationGeodata(magicKey);
+      ArcCache.setItem(magicKey, result);
+    }
+  }
+
+  /**
+   * Attempts to retrieve location data for a search
+   * result by its magicKey from the cache.
+   * If not present, will make the Arc API call
+   * to fetch the data.
+   */
+  async getGeodataForKey(magicKey) {
+    const cached = ArcCache.getItem(magicKey);
+    if (!cached) {
+      return getLocationGeodata(magicKey);
+    }
+
+    return cached;
+  }
+
+  saveSearchResult(result) {
+    try {
+      // When loading previously-saved results, immediately remove any items for
+      // the same URL. We'll replace them with the new one. This way we don't
+      // end up having a whole list of the same place.
+      const saved = JSON.parse(
+        localStorage.getItem("wxgov_recent_locations") ?? "[]",
+      ).filter(({ url }) => url !== result.url);
+
+      // Put the new one at the front of the list.
+      saved.unshift(result);
+
+      localStorage.setItem(
+        "wxgov_recent_locations",
+        // We don't want to save everything forever. Just keep the most recent
+        // ten. We'll handle filtering down at display time.
+        JSON.stringify(saved.slice(0, 10)),
+      );
+    } catch (e) {
+      // Do nothing. If we're here, either the browser doesn't have local
+      // storage (which is unlikely in 2024, but possible), or it is
+      // disabled and we can't use it.
+    }
+  }
+
+  getSavedResults(searchText) {
+    try {
+      const results = JSON.parse(
+        localStorage.getItem("wxgov_recent_locations") ?? "[]",
+      );
+
+      const regex = new RegExp(`^${searchText}`, "i");
+
+      return results.filter(({ text }) => regex.test(text)).slice(0, 3);
+    } catch (e) {
+      return [];
+    }
+  }
+
+  /**
+   * Adds a span of screenreader only text to
+   * this component's shadow aria-live region,
+   * which it itself also hidden.
+   * Makes use of a slot called "sr-only".
+   * The update is on a 1 second delay, which is preferred
+   * based on convos with USWDS.
+   */
+  updateAriaLive(text) {
+    if (this.ariaLiveDebounceTimer) {
+      window.clearTimeout(this.ariaLiveDebounceTimer);
+    }
+    this.ariaLiveDebounceTimer = window.setTimeout(() => {
+      Array.from(this.querySelectorAll("[slot='sr-only']")).forEach((span) =>
+        span.remove(),
+      );
+      const span = document.createElement("span");
+      span.setAttribute("slot", "sr-only");
+      span.innerText = text;
+      this.append(span);
+    }, 1000);
+  }
+}
+
+window.customElements.define("wx-combo-box-location", LocationComboBox);
diff --git a/web/themes/new_weather_theme/assets/js/components/combo-box.js b/web/themes/new_weather_theme/assets/js/components/combo-box.js
index 7dfd8f5c6..43616abbc 100644
--- a/web/themes/new_weather_theme/assets/js/components/combo-box.js
+++ b/web/themes/new_weather_theme/assets/js/components/combo-box.js
@@ -1,60 +1,4 @@
-/* eslint object-shorthand: 0, func-names: 0, no-underscore-dangle: 0 */
-const searchLocation = async (text) => {
-  const url = `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=json&countryCode=USA%2CPRI%2CVIR%2CGUM%2CASM&category=Land+Features%2CBay%2CChannel%2CCove%2CDam%2CDelta%2CGulf%2CLagoon%2CLake%2COcean%2CReef%2CReservoir%2CSea%2CSound%2CStrait%2CWaterfall%2CWharf%2CAmusement+Park%2CHistorical+Monument%2CLandmark%2CTourist+Attraction%2CZoo%2CCollege%2CBeach%2CCampground%2CGolf+Course%2CHarbor%2CNature+Reserve%2COther+Parks+and+Outdoors%2CPark%2CRacetrack%2CScenic+Overlook%2CSki+Resort%2CSports+Center%2CSports+Field%2CWildlife+Reserve%2CAirport%2CFerry%2CMarina%2CPier%2CPort%2CResort%2CPostal%2CPopulated+Place&maxSuggestions=10&_=1695666335097&text=${text}`;
-  return fetch(url, { headers: { "Content-Type": "application/json" } });
-};
-
-const getLocationGeodata = async (magicKey) => {
-  const url = `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find?magicKey=${magicKey}&f=json&_=1695666335115`;
-  const response = await fetch(url, {
-    headers: { "Content-Type": "application/json" },
-  });
-  const results = await response.json();
-
-  if (
-    !results.error &&
-    Array.isArray(results.locations) &&
-    results.locations.length > 0
-  ) {
-    const {
-      locations: [
-        {
-          feature: { geometry },
-        },
-      ],
-    } = results;
-
-    const lat = Math.round(geometry.y * 1_000) / 1_000;
-    const lon = Math.round(geometry.x * 1_000) / 1_000;
-    return { lat, lon };
-  }
-  return null;
-};
-
-/**
- * This object uses the browser's SessionStorage
- * to cache and retrieve ArcGIS magicKey data.
- * Each time a user navigates to a list option,
- * we fetch the result for that option asynchronously
- * and store in this cache.
- * Later, if the user selects an option, we first check
- * for the cached data before sending a request.
- * This can provide the perception of faster interaction.
- */
-const ArcCache = {
-  getItem: function (magicKey) {
-    const found = window.sessionStorage.getItem(magicKey);
-    if (found) {
-      return JSON.parse(found);
-    }
-    return null;
-  },
-  setItem: function (magicKey, obj) {
-    const serialized = JSON.stringify(obj);
-    window.sessionStorage.setItem(magicKey, serialized);
-  },
-};
-
+// #region Template
 const comboTemplate = `
 <style>
  :host {
@@ -91,7 +35,7 @@ const comboTemplate = `
  
 </style>
 <div id="input-area">
-  <slot name="input"></slot>        
+  <slot name="input"></slot>
   <slot name="clear-button"></slot>
   <slot name="separator"></slot>
   <slot name="toggle-button"></slot>
@@ -104,6 +48,7 @@ const comboTemplate = `
 </div>
 <slot></slot>
 `;
+// #endregion
 
 /**
  * A note on terminology:
@@ -120,8 +65,11 @@ const comboTemplate = `
  */
 
 class ComboBox extends HTMLElement {
+  static count = 0;
+
   constructor() {
     super();
+    ComboBox.count += 1;
 
     this.template = document.createElement("template");
     this.template.innerHTML = comboTemplate;
@@ -129,15 +77,14 @@ class ComboBox extends HTMLElement {
     this.shadowRoot.append(this.template.content.cloneNode(true));
 
     // Private property defaults
-    this.inputDelay = 250;
     this.selectedIndex = -1;
     this.value = null;
 
-    // Bound component methods
+    // Bind component methods
     this.handleInput = this.handleInput.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleTextInput = this.handleTextInput.bind(this);
-    this.updateSearch = this.updateSearch.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
     this.showList = this.showList.bind(this);
     this.hideList = this.hideList.bind(this);
     this.toggleList = this.toggleList.bind(this);
@@ -148,18 +95,16 @@ class ComboBox extends HTMLElement {
     this.chooseOption = this.chooseOption.bind(this);
     this.submit = this.submit.bind(this);
     this.clear = this.clear.bind(this);
-    this.cacheLocationGeodata = this.cacheLocationGeodata.bind(this);
-    this.getGeodataForKey = this.getGeodataForKey.bind(this);
-    this.updateAriaLive = this.updateAriaLive.bind(this);
     this.initInput = this.initInput.bind(this);
     this.initListbox = this.initListbox.bind(this);
     this.initToggleButton = this.initToggleButton.bind(this);
     this.initClearButton = this.initClearButton.bind(this);
-    this.saveSearchResult = this.saveSearchResult.bind(this);
-    this.getSavedResults = this.getSavedResults.bind(this);
-    this.getSearchResults = this.getSearchResults.bind(this);
+    this.setListItems = this.setListItems.bind(this);
+    this.getItemByValue = this.getItemByValue.bind(this);
+    this.filterItems = this.filterItems.bind(this);
   }
 
+  // #region Component lifecycle
   connectedCallback() {
     // Initial attributes
     this.classList.add("wx-combo-box");
@@ -167,8 +112,7 @@ class ComboBox extends HTMLElement {
 
     // If we have not provided an id, set a default value
     if (!this.id) {
-      const otherCombosCount = document.querySelectorAll("wx-combo-box").length;
-      this.id = `combo-box-${otherCombosCount}`;
+      this.id = `combo-box-${ComboBox.count}`;
     }
 
     // Initial live dom elements, if not already present
@@ -181,17 +125,28 @@ class ComboBox extends HTMLElement {
     this.addEventListener("input", this.handleInput);
     this.addEventListener("keydown", this.handleKeyDown);
     this.addEventListener("change", this.handleTextInput);
+    this.input.addEventListener("focus", this.handleFocus);
     this.addEventListener("blur", this.hideList);
     this.input.addEventListener("blur", this.hideList);
-    this.input.addEventListener("focus", () => {
-      this.updateSearch("");
-    });
 
-    if (this.dataset.place) {
-      this.saveSearchResult({
-        text: this.dataset.place,
-        url: window.location.pathname,
-      });
+    const items = JSON.parse(this.getAttribute("items") ?? "null");
+    if (Array.isArray(items) && items.length > 0) {
+      this.listItems = items;
+      this.setListItems(items);
+
+      const selected = this.getAttribute("selected");
+      if (selected) {
+        const li = this.getItemByValue(selected);
+        if (li) {
+          this.input.value = li.innerText;
+          if (this.namedInput) {
+            this.namedInput.value = li.dataset.value;
+          }
+
+          this.pseudoFocusListItem(li);
+          this.handleTextInput();
+        }
+      }
     }
   }
 
@@ -199,20 +154,23 @@ class ComboBox extends HTMLElement {
     this.removeEventListener("input", this.handleInput);
     this.removeEventListener("keydown", this.handleKeyDown);
     this.removeEventListener("change", this.handleTextInput);
+    this.input.removeEventListener("focus", this.handleFocus);
     this.removeEventListener("blur", this.hideList);
     this.input.removeEventListener("blur", this.hideList);
   }
+  // #endregion
 
+  // #region Component initialization
   /**
    * Set the required attributes and classes on the
    * input element.
    * If there is no valid input element, create it
    */
   initInput() {
-    let input = this.querySelector('input[slot="input"]');
-    if (!input) {
-      input = document.createElement("input");
-    }
+    const input =
+      this.querySelector('input[slot="input"]') ??
+      document.createElement("input");
+
     input.setAttribute("type", "text");
     input.setAttribute("slot", "input");
     input.setAttribute("role", "combobox");
@@ -231,6 +189,20 @@ class ComboBox extends HTMLElement {
     input.classList.add("wx-combo-box__input");
     this.append(input);
     this.input = input;
+
+    // This named input element is provided so the value of the combo box is
+    // presented to the containing form just like any other input. We hide it,
+    // we inherit its name from the component, and we programmatically set its
+    // value as the combo box state changes. Then this component works basically
+    // like a real input element.
+    if (this.getAttribute("name")) {
+      const namedInput = document.createElement("input");
+      namedInput.setAttribute("name", this.getAttribute("name"));
+      namedInput.setAttribute("value", this.getAttribute("selected"));
+      namedInput.setAttribute("type", "hidden");
+      this.append(namedInput);
+      this.namedInput = namedInput;
+    }
   }
 
   initListbox() {
@@ -284,124 +256,29 @@ class ComboBox extends HTMLElement {
     this.append(clearButton);
     this.clearButton = clearButton;
   }
+  // #endregion
 
+  // #region Event handlers
   /**
    * Handle input events on the custom element.
    * These will be triggered by the slotted input
    * element, then bubble up.
    */
   handleInput(event) {
-    if (this._timeout) {
-      window.clearTimeout(this._timeout);
+    const query = event?.target?.value;
+
+    if (query) {
+      this.setListItems(this.filterItems(this.listItems, query));
+    } else {
+      this.setListItems(this.listItems);
     }
-    this._timeout = window.setTimeout(async () => {
-      await this.updateSearch(event.target.value).then(() => {
-        this.updateAriaLive(
-          `Search updated. ${this.querySelectorAll("li").length} results available`,
-        );
-      });
-    }, this.inputDelay);
 
+    // Update UI elements accordingly
     this.handleTextInput(event);
   }
 
-  async getSearchResults(text) {
-    const response = await searchLocation(text);
-    if (response.ok) {
-      const data = await response.json();
-      return data;
-    }
-    return { suggestions: [] };
-  }
-
-  /**
-   * Triggered by input changes.
-   * Will make a request to the ArcGIS endpoint
-   * for search results.
-   * Clears out the current list items and select
-   * options, then creates new versions of each set,
-   * with the correct classes and event handlers
-   * set up.
-   */
-  async updateSearch(text) {
-    const data = await this.getSearchResults(text);
-
-    const makeSectionHeading = (title) => {
-      const heading = document.createElement("li");
-      heading.textContent = title;
-      heading.classList.add("font-mono-sm", "text-base", "padding-1");
-      heading.setAttribute("role", "presentation");
-      return heading;
-    };
-
-    const makeListItem = (suggestion, idx) => {
-      const li = document.createElement("li");
-      li.innerText = suggestion.text;
-      li.setAttribute("role", "option");
-      li.setAttribute("aria-setsize", data.suggestions.length);
-      li.setAttribute("aria-posinset", idx + 1);
-      li.setAttribute("aria-selected", "false");
-      if (suggestion.magicKey) {
-        li.setAttribute("data-value", suggestion.magicKey);
-      } else if (suggestion.url) {
-        li.setAttribute("data-url", suggestion.url);
-      } else {
-        return null;
-      }
-      li.classList.add(...["wx-combo-box__list-option"]);
-      li.id = `${this.id}--item-${idx + 1}`;
-
-      li.addEventListener("focus", (e) => {
-        this.cacheLocationGeodata(e.target.dataset.value);
-      });
-      li.addEventListener("mousedown", (event) => {
-        // Stop the input from losing focus by
-        // blocking normal browser behavior here
-        event.preventDefault();
-      });
-      li.addEventListener("click", this.chooseOption);
-      return li;
-    };
-
-    const saved = this.getSavedResults(text);
-
-    const items = [];
-
-    // If there are saved items, we want to put in a heading list item for them
-    // and possibly a heading list item for current search results as well.
-    if (saved.length) {
-      const list = document.createElement("ul");
-      list.setAttribute("aria-labeledby", `${this.id}--list`);
-      list.classList.add("wx-combo-box__list");
-
-      list.append(makeSectionHeading("recent locations"));
-      list.append(...saved.map(makeListItem));
-      items.push(list);
-    }
-
-    // Now add search results, if any.
-    if (data.suggestions.length) {
-      const list = document.createElement("ul");
-      list.setAttribute("aria-labeledby", `${this.id}--list`);
-      list.classList.add("wx-combo-box__list");
-
-      if (saved.length) {
-        list.append(makeSectionHeading("search results"));
-      }
-      list.append(...data.suggestions.map(makeListItem));
-
-      items.push(list);
-    }
-
-    // Append to shadow select element
-    this.querySelector('[slot="listbox"]').replaceChildren(...items);
-
-    // If there are results, show the area
-    if (saved.length || data.suggestions.length) {
-      this.showList();
-    } else {
-      this.hideList();
-    }
+  handleFocus() {
+    this.showList();
   }
 
   /**
@@ -447,6 +324,13 @@ class ComboBox extends HTMLElement {
     }
   }
 
+  submit() {
+    // Find the nearest parent form element and submit it.
+    this.closest("form")?.submit();
+  }
+  // #endregion
+
+  // #region State management
   /**
    * Shows the unordered list of results to the user.
    * Visually selects the first item if there are
@@ -495,6 +379,50 @@ class ComboBox extends HTMLElement {
     }
   }
 
+  /**
+   * Resets the list to just the provided items.
+   * @var items [items] The items that should be represented in the list
+   *            These are objects. They must have value and text properties.
+   *            The value property is the value that should be sent to the form
+   *            when submitted. The text property is what will be displayed to
+   *            the user in the list. If there are any other properties, they
+   *            will be stored in the list item's data-meta property as JSON-
+   *            encoded text
+   */
+  setListItems(items) {
+    const list = document.createElement("ul");
+    list.setAttribute("aria-labeledby", `${this.id}--list`);
+    list.classList.add("wx-combo-box__list");
+
+    const listItems = items.map((item, idx) => {
+      const { value, text, ...meta } = item;
+
+      const li = document.createElement("li");
+      li.innerText = text;
+      li.id = `${this.id}--item-${idx + 1}`;
+      li.setAttribute("role", "option");
+      li.setAttribute("aria-setsize", text.length);
+      li.setAttribute("aria-posinset", idx + 1);
+      li.setAttribute("aria-selected", "false");
+      li.setAttribute("data-value", value);
+      li.setAttribute("data-meta", JSON.stringify(meta));
+      li.classList.add("wx-combo-box__list-option");
+
+      li.addEventListener("mousedown", (e) => {
+        // Stop the input from losing focus by
+        // blocking normal browser behavior here
+        e.preventDefault();
+      });
+
+      li.addEventListener("click", this.chooseOption);
+
+      return li;
+    });
+
+    list.append(...listItems);
+    this.querySelector('[slot="listbox"]').replaceChildren(list);
+  }
+
   /**
    * Remove the pseudo-focus from all
    * items in the listbox
@@ -637,15 +565,24 @@ class ComboBox extends HTMLElement {
     this.url = selectedItem.getAttribute("data-url");
 
     // Display the text of the selected item
-    // in the input field
+    // in the input field and update the named input.
     this.input.value = selectedItem.textContent;
+    if (this.namedInput) {
+      this.namedInput.value = selectedItem.dataset.value;
+    }
 
     // Hide list and trigger change event
     this.hideList();
     this.dispatchEvent(new Event("change", { bubbles: true }));
+  }
 
-    // Always submit to the parent form
-    this.submit();
+  filterItems(itemList, query) {
+    const regex = new RegExp(query, "i");
+    return itemList.filter(({ text }) => regex.test(text));
+  }
+
+  getItemByValue(value) {
+    return this.listbox.querySelector(`li[data-value='${value}']`);
   }
 
   /**
@@ -653,160 +590,20 @@ class ComboBox extends HTMLElement {
    */
   clear() {
     this.input.value = null;
+    if (this.namedInput) {
+      this.namedInput.value = null;
+    }
     this.selectedItemIndex = -1;
     this.value = null;
+    this.setListItems(this.listItems);
     this.input.setAttribute("aria-activedescendant", "");
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
 
-  /**
-   * Triggers a submit call on an ancestor form element,
-   * if present.
-   */
-  submit() {
-    const formEl = this.closest("form[data-location-search]");
-
-    if (formEl) {
-      // If there is a loader component available,
-      // display it
-      const loader = document.querySelector("wx-loader");
-      if(loader){
-        loader.classList.remove("display-none");
-      }
-      
-      if (this.url) {
-        const result = {
-          text: this.input.value,
-          url: this.url,
-        };
-
-        this.saveSearchResult(result);
-        formEl.setAttribute("action", this.url);
-        return formEl.submit();
-      }
-
-      return this.getGeodataForKey(this.value).then((coordinates) => {
-        if (coordinates) {
-          const result = {
-            text: this.input.value,
-            url: `/point/${coordinates.lat}/${coordinates.lon}`,
-          };
-
-          this.saveSearchResult(result);
-
-          formEl.setAttribute("action", result.url);
-          formEl.submit();
-        }
-      });
-    }
-
-    return Promise.reject(
-      new Error("No form ancestor element found for this combobox"),
-    );
-  }
-
-  /**
-   * Asynchronously fetches specific location data
-   * for a given search result, stashing it away in
-   * the cache (See ArcCache)
-   */
-  async cacheLocationGeodata(magicKey) {
-    if (!window.sessionStorage.getItem(magicKey)) {
-      const result = await getLocationGeodata(magicKey);
-      ArcCache.setItem(magicKey, result);
-    }
-  }
-
-  /**
-   * Attempts to retrieve location data for a search
-   * result by its magicKey from the cache.
-   * If not present, will make the Arc API call
-   * to fetch the data.
-   */
-  async getGeodataForKey(magicKey) {
-    const cached = ArcCache.getItem(magicKey);
-    if (!cached) {
-      return getLocationGeodata(magicKey);
-    }
-
-    return cached;
-  }
-
-  saveSearchResult(result) {
-    try {
-      // When loading previously-saved results, immediately remove any items for
-      // the same URL. We'll replace them with the new one. This way we don't
-      // end up having a whole list of the same place.
-      const saved = JSON.parse(
-        localStorage.getItem("wxgov_recent_locations") ?? "[]",
-      ).filter(({ url }) => url !== result.url);
-
-      // Put the new one at the front of the list.
-      saved.unshift(result);
-
-      localStorage.setItem(
-        "wxgov_recent_locations",
-        // We don't want to save everything forever. Just keep the most recent
-        // ten. We'll handle filtering down at display time.
-        JSON.stringify(saved.slice(0, 10)),
-      );
-    } catch (e) {
-      // Do nothing. If we're here, either the browser doesn't have local
-      // storage (which is unlikely in 2024, but possible), or it is
-      // disabled and we can't use it.
-    }
-  }
-
-  getSavedResults(searchText) {
-    try {
-      const results = JSON.parse(
-        localStorage.getItem("wxgov_recent_locations") ?? "[]",
-      );
-
-      const regex = new RegExp(`^${searchText}`, "i");
-
-      return results.filter(({ text }) => regex.test(text)).slice(0, 3);
-    } catch (e) {
-      return [];
-    }
-  }
-
-  /**
-   * Adds a span of screenreader only text to
-   * this component's shadow aria-live region,
-   * which it itself also hidden.
-   * Makes use of a slot called "sr-only".
-   * The update is on a 1 second delay, which is preferred
-   * based on convos with USWDS.
-   */
-  updateAriaLive(text) {
-    if (this._ariaLiveTimeout) {
-      window.clearTimeout(this._ariaLiveTimeout);
-    }
-    this._ariaLiveTimeout = window.setTimeout(() => {
-      Array.from(this.querySelectorAll("[slot='sr-only']")).forEach((span) =>
-        span.remove(),
-      );
-      const span = document.createElement("span");
-      span.setAttribute("slot", "sr-only");
-      span.innerText = text;
-      this.append(span);
-    }, 1000);
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === "input-delay") {
-      this.inputDelay = parseInt(newVal, 10);
-    }
-  }
-
   get isShowingList() {
     return this.input.getAttribute("aria-expanded") === "true";
   }
-
-  static get observedAttributes() {
-    return ["input-delay"];
-  }
+  // #endregion
 }
 
 window.customElements.define("wx-combo-box", ComboBox);
diff --git a/web/themes/new_weather_theme/new_weather_theme.libraries.yml b/web/themes/new_weather_theme/new_weather_theme.libraries.yml
index 3af3e0626..b6a81abaa 100644
--- a/web/themes/new_weather_theme/new_weather_theme.libraries.yml
+++ b/web/themes/new_weather_theme/new_weather_theme.libraries.yml
@@ -30,11 +30,26 @@ localize-timestamps:
       attributes:
         async: true
 
-location-combo-box:
-  version: 2024-06-03
+combo-box:
+  version: 2024-08-28
   js:
-    assets/js/components/combo-box.js: { preprocess: false }
-        
+    assets/js/components/combo-box.js:
+      preprocess: false
+      attributes:
+        defer: true
+
+combo-box-location:
+  version: 2024-08-28
+  js:
+    assets/js/components/combo-box.js:
+      preprocess: false
+      attributes:
+        defer: true
+    assets/js/components/combo-box-location.js:
+      preprocess: false
+      attributes:
+        defer: true
+
 tabbed-nav:
   version: 2024-06-21
   js:
diff --git a/web/themes/new_weather_theme/templates/block/block--weathergov-location-search.html.twig b/web/themes/new_weather_theme/templates/block/block--weathergov-location-search.html.twig
index 9a4081f3a..552011bdc 100644
--- a/web/themes/new_weather_theme/templates/block/block--weathergov-location-search.html.twig
+++ b/web/themes/new_weather_theme/templates/block/block--weathergov-location-search.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library("new_weather_theme/location-combo-box") }}
+{{ attach_library("new_weather_theme/combo-box-location") }}
 {{ attach_library("new_weather_theme/browser-location-button") }}
 
 <div class="wx-location-search">
@@ -16,8 +16,8 @@
         </div>
         <div class="grid-row">
             <div class="tablet:grid-col-6">
-              <wx-combo-box class="z-top margin-top-1 tablet:margin-bottom-3 tablet:margin-right-105" id="search-combo-box" {% if content.place %}data-place="{{ content.place.city }}{% if content.place.state %}, {{ content.place.state }}{% endif %}"{% endif %}}>
-              </wx-combo-box>
+              <wx-combo-box-location class="z-top margin-top-1 tablet:margin-bottom-3 tablet:margin-right-105" id="search-combo-box" {% if content.place %}data-place="{{ content.place.city }}{% if content.place.state %}, {{ content.place.state }}{% endif %}"{% endif %}}>
+              </wx-combo-box-location>
             </div>
             <div class="font-sans-md text-primary-dark tablet:grid-col-6 margin-top-105 margin-bottom-105">
               <div class="grid-col">
diff --git a/web/themes/new_weather_theme/templates/layout/afd-page.html.twig b/web/themes/new_weather_theme/templates/layout/afd-page.html.twig
index d8c06ae6d..3e91308e3 100644
--- a/web/themes/new_weather_theme/templates/layout/afd-page.html.twig
+++ b/web/themes/new_weather_theme/templates/layout/afd-page.html.twig
@@ -1,3 +1,4 @@
+{{ attach_library("new_weather_theme/combo-box") }}
 {% set wfo = wfo | upper %}
 
 <div class="layout-container grid-row height-full flex-column flex-no-wrap">
@@ -34,13 +35,12 @@
                     <label for="wfo-selector" class="usa-label margin-top-0">
                         Forecast office:
                     </label>
-                    <select id="wfo-selector" name="wfo" class="usa-select maxw-none tablet:maxw-mobile-lg">
-                        {% for office in wfo_list %}
-                            <option value="{{office.code}}"{% if office.code == wfo %} selected{% endif %}>
-                                {{office.name}} ({{office.code}})
-                            </option>
-                        {% endfor %}
-                    </select>
+
+                    <wx-combo-box
+                        name="wfo"
+                        items="{{ wfo_list | map(wfo => ({ value: wfo.code, text: wfo.name ~ " (" ~ wfo.code ~ ")", wfo })) | json_encode }}"
+                        selected="{{ wfo }}">
+                    </wx-combo-box>
 
                     {% if version_list | length > 0 %}
                         <label for="version-selector" class="usa-label">Versions for {{wfo | upper}}: </label>
diff --git a/web/themes/new_weather_theme/templates/layout/frontpage.html.twig b/web/themes/new_weather_theme/templates/layout/frontpage.html.twig
index 43ac8557e..fcb2c9a09 100644
--- a/web/themes/new_weather_theme/templates/layout/frontpage.html.twig
+++ b/web/themes/new_weather_theme/templates/layout/frontpage.html.twig
@@ -1,4 +1,4 @@
-{{ attach_library("new_weather_theme/location-combo-box") }}
+{{ attach_library("new_weather_theme/combo-box-location") }}
 {{ attach_library("new_weather_theme/browser-location-button") }}
 <div class="bg-primary-darker wx-bg-satellite padding-y-4 tablet:padding-top-7 tablet:padding-bottom-8">
   <div class="grid-container">
@@ -30,8 +30,8 @@
               </svg>{{ 'Use my location' | t }}
             </button>
         </div>
-        <wx-combo-box class="z-top margin-top-105" id="search-combo-box">
-        </wx-combo-box>
+        <wx-combo-box-location class="z-top margin-top-105" id="search-combo-box">
+        </wx-combo-box-location>
       </form>      
     </div>
     <div class="grid-row font-sans-md text-white tablet:grid-offset-2">
diff --git a/web/themes/new_weather_theme/tests/components/combo-box-tests.js b/web/themes/new_weather_theme/tests/components/combo-box-location-tests.js
similarity index 84%
rename from web/themes/new_weather_theme/tests/components/combo-box-tests.js
rename to web/themes/new_weather_theme/tests/components/combo-box-location-tests.js
index 951ed0568..a007cc3e9 100644
--- a/web/themes/new_weather_theme/tests/components/combo-box-tests.js
+++ b/web/themes/new_weather_theme/tests/components/combo-box-location-tests.js
@@ -1,15 +1,22 @@
 /* eslint no-unused-expressions: off */
 require("jsdom-global")(undefined, { url: "http://localhost/" });
 require("../../assets/js/components/combo-box.js");
+
+// The location combobox needs the base combobox to inherit from, so set it
+// globally.
+global.ComboBox = window.customElements.get("wx-combo-box");
+
+require("../../assets/js/components/combo-box-location.js");
 require("whatwg-fetch");
-//const { assert, expect, should } = require("chai");
-let assert, expect, should;
-import("chai").then((module) => {
+
+let assert;
+let expect;
+
+const chaiPromise = import("chai").then((module) => {
   assert = module.assert;
   expect = module.expect;
-  should = module.should;
 });
-const { createSandbox, stub, spy, mock } = require("sinon");
+const { createSandbox, stub } = require("sinon");
 
 global.HTMLElement = window.HTMLElement;
 
@@ -19,7 +26,7 @@ HTMLElement.prototype.scrollIntoView = stub();
 HTMLFormElement.prototype.submit = stub();
 
 const wait = async (milliseconds) => {
-  await new Promise((resolve, reject) => {
+  await new Promise((resolve) => {
     setTimeout(() => {
       resolve();
     }, milliseconds);
@@ -170,7 +177,7 @@ const SEARCH_RESULT_ITEMS = {
     },
 };
 
-global.fetch = mockFetch = (url) => {
+global.fetch = async (url) => {
   const parsedUrl = new URL(url);
   if (parsedUrl.pathname.includes("suggest")) {
     return window.Promise.resolve(
@@ -179,42 +186,38 @@ global.fetch = mockFetch = (url) => {
         headers: { "Content-Type": "application/json" },
       }),
     );
-  } else {
-    const key = parsedUrl.searchParams.get("magicKey");
-    const data = SEARCH_RESULT_ITEMS[key];
-    return Promise.resolve(
-      new Response(JSON.stringify(data), {
-        status: 200,
-        headers: { "Content-Type": "application/json" },
-      }),
-    );
   }
+
+  const key = parsedUrl.searchParams.get("magicKey");
+  const data = SEARCH_RESULT_ITEMS[key];
+
+  return new Response(JSON.stringify(data), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
 };
 
 describe("Combo box unit tests", () => {
   before((done) => {
-    import("../../assets/js/components/combo-box.js").then(() => {
-      const box = window.document.createElement("wx-combo-box");
-      window.document.body.append(box);
+    chaiPromise.then(() => {
       done();
     });
   });
+
   beforeEach(() => {
     window.document.body.innerHTML = "";
-    const box = document.querySelector("wx-combo-box");
-    if (!box) {
-      document.body.append(document.createElement("wx-combo-box"));
-    }
+    const box = window.document.createElement("wx-combo-box-location");
+    window.document.body.append(box);
   });
 
   it("Has the element", () => {
-    assert.exists(window.document.querySelector("wx-combo-box"));
-    assert.exists(window.customElements.get("wx-combo-box"));
+    assert.exists(window.document.querySelector("wx-combo-box-location"));
+    assert.exists(window.customElements.get("wx-combo-box-location"));
   });
 
   it("Element has the correct auto-generated id", () => {
-    const component = document.querySelector("wx-combo-box");
-    const expected = "combo-box-1";
+    const component = document.querySelector("wx-combo-box-location");
+    const expected = "combo-box-2";
     const actual = component.id;
 
     expect(expected).to.equal(actual);
@@ -222,14 +225,15 @@ describe("Combo box unit tests", () => {
 
   describe("Input initialization", () => {
     it("Adds an input element automatically", () => {
-      expect(document.querySelector("wx-combo-box > input")).to.exist;
+      expect(document.querySelector("wx-combo-box-location > input")).to.exist;
     });
+
     it("Adds the correct aria-related attributes to the input", () => {
-      const input = document.querySelector("wx-combo-box > input");
+      const input = document.querySelector("wx-combo-box-location > input");
       const attrs = [
         ["role", "combobox"],
-        ["aria-owns", "combo-box-1--list"],
-        ["aria-controls", "combo-box-1--list"],
+        ["aria-owns", "combo-box-4--list"],
+        ["aria-controls", "combo-box-4--list"],
         ["aria-autocomplete", "none"],
         ["aria-activedescendant", ""],
         ["autocomplete", "off"],
@@ -248,18 +252,18 @@ describe("Combo box unit tests", () => {
 
   describe("listbox initialization", () => {
     it("Adds a listbox list wrapper automatically", () => {
-      expect(document.querySelector("wx-combo-box > div")).to.exist;
+      expect(document.querySelector("wx-combo-box-location > div")).to.exist;
     });
 
     it("Adds the expected id automatically", () => {
-      const expected = "combo-box-1--list";
-      const actual = document.querySelector("wx-combo-box div").id;
+      const expected = "combo-box-6--list";
+      const actual = document.querySelector("wx-combo-box-location div").id;
 
       expect(actual).to.equal(expected);
     });
 
     it("Adds the correct aria-related attributes", () => {
-      const listbox = document.querySelector("wx-combo-box > div");
+      const listbox = document.querySelector("wx-combo-box-location > div");
       const attrs = [["role", "listbox"]];
 
       attrs.forEach((pair) => {
@@ -277,9 +281,9 @@ describe("Combo box unit tests", () => {
     beforeEach(() => {
       sandbox = createSandbox();
       window.document.body.innerHTML = "";
-      const box = document.createElement("wx-combo-box");
+      const box = document.createElement("wx-combo-box-location");
       document.body.append(box);
-      assert.exists(window.customElements.get("wx-combo-box"));
+      assert.exists(window.customElements.get("wx-combo-box-location"));
     });
 
     afterEach(() => {
@@ -288,7 +292,7 @@ describe("Combo box unit tests", () => {
 
     it("Expects the component's updateSearch method to have been called on input", async () => {
       const event = new Event("input", { bubbles: true });
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const input = component.querySelector("input");
       input.focus();
       input.value = "Arlin";
@@ -301,7 +305,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Expects showList to have been called when updateSearch completes", async () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       sandbox.spy(component, "showList");
       await component.updateSearch("Arlin");
 
@@ -309,7 +313,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Expects showList / hideList to toggle aria-expanded (input) and expanded (element)", async () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       component.showList();
       expect(component.getAttribute("expanded")).to.equal("true");
       expect(component.input.getAttribute("aria-expanded")).to.equal("true");
@@ -324,9 +328,9 @@ describe("Combo box unit tests", () => {
     beforeEach(async () => {
       sandbox = createSandbox();
       window.document.body.innerHTML = "";
-      const box = document.createElement("wx-combo-box");
+      const box = document.createElement("wx-combo-box-location");
       document.body.append(box);
-      assert.exists(window.customElements.get("wx-combo-box"));
+      assert.exists(window.customElements.get("wx-combo-box-location"));
       await box.updateSearch("Arlin");
     });
 
@@ -335,7 +339,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Selects the first element in the dropdown automatically", () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const listbox = component.querySelector("ul");
       const firstItem = listbox.querySelector("li:first-child");
       const actual = firstItem.getAttribute("aria-selected");
@@ -348,7 +352,7 @@ describe("Combo box unit tests", () => {
         key: "ArrowDown",
         bubbles: true,
       });
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const listbox = component.querySelector("ul");
       const input = component.querySelector("input[slot='input']");
       input.focus();
@@ -368,8 +372,7 @@ describe("Combo box unit tests", () => {
         key: "ArrowUp",
         bubbles: true,
       });
-      const component = document.querySelector("wx-combo-box");
-      const listbox = component.querySelector("ul");
+      const component = document.querySelector("wx-combo-box-location");
       const input = component.querySelector("input[slot='input']");
       input.focus();
 
@@ -383,7 +386,7 @@ describe("Combo box unit tests", () => {
         key: "ArrowDown",
         bubbles: true,
       });
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const listbox = component.querySelector("ul");
       const input = component.querySelector("input[slot='input']");
       listbox
@@ -399,7 +402,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Hides the result list if the input loses focus", () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       expect(component.isShowingList).to.be.true;
 
       const event = new window.FocusEvent("blur", { bubbles: true });
@@ -414,9 +417,9 @@ describe("Combo box unit tests", () => {
     beforeEach(async () => {
       sandbox = createSandbox();
       window.document.body.innerHTML = "";
-      const box = document.createElement("wx-combo-box");
+      const box = document.createElement("wx-combo-box-location");
       document.body.append(box);
-      assert.exists(window.customElements.get("wx-combo-box"));
+      assert.exists(window.customElements.get("wx-combo-box-location"));
       await box.updateSearch("Arlin");
     });
 
@@ -425,7 +428,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("When pushing Enter when the second item is selected _and_ submitted", () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       component.showList();
       const secondItem = component.querySelector(
         "div[role='listbox'] > ul > li[role='option']:nth-child(2)",
@@ -447,7 +450,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("When clicking the second item, it is selected and submit is called", () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const secondItem = component.querySelector(
         "div[role='listbox'] > ul > li:nth-child(2)",
       );
@@ -463,7 +466,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Can get the geodata from a value key", async () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const secondItem = component.querySelector(
         "div[role='listbox'] > ul > li:nth-child(2)",
       );
@@ -479,7 +482,7 @@ describe("Combo box unit tests", () => {
     });
 
     it("Updates the parent form action with the correct value on submit", async () => {
-      const component = document.querySelector("wx-combo-box");
+      const component = document.querySelector("wx-combo-box-location");
       const form = document.createElement("form");
       form.setAttribute("data-location-search", "");
       form.append(component);
@@ -528,7 +531,7 @@ describe("Combo box unit tests", () => {
       global.fetch.resolves(response);
 
       window.document.body.innerHTML = "";
-      box = document.createElement("wx-combo-box");
+      box = document.createElement("wx-combo-box-location");
       document.body.append(form);
       form.append(box);
     });
@@ -539,7 +542,7 @@ describe("Combo box unit tests", () => {
       });
 
       it("when a user chooses a location", () => {
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.input.value = "chosen place";
         component.url = "https://place.com";
         component.submit();
@@ -556,7 +559,7 @@ describe("Combo box unit tests", () => {
 
       it("when a user loads a location page", () => {
         window.document.body.innerHTML = "";
-        const component = document.createElement("wx-combo-box");
+        const component = document.createElement("wx-combo-box-location");
         component.setAttribute("data-place", "Placeville, ST");
         document.body.append(form);
         form.append(component);
@@ -575,7 +578,7 @@ describe("Combo box unit tests", () => {
           .withArgs("wxgov_recent_locations")
           .returns(JSON.stringify(previous));
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.input.value = "chosen place";
         component.url = "https://place.com";
         component.submit();
@@ -601,7 +604,7 @@ describe("Combo box unit tests", () => {
           .withArgs("wxgov_recent_locations")
           .returns(JSON.stringify(previous));
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.input.value = "chosen place";
         component.url = "https://place.com";
         component.submit();
@@ -622,7 +625,7 @@ describe("Combo box unit tests", () => {
     describe("shows previously-saved results", () => {
       beforeEach(async () => {
         window.document.body.innerHTML = "";
-        box = document.createElement("wx-combo-box");
+        box = document.createElement("wx-combo-box-location");
         document.body.append(box);
 
         response.ok = true;
@@ -634,7 +637,7 @@ describe("Combo box unit tests", () => {
           JSON.stringify([{ text: "saved result", url: "https:/com.place" }]),
         );
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.updateSearch("");
         await wait(0);
         const items = component.querySelectorAll(
@@ -657,7 +660,7 @@ describe("Combo box unit tests", () => {
           JSON.stringify([{ text: "saved result", url: "https:/com.place" }]),
         );
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.updateSearch("");
         await wait(0);
         const items = component.querySelectorAll(
@@ -684,7 +687,7 @@ describe("Combo box unit tests", () => {
           ]),
         );
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.updateSearch("res");
         await wait(0);
         const items = component.querySelectorAll(
@@ -704,7 +707,7 @@ describe("Combo box unit tests", () => {
             JSON.stringify([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]),
           );
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         component.saveSearchResult({ url: "new" });
 
         expect(
@@ -728,7 +731,7 @@ describe("Combo box unit tests", () => {
             ]),
           );
 
-        const component = document.querySelector("wx-combo-box");
+        const component = document.querySelector("wx-combo-box-location");
         const results = component.getSavedResults("");
 
         // deep equality, not reference equality