diff --git a/packages/lab/src/__tests__/__e2e__/tabs-next/TabsNext.cy.tsx b/packages/lab/src/__tests__/__e2e__/tabs-next/TabsNext.cy.tsx
index 54ed483d7be..6053eb39f56 100644
--- a/packages/lab/src/__tests__/__e2e__/tabs-next/TabsNext.cy.tsx
+++ b/packages/lab/src/__tests__/__e2e__/tabs-next/TabsNext.cy.tsx
@@ -1,27 +1,473 @@
+import {
+  TabBar,
+  TabListNext,
+  TabNext,
+  TabNextPanel,
+  TabNextTrigger,
+  TabsNext,
+} from "@salt-ds/lab";
 import * as tabsStories from "@stories/tabs-next/tabs-next.stories";
 import { composeStories } from "@storybook/react-vite";
+import { type ReactElement, useEffect, useState } from "react";
 
 const {
   Bordered,
   DisabledTabs,
   Overflow,
   AddTabs,
-  Closable,
+  Dismissible,
   AddWithDialog,
-  CloseWithConfirmation,
+  DismissWithConfirmation,
   WithInteractiveElementInPanel,
   Controlled,
+  AsyncDismissibleTabs,
 } = composeStories(tabsStories);
 
+const selectorSafeTabs = [
+  "Home",
+  "Transactions",
+  'Loan "A"',
+  "Checks",
+  "Liquidity",
+];
+
+const dynamicOverflowTabs = [
+  "Home",
+  "Transactions",
+  "Loans",
+  "Checks",
+  "Liquidity",
+  "With",
+  "Lots",
+  "More",
+  "Additional",
+  "Tabs",
+  "Added",
+  "In order to",
+  "Showcase overflow",
+  "Menu",
+  "On",
+  "Larger",
+  "Screens",
+];
+
+type ResponsiveOverflowWindow = Cypress.AUTWindow & {
+  __setResponsiveOverflowWidth?: (width: number) => void;
+  __setDynamicOverflowWidth?: (width: number) => void;
+};
+
+type OverflowOrderWindow = Cypress.AUTWindow & {
+  __overflowOrderObserver?: MutationObserver;
+  __overflowOrderSnapshots?: string[][];
+};
+
+type PortalContractWindow = Cypress.AUTWindow & {
+  __setPortalContractWidth?: (width: number) => void;
+};
+
+let nextTrackedTabInstanceId = 0;
+
+function TrackedTabContent({ label }: { label: string }) {
+  const [instanceId] = useState(() => {
+    nextTrackedTabInstanceId += 1;
+    return nextTrackedTabInstanceId;
+  });
+
+  return (
+    <span data-instance-label={label}>{`${label} instance ${instanceId}`}</span>
+  );
+}
+
+function OverflowWithSelectorSafeValues() {
+  return (
+    <div style={{ width: 198 }}>
+      <TabsNext defaultValue={selectorSafeTabs[0]}>
+        <TabBar inset divider>
+          <TabListNext>
+            {selectorSafeTabs.map((label) => (
+              <TabNext key={label} value={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowAfterWidthOnlyContentChange() {
+  const [expanded, setExpanded] = useState(false);
+  const tabs = [
+    { value: "Home", label: "Home" },
+    {
+      value: "Transactions",
+      label: expanded ? "Transactions with a much longer label" : "Tx",
+    },
+    { value: "Loans", label: "Loans" },
+  ];
+
+  return (
+    <>
+      <div style={{ width: 230 }}>
+        <TabsNext defaultValue={tabs[0].value}>
+          <TabBar inset divider>
+            <TabListNext aria-label="Width change tablist">
+              {tabs.map(({ value, label }) => (
+                <TabNext key={value} value={value}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
+      <button onClick={() => setExpanded(true)} type="button">
+        Expand label
+      </button>
+    </>
+  );
+}
+
+function OverflowAfterContainerWidthChange() {
+  const [width, setWidth] = useState(150);
+
+  useEffect(() => {
+    Object.assign(window, {
+      __setResponsiveOverflowWidth: setWidth,
+    });
+
+    return () => {
+      delete (
+        window as Window & {
+          __setResponsiveOverflowWidth?: typeof setWidth;
+        }
+      ).__setResponsiveOverflowWidth;
+    };
+  }, []);
+
+  return (
+    <div style={{ width }}>
+      <TabsNext defaultValue={selectorSafeTabs[0]}>
+        <TabBar inset divider>
+          <TabListNext aria-label="Responsive overflow tablist">
+            {selectorSafeTabs.map((label) => (
+              <TabNext key={label} value={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowWithoutInitialSelection() {
+  return (
+    <div style={{ width: 198 }}>
+      <TabsNext>
+        <TabBar inset divider>
+          <TabListNext>
+            {selectorSafeTabs.map((label) => (
+              <TabNext key={label} value={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowWithControlledSelection() {
+  const [selected, setSelected] = useState(selectorSafeTabs[0]);
+
+  return (
+    <div style={{ width: 198 }}>
+      <TabsNext
+        value={selected}
+        onChange={(_event, nextValue) => setSelected(nextValue)}
+      >
+        <TabBar inset divider>
+          <TabListNext>
+            {selectorSafeTabs.map((label) => (
+              <TabNext key={label} value={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowWithIgnoredOverflowSelection() {
+  const [selected, setSelected] = useState(selectorSafeTabs[0]);
+
+  return (
+    <>
+      <div style={{ width: 198 }}>
+        <TabsNext value={selected} onChange={() => undefined}>
+          <TabBar inset divider>
+            <TabListNext>
+              {selectorSafeTabs.map((label) => (
+                <TabNext key={label} value={label}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
+      <button type="button" onClick={() => setSelected("Liquidity")}>
+        Select Liquidity externally
+      </button>
+    </>
+  );
+}
+
+function TabsNextWithEmptyStringValue() {
+  const tabs = [
+    { label: "Empty", value: "" },
+    { label: "Transactions", value: "transactions" },
+    { label: "Liquidity", value: "liquidity" },
+  ];
+
+  return (
+    <TabsNext defaultValue="">
+      <TabBar inset divider>
+        <TabListNext>
+          {tabs.map(({ label, value }) => (
+            <TabNext key={label} value={value}>
+              <TabNextTrigger>{label}</TabNextTrigger>
+            </TabNext>
+          ))}
+        </TabListNext>
+      </TabBar>
+      {tabs.map(({ label, value }) => (
+        <TabNextPanel key={label} value={value}>
+          {label}
+        </TabNextPanel>
+      ))}
+    </TabsNext>
+  );
+}
+
+function OverflowWithEmptyStringValue() {
+  const tabs = [
+    { label: "Home", value: "home" },
+    { label: "Transactions", value: "transactions" },
+    { label: "Empty", value: "" },
+    { label: "Liquidity", value: "liquidity" },
+    { label: "Checks", value: "checks" },
+  ];
+
+  return (
+    <div style={{ width: 198 }}>
+      <TabsNext defaultValue="home">
+        <TabBar inset divider>
+          <TabListNext>
+            {tabs.map(({ label, value }) => (
+              <TabNext key={label} value={value}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowWithDisabledHiddenTab() {
+  return (
+    <div style={{ width: 198 }}>
+      <TabsNext defaultValue={dynamicOverflowTabs[0]}>
+        <TabBar inset divider>
+          <TabListNext>
+            {dynamicOverflowTabs.map((label) => (
+              <TabNext
+                key={label}
+                value={label}
+                disabled={label === "Transactions"}
+              >
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowAfterClassBasedWidthChange() {
+  const [wide, setWide] = useState(false);
+
+  return (
+    <>
+      <style>
+        {`
+          .tabsNextClassSized {
+            width: 198px;
+          }
+
+          .tabsNextClassSizedWide {
+            width: 1048px;
+            max-width: 100%;
+          }
+        `}
+      </style>
+      <div
+        className={
+          wide
+            ? "tabsNextClassSized tabsNextClassSizedWide"
+            : "tabsNextClassSized"
+        }
+      >
+        <TabsNext defaultValue={selectorSafeTabs[0]}>
+          <TabBar inset divider>
+            <TabListNext aria-label="Class sized overflow tablist">
+              {selectorSafeTabs.map((label) => (
+                <TabNext key={label} value={label}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
+      <button onClick={() => setWide((current) => !current)} type="button">
+        Toggle class width
+      </button>
+    </>
+  );
+}
+
+function OverflowWithinContainer({ width }: { width: number }) {
+  return (
+    <div style={{ width }}>
+      <Overflow />
+    </div>
+  );
+}
+
+function DynamicOverflowBoundary() {
+  const [width, setWidth] = useState(408);
+
+  useEffect(() => {
+    Object.assign(window, {
+      __setDynamicOverflowWidth: setWidth,
+    });
+
+    return () => {
+      delete (
+        window as Window & {
+          __setDynamicOverflowWidth?: typeof setWidth;
+        }
+      ).__setDynamicOverflowWidth;
+    };
+  }, []);
+
+  return (
+    <div data-testid="tabs-next-overflow-boundary" style={{ width }}>
+      <TabsNext defaultValue={dynamicOverflowTabs[0]}>
+        <TabBar inset divider>
+          <TabListNext>
+            {dynamicOverflowTabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function OverflowWithTrackedTabContent() {
+  const [width, setWidth] = useState(198);
+
+  useEffect(() => {
+    Object.assign(window, {
+      __setPortalContractWidth: setWidth,
+    });
+
+    return () => {
+      delete (
+        window as Window & {
+          __setPortalContractWidth?: typeof setWidth;
+        }
+      ).__setPortalContractWidth;
+    };
+  }, []);
+
+  return (
+    <div style={{ width }}>
+      <TabsNext defaultValue={selectorSafeTabs[0]}>
+        <TabBar inset divider>
+          <TabListNext aria-label="Portal contract tablist">
+            {selectorSafeTabs.map((label) => (
+              <TabNext
+                key={label}
+                value={label}
+                data-root-marker={label}
+                data-root-state="preserved"
+              >
+                <TabNextTrigger>
+                  <TrackedTabContent label={label} />
+                </TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+}
+
+function clickOverflowTab(name: string | RegExp) {
+  cy.findByRole("tablist", { name: "Overflow tab options" })
+    .should("be.visible")
+    .within(() => {
+      cy.findByRole("tab", { name }).click();
+    });
+
+  cy.findByRole("tab", { name: "Overflow" }).should(
+    "have.attr",
+    "aria-expanded",
+    "false",
+  );
+}
+
+function assertSelectedMainTab(name: string) {
+  cy.findByRole("tablist").within(() => {
+    cy.findByRole("tab", { name, selected: true }).should("be.visible");
+  });
+}
+
+function mountTabsNext(
+  element: ReactElement,
+  options?: { width?: number | string },
+) {
+  cy.mount(
+    <div style={{ width: options?.width ?? 1280, minWidth: 0 }}>{element}</div>,
+  );
+}
+
 describe("Given a Tabstrip", () => {
   it("should render with tablist and tab roles", () => {
-    cy.mount(<Bordered />);
+    mountTabsNext(<Bordered />);
     cy.findByRole("tablist").should("be.visible");
     cy.findAllByRole("tab").should("have.length", 5);
   });
 
   it("should support keyboard navigation and wrap", () => {
-    cy.mount(<Bordered />);
+    mountTabsNext(<Bordered />);
     cy.realPress("Tab");
     cy.findByRole("tab", { name: "Home" }).should("be.focused");
     cy.realPress("ArrowRight");
@@ -38,13 +484,13 @@ describe("Given a Tabstrip", () => {
 
   it("should support selection with a mouse", () => {
     const changeSpy = cy.stub().as("changeSpy");
-    cy.mount(<Bordered onChange={changeSpy} />);
+    mountTabsNext(<Bordered onChange={changeSpy} />);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
-    cy.findByRole("tab", { name: "Transactions" }).realClick();
+    cy.findByRole("tab", { name: "Transactions" }).click();
     cy.findByRole("tab", { name: "Transactions" }).should(
       "have.attr",
       "aria-selected",
@@ -60,7 +506,7 @@ describe("Given a Tabstrip", () => {
 
   it("should support selection with the keyboard", () => {
     const changeSpy = cy.stub().as("changeSpy");
-    cy.mount(<Bordered onChange={changeSpy} />);
+    mountTabsNext(<Bordered onChange={changeSpy} />);
     cy.realPress("Tab");
     cy.findByRole("tab", { name: "Home" }).should("be.focused");
     cy.findByRole("tab", { name: "Home" }).should(
@@ -97,37 +543,38 @@ describe("Given a Tabstrip", () => {
     cy.findByRole("tab", { name: "Loans" }).should("be.focused");
   });
 
-  it("should allow keyboard navigation into the overflow menu", () => {
-    cy.mount(<Overflow />);
+  it("should allow keyboard access into and out of the overflow menu", () => {
+    mountTabsNext(<Overflow />);
 
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+    cy.findAllByRole("tab").should("have.length", 5);
 
     cy.realPress("Tab");
     cy.findByRole("tab", { name: "Home" }).should("be.focused");
 
     cy.realPress("ArrowLeft");
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 17);
-    cy.findByRole("tab", { name: "Screens" }).should("be.focused");
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
 
-    cy.realPress("ArrowUp");
-    cy.findByRole("tab", { name: "Larger" }).should("be.focused");
+    cy.realPress("Enter");
 
-    cy.realPress("ArrowLeft");
-    cy.findByRole("tab", { name: "On" }).should("be.focused");
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
 
-    cy.realPress("ArrowDown");
-    cy.findByRole("tab", { name: "Larger" }).should("be.focused");
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
+
+    cy.realPress("Escape");
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
   });
 
   it("should allow tabs to be disabled", () => {
     const changeSpy = cy.stub().as("changeSpy");
-    cy.mount(<DisabledTabs onChange={changeSpy} />);
+    mountTabsNext(<DisabledTabs onChange={changeSpy} />);
     cy.findByRole("tab", { name: "Loans" }).should(
       "have.attr",
       "aria-disabled",
       "true",
     );
-    cy.findByRole("tab", { name: "Loans" }).realClick();
+    cy.findByRole("tab", { name: "Loans" }).click();
     cy.findByRole("tab", { name: "Loans" }).should(
       "have.attr",
       "aria-selected",
@@ -138,140 +585,567 @@ describe("Given a Tabstrip", () => {
   });
 
   it("should overflow into a menu when there is not enough space to show all tabs", () => {
-    cy.mount(<Overflow />);
-    cy.findAllByRole("tab").should("have.length", 17);
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
-    cy.findAllByRole("tab").filter(":not(:visible)").should("have.length", 13);
-    cy.get("[data-overflowbutton]").should("be.visible");
+    mountTabsNext(<Overflow />);
+    cy.findAllByRole("tab").should("have.length", 5);
+    cy.findByRole("tab", { name: "Overflow" }).should("be.visible");
   });
 
   it("should allow keyboard navigation in the menu", () => {
-    cy.mount(
+    mountTabsNext(
       <>
         <Overflow />
         <button>end</button>
       </>,
     );
-    cy.get("[data-overflowbutton]").realClick();
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
     cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
     cy.realPress("ArrowDown");
     cy.findByRole("tab", { name: "With" }).should("be.focused");
     cy.realPress("End");
     cy.findByRole("tab", { name: "Screens" }).should("be.focused");
+    cy.realPress("Home");
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
     cy.realPress("Escape");
-    cy.findByRole("tab", { name: "Checks" }).should("be.focused");
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
     cy.realPress("Tab");
     cy.findByRole("button", { name: "end" }).should("be.focused");
   });
 
-  it("should close the overflow menu when a click is detected outside", () => {
-    cy.mount(<Overflow />);
+  it("should navigate past a disabled tab in the overflow menu", () => {
+    mountTabsNext(<OverflowWithDisabledHiddenTab />);
 
-    cy.get("[data-overflowbutton]").realClick();
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 17);
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
 
-    cy.wait(500);
+    cy.findByRole("tab", { name: "Transactions" })
+      .should("be.focused")
+      .and("have.attr", "aria-disabled", "true");
+
+    cy.realPress("ArrowDown");
+    cy.findByRole("tab", { name: "Loans" }).should("be.focused");
+  });
+
+  it("should restore focus correctly after opening the menu with a mouse", () => {
+    mountTabsNext(
+      <>
+        <Overflow />
+        <button>end</button>
+      </>,
+    );
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
+    cy.realPress("Escape");
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
+    cy.realPress("Tab");
+    cy.findByRole("button", { name: "end" }).should("be.focused");
+  });
+
+  it("should dismiss the overflow menu when a click is detected outside", () => {
+    mountTabsNext(<Overflow />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findAllByRole("tab").should("have.length", 18);
 
     cy.get("body").click(0, 0);
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+    cy.findAllByRole("tab").should("have.length", 5);
   });
 
   it("should allow selection in the menu", () => {
-    cy.mount(<Overflow />);
+    mountTabsNext(<Overflow />);
+
+    cy.findAllByRole("tab").should("have.length", 5);
 
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
 
-    cy.get("[data-overflowbutton]").realClick();
-    cy.findByRole("tab", { name: "Liquidity" }).realClick();
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
 
-    cy.findByRole("tab", { name: "Liquidity" })
+    clickOverflowTab("Liquidity");
+    cy.findByRole("tab", { name: "Liquidity", selected: true })
       .should("have.attr", "aria-selected", "true")
-      .should("be.focused");
+      .and("be.focused");
 
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findByRole("tab", { name: "Checks" }).should("be.focused");
 
-    cy.get("[data-overflowbutton]").realClick();
     cy.realPress("Enter");
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "not.exist",
+    );
     cy.findByRole("tab", { name: "Checks" })
       .should("have.attr", "aria-selected", "true")
       .should("be.focused");
   });
 
+  it("should not temporarily remove an extra main tab when selecting from overflow", () => {
+    mountTabsNext(<Overflow />);
+
+    cy.window().then((win) => {
+      const overflowOrderWindow = win as OverflowOrderWindow;
+      const tablist = win.document.querySelector('[role="tablist"]');
+
+      expect(tablist).to.exist;
+      if (!tablist) {
+        throw new Error("Expected tablist to exist");
+      }
+
+      const getMainTabOrder = () =>
+        Array.from(
+          tablist.querySelectorAll(':scope > [data-tabslot] [role="tab"]'),
+        ).map((tab) => tab.textContent?.trim() ?? "");
+
+      overflowOrderWindow.__overflowOrderSnapshots = [getMainTabOrder()];
+      overflowOrderWindow.__overflowOrderObserver = new win.MutationObserver(
+        () => {
+          overflowOrderWindow.__overflowOrderSnapshots?.push(getMainTabOrder());
+        },
+      );
+      overflowOrderWindow.__overflowOrderObserver.observe(tablist, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["aria-selected"],
+      });
+    });
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+
+    cy.window().then(
+      (win) =>
+        new Cypress.Promise<void>((resolve) => {
+          const overflowOrderWindow = win as OverflowOrderWindow;
+          win.requestAnimationFrame(() => {
+            win.requestAnimationFrame(() => {
+              overflowOrderWindow.__overflowOrderObserver?.disconnect();
+              resolve();
+            });
+          });
+        }),
+    );
+
+    cy.window().then((win) => {
+      const overflowOrderWindow = win as OverflowOrderWindow;
+      const snapshots = overflowOrderWindow.__overflowOrderSnapshots ?? [];
+
+      expect(snapshots).to.deep.include([
+        "Home",
+        "Transactions",
+        "Loans",
+        "Liquidity",
+      ]);
+      expect(snapshots).not.to.deep.include([
+        "Home",
+        "Transactions",
+        "Liquidity",
+      ]);
+    });
+  });
+
+  it("should announce when a selected overflow tab moves to the main list", () => {
+    mountTabsNext(<Overflow />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+    assertSelectedMainTab("Liquidity");
+    cy.get("[aria-live]", { timeout: 8000 }).should(
+      "contain.text",
+      "Liquidity moved to main tab list",
+    );
+  });
+
+  it("should announce when the first selection comes from overflow", () => {
+    mountTabsNext(<OverflowWithoutInitialSelection />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+    assertSelectedMainTab("Liquidity");
+    cy.get("[aria-live]", { timeout: 8000 }).should(
+      "contain.text",
+      "Liquidity moved to main tab list",
+    );
+  });
+
+  it("should make the first visible tab tabbable when there is no initial selection", () => {
+    mountTabsNext(
+      <>
+        <OverflowWithoutInitialSelection />
+        <button type="button">After</button>
+      </>,
+    );
+
+    cy.realPress("Tab");
+    cy.findByRole("tab", { name: "Home" }).should("be.focused");
+
+    cy.realPress("Tab");
+    cy.findByRole("button", { name: "After" }).should("be.focused");
+  });
+
+  it("should announce when a controlled parent immediately applies an overflow selection", () => {
+    mountTabsNext(<OverflowWithControlledSelection />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+
+    assertSelectedMainTab("Liquidity");
+    cy.get("[aria-live]", { timeout: 8000 }).should(
+      "contain.text",
+      "Liquidity moved to main tab list",
+    );
+  });
+
+  it("should not announce when the same overflow value is later set externally after being ignored", () => {
+    mountTabsNext(<OverflowWithIgnoredOverflowSelection />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+    cy.findByRole("tab", { name: "Home", selected: true }).should("be.visible");
+
+    cy.findByRole("button", { name: "Select Liquidity externally" }).click();
+
+    assertSelectedMainTab("Liquidity");
+    cy.get("[aria-live]").should(
+      "not.contain.text",
+      "Liquidity moved to main tab list",
+    );
+  });
+
+  it("should preserve custom tab props and content instances while moving through overflow", () => {
+    let homeInstance = "";
+    let liquidityInstance = "";
+
+    mountTabsNext(<OverflowWithTrackedTabContent />);
+
+    cy.findByRole("tablist", { name: "Portal contract tablist" }).within(() => {
+      cy.get('[data-slotid="main:Home"] [data-tab-host="Home"]').should(
+        "exist",
+      );
+    });
+
+    cy.get('[data-instance-label="Home"]')
+      .invoke("text")
+      .then((text) => {
+        homeInstance = text;
+      });
+    cy.get('[data-instance-label="Liquidity"]')
+      .invoke("text")
+      .then((text) => {
+        liquidityInstance = text;
+      });
+
+    cy.get('[data-root-marker="Home"][data-root-state="preserved"]').should(
+      "exist",
+    );
+
+    cy.window().then((win) => {
+      const portalContractWindow = win as PortalContractWindow;
+      portalContractWindow.__setPortalContractWidth?.(1000);
+    });
+
+    cy.findByRole("tab", { name: "Overflow" }).should("not.exist");
+
+    cy.then(() => {
+      cy.get('[data-instance-label="Home"]').should("have.text", homeInstance);
+    });
+    cy.then(() => {
+      cy.get('[data-instance-label="Liquidity"]').should(
+        "have.text",
+        liquidityInstance,
+      );
+    });
+
+    cy.window().then((win) => {
+      const portalContractWindow = win as PortalContractWindow;
+      portalContractWindow.__setPortalContractWidth?.(198);
+    });
+
+    cy.findByRole("tab", { name: "Overflow" }).should("be.visible");
+    cy.findByRole("tab", { name: "Overflow" }).click();
+
+    cy.findByRole("tablist", { name: "Overflow tab options" })
+      .should("be.visible")
+      .within(() => {
+        cy.get(
+          '[data-root-marker="Liquidity"][data-root-state="preserved"]',
+        ).should("exist");
+      });
+
+    cy.then(() => {
+      cy.get('[data-instance-label="Liquidity"]').should(
+        "have.text",
+        liquidityInstance,
+      );
+    });
+
+    clickOverflowTab(/^Liquidity instance /);
+
+    cy.findByRole("tablist", { name: "Portal contract tablist" }).within(() => {
+      cy.get(
+        '[data-root-marker="Liquidity"][data-root-state="preserved"]',
+      ).should("exist");
+    });
+    cy.then(() => {
+      cy.get('[data-instance-label="Liquidity"]').should(
+        "have.text",
+        liquidityInstance,
+      );
+    });
+  });
+
   it("should allow selection in the menu when only having enough space for the newly selected tab", () => {
-    cy.mount(<Overflow />);
+    mountTabsNext(<OverflowWithinContainer width={140} />);
 
-    cy.findByRole("tablist").invoke("css", "max-width", 140);
-    cy.wait(500);
+    cy.findByRole("tab", { name: "Home" }).should(
+      "have.attr",
+      "aria-selected",
+      "true",
+    );
 
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 1);
+    cy.findAllByRole("tab").should("have.length", 2);
 
-    cy.get("[data-overflowbutton]").realClick();
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 14); // overflow menu shown
-    cy.findByRole("tab", { name: "Liquidity" }).realClick();
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 1); // overflow menu hidden
+    cy.findByRole("tab", { name: "Overflow" }).click();
 
-    cy.findByRole("tab", { name: "Liquidity" })
-      .should("have.attr", "aria-selected", "true")
-      .should("be.focused");
+    cy.findAllByRole("tab").should("have.length", 18); // overflow menu shown
+
+    cy.findByRole("tab", { name: "Transactions" }).should("be.focused");
+
+    clickOverflowTab("Liquidity");
+
+    cy.findAllByRole("tab").should("have.length", 2); // overflow menu hidden
+
+    cy.findByRole("tab", { name: "Liquidity", selected: true }).should(
+      "be.focused",
+    );
+  });
+
+  it("should allow overflow selection when values contain selector characters", () => {
+    mountTabsNext(<OverflowWithSelectorSafeValues />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab('Loan "A"');
+
+    cy.findByRole("tab", { name: 'Loan "A"', selected: true }).should(
+      "be.focused",
+    );
+  });
+
+  it("should keep the overflow menu closed when overflow returns after being removed by resize", () => {
+    mountTabsNext(<OverflowAfterContainerWidthChange />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.window().then((win) => {
+      const responsiveWindow = win as ResponsiveOverflowWindow;
+      responsiveWindow.__setResponsiveOverflowWidth?.(1000);
+    });
+    cy.findByRole("tab", { name: "Overflow" }).should("not.exist");
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "not.exist",
+    );
+
+    cy.window().then((win) => {
+      const responsiveWindow = win as ResponsiveOverflowWindow;
+      responsiveWindow.__setResponsiveOverflowWidth?.(150);
+    });
+    cy.findByRole("tab", { name: "Overflow" })
+      .should("be.visible")
+      .and("have.attr", "aria-expanded", "false");
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "not.exist",
+    );
+  });
+
+  it("should recompute overflow when sizing is driven by CSS classes", () => {
+    mountTabsNext(<OverflowAfterClassBasedWidthChange />);
+
+    cy.findByRole("tablist", { name: "Class sized overflow tablist" }).within(
+      () => {
+        cy.findByRole("tab", { name: "Overflow" }).should("be.visible");
+      },
+    );
+
+    cy.findByRole("button", { name: "Toggle class width" }).click();
+
+    cy.findByRole("tablist", { name: "Class sized overflow tablist" }).within(
+      () => {
+        cy.findByRole("tab", { name: "Overflow" }).should("not.exist");
+      },
+    );
+
+    cy.findByRole("button", { name: "Toggle class width" }).click();
+
+    cy.findByRole("tablist", { name: "Class sized overflow tablist" }).within(
+      () => {
+        cy.findByRole("tab", { name: "Overflow" })
+          .should("be.visible")
+          .and("have.attr", "aria-expanded", "false");
+      },
+    );
+  });
+
+  it("should recompute overflow when tab content changes width without resizing the container", () => {
+    mountTabsNext(<OverflowAfterWidthOnlyContentChange />);
+
+    cy.findByRole("tablist", { name: "Width change tablist" }).within(() => {
+      cy.findByRole("tab", { name: "Overflow" }).should("not.exist");
+    });
+
+    cy.findByRole("button", { name: "Expand label" }).click();
+
+    cy.findByRole("tablist", { name: "Width change tablist" }).within(() => {
+      cy.findByRole("tab", { name: "Overflow" }).should("be.visible");
+    });
+  });
+
+  it("should keep a pinned overflow tab visible when selection moves to an already visible tab", () => {
+    mountTabsNext(<Overflow />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Liquidity");
+    assertSelectedMainTab("Liquidity");
+
+    cy.findByRole("tab", { name: "Transactions" }).click();
+    assertSelectedMainTab("Transactions");
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.visible");
   });
 
   it("should support adding tabs", () => {
-    cy.mount(<AddTabs />);
+    mountTabsNext(<AddTabs />);
     cy.findAllByRole("tab").should("have.length", 3);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
-    cy.findByRole("button", { name: "Add tab" }).realClick();
+    cy.findByRole("button", { name: "Add tab" }).click();
     cy.findAllByRole("tab").should("have.length", 4);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
       "aria-selected",
-      "true",
+      "false",
     );
-    cy.findByRole("tab", { name: "New tab" }).should("be.visible");
+    cy.findByRole("tab", { name: "New tab" })
+      .should("be.visible")
+      .and("have.attr", "aria-selected", "true");
     cy.findByRole("button", { name: "Add tab" }).should("be.focused");
   });
 
+  it("should reserve space for the add button when tabs overflow", () => {
+    mountTabsNext(
+      <div style={{ width: 420 }}>
+        <AddTabs />
+      </div>,
+    );
+
+    cy.findByRole("button", { name: "Add tab" }).click();
+    cy.findByRole("button", { name: "Add tab" }).click();
+    cy.findByRole("button", { name: "Add tab" }).click();
+
+    cy.findByRole("tab", { name: "Overflow" }).should("be.visible");
+
+    cy.findByRole("tablist").then(($tablist) => {
+      cy.findByRole("button", { name: "Add tab" }).then(($button) => {
+        const tablistRect = $tablist[0].getBoundingClientRect();
+        const buttonRect = $button[0].getBoundingClientRect();
+
+        expect(tablistRect.right).to.be.at.most(buttonRect.left);
+      });
+    });
+  });
+
   it("should support adding tabs with confirmation", () => {
-    cy.mount(<AddWithDialog />);
+    mountTabsNext(<AddWithDialog />);
     cy.findAllByRole("tab").should("have.length", 3);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
-    cy.findByRole("button", { name: "Add tab" }).realClick();
+    cy.findByRole("button", { name: "Add tab" }).click();
 
     cy.findByRole("dialog").should("be.visible");
-    cy.findByLabelText("New tab name").realClick();
+    cy.findByLabelText("New tab name").click();
     cy.realType("New tab");
-    cy.findByRole("button", { name: "Confirm" }).realClick();
+    cy.findByRole("button", { name: "Confirm" }).click();
 
     cy.findAllByRole("tab").should("have.length", 4);
-    cy.findByRole("tab", { name: "New tab" }).should("be.visible");
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
     cy.findByRole("button", { name: "Add tab" }).should("be.focused");
+
+    cy.get("body").then(($body) => {
+      if ($body.find("[data-overflowbutton]").length > 0) {
+        cy.findByRole("tab", { name: "Overflow" }).click();
+        cy.findByRole("tablist", { name: "Overflow tab options" }).within(
+          () => {
+            cy.findByRole("tab", { name: "New tab" }).should("be.visible");
+          },
+        );
+        return;
+      }
+
+      cy.findByRole("tab", { name: "New tab" }).should("be.visible");
+    });
   });
 
   it("should add the correct aria when tab actions are used", () => {
-    cy.mount(<Closable />);
-
-    // TODO: enable when aria-actions is supported in browsers.
-    // cy.findByRole("tab", { name: "Home" })
-    //   .invoke("attr", "aria-actions")
-    //   .then((actionId) => {
-    //     cy.findByRole("button", { name: "Home Close tab" }).should(
-    //       "have.attr",
-    //       "id",
-    //       actionId,
-    //     );
-    //   });
+    mountTabsNext(<Dismissible />);
 
     cy.findByRole("tab", { name: "Home" }).should(
       "have.accessibleDescription",
@@ -280,7 +1154,7 @@ describe("Given a Tabstrip", () => {
   });
 
   it("should support closing tabs with a mouse", () => {
-    cy.mount(<Closable />);
+    mountTabsNext(<Dismissible />);
 
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
@@ -289,7 +1163,7 @@ describe("Given a Tabstrip", () => {
     );
     cy.findAllByRole("tab").should("have.length", 5);
 
-    cy.findByRole("button", { name: "Liquidity Close tab" }).realClick();
+    cy.findByRole("button", { name: "Liquidity Dismiss tab" }).click();
     cy.findAllByRole("tab").should("have.length", 4);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
@@ -298,7 +1172,7 @@ describe("Given a Tabstrip", () => {
     );
     cy.findByRole("tab", { name: "Checks" }).should("be.focused");
 
-    cy.findByRole("button", { name: "Loans Close tab" }).realClick();
+    cy.findByRole("button", { name: "Loans Dismiss tab" }).click();
     cy.findAllByRole("tab").should("have.length", 3);
     cy.findByRole("tab", { name: "Home" }).should(
       "have.attr",
@@ -307,7 +1181,7 @@ describe("Given a Tabstrip", () => {
     );
     cy.findByRole("tab", { name: "Checks" }).should("be.focused");
 
-    cy.findByRole("button", { name: "Home Close tab" }).realClick();
+    cy.findByRole("button", { name: "Home Dismiss tab" }).click();
     cy.findAllByRole("tab").should("have.length", 2);
     cy.findByRole("tab", { name: "Transactions" }).should(
       "have.attr",
@@ -317,21 +1191,43 @@ describe("Given a Tabstrip", () => {
     cy.findByRole("tab", { name: "Transactions" }).should("be.focused");
   });
 
+  it("should restore focus when selected tab removal is async", () => {
+    mountTabsNext(<AsyncDismissibleTabs />);
+
+    cy.findByRole("button", { name: "Home Dismiss tab" }).click();
+    cy.findByRole("tab", { name: "Transactions" })
+      .should("have.attr", "aria-selected", "true")
+      .and("be.focused");
+  });
+
+  it("should call onChange with null when selection moves automatically after removal", () => {
+    const changeSpy = cy.stub().as("changeSpy");
+    mountTabsNext(<Dismissible onChange={changeSpy} />);
+
+    cy.findByRole("button", { name: "Home Dismiss tab" }).click();
+
+    cy.findByRole("tab", { name: "Transactions" })
+      .should("have.attr", "aria-selected", "true")
+      .and("be.focused");
+
+    cy.get("@changeSpy").should("have.been.calledWith", null, "Transactions");
+  });
+
   it("should support closing with a keyboard", () => {
-    cy.mount(<Closable />);
+    mountTabsNext(<Dismissible />);
     cy.findAllByRole("tab").should("have.length", 5);
 
     cy.realPress("Tab");
     cy.findByRole("tab", { name: "Home" }).should("be.focused");
 
     cy.realPress("Tab");
-    cy.findByRole("button", { name: "Home Close tab" }).should("be.focused");
+    cy.findByRole("button", { name: "Home Dismiss tab" }).should("be.focused");
 
     cy.realPress("ArrowRight");
     cy.findByRole("tab", { name: "Transactions" }).should("be.focused");
 
     cy.realPress("Tab");
-    cy.findByRole("button", { name: "Transactions Close tab" }).should(
+    cy.findByRole("button", { name: "Transactions Dismiss tab" }).should(
       "be.focused",
     );
 
@@ -339,7 +1235,7 @@ describe("Given a Tabstrip", () => {
     cy.findByRole("tab", { name: "Transactions" }).should("be.focused");
 
     cy.realPress(["Shift", "Tab"]);
-    cy.findByRole("button", { name: "Home Close tab" }).should("be.focused");
+    cy.findByRole("button", { name: "Home Dismiss tab" }).should("be.focused");
 
     cy.realPress("Enter");
 
@@ -353,20 +1249,20 @@ describe("Given a Tabstrip", () => {
   });
 
   it("should support closing with confirmation", () => {
-    cy.mount(<CloseWithConfirmation />);
+    mountTabsNext(<DismissWithConfirmation />);
     cy.findAllByRole("tab").should("have.length", 3);
 
-    cy.findAllByRole("button", { name: "Home Close tab" }).realClick();
+    cy.findAllByRole("button", { name: "Home Dismiss tab" }).click();
     cy.findByRole("dialog").should("be.visible");
 
-    cy.findByRole("button", { name: "No" }).realClick();
+    cy.findByRole("button", { name: "No" }).click();
     cy.findByRole("dialog").should("not.to.exist");
-    cy.findByRole("button", { name: "Home Close tab" }).should("be.focused");
+    cy.findByRole("button", { name: "Home Dismiss tab" }).should("be.focused");
 
-    cy.findAllByRole("button", { name: "Home Close tab" }).realClick();
+    cy.findAllByRole("button", { name: "Home Dismiss tab" }).click();
     cy.findByRole("dialog").should("be.visible");
 
-    cy.findByRole("button", { name: "Yes" }).realClick();
+    cy.findByRole("button", { name: "Yes" }).click();
     cy.findByRole("dialog").should("not.to.exist");
     cy.findAllByRole("tab").should("have.length", 2);
     cy.findByRole("tab", { name: "Transactions" }).should(
@@ -378,81 +1274,197 @@ describe("Given a Tabstrip", () => {
   });
 
   it("should set tab-index 0 on the panel when it contains non-tabbable elements", () => {
-    cy.mount(<Bordered />);
+    mountTabsNext(<Bordered />);
     cy.findByRole("tabpanel").should("have.attr", "tabIndex", "0");
   });
 
   it("should not set tab-index 0 on the panel when it contains tabbable elements", () => {
-    cy.mount(<WithInteractiveElementInPanel />);
+    mountTabsNext(<WithInteractiveElementInPanel />);
     cy.findByRole("tabpanel").should("not.have.attr", "tabIndex");
   });
 
   it("should associate panels with tabs", () => {
-    cy.mount(<Bordered />);
+    mountTabsNext(<Bordered />);
 
     cy.findByRole("tabpanel", { name: "Home" }).should("be.visible");
   });
 
   it("should dynamically overflow tabs", () => {
-    cy.mount(<Overflow />);
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+    mountTabsNext(<DynamicOverflowBoundary />);
+    cy.findAllByRole("tab").should("have.length", 5);
 
-    cy.findByRole("tablist").invoke("css", "max-width", 500);
-    cy.wait(500);
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 6);
+    cy.window().then((win) => {
+      const dynamicOverflowWindow = win as ResponsiveOverflowWindow;
+      dynamicOverflowWindow.__setDynamicOverflowWidth?.(548);
+    });
+    cy.findAllByRole("tab").should("have.length", 7);
 
-    cy.findByRole("tablist").invoke("css", "max-width", 200);
-    cy.wait(500);
-    cy.findAllByRole("tab").filter(":visible").should("have.length", 2);
+    cy.window().then((win) => {
+      const dynamicOverflowWindow = win as ResponsiveOverflowWindow;
+      dynamicOverflowWindow.__setDynamicOverflowWidth?.(248);
+    });
+    cy.findAllByRole("tab").should("have.length", 3);
   });
 
-  it("should support a controlled API", () => {
-    cy.mount(<Controlled />);
+  it("should support empty-string tab values", () => {
+    mountTabsNext(<TabsNextWithEmptyStringValue />);
 
-    cy.findByRole("tab", { name: "Home" }).should(
+    cy.findByRole("tab", { name: "Empty" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
+    cy.findByRole("tabpanel", { name: "Empty" }).should("be.visible");
+
+    cy.findByRole("tab", { name: "Transactions" }).click();
 
-    cy.findByRole("tab", { name: "Transactions" }).realClick();
     cy.findByRole("tab", { name: "Transactions" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
+    cy.findByRole("tabpanel", { name: "Transactions" }).should("be.visible");
+  });
+
+  it("should keep an empty-string selection visible after selecting it from overflow", () => {
+    mountTabsNext(<OverflowWithEmptyStringValue />);
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("Empty");
 
-    cy.get("[data-overflowbutton]").realClick();
-    cy.findByRole("tab", { name: "Lots" }).realClick();
-    cy.findByRole("tab", { name: "Lots" }).should(
+    cy.findByRole("tab", { name: "Empty", selected: true }).should(
+      "be.focused",
+    );
+    cy.findAllByRole("tab").should("have.length", 2);
+  });
+
+  it("should support a controlled API", () => {
+    mountTabsNext(
+      <div style={{ width: 526 }}>
+        <Controlled />
+      </div>,
+    );
+
+    cy.findByRole("tab", { name: "Home" }).should(
+      "have.attr",
+      "aria-selected",
+      "true",
+    );
+
+    cy.findByRole("tab", { name: "Transactions" }).click();
+    cy.findByRole("tab", { name: "Transactions" }).should(
       "have.attr",
       "aria-selected",
       "true",
     );
 
-    cy.findByRole("button", { name: "Lots Close tab" }).realClick();
-    cy.findByRole("tab", { name: "More" })
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findByRole("tab", { name: "Loans" }).should("be.focused");
+
+    clickOverflowTab("Lots");
+    cy.findByRole("tab", { name: "Lots", selected: true })
+      .should("be.focused")
+      .and("have.attr", "aria-selected", "true");
+
+    cy.findByRole("button", { name: "Lots Dismiss tab" }).click();
+    cy.findByRole("tab", { name: "Transactions" })
       .should("have.attr", "aria-selected", "true")
       .and("be.focused");
   });
 
-  it(
-    "should not cause page overflow when overflow menu is not visible",
-    { viewportWidth: 280, viewportHeight: 280 },
-    () => {
-      cy.get("body").invoke("css", "display", "block");
+  it("should follow visible tab order when navigating with arrow keys after selecting from overflow", () => {
+    mountTabsNext(<Overflow />);
 
-      cy.mount(<Overflow />);
-      cy.findAllByRole("tab").filter(":visible").should("have.length", 2);
+    // Wait for overflow to be ready
+    cy.findAllByRole("tab").should("have.length", 5);
 
-      // no horizontal overflow
-      cy.get("html").then((body) => {
-        console.log(body[0]);
-        const { clientWidth, scrollWidth } = body[0];
-        expect(clientWidth).to.equal(scrollWidth);
-      });
-    },
-  );
+    // Open overflow menu and select "With"
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    clickOverflowTab("With");
+    cy.findByRole("tab", { name: "With", selected: true })
+      .should("be.visible")
+      .and("be.focused");
+
+    // Go to the first tab
+    cy.realPress("Home");
+    cy.findByRole("tab", { name: "Home" }).should("be.focused");
+
+    // Navigate right through all visible tabs
+    cy.realPress("ArrowRight");
+    cy.findByRole("tab", { name: "Transactions" }).should("be.focused");
+
+    cy.realPress("ArrowRight");
+    cy.findByRole("tab", { name: "Loans" }).should("be.focused");
+
+    // "With" should come before Overflow in the navigation order
+    cy.realPress("ArrowRight");
+    cy.findByRole("tab", { name: "With" }).should("be.focused");
+
+    cy.realPress("ArrowRight");
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
+
+    // Wrapping back to Home
+    cy.realPress("ArrowRight");
+    cy.findByRole("tab", { name: "Home" }).should("be.focused");
+  });
+
+  it("should close the overflow menu and move focus past the tablist when Tab is pressed from the menu", () => {
+    mountTabsNext(
+      <>
+        <Overflow />
+        <button>after</button>
+      </>,
+    );
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
+
+    cy.realPress("Tab");
+
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "not.exist",
+    );
+    cy.findByRole("button", { name: "after" }).should("be.focused");
+  });
+
+  it("should close the overflow menu and move focus to the overflow trigger when Shift+Tab is pressed from the menu", () => {
+    mountTabsNext(
+      <>
+        <button>before</button>
+        <Overflow />
+      </>,
+    );
+
+    cy.findByRole("tab", { name: "Overflow" }).click();
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "be.visible",
+    );
+
+    cy.findByRole("tab", { name: "Liquidity" }).should("be.focused");
+
+    cy.realPress(["Shift", "Tab"]);
+
+    cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+      "not.exist",
+    );
+    cy.findByRole("tab", { name: "Overflow" }).should("be.focused");
+  });
 
   it(
     "should flip overflow menu placement if there is enough space",
@@ -460,15 +1472,16 @@ describe("Given a Tabstrip", () => {
     () => {
       cy.get("body").invoke("css", "display", "block");
 
-      cy.mount(<Overflow />);
-      cy.findAllByRole("tab").filter(":visible").should("have.length", 4);
+      mountTabsNext(<Overflow />, { width: 408 });
+      cy.findAllByRole("tab").should("have.length", 5);
 
-      cy.get("[data-overflowbutton]").realClick();
-      cy.wait(500);
+      cy.findByRole("tab", { name: "Overflow" }).click();
+      cy.findByRole("tablist", { name: "Overflow tab options" }).should(
+        "be.visible",
+      );
 
       // no horizontal overflow, menu should flip in horizontally
       cy.get("html").then((body) => {
-        console.log(body[0]);
         const { clientWidth, scrollWidth } = body[0];
         expect(clientWidth).to.equal(scrollWidth);
       });
diff --git a/packages/lab/src/tabs-next/TabBar.css b/packages/lab/src/tabs-next/TabBar.css
index 4ae1feb3335..886b31eef93 100644
--- a/packages/lab/src/tabs-next/TabBar.css
+++ b/packages/lab/src/tabs-next/TabBar.css
@@ -2,9 +2,21 @@
   display: flex;
   align-items: center;
   flex-direction: row;
-  gap: var(--salt-spacing-100);
   position: relative;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.saltTabBar-strip {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 auto;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .saltTabBar-divider::before {
diff --git a/packages/lab/src/tabs-next/TabBar.tsx b/packages/lab/src/tabs-next/TabBar.tsx
index 229a66283a1..fa2e66088fe 100644
--- a/packages/lab/src/tabs-next/TabBar.tsx
+++ b/packages/lab/src/tabs-next/TabBar.tsx
@@ -42,7 +42,7 @@ export const TabBar = forwardRef<HTMLDivElement, TabBarProps>(
         {...rest}
         ref={ref}
       >
-        {children}
+        <div className={withBaseName("strip")}>{children}</div>
       </div>
     );
   },
diff --git a/packages/lab/src/tabs-next/TabListLayoutContext.tsx b/packages/lab/src/tabs-next/TabListLayoutContext.tsx
new file mode 100644
index 00000000000..3c52822c0f3
--- /dev/null
+++ b/packages/lab/src/tabs-next/TabListLayoutContext.tsx
@@ -0,0 +1,21 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+
+export type TabSlotLocation = "hidden" | "main" | "overflow";
+
+export interface TabListLayoutContextValue {
+  getLocation: (value: string) => TabSlotLocation;
+  overflowActiveValue: string | null;
+  setOverflowActiveValue: (value: string | null) => void;
+  moveOverflowFocus: (
+    key: "ArrowDown" | "ArrowUp" | "Home" | "End",
+    value: string,
+  ) => boolean;
+}
+
+export const TabListLayoutContext =
+  createContext<TabListLayoutContextValue | null>("TabListLayoutContext", null);
+
+export function useTabListLayout() {
+  return useContext(TabListLayoutContext);
+}
diff --git a/packages/lab/src/tabs-next/TabListNext.css b/packages/lab/src/tabs-next/TabListNext.css
index 4a67dccc4d6..4ad3557d0ed 100644
--- a/packages/lab/src/tabs-next/TabListNext.css
+++ b/packages/lab/src/tabs-next/TabListNext.css
@@ -9,8 +9,8 @@
   min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   gap: var(--salt-spacing-100);
   max-width: 100%;
-  width: 100%;
   min-width: 0;
+  flex: 0 1 auto;
 }
 
 .saltTabListNext-center {
@@ -33,6 +33,13 @@
   --saltTabListNext-activeColor: var(--salt-container-tertiary-background);
 }
 
-.saltTabListNext-overflowWarning {
-  display: none;
+.saltTabListNext-measureContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: nowrap;
 }
diff --git a/packages/lab/src/tabs-next/TabListNext.tsx b/packages/lab/src/tabs-next/TabListNext.tsx
index b9198ebe48b..f23674769c4 100644
--- a/packages/lab/src/tabs-next/TabListNext.tsx
+++ b/packages/lab/src/tabs-next/TabListNext.tsx
@@ -1,4 +1,10 @@
-import { capitalize, makePrefixer, useForkRef, useId } from "@salt-ds/core";
+import {
+  capitalize,
+  makePrefixer,
+  useAriaAnnouncer,
+  useForkRef,
+  useIsomorphicLayoutEffect,
+} from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
@@ -6,15 +12,27 @@ import {
   type ComponentPropsWithoutRef,
   forwardRef,
   type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
   useRef,
+  useState,
 } from "react";
+import { useFocusWithRetry } from "./hooks/useFocusWithRetry";
 import { useOverflow } from "./hooks/useOverflow";
-import { useRestoreActiveTab } from "./hooks/useRestoreActiveTab";
+import { useOverflowLayoutState } from "./hooks/useOverflowLayoutState";
+import { useTabListRecovery } from "./hooks/useTabListRecovery";
+import { useTabRemovalHandler } from "./hooks/useTabRemovalHandler";
+import { useTabSelectionFocus } from "./hooks/useTabSelectionFocus";
+import { TabListLayoutContext } from "./TabListLayoutContext";
 import tablistNextCss from "./TabListNext.css";
 import { TabOverflowList } from "./TabOverflowList";
+import { TabSlot } from "./TabSlot";
+import { TabSlotRegistryContext } from "./TabSlotRegistryContext";
 import { useTabsNext } from "./TabsNextContext";
 
 const withBaseName = makePrefixer("saltTabListNext");
+const MAX_FOCUS_RETRY_ATTEMPTS = 120;
 
 export interface TabListNextProps
   extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
@@ -29,11 +47,10 @@ export interface TabListNextProps
 }
 
 export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
-  function TabstripNext(props, ref) {
+  function TabListNext(props, ref) {
     const {
       appearance = "bordered",
       activeColor = "primary",
-      "aria-describedby": ariaDescribedBy,
       children,
       className,
       onKeyDown,
@@ -47,67 +64,209 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
     });
 
     const {
+      renderMode,
       selected,
+      setSelected,
+      setBootstrapOverflowReady,
       getNext,
       getPrevious,
       getFirst,
       getLast,
-      items,
+      getIndex,
+      item,
+      itemAt,
       activeTab,
+      selectionFromOverflowValueRef,
       menuOpen,
       setMenuOpen,
-      removedActiveTabRef,
+      sortItems,
+      getRemovedItems,
+      getRenderedTab,
+      renderedTabs,
+      removalVersion,
     } = useTabsNext();
 
     const tabstripRef = useRef<HTMLDivElement>(null);
+    const overflowListRef = useRef<HTMLDivElement>(null);
+    const slotMapRef = useRef<Map<string, HTMLDivElement>>(new Map());
+    const removalRecoveryRafRef = useRef<number | null>(null);
+    const pendingRemovalRecoveryRef = useRef(false);
+    const pendingRemovalRecoveryRetriesRef = useRef(0);
+    const [slotVersion, setSlotVersion] = useState(0);
+
     const handleRef = useForkRef(tabstripRef, ref);
     const overflowButtonRef = useRef<HTMLButtonElement>(null);
 
-    const [visible, hidden, isMeasuring, realSelectedIndexRef] = useOverflow({
+    const { announce } = useAriaAnnouncer();
+    const overflowMenuOpen = renderMode === "portal" ? menuOpen : false;
+
+    const [visibleValues, hiddenValues, isMeasuring] = useOverflow({
       container: tabstripRef,
-      tabs: items,
-      children,
+      menuOpen: overflowMenuOpen,
       selected,
+      tabs: renderedTabs,
       overflowButton: overflowButtonRef,
     });
 
-    useRestoreActiveTab({
-      container: tabstripRef,
-      tabs: items,
-      realSelectedIndex: realSelectedIndexRef,
-      removedActiveTabRef,
-    });
+    useEffect(() => {
+      setBootstrapOverflowReady(
+        renderMode === "inline" && renderedTabs.length > 0 && !isMeasuring,
+      );
+    }, [
+      isMeasuring,
+      renderMode,
+      renderedTabs.length,
+      setBootstrapOverflowReady,
+    ]);
+
+    const { resolvedOverflowActiveValue, tabListLayoutContext } =
+      useOverflowLayoutState({
+        hiddenValues,
+        menuOpen,
+        overflowMenuOpen,
+        visibleValues,
+      });
+    const registerSlot = useCallback(
+      (slotId: string, element: HTMLDivElement | null) => {
+        const currentElement = slotMapRef.current.get(slotId) ?? null;
+        if (currentElement === element) {
+          return;
+        }
+
+        if (element) {
+          slotMapRef.current.set(slotId, element);
+        } else {
+          slotMapRef.current.delete(slotId);
+        }
+
+        setSlotVersion((currentVersion) => currentVersion + 1);
+      },
+      [],
+    );
+    const slotRegistryContext = useMemo(
+      () => ({ registerSlot }),
+      [registerSlot],
+    );
+    const slotAssignments = useMemo(() => {
+      const nextAssignments = new Map<string, string>();
+
+      for (const value of visibleValues) {
+        nextAssignments.set(value, `main:${value}`);
+      }
+
+      for (const value of hiddenValues) {
+        nextAssignments.set(
+          value,
+          menuOpen ? `overflow:${value}` : `measure:${value}`,
+        );
+      }
+
+      return {
+        map: nextAssignments,
+        version: slotVersion,
+      };
+    }, [hiddenValues, menuOpen, slotVersion, visibleValues]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "portal") {
+        return;
+      }
+
+      for (const [value, slotId] of slotAssignments.map) {
+        const host = getRenderedTab(value)?.host;
+        const slot = slotMapRef.current.get(slotId);
+
+        if (host && slot && host.parentElement !== slot) {
+          slot.appendChild(host);
+        }
+      }
+    }, [getRenderedTab, renderMode, slotAssignments]);
 
     const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
       onKeyDown?.(event);
 
+      if (menuOpen) return;
+
       const actionMap = {
         ArrowRight: getNext,
         ArrowLeft: getPrevious,
         Home: getFirst,
         End: getLast,
-        ArrowUp: menuOpen ? getPrevious : undefined,
-        ArrowDown: menuOpen ? getNext : undefined,
       };
 
       const action = actionMap[event.key as keyof typeof actionMap];
 
       if (action) {
         event.preventDefault();
+        // Item registration/sorting is raf-driven; flush before keyboard nav to
+        // avoid navigating against stale collection order/registration.
+        sortItems();
         const activeTabId = activeTab.current?.id;
         if (!activeTabId) return;
         const nextItem = action(activeTabId);
         if (nextItem) {
-          nextItem.element?.parentElement?.scrollIntoView({
-            block: "nearest",
-            inline: "nearest",
-          });
+          // Scrolling is handled by TabTrigger.
           nextItem.element?.focus({ preventScroll: true });
         }
       }
     };
 
-    const warningId = useId();
+    const getSelectedTabElement = useCallback(() => {
+      return (
+        tabstripRef.current?.querySelector<HTMLElement>(
+          '[role="tab"][aria-selected="true"]',
+        ) ?? item(activeTab.current?.id)?.element
+      );
+    }, [item, activeTab]);
+    const { focusElementWithRetry } = useFocusWithRetry({
+      maxAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      targetWindow,
+    });
+    useTabSelectionFocus({
+      announce,
+      focusElementWithRetry,
+      getRenderedTab,
+      getSelectedTabElement,
+      menuOpen,
+      resolvedOverflowActiveValue,
+      selected,
+      selectionFromOverflowValueRef,
+      targetWindow,
+    });
+
+    const handleTabRemoval = useTabRemovalHandler({
+      activeTab,
+      focusElementWithRetry,
+      getFirst,
+      getIndex,
+      getLast,
+      getRemovedItems,
+      getRenderedTab,
+      getSelectedTabElement,
+      item,
+      itemAt,
+      maxRetryAttempts: MAX_FOCUS_RETRY_ATTEMPTS,
+      menuOpen,
+      overflowButtonRef,
+      overflowListRef,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef,
+      removalRecoveryRafRef,
+      selected,
+      setSelected,
+      tabstripRef,
+      targetWindow,
+    });
+
+    useTabListRecovery({
+      removalVersion,
+      targetWindow,
+      tabstripRef,
+      overflowListRef,
+      handleTabRemoval,
+      pendingRemovalRecoveryRef,
+      pendingRemovalRecoveryRetriesRef,
+    });
 
     return (
       <div
@@ -119,28 +278,48 @@ export const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(
           withBaseName(`activeColor${capitalize(activeColor)}`),
           className,
         )}
-        data-ismeasuring={isMeasuring ? true : undefined}
+        data-ismeasuring={
+          renderMode === "portal" && isMeasuring ? true : undefined
+        }
         ref={handleRef}
         onKeyDown={handleKeyDown}
-        aria-describedby={clsx(ariaDescribedBy, warningId) || undefined}
         {...rest}
       >
-        {!isMeasuring && hidden.length > 0 && (
-          <span id={warningId} className={withBaseName("overflowWarning")}>
-            Note: This tab list includes overflow; tab positions may be
-            inaccurate or change when a tab is selected
-          </span>
+        {renderMode === "inline" ? (
+          children
+        ) : (
+          <TabSlotRegistryContext.Provider value={slotRegistryContext}>
+            <TabListLayoutContext.Provider value={tabListLayoutContext}>
+              {children}
+              {visibleValues.map((value) => (
+                <TabSlot key={value} slotId={`main:${value}`} value={value} />
+              ))}
+              {!menuOpen && hiddenValues.length > 0 ? (
+                <div
+                  aria-hidden="true"
+                  role="presentation"
+                  className={withBaseName("measureContainer")}
+                >
+                  {hiddenValues.map((value) => (
+                    <TabSlot
+                      key={`measure-${value}`}
+                      slotId={`measure:${value}`}
+                      value={value}
+                    />
+                  ))}
+                </div>
+              ) : null}
+              <TabOverflowList
+                buttonRef={overflowButtonRef}
+                hiddenValues={hiddenValues}
+                open={menuOpen}
+                order={renderedTabs.length}
+                setOpen={setMenuOpen}
+                ref={overflowListRef}
+              />
+            </TabListLayoutContext.Provider>
+          </TabSlotRegistryContext.Provider>
         )}
-        {visible}
-        <TabOverflowList
-          isMeasuring={isMeasuring}
-          buttonRef={overflowButtonRef}
-          tabstripRef={tabstripRef}
-          open={menuOpen}
-          setOpen={setMenuOpen}
-        >
-          {hidden}
-        </TabOverflowList>
       </div>
     );
   },
diff --git a/packages/lab/src/tabs-next/TabNext.tsx b/packages/lab/src/tabs-next/TabNext.tsx
index 4ab4392ce60..01514084161 100644
--- a/packages/lab/src/tabs-next/TabNext.tsx
+++ b/packages/lab/src/tabs-next/TabNext.tsx
@@ -1,4 +1,9 @@
-import { makePrefixer, useId } from "@salt-ds/core";
+import {
+  makePrefixer,
+  useForkRef,
+  useId,
+  useIsomorphicLayoutEffect,
+} from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
@@ -13,10 +18,13 @@ import {
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 
+import { useRenderedTabWidth } from "./hooks/useRenderedTabWidth";
 import tabCss from "./TabNext.css";
 import { TabNextContext } from "./TabNextContext";
 import { useTabsNext } from "./TabsNextContext";
+import { getIntrinsicMeasuredWidth } from "./widthMeasurement";
 
 const withBaseName = makePrefixer("saltTabNext");
 
@@ -26,7 +34,7 @@ export interface TabNextProps extends ComponentPropsWithoutRef<"div"> {
    */
   disabled?: boolean;
   /**
-   * The value of the tab.
+   * The value of the tab. This must be unique within a `TabsNext` instance.
    */
   value: string;
 }
@@ -52,7 +60,15 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
       window: targetWindow,
     });
 
-    const { selected, activeTab } = useTabsNext();
+    const {
+      selected,
+      activeTab,
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      registerRenderedTab,
+      updateRenderedTab,
+    } = useTabsNext();
 
     const disabled = !!disabledProp;
 
@@ -61,10 +77,13 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
     const wasMouseDown = useRef(false);
     const [focusVisible, setFocusVisible] = useState(false);
     const [focused, setFocused] = useState(false);
+    const [hostElement, setHostElement] = useState<HTMLDivElement | null>(null);
+    const markerRef = useRef<HTMLSpanElement>(null);
+    const tabRootRef = useRef<HTMLDivElement>(null);
 
     const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {
       onFocusCapture?.(event);
-      if (value && id) {
+      if (id) {
         activeTab.current = { value, id };
       }
     };
@@ -92,19 +111,40 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
 
     const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {
       onMouseDown?.(event);
+      if (id) {
+        activeTab.current = { value, id };
+      }
       wasMouseDown.current = true;
     };
 
-    const [actions, setActions] = useState<string[]>([]);
+    const [actionIds, setActionIds] = useState(() => new Set<string>());
 
     const registerAction = useCallback((id: string) => {
-      setActions((old) => old.concat(id));
+      setActionIds((old) => {
+        if (old.has(id)) {
+          return old;
+        }
+
+        const next = new Set(old);
+        next.add(id);
+        return next;
+      });
 
       return () => {
-        setActions((old) => old.filter((action) => action !== id));
+        setActionIds((old) => {
+          if (!old.has(id)) {
+            return old;
+          }
+
+          const next = new Set(old);
+          next.delete(id);
+          return next;
+        });
       };
     }, []);
 
+    const actions = useMemo(() => Array.from(actionIds), [actionIds]);
+
     const context = useMemo(
       () => ({
         tabId: id,
@@ -118,7 +158,87 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
       [id, selected, value, focused, disabled, actions, registerAction],
     );
 
-    return (
+    useIsomorphicLayoutEffect(() => {
+      const doc = targetWindow?.document;
+      if (!doc) {
+        return;
+      }
+
+      const host = doc.createElement("div");
+      host.dataset.tabHost = value;
+      host.role = "presentation";
+      host.style.display = "contents";
+      setHostElement(host);
+
+      return () => {
+        host.remove();
+      };
+    }, [targetWindow, value]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (renderMode !== "inline") {
+        return;
+      }
+
+      return registerBootstrapTab(value);
+    }, [registerBootstrapTab, renderMode, value]);
+
+    useIsomorphicLayoutEffect(() => {
+      setBootstrapTabReady(value, hostElement != null);
+
+      return () => {
+        setBootstrapTabReady(value, false);
+      };
+    }, [hostElement, setBootstrapTabReady, value]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (!hostElement || !id) {
+        return;
+      }
+
+      return registerRenderedTab({
+        host: hostElement,
+        id,
+        marker: markerRef.current,
+        root: tabRootRef.current,
+        trigger: null,
+        value,
+        width: getIntrinsicMeasuredWidth(tabRootRef.current),
+      });
+    }, [hostElement, id, registerRenderedTab, value]);
+
+    useIsomorphicLayoutEffect(() => {
+      const updates = {
+        marker: markerRef.current,
+        root: tabRootRef.current,
+      } as Partial<{
+        host: HTMLDivElement;
+        id: string;
+        marker: HTMLElement | null;
+        root: HTMLElement | null;
+        trigger: HTMLButtonElement | null;
+        width: number;
+      }>;
+
+      if (renderMode === "inline") {
+        updates.width = getIntrinsicMeasuredWidth(tabRootRef.current);
+      }
+
+      updateRenderedTab(value, updates);
+    }, [renderMode, updateRenderedTab, value]);
+
+    useRenderedTabWidth({
+      hostElement,
+      renderMode,
+      tabRootRef,
+      targetWindow,
+      updateRenderedTab,
+      value,
+    });
+
+    const handleTabRootRef = useForkRef(tabRootRef, ref);
+
+    const tabMarkup = (
       <TabNextContext.Provider value={context}>
         <div
           className={clsx(
@@ -131,7 +251,8 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
             className,
           )}
           data-overflowitem="true"
-          ref={ref}
+          data-value={value}
+          ref={handleTabRootRef}
           onMouseDown={handleMouseDown}
           onFocusCapture={handleFocusCapture}
           onFocus={handleFocus}
@@ -143,5 +264,21 @@ export const TabNext = forwardRef<HTMLDivElement, TabNextProps>(
         </div>
       </TabNextContext.Provider>
     );
+
+    return (
+      <>
+        <span
+          role="presentation"
+          data-tabnext-marker=""
+          hidden
+          ref={markerRef}
+        />
+        {renderMode === "inline"
+          ? tabMarkup
+          : hostElement
+            ? createPortal(tabMarkup, hostElement)
+            : null}
+      </>
+    );
   },
 );
diff --git a/packages/lab/src/tabs-next/TabNextAction.tsx b/packages/lab/src/tabs-next/TabNextAction.tsx
index d10a9faeef9..2126612ef6c 100644
--- a/packages/lab/src/tabs-next/TabNextAction.tsx
+++ b/packages/lab/src/tabs-next/TabNextAction.tsx
@@ -5,17 +5,25 @@ import {
   useIsomorphicLayoutEffect,
 } from "@salt-ds/core";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
+import { type FocusEvent, forwardRef, type MouseEvent } from "react";
 import { useTabNext } from "./TabNextContext";
+import { useTabsNext } from "./TabsNextContext";
 
 export interface TabNextActionProps extends ButtonProps {}
 
 export const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(
   function TabNextAction(props, ref) {
-    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      id: idProp,
+      onFocus,
+      onMouseDown,
+      ...rest
+    } = props;
 
     const id = useId(idProp);
-    const { focused, selected, tabId, registerAction } = useTabNext();
+    const { focused, selected, tabId, registerAction, value } = useTabNext();
+    const { activeTab } = useTabsNext();
 
     useIsomorphicLayoutEffect(() => {
       if (id) {
@@ -23,6 +31,22 @@ export const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(
       }
     }, [registerAction, id]);
 
+    const setActiveTab = () => {
+      if (tabId) {
+        activeTab.current = { id: tabId, value };
+      }
+    };
+
+    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {
+      onFocus?.(event);
+      setActiveTab();
+    };
+
+    const handleMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+      onMouseDown?.(event);
+      setActiveTab();
+    };
+
     return (
       <Button
         id={id}
@@ -31,6 +55,8 @@ export const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(
         appearance="transparent"
         sentiment="neutral"
         ref={ref}
+        onFocus={handleFocus}
+        onMouseDown={handleMouseDown}
         {...rest}
       />
     );
diff --git a/packages/lab/src/tabs-next/TabNextPanel.tsx b/packages/lab/src/tabs-next/TabNextPanel.tsx
index 35e3a974bdc..ae1550c0181 100644
--- a/packages/lab/src/tabs-next/TabNextPanel.tsx
+++ b/packages/lab/src/tabs-next/TabNextPanel.tsx
@@ -20,7 +20,8 @@ import { useTabsNext } from "./TabsNextContext";
 
 export interface TabNextPanelProps extends ComponentPropsWithoutRef<"div"> {
   /**
-   * The value of the panel, this should map to the corresponding tab.
+   * The value of the panel. This should map to the corresponding tab and must
+   * be unique within a `TabsNext` instance.
    */
   value: string;
 }
@@ -38,48 +39,75 @@ export const TabNextPanel = forwardRef<HTMLDivElement, TabNextPanelProps>(
     });
     const id = useId(idProp);
     const { registerPanel, getTabId, selected } = useTabsNext();
+    const hidden = selected !== value;
 
     const panelRef = useRef<HTMLDivElement>(null);
     const handleRef = useForkRef(panelRef, ref);
 
     useIsomorphicLayoutEffect(() => {
-      if (value && id) {
+      if (id) {
         return registerPanel(id, value);
       }
     }, [value, id, registerPanel]);
 
     const [hasFocusableChildren, setHasFocusableChildren] = useState(false);
     useEffect(() => {
-      if (!panelRef.current) return;
+      const element = panelRef.current;
+      const mutationObserverCtor = (
+        targetWindow as
+          | (Window & { MutationObserver?: typeof MutationObserver })
+          | undefined
+      )?.MutationObserver;
+      if (!element || hidden) return;
+
+      let rafId: number | null = null;
 
       const detectFocusableChildren = () => {
-        requestAnimationFrame(() => {
-          if (!panelRef.current) return;
-          const elements = tabbable(panelRef.current);
-          setHasFocusableChildren(elements.length > 0);
+        rafId = null;
+        const elements = tabbable(element);
+        const nextHasFocusableChildren = elements.length > 0;
+        setHasFocusableChildren((prev) => {
+          return prev === nextHasFocusableChildren
+            ? prev
+            : nextHasFocusableChildren;
         });
       };
 
-      const observer = new MutationObserver(() => {
-        detectFocusableChildren();
-      });
+      const scheduleDetectFocusableChildren = () => {
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
 
-      requestAnimationFrame(() => {
-        detectFocusableChildren();
-      });
+        if (!targetWindow?.requestAnimationFrame) {
+          detectFocusableChildren();
+          return;
+        }
 
-      observer.observe(panelRef.current, {
+        rafId = targetWindow.requestAnimationFrame(detectFocusableChildren);
+      };
+
+      const observer = mutationObserverCtor
+        ? new mutationObserverCtor(() => {
+            scheduleDetectFocusableChildren();
+          })
+        : null;
+
+      scheduleDetectFocusableChildren();
+
+      observer?.observe(element, {
         childList: true,
         subtree: true,
         attributes: true,
       });
 
       return () => {
-        observer.disconnect();
+        observer?.disconnect();
+        if (rafId != null && targetWindow) {
+          targetWindow.cancelAnimationFrame(rafId);
+        }
       };
-    }, []);
+    }, [hidden, targetWindow]);
 
-    const hidden = selected !== value;
     const tabId = getTabId(value);
 
     return (
diff --git a/packages/lab/src/tabs-next/TabNextTrigger.tsx b/packages/lab/src/tabs-next/TabNextTrigger.tsx
index c24f888f0ed..5543982dde2 100644
--- a/packages/lab/src/tabs-next/TabNextTrigger.tsx
+++ b/packages/lab/src/tabs-next/TabNextTrigger.tsx
@@ -8,11 +8,13 @@ import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
   type ComponentPropsWithoutRef,
+  type FocusEvent,
   forwardRef,
   type KeyboardEvent,
   type MouseEvent,
   useRef,
 } from "react";
+import { useTabListLayout } from "./TabListLayoutContext";
 import { useTabNext } from "./TabNextContext";
 import tabTriggerCss from "./TabNextTrigger.css";
 import { useTabsNext } from "./TabsNextContext";
@@ -41,7 +43,7 @@ export const TabNextTrigger = forwardRef<
   HTMLButtonElement,
   TabNextTriggerProps
 >(function TabNextTrigger(props, ref) {
-  const { children, onClick, onKeyDown, ...rest } = props;
+  const { children, onClick, onKeyDown, onFocus, ...rest } = props;
 
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -50,43 +52,168 @@ export const TabNextTrigger = forwardRef<
     window: targetWindow,
   });
 
-  const { setSelected, registerTab, getPanelId } = useTabsNext();
+  const {
+    setSelected,
+    registerTab,
+    updateTab,
+    updateRenderedTab,
+    getRenderedTabOrder,
+    getPanelId,
+    getTabId,
+    selected: selectedValue,
+    activeTab,
+    menuOpen,
+    setMenuOpen,
+  } = useTabsNext();
   const { selected, value, focused, disabled, tabId, actions } = useTabNext();
+  const tabListLayout = useTabListLayout();
 
   const tabRef = useRef<HTMLButtonElement>(null);
 
+  const location = tabListLayout?.getLocation(value) ?? "main";
+  const selectionSource = location === "overflow" ? "overflow" : "main";
+  const hidden = location === "hidden";
+  const overflowOpen = location === "overflow" && menuOpen;
+  const renderOrder = getRenderedTabOrder(value);
+  const order = renderOrder >= 0 ? renderOrder : undefined;
+  const initialLocationRef = useRef(location);
+  const initialOrderRef = useRef(order);
+
   const id = tabId;
 
   useIsomorphicLayoutEffect(() => {
-    if (value && id && tabRef.current) {
-      return registerTab({ id, value, element: tabRef.current });
+    if (id && tabRef.current) {
+      const item = {
+        id,
+        value,
+        element: tabRef.current,
+        location: initialLocationRef.current,
+        order: initialOrderRef.current,
+      };
+
+      return registerTab(item);
+    }
+  }, [id, registerTab, value]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!id) {
+      return;
+    }
+
+    updateTab(id, {
+      element: tabRef.current,
+      location,
+      order,
+    });
+  }, [id, location, order, updateTab]);
+
+  useIsomorphicLayoutEffect(() => {
+    updateRenderedTab(value, {
+      trigger: tabRef.current,
+    });
+  }, [updateRenderedTab, value]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!overflowOpen || tabListLayout?.overflowActiveValue !== value) {
+      return;
     }
-  }, [value, id, registerTab]);
+
+    tabRef.current?.focus({ preventScroll: true });
+  }, [overflowOpen, tabListLayout?.overflowActiveValue, value]);
 
   const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
     onClick?.(event);
 
-    setSelected(event, value);
+    setSelected(event, value, selectionSource);
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
     onKeyDown?.(event);
 
+    if (location === "overflow" && event.key === "Tab" && event.shiftKey) {
+      event.preventDefault();
+      setMenuOpen(false);
+
+      const doc = event.currentTarget.ownerDocument;
+      const overflowTrigger = doc.querySelector<HTMLElement>(
+        "[data-overflowbutton]",
+      );
+      const scheduleFocus = targetWindow?.requestAnimationFrame;
+
+      if (scheduleFocus) {
+        scheduleFocus(() => overflowTrigger?.focus({ preventScroll: true }));
+      } else {
+        queueMicrotask(() => overflowTrigger?.focus({ preventScroll: true }));
+      }
+
+      return;
+    }
+
+    if (
+      location === "overflow" &&
+      tabListLayout &&
+      (event.key === "ArrowDown" ||
+        event.key === "ArrowUp" ||
+        event.key === "Home" ||
+        event.key === "End")
+    ) {
+      const moved = tabListLayout.moveOverflowFocus(event.key, value);
+      if (moved) {
+        event.preventDefault();
+        return;
+      }
+    }
+
+    if (disabled) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+      }
+      return;
+    }
+
     if (event.key === "Enter" || event.key === " ") {
-      setSelected(event, value);
+      event.preventDefault();
+      setSelected(event, value, selectionSource);
     }
   };
 
+  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {
+    onFocus?.(event);
+
+    if (id) {
+      activeTab.current = { value, id };
+    }
+
+    if (location === "overflow") {
+      tabListLayout?.setOverflowActiveValue(value);
+    }
+
+    // Ensures the associated tab is in view.
+    event.currentTarget.parentElement?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+    });
+  };
+
   const handleRef = useForkRef<HTMLButtonElement>(tabRef, ref);
   const panelId = getPanelId(value);
 
-  // Applying aria-actions this way avoid React warnings about unknown props
+  // Applying aria-actions this way avoids React warnings about unknown props
   const ariaActionsProps = ariaActionSupported
     ? {
         "aria-actions": clsx(actions) || undefined,
       }
     : {};
 
+  const active =
+    location === "overflow" && tabListLayout?.overflowActiveValue === value;
+  const hasSelectedTab =
+    selectedValue !== undefined && getTabId(selectedValue) != null;
+  const fallbackTabStop = !hasSelectedTab && location === "main" && order === 0;
+  const isTabStop =
+    !hidden && (focused || selected || active || fallbackTabStop);
+  const shouldHandleKeyDown = location === "overflow" || !disabled;
+
   return (
     <button
       aria-selected={selected}
@@ -94,14 +221,16 @@ export const TabNextTrigger = forwardRef<
       aria-controls={panelId}
       {...ariaActionsProps}
       aria-description={getAriaDescription(actions.length)}
-      tabIndex={focused || selected ? undefined : -1}
+      tabIndex={isTabStop ? 0 : -1}
       role="tab"
       type="button"
       onClick={!disabled ? handleClick : undefined}
-      onKeyDown={!disabled ? handleKeyDown : undefined}
+      onKeyDown={shouldHandleKeyDown ? handleKeyDown : undefined}
+      onFocus={handleFocus}
       className={withBaseName()}
       id={id}
       ref={handleRef}
+      data-value={value}
       {...rest}
     >
       {children}
diff --git a/packages/lab/src/tabs-next/TabOverflowList.css b/packages/lab/src/tabs-next/TabOverflowList.css
index dabe5ced929..c40f41e59ec 100644
--- a/packages/lab/src/tabs-next/TabOverflowList.css
+++ b/packages/lab/src/tabs-next/TabOverflowList.css
@@ -8,10 +8,10 @@
   overflow: hidden;
   overflow-y: auto;
   position: absolute;
-  z-index: var(--salt-zIndex-flyover);
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
   border-radius: var(--salt-palette-corner, 0);
+  z-index: var(--salt-zIndex-flyover);
 }
 
 .saltTabOverflow-listContainer {
@@ -22,14 +22,6 @@
   min-height: inherit;
 }
 
-.saltTabOverflow-list[data-hidden="true"] {
-  opacity: 0;
-  pointer-events: none;
-  /* Avoid causing page to overflow with the hidden elements */
-  width: 1px;
-  height: 1px;
-}
-
 .saltTabOverflow-list .saltTabNext {
   color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background);
diff --git a/packages/lab/src/tabs-next/TabOverflowList.tsx b/packages/lab/src/tabs-next/TabOverflowList.tsx
index e73ae1fa5bb..6555963ff2b 100644
--- a/packages/lab/src/tabs-next/TabOverflowList.tsx
+++ b/packages/lab/src/tabs-next/TabOverflowList.tsx
@@ -1,43 +1,51 @@
 import {
-  FloatingTree,
   flip,
   offset,
+  shift,
   size,
+  useClick,
   useDismiss,
   useInteractions,
 } from "@floating-ui/react";
 import {
   Button,
   makePrefixer,
+  useFloatingComponent,
   useFloatingUI,
   useForkRef,
   useIcon,
   useId,
+  useIsomorphicLayoutEffect,
 } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
 import {
-  Children,
   type ComponentPropsWithoutRef,
   type Dispatch,
   forwardRef,
-  type ReactNode,
+  type KeyboardEvent,
   type Ref,
-  type RefObject,
   type SetStateAction,
-  useCallback,
+  useEffect,
   useRef,
 } from "react";
-import { useFocusOutside } from "./hooks/useFocusOutside";
+import { isHTMLElement } from "./domUtils";
 import tabOverflowListCss from "./TabOverflowList.css";
+import { TabSlot } from "./TabSlot";
+import { useTabsNext } from "./TabsNextContext";
+import {
+  getMeasuredWidth,
+  seedWidthMap,
+  updateWidthMap,
+} from "./widthMeasurement";
 
 interface TabOverflowListProps extends ComponentPropsWithoutRef<"button"> {
   buttonRef?: Ref<HTMLButtonElement>;
-  tabstripRef: RefObject<HTMLDivElement>;
-  children?: ReactNode;
-  isMeasuring?: boolean;
+  hiddenValues: string[];
   open: boolean;
   setOpen: Dispatch<SetStateAction<boolean>>;
+  order: number;
 }
 
 const withBaseName = makePrefixer("saltTabOverflow");
@@ -46,9 +54,9 @@ export const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(
   function TabOverflowList(props, ref) {
     const {
       buttonRef,
-      tabstripRef,
-      children,
-      isMeasuring,
+      className,
+      hiddenValues,
+      order,
       open,
       setOpen,
       ...rest
@@ -61,28 +69,20 @@ export const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(
       window: targetWindow,
     });
 
+    const overflowRef = useRef<HTMLButtonElement>(null);
+    const hadOverflowItemsRef = useRef(false);
+
     const { OverflowIcon } = useIcon();
+    const { registerTab, updateTab, activeTab } = useTabsNext();
 
-    const { refs, x, y, strategy, context } = useFloatingUI({
+    const { refs, x, y, strategy, context, elements } = useFloatingUI({
       open: open,
       onOpenChange(open, _, reason) {
+        setOpen(open);
+
         if (reason === "escape-key") {
-          queueMicrotask(() => {
-            const allTabs =
-              tabstripRef.current?.querySelectorAll<HTMLElement>(
-                '[role="tab"]:not([aria-hidden])',
-              ) ?? [];
-            const numberOfTabsInOverflow =
-              listRef.current?.querySelectorAll<HTMLElement>('[role="tab"]')
-                .length ?? 0;
-
-            allTabs[allTabs.length - numberOfTabsInOverflow - 1]?.focus({
-              preventScroll: true,
-            });
-          });
+          overflowRef.current?.focus();
         }
-
-        setOpen(open);
       },
       placement: "bottom-start",
       middleware: [
@@ -95,90 +95,204 @@ export const TabOverflowList = forwardRef<HTMLDivElement, TabOverflowListProps>(
           },
         }),
         flip(),
+        shift({
+          padding: 8,
+        }),
       ],
     });
 
-    const { getFloatingProps } = useInteractions([useDismiss(context)]);
-
-    const rootRef = useRef<HTMLDivElement>(null);
-    const handleRootRef = useForkRef(rootRef, ref);
-    const listRef = useRef<HTMLDivElement>(null);
-    const handleListRef = useForkRef<HTMLDivElement>(listRef, refs.setFloating);
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+      useClick(context),
+      useDismiss(context),
+    ]);
 
-    const handleFocusOutside = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
+    const handleListRef = useForkRef<HTMLDivElement>(ref, refs.setFloating);
 
-    useFocusOutside(
-      rootRef,
-      handleFocusOutside,
-      open,
-      "[data-floating-ui-portal]",
+    const handleButtonRef = useForkRef<HTMLButtonElement>(
+      buttonRef,
+      refs.setReference,
     );
+    const handleRef = useForkRef(handleButtonRef, overflowRef);
 
-    const handleClick = () => {
-      if (!open) {
-        listRef.current
-          ?.querySelectorAll<HTMLElement>('[role="tab"]')[0]
-          ?.focus({ preventScroll: true });
-      } else {
-        setOpen(false);
+    const { Component: FloatingComponent } = useFloatingComponent();
+
+    const overflowId = useId();
+    const overlayId = useId();
+
+    const handleFocus = () => {
+      if (overflowId) {
+        activeTab.current = { value: overflowId, id: overflowId };
       }
     };
 
-    const handleFocus = () => {
-      setOpen(true);
+    const handleFloatingKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== "Tab") {
+        return;
+      }
+
+      if (event.shiftKey) {
+        event.preventDefault();
+        setOpen(false);
+        const scheduleFocus = targetWindow?.requestAnimationFrame;
+        if (scheduleFocus) {
+          scheduleFocus(() =>
+            overflowRef.current?.focus({ preventScroll: true }),
+          );
+          return;
+        }
+
+        queueMicrotask(() =>
+          overflowRef.current?.focus({ preventScroll: true }),
+        );
+        return;
+      }
     };
 
-    const handleButtonRef = useForkRef<HTMLButtonElement>(
-      buttonRef,
-      refs.setReference,
-    );
+    const overflowItemCount = hiddenValues.length;
+    const hasOverflowItems = overflowItemCount > 0;
+    const initialOrderRef = useRef(order);
+
+    useEffect(() => {
+      const tabList = overflowRef.current?.parentElement;
+      const resizeObserverCtor = (
+        targetWindow as
+          | (Window & { ResizeObserver?: typeof ResizeObserver })
+          | undefined
+      )?.ResizeObserver;
+      if (!open || !tabList || !resizeObserverCtor) {
+        return;
+      }
+
+      const observedElements = [tabList, tabList.parentElement].filter(
+        (element): element is HTMLElement => element != null,
+      );
+      const widths = seedWidthMap(observedElements);
+
+      const resizeObserver = new resizeObserverCtor(
+        (entries: ResizeObserverEntry[]) => {
+          for (const entry of entries) {
+            if (!isHTMLElement(entry.target)) {
+              continue;
+            }
+
+            const nextWidth =
+              entry.contentRect.width || getMeasuredWidth(entry.target);
+            if (updateWidthMap(widths, entry.target, nextWidth)) {
+              setOpen(false);
+              return;
+            }
+          }
+        },
+      );
 
-    const listId = useId();
+      for (const element of observedElements) {
+        resizeObserver.observe(element);
+      }
 
-    const childCount = Children.count(children);
-    if (childCount === 0 && !isMeasuring) return null;
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [open, setOpen, targetWindow]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (open && !hasOverflowItems) {
+        setOpen(false);
+      }
+    }, [hasOverflowItems, open, setOpen]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (hasOverflowItems && !hadOverflowItemsRef.current) {
+        setOpen(false);
+      }
+
+      hadOverflowItemsRef.current = hasOverflowItems;
+    }, [hasOverflowItems, setOpen]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (overflowId && overflowRef.current && hasOverflowItems) {
+        const item = {
+          id: overflowId,
+          value: overflowId,
+          element: overflowRef.current,
+          location: "main" as const,
+          order: initialOrderRef.current,
+        };
+
+        return registerTab(item);
+      }
+    }, [hasOverflowItems, overflowId, registerTab]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (!overflowId || !hasOverflowItems) {
+        return;
+      }
+
+      updateTab(overflowId, {
+        element: overflowRef.current,
+        location: "main",
+        order,
+      });
+    }, [hasOverflowItems, order, overflowId, updateTab]);
+
+    if (!hasOverflowItems) return null;
 
     return (
-      <div className={withBaseName()} ref={handleRootRef} data-overflow>
+      <>
         <Button
+          className={clsx(withBaseName(), className)}
           data-overflowbutton
-          tabIndex={-1}
           appearance="transparent"
           sentiment="neutral"
-          onClick={handleClick}
-          ref={handleButtonRef}
-          aria-label={`Overflow menu. ${childCount} tabs hidden`}
+          {...getReferenceProps({
+            onFocus: handleFocus,
+          })}
+          ref={handleRef}
+          aria-label="Overflow"
           aria-expanded={open}
-          aria-controls={listId}
-          aria-hidden="true"
+          aria-controls={overlayId}
           role="tab"
-          aria-haspopup
+          tabIndex={-1}
           {...rest}
         >
           <OverflowIcon aria-hidden />
         </Button>
-        <FloatingTree>
+        <FloatingComponent
+          ref={handleListRef}
+          {...getFloatingProps({
+            id: overlayId,
+            onKeyDown: handleFloatingKeyDown,
+          })}
+          focusManagerProps={
+            context
+              ? {
+                  context,
+                  initialFocus: 0,
+                  returnFocus: false,
+                  modal: false,
+                  closeOnFocusOut: true,
+                }
+              : undefined
+          }
+          className={withBaseName("list")}
+          open={open}
+          left={x ?? 0}
+          top={y ?? 0}
+          position={strategy}
+          width={elements.floating?.offsetWidth}
+          height={elements.floating?.offsetHeight}
+        >
           <div
-            ref={handleListRef}
-            {...getFloatingProps({
-              onFocus: handleFocus,
-              role: "presentation",
-            })}
-            className={withBaseName("list")}
-            data-hidden={!open}
-            style={
-              open
-                ? { left: x ?? 0, top: y ?? 0, position: strategy }
-                : undefined
-            }
-            id={listId}
+            role="tablist"
+            aria-orientation="vertical"
+            className={withBaseName("listContainer")}
+            aria-label="Overflow tab options"
           >
-            <div className={withBaseName("listContainer")}>{children}</div>
+            {hiddenValues.map((value) => (
+              <TabSlot key={value} slotId={`overflow:${value}`} value={value} />
+            ))}
           </div>
-        </FloatingTree>
-      </div>
+        </FloatingComponent>
+      </>
     );
   },
 );
diff --git a/packages/lab/src/tabs-next/TabSlot.tsx b/packages/lab/src/tabs-next/TabSlot.tsx
new file mode 100644
index 00000000000..722cf9624aa
--- /dev/null
+++ b/packages/lab/src/tabs-next/TabSlot.tsx
@@ -0,0 +1,29 @@
+import { type ComponentPropsWithoutRef, useCallback } from "react";
+import { useTabSlotRegistry } from "./TabSlotRegistryContext";
+
+export interface TabSlotProps extends ComponentPropsWithoutRef<"div"> {
+  slotId: string;
+  value: string;
+}
+
+export function TabSlot({ slotId, value, ...rest }: TabSlotProps) {
+  const slotRegistry = useTabSlotRegistry();
+  const handleRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      slotRegistry?.registerSlot(slotId, element);
+    },
+    [slotId, slotRegistry],
+  );
+
+  return (
+    <div
+      role="presentation"
+      data-tabslot=""
+      data-slotid={slotId}
+      data-value={value}
+      ref={handleRef}
+      style={{ display: "contents" }}
+      {...rest}
+    />
+  );
+}
diff --git a/packages/lab/src/tabs-next/TabSlotRegistryContext.tsx b/packages/lab/src/tabs-next/TabSlotRegistryContext.tsx
new file mode 100644
index 00000000000..0b848122c9b
--- /dev/null
+++ b/packages/lab/src/tabs-next/TabSlotRegistryContext.tsx
@@ -0,0 +1,16 @@
+import { createContext } from "@salt-ds/core";
+import { useContext } from "react";
+
+export interface TabSlotRegistryContextValue {
+  registerSlot: (slotId: string, element: HTMLDivElement | null) => void;
+}
+
+export const TabSlotRegistryContext =
+  createContext<TabSlotRegistryContextValue | null>(
+    "TabSlotRegistryContext",
+    null,
+  );
+
+export function useTabSlotRegistry() {
+  return useContext(TabSlotRegistryContext);
+}
diff --git a/packages/lab/src/tabs-next/TabsNext.css b/packages/lab/src/tabs-next/TabsNext.css
new file mode 100644
index 00000000000..dce14c9b29d
--- /dev/null
+++ b/packages/lab/src/tabs-next/TabsNext.css
@@ -0,0 +1,3 @@
+.saltTabsNext {
+  min-width: 0;
+}
diff --git a/packages/lab/src/tabs-next/TabsNext.tsx b/packages/lab/src/tabs-next/TabsNext.tsx
index 9d0c9a9c388..81698e75d11 100644
--- a/packages/lab/src/tabs-next/TabsNext.tsx
+++ b/packages/lab/src/tabs-next/TabsNext.tsx
@@ -1,4 +1,6 @@
-import { makePrefixer, useControlled, useEventCallback } from "@salt-ds/core";
+import { makePrefixer, useControlled } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
   type ComponentPropsWithoutRef,
@@ -11,6 +13,9 @@ import {
   useState,
 } from "react";
 import { useCollection } from "./hooks/useCollection";
+import { useOverflowSelectionState } from "./hooks/useOverflowSelectionState";
+import { useRenderedTabsRegistry } from "./hooks/useRenderedTabsRegistry";
+import tabsNextCss from "./TabsNext.css";
 import { type Item, TabsNextContext } from "./TabsNextContext";
 
 export interface TabsNextProps
@@ -25,108 +30,163 @@ export interface TabsNextProps
    */
   value?: string;
   /**
-   * Callback fired when the selection changes. The event will be null when selection is moved automatically.
+   * Callback fired when the selection changes. The event will be null when
+   * selection is moved automatically.
    */
   onChange?: (event: SyntheticEvent | null, value: string) => void;
 }
 
 const withBaseName = makePrefixer("saltTabsNext");
 
+function setValueIdMapEntry(
+  map: Map<string, string>,
+  value: string,
+  id: string,
+) {
+  if (map.get(value) === id) {
+    return map;
+  }
+
+  const next = new Map(map);
+  next.set(value, id);
+  return next;
+}
+
+function removeValueIdMapEntry(
+  map: Map<string, string>,
+  value: string,
+  id: string,
+) {
+  if (map.get(value) !== id) {
+    return map;
+  }
+
+  const next = new Map(map);
+  next.delete(value);
+  return next;
+}
+
 export const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(
   function TabsNext(props, ref) {
     const { className, children, value, defaultValue, onChange, ...rest } =
       props;
-
-    const [valueToTabIdMap, setValueToIdMap] = useState({
-      map: new Map<string, string>(),
-    });
-    const [valueToPanelIdMap, setValueToPanelIdMap] = useState({
-      map: new Map<string, string>(),
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tabs-next",
+      css: tabsNextCss,
+      window: targetWindow,
     });
 
+    const [valueToTabIdMap, setValueToIdMap] = useState(
+      () => new Map<string, string>(),
+    );
+    const [valueToPanelIdMap, setValueToPanelIdMap] = useState(
+      () => new Map<string, string>(),
+    );
+    const {
+      renderMode,
+      registerBootstrapTab,
+      setBootstrapTabReady,
+      setBootstrapOverflowReady,
+      registerRenderedTab,
+      updateRenderedTab,
+      getRenderedTab,
+      getRenderedTabOrder,
+      renderedTabs,
+    } = useRenderedTabsRegistry();
+
     const {
       registerItem,
+      updateItem,
       item,
       getNext,
       getPrevious,
       getFirst,
       getLast,
-      items,
-    } = useCollection({ wrap: true });
+      itemAt,
+      getIndex,
+      sortItems,
+      removalVersion,
+      getRemovedItems,
+    } = useCollection({ targetWindow, wrap: true });
 
     const activeTab = useRef<Pick<Item, "id" | "value">>();
-    const removedActiveTabRef = useRef<string | undefined>(undefined);
 
     const [menuOpen, setMenuOpen] = useState(false);
 
     const [selected, setSelectedState] = useControlled({
       controlled: value,
       default: defaultValue,
-      name: "TabListNext",
+      name: "TabsNext",
       state: "selected",
     });
 
-    const setSelected = useCallback(
-      (event: SyntheticEvent | null, value: string) => {
-        setMenuOpen(false);
-        setSelectedState(value);
-        onChange?.(event, value);
+    const commitSelection = useCallback(
+      (event: SyntheticEvent | null, newValue: string) => {
+        setSelectedState(newValue);
+        if (selected !== newValue) {
+          onChange?.(event, newValue);
+        }
       },
-      [onChange],
+      [onChange, selected],
     );
-
-    const registerTab = useEventCallback((item: Item) => {
-      const cleanup = registerItem(item);
-      setValueToIdMap(({ map }) => {
-        map.set(item.value, item.id);
-        return { map };
+    const { selectionFromOverflowValueRef, setSelected } =
+      useOverflowSelectionState({
+        commitSelection,
+        menuOpen,
+        selected,
+        setMenuOpen,
       });
 
-      return () => {
-        cleanup();
-        setValueToIdMap(({ map }) => {
-          map.delete(item.value);
-          return { map };
-        });
-
-        if (activeTab.current?.value !== item.value) {
-          return;
-        }
-
-        removedActiveTabRef.current = item.value;
-      };
-    });
+    const registerTab = useCallback(
+      (tab: Item) => {
+        const cleanup = registerItem(tab);
+        setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));
+
+        return () => {
+          cleanup();
+          setValueToIdMap((map) =>
+            removeValueIdMapEntry(map, tab.value, tab.id),
+          );
+        };
+      },
+      [registerItem],
+    );
 
     const registerPanel = useCallback((id: string, value: string) => {
-      setValueToPanelIdMap(({ map }) => {
-        map.set(value, id);
-        return { map };
-      });
+      setValueToPanelIdMap((map) => setValueIdMapEntry(map, value, id));
       return () => {
-        setValueToIdMap(({ map }) => {
-          map.delete(value);
-          return { map };
-        });
+        setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value, id));
       };
     }, []);
 
     const getPanelId = useCallback(
       (value: string) => {
-        return valueToPanelIdMap.map.get(value);
+        return valueToPanelIdMap.get(value);
       },
       [valueToPanelIdMap],
     );
 
     const getTabId = useCallback(
       (value: string) => {
-        return valueToTabIdMap.map.get(value);
+        return valueToTabIdMap.get(value);
       },
       [valueToTabIdMap],
     );
 
     const context = useMemo(
       () => ({
+        renderMode,
+        registerBootstrapTab,
+        setBootstrapTabReady,
+        setBootstrapOverflowReady,
         registerTab,
+        updateTab: updateItem,
+        registerRenderedTab,
+        updateRenderedTab,
+        getRenderedTab,
+        getRenderedTabOrder,
+        renderedTabs,
         registerPanel,
         getPanelId,
         getTabId,
@@ -137,15 +197,29 @@ export const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(
         getPrevious,
         getFirst,
         getLast,
-        items,
         activeTab,
+        selectionFromOverflowValueRef,
         menuOpen,
         setMenuOpen,
-        removedActiveTabRef,
+        itemAt,
+        getIndex,
+        sortItems,
+        removalVersion,
+        getRemovedItems,
       }),
       [
+        renderMode,
+        registerBootstrapTab,
+        setBootstrapTabReady,
+        setBootstrapOverflowReady,
         registerPanel,
         registerTab,
+        updateItem,
+        registerRenderedTab,
+        updateRenderedTab,
+        getRenderedTab,
+        getRenderedTabOrder,
+        renderedTabs,
         getPanelId,
         getTabId,
         selected,
@@ -155,8 +229,13 @@ export const TabsNext = forwardRef<HTMLDivElement, TabsNextProps>(
         getPrevious,
         getFirst,
         getLast,
-        items,
         menuOpen,
+        itemAt,
+        getIndex,
+        sortItems,
+        removalVersion,
+        getRemovedItems,
+        selectionFromOverflowValueRef,
       ],
     );
 
diff --git a/packages/lab/src/tabs-next/TabsNextContext.tsx b/packages/lab/src/tabs-next/TabsNextContext.tsx
index a26f42cb316..a7a33f71c07 100644
--- a/packages/lab/src/tabs-next/TabsNextContext.tsx
+++ b/packages/lab/src/tabs-next/TabsNextContext.tsx
@@ -11,19 +11,53 @@ import type { useCollection } from "./hooks/useCollection";
 export interface Item {
   id: string;
   value: string;
-  element: HTMLElement;
+  element: HTMLElement | null;
+  location?: "hidden" | "main" | "overflow";
+  order?: number;
 }
 
+export interface RenderedTab {
+  host: HTMLDivElement;
+  id: string;
+  marker: HTMLElement | null;
+  root: HTMLElement | null;
+  trigger: HTMLButtonElement | null;
+  value: string;
+  width: number;
+}
+
+export type TabsNextRenderMode = "inline" | "portal";
+
 export interface TabsNextContextValue
-  extends Omit<ReturnType<typeof useCollection>, "registerItem"> {
+  extends Omit<
+    ReturnType<typeof useCollection>,
+    "registerItem" | "updateItem"
+  > {
+  renderMode: TabsNextRenderMode;
+  registerBootstrapTab: (value: string) => () => void;
+  setBootstrapTabReady: (value: string, ready: boolean) => void;
+  setBootstrapOverflowReady: (ready: boolean) => void;
   registerTab: (item: Item) => () => void;
+  updateTab: (id: string, updates: Partial<Omit<Item, "id" | "value">>) => void;
+  registerRenderedTab: (tab: RenderedTab) => () => void;
+  updateRenderedTab: (
+    value: string,
+    updates: Partial<Omit<RenderedTab, "value">>,
+  ) => void;
+  getRenderedTab: (value: string) => RenderedTab | undefined;
+  getRenderedTabOrder: (value: string) => number;
+  renderedTabs: RenderedTab[];
   registerPanel: (id: string, value: string) => () => void;
   getPanelId: (value: string) => string | undefined;
   getTabId: (value: string) => string | undefined;
   selected?: string;
-  setSelected: (event: SyntheticEvent, value: string) => void;
+  setSelected: (
+    event: SyntheticEvent | null,
+    value: string,
+    source?: "main" | "overflow",
+  ) => void;
   activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
-  removedActiveTabRef: MutableRefObject<string | undefined>;
+  selectionFromOverflowValueRef: MutableRefObject<string | null>;
   menuOpen: boolean;
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -36,17 +70,31 @@ export const TabsNextContext = createContext<TabsNextContextValue>(
     getNext: () => null,
     getPrevious: () => null,
     item: () => null,
-    items: [],
+    getIndex: () => -1,
+    itemAt: () => null,
+    sortItems: () => undefined,
+    renderMode: "inline",
+    registerBootstrapTab: () => () => undefined,
+    setBootstrapTabReady: () => undefined,
+    setBootstrapOverflowReady: () => undefined,
     selected: undefined,
     registerTab: () => () => undefined,
+    updateTab: () => undefined,
+    registerRenderedTab: () => () => undefined,
+    updateRenderedTab: () => undefined,
+    getRenderedTab: () => undefined,
+    getRenderedTabOrder: () => -1,
+    renderedTabs: [],
     registerPanel: () => () => undefined,
     getPanelId: () => undefined,
     getTabId: () => undefined,
     setSelected: () => undefined,
     activeTab: { current: undefined },
-    removedActiveTabRef: { current: undefined },
+    selectionFromOverflowValueRef: { current: null },
     menuOpen: false,
     setMenuOpen: () => undefined,
+    removalVersion: 0,
+    getRemovedItems: () => new Map(),
   },
 );
 
diff --git a/packages/lab/src/tabs-next/domUtils.ts b/packages/lab/src/tabs-next/domUtils.ts
new file mode 100644
index 00000000000..8abbf86d7cb
--- /dev/null
+++ b/packages/lab/src/tabs-next/domUtils.ts
@@ -0,0 +1,11 @@
+export function isHTMLElement(node: unknown): node is HTMLElement {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+
+  const ownerDocument = (node as { ownerDocument?: Document | null })
+    .ownerDocument;
+  const defaultView = ownerDocument?.defaultView;
+
+  return !!defaultView && node instanceof defaultView.HTMLElement;
+}
diff --git a/packages/lab/src/tabs-next/hooks/overflowMath.ts b/packages/lab/src/tabs-next/hooks/overflowMath.ts
new file mode 100644
index 00000000000..5602c56aeba
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/overflowMath.ts
@@ -0,0 +1,116 @@
+export const MIN_TRUSTED_TAB_WIDTH = 0.5;
+
+export interface MeasuredOverflowTab {
+  value: string;
+  width: number | null;
+}
+
+interface CalculateVisibleCountProps {
+  gap: number;
+  maxWidth: number;
+  overflowWidth: number;
+  pinnedValue?: string;
+  tabs: MeasuredOverflowTab[];
+}
+
+export function calculateVisibleCount({
+  gap,
+  maxWidth: initialMaxWidth,
+  overflowWidth,
+  pinnedValue,
+  tabs,
+}: CalculateVisibleCountProps) {
+  let maxWidth = initialMaxWidth;
+  let currentWidth = 0;
+  let nextVisibleCount = 0;
+  const visibleItems: MeasuredOverflowTab[] = [];
+
+  while (nextVisibleCount < tabs.length) {
+    const item = tabs[nextVisibleCount];
+    if (!item) {
+      break;
+    }
+
+    if (item.width == null) {
+      return null;
+    }
+
+    const itemWidth = item.width + gap;
+    if (currentWidth + itemWidth > maxWidth) {
+      break;
+    }
+
+    currentWidth += itemWidth;
+    visibleItems.push(item);
+    nextVisibleCount += 1;
+  }
+
+  const allTabsFit = nextVisibleCount >= tabs.length;
+  if (allTabsFit) {
+    return nextVisibleCount;
+  }
+
+  maxWidth -= overflowWidth;
+
+  while (currentWidth > maxWidth) {
+    const removed = visibleItems.pop();
+    if (!removed) {
+      break;
+    }
+    if (removed.width == null) {
+      return null;
+    }
+    currentWidth -= removed.width + gap;
+    nextVisibleCount -= 1;
+  }
+
+  const pinnedItem =
+    pinnedValue == null
+      ? null
+      : (tabs.find((item) => item.value === pinnedValue) ?? null);
+
+  if (pinnedItem && !visibleItems.includes(pinnedItem)) {
+    if (pinnedItem.width == null) {
+      return null;
+    }
+
+    const pinnedWidth = pinnedItem.width + gap;
+    while (currentWidth + pinnedWidth > maxWidth) {
+      const removed = visibleItems.pop();
+      if (!removed) {
+        break;
+      }
+      if (removed.width == null) {
+        return null;
+      }
+      currentWidth -= removed.width + gap;
+      nextVisibleCount -= 1;
+    }
+  }
+
+  return Math.max(0, nextVisibleCount);
+}
+
+export function partitionVisibleValues(
+  orderedValues: string[],
+  visibleCount: number,
+  pinnedValue?: string,
+) {
+  let visibleValues = orderedValues.slice(0, visibleCount);
+  let hiddenValues = orderedValues.slice(visibleCount);
+
+  const hiddenPinnedIndex =
+    pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;
+
+  if (hiddenPinnedIndex !== -1) {
+    const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];
+    hiddenValues = hiddenValues.filter(
+      (_, index) => index !== hiddenPinnedIndex,
+    );
+    if (pinnedHiddenValue !== undefined) {
+      visibleValues = [...visibleValues, pinnedHiddenValue];
+    }
+  }
+
+  return { visibleValues, hiddenValues };
+}
diff --git a/packages/lab/src/tabs-next/hooks/useCollection.ts b/packages/lab/src/tabs-next/hooks/useCollection.ts
index d5d01dbbc6c..278b2fa1bbc 100644
--- a/packages/lab/src/tabs-next/hooks/useCollection.ts
+++ b/packages/lab/src/tabs-next/hooks/useCollection.ts
@@ -1,24 +1,47 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export interface Item {
   id: string;
   element?: HTMLElement | null;
   value: string;
+  location?: "hidden" | "main" | "overflow";
+  order?: number;
+  stale?: boolean;
+}
+
+interface StaleItem extends Item {
+  staleIndex?: number;
 }
 
 function sortBasedOnDOMPosition(items: Item[]): Item[] {
   const indexedItems = items.map((item, index) => [index, item] as const);
   let orderChanged = false;
   indexedItems.sort(([itemAIndex, itemA], [itemBIndex, itemB]) => {
+    if (
+      itemA.order != null &&
+      itemA.order >= 0 &&
+      itemB.order != null &&
+      itemB.order >= 0 &&
+      itemA.order !== itemB.order
+    ) {
+      if (
+        (itemA.order < itemB.order && itemAIndex > itemBIndex) ||
+        (itemA.order > itemB.order && itemAIndex < itemBIndex)
+      ) {
+        orderChanged = true;
+      }
+      return itemA.order - itemB.order;
+    }
+
     const itemAElement = itemA.element;
     const itemBElement = itemB.element;
     if (itemAElement === itemBElement) return 0;
     if (!itemAElement || !itemBElement) return 0;
 
-    if (
-      itemAElement.compareDocumentPosition(itemBElement) &
-      Node.DOCUMENT_POSITION_FOLLOWING
-    ) {
+    const pos = itemAElement.compareDocumentPosition(itemBElement);
+    if (pos & Node.DOCUMENT_POSITION_DISCONNECTED) return 0;
+
+    if (pos & Node.DOCUMENT_POSITION_FOLLOWING) {
       if (itemAIndex > itemBIndex) {
         orderChanged = true;
       }
@@ -38,77 +61,199 @@ function sortBasedOnDOMPosition(items: Item[]): Item[] {
 }
 
 interface UseCollectionProps {
+  targetWindow: Window | null | undefined;
   wrap: boolean;
 }
 
-export function useCollection({ wrap }: UseCollectionProps) {
-  const [items, setItems] = useState<Item[]>([]);
+export function useCollection({ wrap, targetWindow }: UseCollectionProps) {
   const itemsRef = useRef<Item[]>([]);
   const itemMap = useRef<Map<string, Item>>(new Map());
+  const removedItems = useRef<Map<string, StaleItem>>(new Map());
+  const [removalVersion, setRemovalVersion] = useState(0);
 
-  const registerItem = useCallback((item: Item) => {
-    setItems((old) => {
-      const newItems = old.slice();
-      const index = newItems.findIndex(({ id }) => id === item.id);
-      if (index !== -1) {
-        const newItem = { ...newItems[index], ...item };
-        newItems[index] = newItem;
-        itemMap.current.set(item.id, newItem);
-      } else {
-        newItems.push(item);
-        itemMap.current.set(item.id, item);
+  const getOrderedItems = useCallback(() => {
+    return sortBasedOnDOMPosition(Array.from(itemMap.current.values()));
+  }, []);
+
+  const getNavigableItems = useCallback(() => {
+    return getOrderedItems().filter((item) => {
+      if (item.location === "hidden") {
+        return false;
       }
-      const value = sortBasedOnDOMPosition(newItems);
-      itemsRef.current = value;
-      return value;
+
+      return !!item.element;
     });
+  }, [getOrderedItems]);
 
-    return () => {
-      setItems((old) => {
+  const sortItems = useCallback(() => {
+    itemsRef.current = getOrderedItems();
+  }, [getOrderedItems]);
+
+  const getRemovedItems = useCallback(() => {
+    const items = new Map(removedItems.current);
+    removedItems.current.clear();
+
+    return items;
+  }, []);
+
+  const rafId = useRef<number | null>(null);
+
+  const scheduleSort = useCallback(() => {
+    if (!targetWindow?.requestAnimationFrame) {
+      sortItems();
+      return;
+    }
+
+    if (rafId.current != null) {
+      targetWindow.cancelAnimationFrame(rafId.current);
+    }
+
+    rafId.current = targetWindow.requestAnimationFrame(() => {
+      rafId.current = null;
+      sortItems();
+    });
+  }, [sortItems, targetWindow]);
+
+  const registerItem = useCallback(
+    (item: Item) => {
+      itemMap.current.set(item.id, item);
+      removedItems.current.delete(item.id);
+      scheduleSort();
+
+      return () => {
+        const currentItems = getOrderedItems();
+        const currentItem = itemMap.current.get(item.id) ?? item;
+        const staleIndex = currentItems.findIndex(({ id }) => id === item.id);
+
+        removedItems.current.set(item.id, {
+          ...currentItem,
+          staleIndex,
+        });
+
+        itemsRef.current = currentItems.filter(({ id }) => id !== item.id);
         itemMap.current.delete(item.id);
-        return old.filter(({ id }) => id !== item.id);
+        setRemovalVersion((currentVersion) => currentVersion + 1);
+      };
+    },
+    [getOrderedItems, scheduleSort],
+  );
+
+  const updateItem = useCallback(
+    (id: string, updates: Partial<Omit<Item, "id" | "value">>) => {
+      const currentItem = itemMap.current.get(id);
+      if (!currentItem) {
+        return;
+      }
+
+      let changed = false;
+      const nextItem = { ...currentItem };
+
+      for (const [key, nextValue] of Object.entries(updates)) {
+        const typedKey = key as keyof Omit<Item, "id" | "value">;
+        if (nextItem[typedKey] !== nextValue) {
+          changed = true;
+          nextItem[typedKey] = nextValue as never;
+        }
+      }
+
+      if (!changed) {
+        return;
+      }
+
+      itemMap.current.set(id, nextItem);
+      itemsRef.current = itemsRef.current.map((item) => {
+        if (item.id !== id) {
+          return item;
+        }
+
+        return nextItem;
       });
-      return itemsRef;
+      scheduleSort();
+    },
+    [scheduleSort],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (rafId.current != null && targetWindow) {
+        targetWindow.cancelAnimationFrame(rafId.current);
+      }
     };
-  }, []);
+  }, [targetWindow]);
 
   return {
     registerItem,
-    item: (id?: string | null): Item | null => {
+    item: useCallback((id?: string | null): Item | null => {
       if (!id) return null;
       let item = itemMap.current.get(id);
       if (!item) {
-        item = items.find((item) => item.id === id);
+        item = itemsRef.current.find((item) => item.id === id);
         if (item) {
           itemMap.current.set(item.id, item);
         }
       }
       return item ?? null;
-    },
-    getNext: (current: string): Item | null => {
-      const index = items.findIndex(({ id }) => id === current);
+    }, []),
+    getNext: useCallback(
+      (current: string): Item | null => {
+        const items = getNavigableItems();
+        if (items.length === 0) return null;
 
-      const newIndex = wrap
-        ? (index + 1) % items.length
-        : Math.min(index + 1, items.length - 1);
+        const index = items.findIndex(({ id }) => id === current);
 
-      return items[newIndex] ?? null;
-    },
-    getPrevious: (current: string): Item | null => {
-      const index = items.findIndex(({ id }) => id === current);
+        if (index === -1) {
+          return wrap ? items[0] : null;
+        }
 
-      const newIndex = wrap
-        ? (index - 1 + items.length) % items.length
-        : Math.max(index - 1, 0);
+        const newIndex = wrap
+          ? (index + 1) % items.length
+          : Math.min(index + 1, items.length - 1);
 
-      return items[newIndex] ?? null;
-    },
-    getFirst: (): Item | null => {
-      return items[0] ?? null;
-    },
-    getLast: (): Item | null => {
+        return items[newIndex] ?? null;
+      },
+      [getNavigableItems, wrap],
+    ),
+    getPrevious: useCallback(
+      (current: string): Item | null => {
+        const items = getNavigableItems();
+        if (items.length === 0) return null;
+
+        const index = items.findIndex(({ id }) => id === current);
+
+        if (index === -1) {
+          return wrap ? items[items.length - 1] : null;
+        }
+
+        const newIndex = wrap
+          ? (index - 1 + items.length) % items.length
+          : Math.max(index - 1, 0);
+
+        return items[newIndex] ?? null;
+      },
+      [getNavigableItems, wrap],
+    ),
+    getFirst: useCallback((): Item | null => {
+      return getNavigableItems()[0] ?? null;
+    }, [getNavigableItems]),
+    getLast: useCallback((): Item | null => {
+      const items = getNavigableItems();
       return items[items.length - 1] ?? null;
-    },
-    items,
+    }, [getNavigableItems]),
+    getIndex: useCallback(
+      (current: string): number => {
+        return getNavigableItems().findIndex(({ id }) => id === current);
+      },
+      [getNavigableItems],
+    ),
+    itemAt: useCallback(
+      (index: number): Item | null => {
+        return getNavigableItems()[index] ?? null;
+      },
+      [getNavigableItems],
+    ),
+    updateItem,
+    getRemovedItems,
+    removalVersion,
+    sortItems,
   };
 }
diff --git a/packages/lab/src/tabs-next/hooks/useFocusOutside.ts b/packages/lab/src/tabs-next/hooks/useFocusOutside.ts
deleted file mode 100644
index 899041dbd15..00000000000
--- a/packages/lab/src/tabs-next/hooks/useFocusOutside.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useWindow } from "@salt-ds/window";
-import { type RefObject, useEffect } from "react";
-
-export function useFocusOutside(
-  elementRef: RefObject<HTMLElement>,
-  onFocusOutside: () => void,
-  enabled: boolean,
-  ignore?: string,
-) {
-  const targetWindow = useWindow();
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    const handleFocus = (event: FocusEvent) => {
-      const ignoreElement = ignore
-        ? elementRef.current?.ownerDocument?.querySelector<HTMLElement>(ignore)
-        : undefined;
-
-      // If focus is outside the tabstrip (including the list) then close the list.
-      if (
-        event.target instanceof HTMLElement &&
-        !elementRef.current?.contains(event.target) &&
-        !ignoreElement?.contains(event.target)
-      ) {
-        onFocusOutside();
-      }
-    };
-
-    targetWindow?.addEventListener("focusin", handleFocus);
-
-    return () => {
-      targetWindow?.removeEventListener("focusin", handleFocus);
-    };
-  }, [targetWindow, onFocusOutside, elementRef, enabled, ignore]);
-}
diff --git a/packages/lab/src/tabs-next/hooks/useFocusWithRetry.ts b/packages/lab/src/tabs-next/hooks/useFocusWithRetry.ts
new file mode 100644
index 00000000000..6f1f00f9384
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useFocusWithRetry.ts
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface UseFocusWithRetryArgs {
+  maxAttempts?: number;
+  targetWindow: Window | null | undefined;
+}
+
+export function useFocusWithRetry({
+  maxAttempts = 120,
+  targetWindow,
+}: UseFocusWithRetryArgs) {
+  const focusRafRef = useRef<number | null>(null);
+
+  const cancelScheduledFocus = useCallback(() => {
+    if (focusRafRef.current != null && targetWindow) {
+      targetWindow.cancelAnimationFrame(focusRafRef.current);
+      focusRafRef.current = null;
+    }
+  }, [targetWindow]);
+
+  const focusElementWithRetry = useCallback(
+    (getElement: () => HTMLElement | null | undefined) => {
+      const doc = targetWindow?.document;
+      if (!doc) {
+        getElement()?.focus({ preventScroll: true });
+        return;
+      }
+
+      cancelScheduledFocus();
+
+      let attempts = 0;
+
+      const focusElement = () => {
+        const element = getElement();
+        if (!element?.isConnected) {
+          if (attempts >= maxAttempts || !targetWindow?.requestAnimationFrame) {
+            return;
+          }
+
+          attempts += 1;
+          focusRafRef.current =
+            targetWindow.requestAnimationFrame(focusElement);
+          return;
+        }
+
+        element.focus({ preventScroll: true });
+
+        if (doc.activeElement === element || attempts >= maxAttempts) {
+          focusRafRef.current = null;
+          return;
+        }
+
+        attempts += 1;
+        if (targetWindow?.requestAnimationFrame) {
+          focusRafRef.current =
+            targetWindow.requestAnimationFrame(focusElement);
+        } else {
+          queueMicrotask(focusElement);
+        }
+      };
+
+      focusElement();
+    },
+    [cancelScheduledFocus, maxAttempts, targetWindow],
+  );
+
+  useEffect(() => {
+    return () => {
+      cancelScheduledFocus();
+    };
+  }, [cancelScheduledFocus]);
+
+  return {
+    cancelScheduledFocus,
+    focusElementWithRetry,
+  };
+}
diff --git a/packages/lab/src/tabs-next/hooks/useOverflow.ts b/packages/lab/src/tabs-next/hooks/useOverflow.ts
index 9a4ceb5b01e..a2c3c19fa7f 100644
--- a/packages/lab/src/tabs-next/hooks/useOverflow.ts
+++ b/packages/lab/src/tabs-next/hooks/useOverflow.ts
@@ -1,241 +1,338 @@
+import { ownerWindow, useIsomorphicLayoutEffect } from "@salt-ds/core";
 import {
-  ownerWindow,
-  useEventCallback,
-  useIsomorphicLayoutEffect,
-  useValueEffect,
-} from "@salt-ds/core";
-import { useWindow } from "@salt-ds/window";
-import {
-  Children,
-  isValidElement,
-  type ReactNode,
+  type MutableRefObject,
   type RefObject,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
-import type { TabNextProps } from "../TabNext";
-import type { Item } from "./useCollection";
+import { isHTMLElement } from "../domUtils";
+import type { RenderedTab } from "../TabsNextContext";
+import {
+  getGapValue,
+  getMeasuredWidth,
+  seedWidthMap,
+  updateWidthMap,
+} from "../widthMeasurement";
+import {
+  calculateVisibleCount,
+  MIN_TRUSTED_TAB_WIDTH,
+  partitionVisibleValues,
+} from "./overflowMath";
 
 interface UseOverflowProps {
   container: RefObject<HTMLElement>;
   selected?: string;
-  children: ReactNode;
-  tabs: Item[];
+  tabs: RenderedTab[];
   overflowButton: RefObject<HTMLButtonElement>;
+  menuOpen: boolean;
+}
+
+function getTabWidth(tab: RenderedTab) {
+  const width = tab.width || getMeasuredWidth(tab.root);
+  return width > MIN_TRUSTED_TAB_WIDTH ? width : null;
+}
+
+function getAvailableWidth(element: HTMLElement) {
+  const parent = element.parentElement;
+  if (!parent) {
+    return getMeasuredWidth(element);
+  }
+
+  const parentWidth = getMeasuredWidth(parent);
+  const parentStyles = ownerWindow(parent).getComputedStyle(parent);
+  const parentGap = getGapValue(parentStyles);
+  const siblings = Array.from(parent.children).filter(
+    (child): child is HTMLElement => {
+      if (!isHTMLElement(child) || child === element) {
+        return false;
+      }
+
+      return ownerWindow(child).getComputedStyle(child).display !== "none";
+    },
+  );
+
+  const siblingWidth = siblings.reduce((width, sibling) => {
+    return width + getMeasuredWidth(sibling);
+  }, 0);
+  const gapCount = siblings.length > 0 ? siblings.length : 0;
+  const availableWidth = Math.max(
+    0,
+    parentWidth - siblingWidth - gapCount * parentGap,
+  );
+  return availableWidth;
 }
 
-function getTabWidth(element: HTMLElement) {
-  const { width } = element.getBoundingClientRect();
-  return Math.ceil(width);
+function isSelectedValueHidden(
+  selected: string | undefined,
+  hiddenValues: string[],
+) {
+  return selected !== undefined && hiddenValues.includes(selected);
+}
+
+function getPinnedSelectionValue(
+  selected: string | undefined,
+  selectedIsHidden: boolean,
+  pinnedSelectionRef: MutableRefObject<string | undefined>,
+) {
+  return selectedIsHidden ? selected : pinnedSelectionRef.current;
 }
 
 export function useOverflow({
-  tabs,
   container,
   overflowButton,
-  children,
+  tabs,
   selected,
+  menuOpen,
 }: UseOverflowProps) {
-  /**
-   * `visibleCount` doesn't include newly selected tab from overflow menu, which is removed in `computeVisible`
-   */
-  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({
-    visibleCount: tabs.length,
-    isMeasuring: false,
-  });
-  const targetWindow = useWindow();
-  const realSelectedIndex = useRef<number>(-1);
-
-  const updateOverflow = useEventCallback(() => {
-    const computeVisible = (visibleCount: number) => {
-      if (container.current && targetWindow) {
-        const items = Array.from(
-          container.current.querySelectorAll<HTMLElement>(
-            "[data-overflowitem]",
-          ),
-        );
-        const selectedTab = container.current.querySelector<HTMLElement>(
-          "[role=tab][aria-selected=true]",
-        )?.parentElement;
-
-        let maxWidth = container.current.clientWidth ?? 0;
-
-        const containerStyles = targetWindow.getComputedStyle(
-          container.current,
-        );
-        const gap = Number.parseInt(containerStyles.gap || "0", 10);
-
-        let currentWidth = 0;
-        let newVisibleCount = 0;
-
-        const visible = [];
-
-        while (newVisibleCount < items.length) {
-          const element = items[newVisibleCount];
-          if (element) {
-            if (currentWidth + getTabWidth(element) + gap > maxWidth) {
-              break;
-            }
-            currentWidth += getTabWidth(element) + gap;
-            visible.push(element);
-          }
-          newVisibleCount++;
-        }
+  const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);
+  const measurementInputKey = useMemo(() => {
+    return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join("\0");
+  }, [tabs]);
+  const [visibleCount, setVisibleCount] = useState(0);
+  const [isMeasuring, setIsMeasuring] = useState(true);
+  const [measureRetryVersion, setMeasureRetryVersion] = useState(0);
+  const pinnedSelectionRef = useRef(selected);
+  const previousOverflowButtonWidthRef = useRef(0);
+  const previousMeasurementInputKeyRef = useRef(measurementInputKey);
+  const previousMenuOpenRef = useRef(menuOpen);
+  const measureRetryFrameRef = useRef<number | null>(null);
+  const measureRetryCountRef = useRef(0);
+  const baseHiddenValues = orderedValues.slice(visibleCount);
+  const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);
+  const pinnedValue = getPinnedSelectionValue(
+    selected,
+    selectedIsHidden,
+    pinnedSelectionRef,
+  );
+  const getCurrentPinnedValue = useCallback(() => {
+    return getPinnedSelectionValue(
+      selected,
+      selectedIsHidden,
+      pinnedSelectionRef,
+    );
+  }, [selected, selectedIsHidden]);
+  const markMeasurementStale = useCallback(() => {
+    setIsMeasuring(true);
+  }, []);
+
+  const measureVisibleCount = useCallback(
+    (pinnedValue?: string) => {
+      const element = container.current;
+      if (!element) {
+        return null;
+      }
 
-        if (newVisibleCount >= items.length) {
-          return newVisibleCount;
-        }
+      const maxWidth = getAvailableWidth(element);
+      const styles = ownerWindow(element).getComputedStyle(element);
+      const gap = getGapValue(styles);
+      const overflowWidth = overflowButton.current
+        ? overflowButton.current.offsetWidth + gap
+        : 0;
+      const measuredTabs = tabs.map((tab) => ({
+        value: tab.value,
+        width: getTabWidth(tab),
+      }));
+
+      return calculateVisibleCount({
+        gap,
+        maxWidth,
+        overflowWidth,
+        pinnedValue,
+        tabs: measuredTabs,
+      });
+    },
+    [container, overflowButton, tabs],
+  );
+  const clearMeasureRetry = useCallback(() => {
+    const element = container.current;
+    const frame = measureRetryFrameRef.current;
 
-        const overflowButtonWidth = overflowButton.current
-          ? overflowButton.current.offsetWidth + gap
-          : 0;
-        maxWidth -= overflowButtonWidth;
+    if (element && frame != null) {
+      ownerWindow(element).cancelAnimationFrame(frame);
+    }
 
-        while (currentWidth > maxWidth) {
-          const removed = visible.pop();
-          if (!removed) break;
-          currentWidth -= getTabWidth(removed) + gap;
-          newVisibleCount--;
-        }
+    measureRetryFrameRef.current = null;
+    measureRetryCountRef.current = 0;
+  }, [container]);
 
-        if (selectedTab && !visible.includes(selectedTab)) {
-          const selectedTabWidth = getTabWidth(selectedTab) + gap;
-          while (currentWidth + selectedTabWidth > maxWidth) {
-            const removed = visible.pop();
-            if (!removed) break;
-            currentWidth -= getTabWidth(removed) + gap;
-            newVisibleCount--;
-          }
-        }
+  useEffect(() => {
+    return clearMeasureRetry;
+  }, [clearMeasureRetry]);
 
-        // minimal count should be 0, if there is no space for any tab apart from selected tab from the overflow menu
-        return Math.max(0, newVisibleCount);
+  useIsomorphicLayoutEffect(() => {
+    if (selected !== undefined && selectedIsHidden) {
+      pinnedSelectionRef.current = selected;
+      const nextVisibleCount = measureVisibleCount(selected);
+      if (nextVisibleCount == null) {
+        markMeasurementStale();
+        return;
+      }
+      if (nextVisibleCount !== visibleCount) {
+        setVisibleCount(nextVisibleCount);
       }
-      return visibleCount;
-    };
-
-    setVisibleItems(function* () {
-      // Show all
-      yield {
-        visibleCount: tabs.length,
-        isMeasuring: true,
-      };
-
-      // Measure the visible count
-      const newVisibleCount = computeVisible(tabs.length);
-      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;
-      yield {
-        visibleCount: newVisibleCount,
-        isMeasuring,
-      };
-
-      // ensure the visible count is correct
       if (isMeasuring) {
-        yield {
-          visibleCount: computeVisible(newVisibleCount),
-          isMeasuring: false,
-        };
+        setIsMeasuring(false);
       }
-    });
-  });
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.
-  useIsomorphicLayoutEffect(() => {
-    updateOverflow();
-  }, [selected]);
+    }
+  }, [
+    isMeasuring,
+    markMeasurementStale,
+    measureVisibleCount,
+    selected,
+    selectedIsHidden,
+    visibleCount,
+  ]);
 
   useEffect(() => {
-    const handleWindowResize = () => {
-      updateOverflow();
-    };
+    const element = container.current;
+    if (!element || menuOpen || isMeasuring) {
+      return;
+    }
 
-    targetWindow?.addEventListener("resize", handleWindowResize);
+    const observedElements = [element];
+    const parent = element.parentElement;
+    if (parent) {
+      observedElements.push(parent);
+      for (const child of Array.from(parent.children)) {
+        if (isHTMLElement(child) && child !== element) {
+          observedElements.push(child);
+        }
+      }
+    }
 
-    return () => {
-      targetWindow?.removeEventListener("resize", handleWindowResize);
-    };
-  }, [updateOverflow, targetWindow]);
+    const widths = seedWidthMap(observedElements);
+    const resizeObserverCtor = ownerWindow(element).ResizeObserver;
+    if (!resizeObserverCtor) {
+      return;
+    }
 
-  useEffect(() => {
-    const element = container?.current;
-    if (!element) return;
+    const resizeObserver = new resizeObserverCtor(
+      (entries: ResizeObserverEntry[]) => {
+        for (const entry of entries) {
+          if (!isHTMLElement(entry.target)) {
+            continue;
+          }
 
-    const win = ownerWindow(element);
+          const nextWidth = entry.contentRect.width;
+          if (updateWidthMap(widths, entry.target, nextWidth)) {
+            const nextVisibleCount = measureVisibleCount(
+              getCurrentPinnedValue(),
+            );
 
-    const resizeObserver = new win.ResizeObserver((entries) => {
-      requestAnimationFrame(() => {
-        if (entries.length === 0) return;
+            if (nextVisibleCount != null && nextVisibleCount === visibleCount) {
+              continue;
+            }
 
-        updateOverflow();
-      });
-    });
-    resizeObserver.observe(element);
-    if (element.parentElement) {
-      resizeObserver.observe(element.parentElement);
+            markMeasurementStale();
+            return;
+          }
+        }
+      },
+    );
+
+    for (const observedElement of observedElements) {
+      resizeObserver.observe(observedElement);
     }
 
     return () => {
-      if (element) {
-        resizeObserver.unobserve(element);
-      }
+      resizeObserver.disconnect();
     };
-  }, [container, updateOverflow]);
+  }, [
+    container,
+    getCurrentPinnedValue,
+    isMeasuring,
+    markMeasurementStale,
+    measureVisibleCount,
+    menuOpen,
+    visibleCount,
+  ]);
 
-  useEffect(() => {
-    const element = container?.current;
-    if (!element || isMeasuring) return;
+  useIsomorphicLayoutEffect(() => {
+    if (previousMenuOpenRef.current && !menuOpen) {
+      markMeasurementStale();
+    }
 
-    const win = ownerWindow(element);
+    previousMenuOpenRef.current = menuOpen;
+  }, [markMeasurementStale, menuOpen]);
 
-    const mutationObserver = new win.MutationObserver(() => {
-      requestAnimationFrame(() => {
-        updateOverflow();
-      });
-    });
+  useIsomorphicLayoutEffect(() => {
+    const nextOverflowButtonWidth = overflowButton.current?.offsetWidth ?? 0;
+    if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {
+      return;
+    }
+
+    previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;
+    if (visibleCount < tabs.length) {
+      markMeasurementStale();
+    }
+  });
 
-    mutationObserver.observe(element, {
-      childList: true,
-    });
+  useIsomorphicLayoutEffect(() => {
+    if (previousMeasurementInputKeyRef.current !== measurementInputKey) {
+      previousMeasurementInputKeyRef.current = measurementInputKey;
+      markMeasurementStale();
+    }
+  }, [markMeasurementStale, measurementInputKey]);
 
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [container, updateOverflow, isMeasuring]);
+  useIsomorphicLayoutEffect(() => {
+    // A content-only tab width update can briefly leave a tab without a
+    // trustworthy measured width after it moves through the portal slots.
+    // Retry on the next frame instead of leaving overflow stuck measuring.
+    void measureRetryVersion;
 
-  const childArray = useMemo(() => Children.toArray(children), [children]);
-  const visible = useMemo(
-    () => childArray.slice(0, visibleCount),
-    [visibleCount, childArray],
-  );
-  const hidden = useMemo(
-    () => childArray.slice(visibleCount),
-    [childArray, visibleCount],
-  );
+    if (!isMeasuring || menuOpen) {
+      return;
+    }
 
-  const hiddenSelectedIndex = hidden.findIndex(
-    (child) =>
-      isValidElement<TabNextProps>(child) && child?.props?.value === selected,
-  );
+    const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());
 
-  useIsomorphicLayoutEffect(() => {
-    if (visibleCount === childArray.length) {
-      realSelectedIndex.current = childArray.findIndex(
-        (child) =>
-          isValidElement<TabNextProps>(child) &&
-          child?.props?.value === selected,
+    if (nextVisibleCount == null) {
+      if (measureRetryFrameRef.current != null) {
+        return;
+      }
+
+      const element = container.current;
+      if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {
+        measureRetryCountRef.current = 0;
+        return;
+      }
+
+      if (measureRetryCountRef.current >= 5) {
+        return;
+      }
+
+      measureRetryCountRef.current += 1;
+      measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(
+        () => {
+          measureRetryFrameRef.current = null;
+          setMeasureRetryVersion((currentVersion) => currentVersion + 1);
+        },
       );
+      return;
     }
-  }, [visibleCount, childArray, selected]);
-
-  if (selected && hiddenSelectedIndex !== -1) {
-    const removed = hidden.splice(hiddenSelectedIndex, 1);
-    visible.push(removed[0]);
-  }
 
-  if (isMeasuring) {
-    return [childArray, [], isMeasuring, realSelectedIndex] as const;
-  }
+    clearMeasureRetry();
+
+    setVisibleCount(nextVisibleCount);
+    setIsMeasuring(false);
+  }, [
+    clearMeasureRetry,
+    container.current,
+    getCurrentPinnedValue,
+    isMeasuring,
+    measureRetryVersion,
+    measureVisibleCount,
+    menuOpen,
+  ]);
+
+  const { visibleValues, hiddenValues } = partitionVisibleValues(
+    orderedValues,
+    visibleCount,
+    pinnedValue,
+  );
 
-  return [visible, hidden, isMeasuring, realSelectedIndex] as const;
+  return [visibleValues, hiddenValues, isMeasuring] as const;
 }
diff --git a/packages/lab/src/tabs-next/hooks/useOverflowLayoutState.ts b/packages/lab/src/tabs-next/hooks/useOverflowLayoutState.ts
new file mode 100644
index 00000000000..e69c5690eae
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useOverflowLayoutState.ts
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type {
+  TabListLayoutContextValue,
+  TabSlotLocation,
+} from "../TabListLayoutContext";
+
+function getOverflowStartIndex(
+  hiddenValues: string[],
+  currentValue: string,
+  fallbackValue: string | null,
+) {
+  const currentIndex = hiddenValues.indexOf(currentValue);
+  const fallbackIndex =
+    fallbackValue != null ? hiddenValues.indexOf(fallbackValue) : 0;
+
+  return currentIndex >= 0 ? currentIndex : Math.max(0, fallbackIndex);
+}
+
+interface UseOverflowLayoutStateArgs {
+  hiddenValues: string[];
+  menuOpen: boolean;
+  overflowMenuOpen: boolean;
+  visibleValues: string[];
+}
+
+interface UseOverflowLayoutStateResult {
+  resolvedOverflowActiveValue: string | null;
+  tabListLayoutContext: TabListLayoutContextValue;
+}
+
+export function useOverflowLayoutState({
+  hiddenValues,
+  menuOpen,
+  overflowMenuOpen,
+  visibleValues,
+}: UseOverflowLayoutStateArgs): UseOverflowLayoutStateResult {
+  const [requestedOverflowActiveValue, setRequestedOverflowActiveValue] =
+    useState<string | null>(null);
+
+  useEffect(() => {
+    if (!overflowMenuOpen) {
+      setRequestedOverflowActiveValue(null);
+    }
+  }, [overflowMenuOpen]);
+
+  const resolvedOverflowActiveValue = useMemo(() => {
+    if (!overflowMenuOpen) {
+      return null;
+    }
+
+    if (
+      requestedOverflowActiveValue &&
+      hiddenValues.includes(requestedOverflowActiveValue)
+    ) {
+      return requestedOverflowActiveValue;
+    }
+
+    return hiddenValues[0] ?? null;
+  }, [hiddenValues, overflowMenuOpen, requestedOverflowActiveValue]);
+
+  const hiddenValueSet = useMemo(() => new Set(hiddenValues), [hiddenValues]);
+  const visibleValueSet = useMemo(
+    () => new Set(visibleValues),
+    [visibleValues],
+  );
+
+  const getLocation = useCallback(
+    (value: string): TabSlotLocation => {
+      if (visibleValueSet.has(value)) {
+        return "main";
+      }
+
+      if (menuOpen && hiddenValueSet.has(value)) {
+        return "overflow";
+      }
+
+      return "hidden";
+    },
+    [hiddenValueSet, menuOpen, visibleValueSet],
+  );
+
+  const moveOverflowFocus = useCallback(
+    (key: "ArrowDown" | "ArrowUp" | "Home" | "End", value: string) => {
+      if (hiddenValues.length < 1) {
+        return false;
+      }
+
+      const startIndex = getOverflowStartIndex(
+        hiddenValues,
+        value,
+        resolvedOverflowActiveValue,
+      );
+      const lastIndex = hiddenValues.length - 1;
+      let nextIndex = startIndex;
+
+      switch (key) {
+        case "ArrowDown":
+          nextIndex = startIndex >= lastIndex ? 0 : startIndex + 1;
+          break;
+        case "ArrowUp":
+          nextIndex = startIndex <= 0 ? lastIndex : startIndex - 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+      }
+
+      const nextValue = hiddenValues[nextIndex];
+      if (!nextValue) {
+        return false;
+      }
+
+      setRequestedOverflowActiveValue(nextValue);
+      return true;
+    },
+    [hiddenValues, resolvedOverflowActiveValue],
+  );
+
+  const tabListLayoutContext = useMemo(
+    () => ({
+      getLocation,
+      overflowActiveValue: resolvedOverflowActiveValue,
+      setOverflowActiveValue: setRequestedOverflowActiveValue,
+      moveOverflowFocus,
+    }),
+    [getLocation, moveOverflowFocus, resolvedOverflowActiveValue],
+  );
+
+  return {
+    resolvedOverflowActiveValue,
+    tabListLayoutContext,
+  };
+}
diff --git a/packages/lab/src/tabs-next/hooks/useOverflowSelectionState.ts b/packages/lab/src/tabs-next/hooks/useOverflowSelectionState.ts
new file mode 100644
index 00000000000..4b544a9d797
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useOverflowSelectionState.ts
@@ -0,0 +1,100 @@
+import { useIsomorphicLayoutEffect, usePrevious } from "@salt-ds/core";
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  type SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+
+interface PendingOverflowSelection {
+  event: SyntheticEvent | null;
+  value: string;
+}
+
+interface UseOverflowSelectionStateArgs {
+  commitSelection: (event: SyntheticEvent | null, value: string) => void;
+  menuOpen: boolean;
+  selected?: string;
+  setMenuOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+interface UseOverflowSelectionStateResult {
+  selectionFromOverflowValueRef: MutableRefObject<string | null>;
+  setSelected: (
+    event: SyntheticEvent | null,
+    value: string,
+    source?: "main" | "overflow",
+  ) => void;
+}
+
+export function useOverflowSelectionState({
+  commitSelection,
+  menuOpen,
+  selected,
+  setMenuOpen,
+}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {
+  const previousSelected = usePrevious(selected, [selected]);
+  const selectionFromOverflowValueRef = useRef<string | null>(null);
+  const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(
+    null,
+  );
+
+  const setSelected = useCallback(
+    (
+      event: SyntheticEvent | null,
+      value: string,
+      source: "main" | "overflow" = "main",
+    ) => {
+      const selectedFromOverflow = source === "overflow";
+      selectionFromOverflowValueRef.current = selectedFromOverflow
+        ? value
+        : null;
+
+      if (selectedFromOverflow) {
+        pendingOverflowSelectionRef.current = { event, value };
+        setMenuOpen(false);
+        return;
+      }
+
+      pendingOverflowSelectionRef.current = null;
+      setMenuOpen(false);
+      commitSelection(event, value);
+    },
+    [commitSelection, setMenuOpen],
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    if (menuOpen) {
+      return;
+    }
+
+    const pendingSelection = pendingOverflowSelectionRef.current;
+    if (!pendingSelection) {
+      return;
+    }
+
+    pendingOverflowSelectionRef.current = null;
+    commitSelection(pendingSelection.event, pendingSelection.value);
+  }, [commitSelection, menuOpen]);
+
+  useEffect(() => {
+    const selectedFromOverflow = selectionFromOverflowValueRef.current;
+    if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {
+      return;
+    }
+
+    if (selected === selectedFromOverflow && selected !== previousSelected) {
+      return;
+    }
+
+    selectionFromOverflowValueRef.current = null;
+  }, [previousSelected, selected]);
+
+  return {
+    selectionFromOverflowValueRef,
+    setSelected,
+  };
+}
diff --git a/packages/lab/src/tabs-next/hooks/useRenderedTabWidth.ts b/packages/lab/src/tabs-next/hooks/useRenderedTabWidth.ts
new file mode 100644
index 00000000000..7ae2325919f
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useRenderedTabWidth.ts
@@ -0,0 +1,137 @@
+import { type RefObject, useEffect } from "react";
+import type {
+  TabsNextContextValue,
+  TabsNextRenderMode,
+} from "../TabsNextContext";
+import { getIntrinsicMeasuredWidth } from "../widthMeasurement";
+
+const MIN_TRUSTED_RENDERED_TAB_WIDTH = 0.5;
+
+interface UseRenderedTabWidthProps {
+  hostElement: HTMLDivElement | null;
+  renderMode: TabsNextRenderMode;
+  tabRootRef: RefObject<HTMLDivElement>;
+  targetWindow: Window | null | undefined;
+  updateRenderedTab: TabsNextContextValue["updateRenderedTab"];
+  value: string;
+}
+
+function isSecondaryMeasurementContext(element: HTMLElement) {
+  return (
+    element.closest(".saltTabOverflow-list") ||
+    element.closest(".saltTabListNext-measureContainer")
+  );
+}
+
+export function useRenderedTabWidth({
+  hostElement,
+  renderMode,
+  tabRootRef,
+  targetWindow,
+  updateRenderedTab,
+  value,
+}: UseRenderedTabWidthProps) {
+  useEffect(() => {
+    if (!hostElement) {
+      return;
+    }
+
+    const element = tabRootRef.current;
+    const resizeObserverCtor = (
+      targetWindow as
+        | (Window & { ResizeObserver?: typeof ResizeObserver })
+        | undefined
+    )?.ResizeObserver;
+    const mutationObserverCtor = (
+      targetWindow as
+        | (Window & { MutationObserver?: typeof MutationObserver })
+        | undefined
+    )?.MutationObserver;
+    if (!element || !resizeObserverCtor) {
+      return;
+    }
+
+    const updateWidth = (allowSecondaryMeasurementContext = false) => {
+      if (!element.isConnected) {
+        return;
+      }
+
+      // Preserve the strip width while a tab is rendered in the overflow menu.
+      // Overflow items stretch to the menu width, and hidden measurement tabs
+      // can collapse to a different intrinsic size. Neither width is suitable
+      // for deciding whether the tab fits back in the main strip once the tab
+      // is already established. A one-time seeded width is still useful for
+      // newly mounted tabs before they have ever appeared in the main strip.
+      if (
+        !allowSecondaryMeasurementContext &&
+        isSecondaryMeasurementContext(element)
+      ) {
+        return;
+      }
+
+      const width = getIntrinsicMeasuredWidth(element);
+      if (width <= MIN_TRUSTED_RENDERED_TAB_WIDTH) {
+        return;
+      }
+
+      updateRenderedTab(value, {
+        width,
+      });
+    };
+
+    let animationFrameId: number | null = null;
+    const scheduleWidthUpdate = (allowSecondaryMeasurementContext = false) => {
+      if (!targetWindow?.requestAnimationFrame) {
+        updateWidth(allowSecondaryMeasurementContext);
+        return;
+      }
+
+      if (animationFrameId != null) {
+        targetWindow.cancelAnimationFrame(animationFrameId);
+      }
+
+      animationFrameId = targetWindow.requestAnimationFrame(() => {
+        animationFrameId = null;
+        updateWidth(allowSecondaryMeasurementContext);
+      });
+    };
+
+    if (renderMode === "portal") {
+      scheduleWidthUpdate(true);
+    } else {
+      updateWidth(true);
+    }
+
+    const resizeObserver = new resizeObserverCtor(() => {
+      updateWidth();
+    });
+
+    resizeObserver.observe(element);
+    const mutationObserver = mutationObserverCtor
+      ? new mutationObserverCtor(() => {
+          scheduleWidthUpdate();
+        })
+      : null;
+
+    mutationObserver?.observe(element, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+
+    return () => {
+      if (animationFrameId != null && targetWindow) {
+        targetWindow.cancelAnimationFrame(animationFrameId);
+      }
+      mutationObserver?.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [
+    hostElement,
+    renderMode,
+    tabRootRef,
+    targetWindow,
+    updateRenderedTab,
+    value,
+  ]);
+}
diff --git a/packages/lab/src/tabs-next/hooks/useRenderedTabsRegistry.ts b/packages/lab/src/tabs-next/hooks/useRenderedTabsRegistry.ts
new file mode 100644
index 00000000000..44798107da8
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useRenderedTabsRegistry.ts
@@ -0,0 +1,231 @@
+import { useIsomorphicLayoutEffect } from "@salt-ds/core";
+import { useCallback, useMemo, useState } from "react";
+import type { RenderedTab, TabsNextRenderMode } from "../TabsNextContext";
+import { getMeasuredWidth } from "../widthMeasurement";
+
+function sortRenderedTabs(tabs: RenderedTab[]) {
+  return [...tabs].sort((tabA, tabB) => {
+    if (tabA.marker === tabB.marker) {
+      return 0;
+    }
+    if (!tabA.marker || !tabB.marker) {
+      return 0;
+    }
+
+    const position = tabA.marker.compareDocumentPosition(tabB.marker);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+}
+
+export function useRenderedTabsRegistry() {
+  const [renderedTabMap, setRenderedTabMap] = useState(
+    () => new Map<string, RenderedTab>(),
+  );
+  const [renderMode, setRenderMode] = useState<TabsNextRenderMode>("inline");
+  const [bootstrapTabs, setBootstrapTabs] = useState(() => new Set<string>());
+  const [readyBootstrapTabs, setReadyBootstrapTabs] = useState(
+    () => new Set<string>(),
+  );
+  const [bootstrapOverflowReady, setBootstrapOverflowReadyState] =
+    useState(false);
+
+  const registerBootstrapTab = useCallback((tabValue: string) => {
+    setBootstrapTabs((currentTabs) => {
+      if (currentTabs.has(tabValue)) {
+        return currentTabs;
+      }
+
+      const nextTabs = new Set(currentTabs);
+      nextTabs.add(tabValue);
+      return nextTabs;
+    });
+
+    return () => {
+      setBootstrapTabs((currentTabs) => {
+        if (!currentTabs.has(tabValue)) {
+          return currentTabs;
+        }
+
+        const nextTabs = new Set(currentTabs);
+        nextTabs.delete(tabValue);
+        return nextTabs;
+      });
+      setReadyBootstrapTabs((currentTabs) => {
+        if (!currentTabs.has(tabValue)) {
+          return currentTabs;
+        }
+
+        const nextTabs = new Set(currentTabs);
+        nextTabs.delete(tabValue);
+        return nextTabs;
+      });
+    };
+  }, []);
+
+  const setBootstrapTabReady = useCallback(
+    (tabValue: string, ready: boolean) => {
+      setReadyBootstrapTabs((currentTabs) => {
+        const hasTab = currentTabs.has(tabValue);
+        if (ready === hasTab) {
+          return currentTabs;
+        }
+
+        const nextTabs = new Set(currentTabs);
+        if (ready) {
+          nextTabs.add(tabValue);
+        } else {
+          nextTabs.delete(tabValue);
+        }
+        return nextTabs;
+      });
+    },
+    [],
+  );
+
+  const setBootstrapOverflowReady = useCallback((ready: boolean) => {
+    setBootstrapOverflowReadyState((currentReady) => {
+      if (currentReady === ready) {
+        return currentReady;
+      }
+
+      return ready;
+    });
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    if (renderMode === "portal" || bootstrapTabs.size < 1) {
+      return;
+    }
+
+    if (!bootstrapOverflowReady) {
+      return;
+    }
+
+    for (const tabValue of bootstrapTabs) {
+      if (!readyBootstrapTabs.has(tabValue)) {
+        return;
+      }
+
+      const renderedTab = renderedTabMap.get(tabValue);
+      if (!renderedTab || getMeasuredWidth(renderedTab.root) <= 0) {
+        return;
+      }
+    }
+
+    setRenderMode("portal");
+  }, [
+    bootstrapOverflowReady,
+    bootstrapTabs,
+    readyBootstrapTabs,
+    renderMode,
+    renderedTabMap,
+  ]);
+
+  const registerRenderedTab = useCallback((tab: RenderedTab) => {
+    setRenderedTabMap((map) => {
+      const existing = map.get(tab.value);
+      if (
+        process.env.NODE_ENV !== "production" &&
+        existing &&
+        existing.id !== tab.id
+      ) {
+        console.warn(
+          `TabsNext received duplicate tab value "${tab.value}". Tab values must be unique within a TabsNext instance.`,
+        );
+      }
+
+      if (existing === tab) {
+        return map;
+      }
+
+      const next = new Map(map);
+      next.set(tab.value, tab);
+      return next;
+    });
+
+    return () => {
+      setRenderedTabMap((map) => {
+        const existing = map.get(tab.value);
+        if (!existing || existing.id !== tab.id) {
+          return map;
+        }
+
+        const next = new Map(map);
+        next.delete(tab.value);
+        return next;
+      });
+    };
+  }, []);
+
+  const updateRenderedTab = useCallback(
+    (value: string, updates: Partial<Omit<RenderedTab, "value">>) => {
+      setRenderedTabMap((map) => {
+        const existing = map.get(value);
+        if (!existing) {
+          return map;
+        }
+
+        let changed = false;
+        const nextRecord = { ...existing };
+        for (const [key, nextValue] of Object.entries(updates)) {
+          const typedKey = key as keyof Omit<RenderedTab, "value">;
+          if (nextRecord[typedKey] !== nextValue) {
+            changed = true;
+            nextRecord[typedKey] = nextValue as never;
+          }
+        }
+
+        if (!changed) {
+          return map;
+        }
+
+        const next = new Map(map);
+        next.set(value, nextRecord);
+        return next;
+      });
+    },
+    [],
+  );
+
+  const getRenderedTab = useCallback(
+    (value: string) => {
+      return renderedTabMap.get(value);
+    },
+    [renderedTabMap],
+  );
+
+  const renderedTabs = useMemo(() => {
+    return sortRenderedTabs(Array.from(renderedTabMap.values()));
+  }, [renderedTabMap]);
+
+  const renderedTabOrderMap = useMemo(() => {
+    return new Map(
+      renderedTabs.map((tab, index) => [tab.value, index] as const),
+    );
+  }, [renderedTabs]);
+
+  const getRenderedTabOrder = useCallback(
+    (value: string) => {
+      return renderedTabOrderMap.get(value) ?? -1;
+    },
+    [renderedTabOrderMap],
+  );
+
+  return {
+    renderMode,
+    registerBootstrapTab,
+    setBootstrapTabReady,
+    setBootstrapOverflowReady,
+    registerRenderedTab,
+    updateRenderedTab,
+    getRenderedTab,
+    getRenderedTabOrder,
+    renderedTabs,
+  };
+}
diff --git a/packages/lab/src/tabs-next/hooks/useRestoreActiveTab.ts b/packages/lab/src/tabs-next/hooks/useRestoreActiveTab.ts
deleted file mode 100644
index 52ff92f8d88..00000000000
--- a/packages/lab/src/tabs-next/hooks/useRestoreActiveTab.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { ownerWindow, useIsomorphicLayoutEffect } from "@salt-ds/core";
-import {
-  type MutableRefObject,
-  type RefObject,
-  useEffect,
-  useRef,
-} from "react";
-import type { Item } from "./useCollection";
-
-interface UseHandleRemovalProps {
-  container: RefObject<HTMLElement>;
-  tabs: Item[];
-  realSelectedIndex: RefObject<number>;
-  removedActiveTabRef: MutableRefObject<string | undefined>;
-}
-
-export function useRestoreActiveTab({
-  container,
-  tabs,
-  realSelectedIndex,
-  removedActiveTabRef,
-}: UseHandleRemovalProps) {
-  const tabsRef = useRef(tabs);
-  const previousTabsRef = useRef(tabs);
-
-  useIsomorphicLayoutEffect(() => {
-    tabsRef.current = tabs;
-
-    return () => {
-      previousTabsRef.current = tabs;
-    };
-  }, [tabs]);
-
-  useEffect(() => {
-    if (!container.current) return;
-
-    const win = ownerWindow(container.current);
-
-    const mutationObserver = new win.MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        const removedItem =
-          mutation.removedNodes[0] instanceof HTMLElement
-            ? mutation.removedNodes[0]
-            : null;
-
-        const removedItemWasTab =
-          removedActiveTabRef.current && removedItem?.dataset?.overflowitem;
-
-        const activeTabWasRemoved = !tabsRef.current.find(
-          ({ value }) => value === removedActiveTabRef.current,
-        );
-
-        if (removedItemWasTab && activeTabWasRemoved) {
-          const removedTab =
-            removedItem?.querySelector<HTMLElement>('[role="tab"]');
-
-          let nextTab: HTMLElement | null | undefined = null;
-
-          if (
-            removedTab?.ariaSelected === "true" &&
-            realSelectedIndex.current != null &&
-            realSelectedIndex.current >= 0
-          ) {
-            nextTab =
-              tabsRef.current[
-                Math.min(realSelectedIndex.current, tabsRef.current.length - 1)
-              ]?.element;
-          }
-
-          if (!nextTab) {
-            const previousTab =
-              mutation.previousSibling instanceof HTMLElement
-                ? mutation.previousSibling.querySelector<HTMLElement>(
-                    '[role="tab"]',
-                  )
-                : null;
-
-            if (!previousTab) {
-              nextTab =
-                mutation.nextSibling instanceof HTMLElement
-                  ? mutation.nextSibling?.querySelector<HTMLElement>(
-                      '[role="tab"]',
-                    )
-                  : null;
-            } else {
-              const nextTabIndex = previousTab
-                ? tabsRef.current.findIndex(
-                    ({ element }) => element === previousTab,
-                  ) + 1
-                : -1;
-
-              nextTab =
-                tabsRef.current[
-                  Math.min(nextTabIndex, tabsRef.current.length - 1)
-                ]?.element;
-            }
-          }
-
-          if (
-            !container.current?.querySelector<HTMLElement>(
-              '[role="tab"][aria-selected="true"]',
-            )
-          ) {
-            nextTab?.click();
-          }
-
-          if (!container.current?.contains(win.document.activeElement)) {
-            if (nextTab?.isConnected) {
-              nextTab?.focus({ preventScroll: true });
-            } else {
-              container.current
-                ?.querySelector<HTMLElement>(
-                  '[role="tab"][aria-selected="true"]',
-                )
-                ?.focus({ preventScroll: true });
-            }
-          }
-
-          removedActiveTabRef.current = undefined;
-        }
-
-        // Focus the tab if it was moved from the overflow menu into the visible tabs
-        if (removedActiveTabRef.current) {
-          if (removedItemWasTab) {
-            const tabElement = tabsRef.current.find(
-              ({ value }) => value === removedActiveTabRef.current,
-            )?.element;
-
-            if (win.document.activeElement === win.document.body) {
-              tabElement?.focus();
-            }
-            // If the active tab was removed and the overflow menu has been removed focus the last visible tab.
-          } else if (activeTabWasRemoved && removedItem?.dataset.overflow) {
-            tabsRef.current[tabsRef.current.length - 1]?.element?.focus();
-          }
-        }
-      }
-    });
-
-    mutationObserver.observe(container.current, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [container, realSelectedIndex, removedActiveTabRef]);
-}
diff --git a/packages/lab/src/tabs-next/hooks/useTabListRecovery.ts b/packages/lab/src/tabs-next/hooks/useTabListRecovery.ts
new file mode 100644
index 00000000000..2dbde86c7e7
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useTabListRecovery.ts
@@ -0,0 +1,95 @@
+import { type MutableRefObject, type RefObject, useEffect } from "react";
+import { isHTMLElement } from "../domUtils";
+
+interface UseTabListRecoveryArgs {
+  removalVersion: number;
+  targetWindow: Window | null | undefined;
+  tabstripRef: RefObject<HTMLDivElement | null>;
+  overflowListRef: RefObject<HTMLDivElement | null>;
+  handleTabRemoval: () => void;
+  pendingRemovalRecoveryRef: MutableRefObject<boolean>;
+  pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;
+}
+
+export function useTabListRecovery({
+  removalVersion,
+  targetWindow,
+  tabstripRef,
+  overflowListRef,
+  handleTabRemoval,
+  pendingRemovalRecoveryRef,
+  pendingRemovalRecoveryRetriesRef,
+}: UseTabListRecoveryArgs) {
+  useEffect(() => {
+    if (removalVersion < 1) {
+      return;
+    }
+
+    pendingRemovalRecoveryRef.current = true;
+    pendingRemovalRecoveryRetriesRef.current = 0;
+
+    const raf = targetWindow?.requestAnimationFrame(() => {
+      handleTabRemoval();
+    });
+
+    return () => {
+      if (raf != null) {
+        targetWindow?.cancelAnimationFrame(raf);
+      }
+    };
+  }, [
+    handleTabRemoval,
+    pendingRemovalRecoveryRef,
+    pendingRemovalRecoveryRetriesRef,
+    removalVersion,
+    targetWindow,
+  ]);
+
+  useEffect(() => {
+    const isInTabList = (node: HTMLElement | null) => {
+      if (!node) {
+        return false;
+      }
+
+      return (
+        (tabstripRef.current?.contains(node) ?? false) ||
+        (overflowListRef.current?.contains(node) ?? false)
+      );
+    };
+
+    const handleFocusOut = (event: FocusEvent) => {
+      if (!pendingRemovalRecoveryRef.current) {
+        return;
+      }
+
+      const wasInTabList =
+        isHTMLElement(event.target) && isInTabList(event.target);
+      const stillInTabList =
+        isHTMLElement(event.relatedTarget) && isInTabList(event.relatedTarget);
+
+      if (wasInTabList && !stillInTabList) {
+        if (targetWindow?.requestAnimationFrame) {
+          targetWindow.requestAnimationFrame(() => handleTabRemoval());
+        } else {
+          queueMicrotask(() => handleTabRemoval());
+        }
+      }
+    };
+
+    targetWindow?.document.addEventListener("focusout", handleFocusOut, true);
+
+    return () => {
+      targetWindow?.document.removeEventListener(
+        "focusout",
+        handleFocusOut,
+        true,
+      );
+    };
+  }, [
+    handleTabRemoval,
+    overflowListRef,
+    pendingRemovalRecoveryRef,
+    tabstripRef,
+    targetWindow,
+  ]);
+}
diff --git a/packages/lab/src/tabs-next/hooks/useTabRemovalHandler.ts b/packages/lab/src/tabs-next/hooks/useTabRemovalHandler.ts
new file mode 100644
index 00000000000..907b3473f3e
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useTabRemovalHandler.ts
@@ -0,0 +1,263 @@
+import {
+  type MutableRefObject,
+  type RefObject,
+  useCallback,
+  useEffect,
+} from "react";
+import { useEventCallback } from "../../utils/useEventCallback";
+import { isHTMLElement } from "../domUtils";
+import type { Item, TabsNextContextValue } from "../TabsNextContext";
+
+interface RemovedItem {
+  id: string;
+  value: string;
+  staleIndex?: number;
+}
+
+interface UseTabRemovalHandlerArgs {
+  activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
+  focusElementWithRetry: (
+    getElement: () => HTMLElement | null | undefined,
+  ) => void;
+  getFirst: TabsNextContextValue["getFirst"];
+  getIndex: TabsNextContextValue["getIndex"];
+  getLast: TabsNextContextValue["getLast"];
+  getRemovedItems: () => Map<string, RemovedItem>;
+  getRenderedTab: TabsNextContextValue["getRenderedTab"];
+  getSelectedTabElement: () => HTMLElement | null | undefined;
+  item: TabsNextContextValue["item"];
+  itemAt: TabsNextContextValue["itemAt"];
+  maxRetryAttempts: number;
+  menuOpen: boolean;
+  overflowButtonRef: RefObject<HTMLButtonElement | null>;
+  overflowListRef: RefObject<HTMLDivElement | null>;
+  pendingRemovalRecoveryRef: MutableRefObject<boolean>;
+  pendingRemovalRecoveryRetriesRef: MutableRefObject<number>;
+  removalRecoveryRafRef: MutableRefObject<number | null>;
+  selected?: string;
+  setSelected: TabsNextContextValue["setSelected"];
+  tabstripRef: RefObject<HTMLDivElement | null>;
+  targetWindow: Window | null | undefined;
+}
+
+function hasLostDocumentFocus(doc: Document) {
+  const activeElement = doc.activeElement;
+  return (
+    !activeElement ||
+    activeElement === doc.body ||
+    activeElement === doc.documentElement ||
+    !activeElement.isConnected
+  );
+}
+
+function getVisibleSelectedTab(
+  tabstrip: HTMLDivElement | null,
+  excludedId?: string,
+) {
+  if (!tabstrip) {
+    return null;
+  }
+
+  const tabs = tabstrip.querySelectorAll<HTMLElement>(
+    ':scope > [data-tabslot] [role="tab"][aria-selected="true"]',
+  );
+
+  return (
+    Array.from(tabs).find((tab) => {
+      if (excludedId && tab.id === excludedId) {
+        return false;
+      }
+
+      return tab.isConnected;
+    }) ?? null
+  );
+}
+
+export function useTabRemovalHandler({
+  activeTab,
+  focusElementWithRetry,
+  getFirst,
+  getIndex,
+  getLast,
+  getRemovedItems,
+  getRenderedTab,
+  getSelectedTabElement,
+  item,
+  itemAt,
+  maxRetryAttempts,
+  menuOpen,
+  overflowButtonRef,
+  overflowListRef,
+  pendingRemovalRecoveryRef,
+  pendingRemovalRecoveryRetriesRef,
+  removalRecoveryRafRef,
+  selected,
+  setSelected,
+  tabstripRef,
+  targetWindow,
+}: UseTabRemovalHandlerArgs) {
+  const clearPendingRemovalRecovery = useCallback(() => {
+    pendingRemovalRecoveryRef.current = false;
+    pendingRemovalRecoveryRetriesRef.current = 0;
+  }, [pendingRemovalRecoveryRef, pendingRemovalRecoveryRetriesRef]);
+
+  const handleTabRemoval = useEventCallback(() => {
+    const doc = targetWindow?.document;
+    if (!doc) return;
+
+    const activeTabWasSelected = activeTab.current?.value === selected;
+
+    const shouldRecoverFocus = () => {
+      if (hasLostDocumentFocus(doc)) return true;
+
+      const activeElement = doc.activeElement;
+      if (!isHTMLElement(activeElement)) return false;
+
+      if (!menuOpen) {
+        if (activeElement === overflowButtonRef.current) {
+          return activeTabWasSelected;
+        }
+
+        return (
+          tabstripRef.current?.contains(activeElement) &&
+          activeElement.getAttribute("role") !== "tab"
+        );
+      }
+
+      if (activeElement === overflowButtonRef.current) {
+        return true;
+      }
+
+      if (overflowListRef.current?.contains(activeElement)) {
+        // When closing tabs from the overflow menu, focus can remain within
+        // the floating UI rather than falling back to body.
+        return activeElement.getAttribute("role") !== "tab";
+      }
+
+      return false;
+    };
+
+    // If focus was lost due to deletion, browsers may report body/html or a
+    // disconnected active element depending on browser behavior.
+    if (!shouldRecoverFocus()) {
+      if (
+        pendingRemovalRecoveryRef.current &&
+        removalRecoveryRafRef.current == null
+      ) {
+        if (pendingRemovalRecoveryRetriesRef.current < maxRetryAttempts) {
+          pendingRemovalRecoveryRetriesRef.current += 1;
+          if (!targetWindow?.requestAnimationFrame) {
+            handleTabRemoval();
+            return;
+          }
+
+          removalRecoveryRafRef.current = targetWindow.requestAnimationFrame(
+            () => {
+              removalRecoveryRafRef.current = null;
+              handleTabRemoval();
+            },
+          );
+        } else {
+          clearPendingRemovalRecovery();
+        }
+      }
+      return;
+    }
+
+    if (!activeTab.current) {
+      clearPendingRemovalRecovery();
+      return;
+    }
+
+    const removedItems = getRemovedItems();
+    const removed = removedItems.get(activeTab.current.id);
+    if (!removed) {
+      clearPendingRemovalRecovery();
+      return;
+    }
+
+    clearPendingRemovalRecovery();
+    const removedWasSelected = removed.value === selected;
+    const baseIndex = removed.staleIndex ?? -1;
+    const removedId = removed.id;
+
+    const restoreFocus = () => {
+      const restoredTab = item(removedId);
+      const restoredRenderedTab = getRenderedTab(removed.value);
+      const focusMovedToOverflowButton =
+        doc.activeElement === overflowButtonRef.current;
+
+      // Overflow menu updates can temporarily remount tabs. If the tab is
+      // back and focus was lost to a disconnected node, restore focus to the
+      // remounted tab rather than treating it as a real deletion.
+      if (
+        restoredTab?.element?.isConnected &&
+        restoredRenderedTab?.trigger === restoredTab.element &&
+        !(removedWasSelected && focusMovedToOverflowButton)
+      ) {
+        if (shouldRecoverFocus()) {
+          focusElementWithRetry(() => item(removedId)?.element);
+        }
+        return;
+      }
+
+      if (!shouldRecoverFocus()) {
+        return;
+      }
+
+      let nextTab =
+        (baseIndex >= 0 ? itemAt(baseIndex) : null) ??
+        (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ??
+        getLast() ??
+        getFirst();
+
+      if (nextTab?.element === overflowButtonRef.current) {
+        const overflowIndex = getIndex(nextTab.id);
+        nextTab =
+          (overflowIndex > 0 ? itemAt(overflowIndex - 1) : null) ??
+          (baseIndex > 0 ? itemAt(baseIndex - 1) : null) ??
+          getFirst();
+      }
+
+      if (!nextTab?.element) return;
+
+      if (
+        removedWasSelected &&
+        !menuOpen &&
+        !getVisibleSelectedTab(tabstripRef.current, removedId)
+      ) {
+        activeTab.current = { id: nextTab.id, value: nextTab.value };
+        setSelected(null, nextTab.value);
+      }
+
+      focusElementWithRetry(() => {
+        if (removedWasSelected) {
+          return getSelectedTabElement() ?? nextTab?.element;
+        }
+
+        return nextTab?.element;
+      });
+    };
+
+    if (!targetWindow?.requestAnimationFrame) {
+      restoreFocus();
+      return;
+    }
+
+    targetWindow.requestAnimationFrame(() => {
+      targetWindow.requestAnimationFrame(() => {
+        restoreFocus();
+      });
+    });
+  });
+
+  useEffect(() => {
+    return () => {
+      if (removalRecoveryRafRef.current != null && targetWindow) {
+        targetWindow.cancelAnimationFrame(removalRecoveryRafRef.current);
+      }
+    };
+  }, [removalRecoveryRafRef, targetWindow]);
+
+  return handleTabRemoval;
+}
diff --git a/packages/lab/src/tabs-next/hooks/useTabSelectionFocus.ts b/packages/lab/src/tabs-next/hooks/useTabSelectionFocus.ts
new file mode 100644
index 00000000000..7be022a0764
--- /dev/null
+++ b/packages/lab/src/tabs-next/hooks/useTabSelectionFocus.ts
@@ -0,0 +1,117 @@
+import { useIsomorphicLayoutEffect, usePrevious } from "@salt-ds/core";
+import { computeAccessibleName } from "dom-accessibility-api";
+import type { MutableRefObject } from "react";
+import { useCallback } from "react";
+import type { TabsNextContextValue } from "../TabsNextContext";
+
+function hasLostDocumentFocus(doc: Document) {
+  const activeElement = doc.activeElement;
+  return (
+    !activeElement ||
+    activeElement === doc.body ||
+    activeElement === doc.documentElement ||
+    !activeElement.isConnected
+  );
+}
+
+function getTabAccessibleName(element: HTMLElement) {
+  return computeAccessibleName(element).trim();
+}
+
+interface UseTabSelectionFocusArgs {
+  announce: (message: string, timeout?: number) => void;
+  focusElementWithRetry: (
+    getElement: () => HTMLElement | null | undefined,
+  ) => void;
+  getRenderedTab: TabsNextContextValue["getRenderedTab"];
+  getSelectedTabElement: () => HTMLElement | null | undefined;
+  menuOpen: boolean;
+  resolvedOverflowActiveValue: string | null;
+  selected?: string;
+  selectionFromOverflowValueRef: MutableRefObject<string | null>;
+  targetWindow: Window | null | undefined;
+}
+
+export function useTabSelectionFocus({
+  announce,
+  focusElementWithRetry,
+  getRenderedTab,
+  getSelectedTabElement,
+  menuOpen,
+  resolvedOverflowActiveValue,
+  selected,
+  selectionFromOverflowValueRef,
+  targetWindow,
+}: UseTabSelectionFocusArgs) {
+  const previousSelected = usePrevious(selected, [selected]);
+
+  const focusSelectedTab = useCallback(() => {
+    focusElementWithRetry(getSelectedTabElement);
+  }, [focusElementWithRetry, getSelectedTabElement]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!menuOpen || !resolvedOverflowActiveValue) {
+      return;
+    }
+
+    focusElementWithRetry(
+      () => getRenderedTab(resolvedOverflowActiveValue)?.trigger,
+    );
+  }, [
+    focusElementWithRetry,
+    getRenderedTab,
+    menuOpen,
+    resolvedOverflowActiveValue,
+  ]);
+
+  useIsomorphicLayoutEffect(() => {
+    const doc = targetWindow?.document;
+    if (
+      !doc ||
+      selected === undefined ||
+      previousSelected === undefined ||
+      selected === previousSelected
+    ) {
+      return;
+    }
+
+    if (!hasLostDocumentFocus(doc)) {
+      return;
+    }
+
+    focusSelectedTab();
+  }, [focusSelectedTab, previousSelected, selected, targetWindow]);
+
+  useIsomorphicLayoutEffect(() => {
+    const selectedFromOverflow = selectionFromOverflowValueRef.current;
+    if (
+      selectedFromOverflow == null ||
+      selected === undefined ||
+      selected === previousSelected
+    ) {
+      return;
+    }
+
+    if (selected !== selectedFromOverflow) {
+      selectionFromOverflowValueRef.current = null;
+      return;
+    }
+
+    focusSelectedTab();
+
+    const selectedTab = getSelectedTabElement();
+    const selectedTabName = selectedTab
+      ? getTabAccessibleName(selectedTab) || selected
+      : selected;
+
+    announce(`${selectedTabName} moved to main tab list`, 100);
+    selectionFromOverflowValueRef.current = null;
+  }, [
+    announce,
+    getSelectedTabElement,
+    previousSelected,
+    focusSelectedTab,
+    selected,
+    selectionFromOverflowValueRef,
+  ]);
+}
diff --git a/packages/lab/src/tabs-next/widthMeasurement.ts b/packages/lab/src/tabs-next/widthMeasurement.ts
new file mode 100644
index 00000000000..ffde8bfc93a
--- /dev/null
+++ b/packages/lab/src/tabs-next/widthMeasurement.ts
@@ -0,0 +1,49 @@
+const WIDTH_EPSILON = 0.5;
+
+export function getMeasuredWidth(element: HTMLElement | null | undefined) {
+  if (!element) {
+    return 0;
+  }
+
+  const width = element.getBoundingClientRect().width;
+  return width || element.clientWidth || 0;
+}
+
+export function getIntrinsicMeasuredWidth(
+  element: HTMLElement | null | undefined,
+) {
+  if (!element) {
+    return 0;
+  }
+
+  const borderWidth = element.offsetWidth - element.clientWidth;
+  return Math.max(getMeasuredWidth(element), element.scrollWidth + borderWidth);
+}
+
+export function getGapValue(styles: CSSStyleDeclaration) {
+  return Number.parseFloat(styles.columnGap || styles.gap || "0") || 0;
+}
+
+export function seedWidthMap(elements: HTMLElement[]) {
+  const widths = new Map<HTMLElement, number>();
+  for (const element of elements) {
+    widths.set(element, getMeasuredWidth(element));
+  }
+  return widths;
+}
+
+export function updateWidthMap(
+  widths: Map<HTMLElement, number>,
+  element: HTMLElement,
+  nextWidth: number,
+  epsilon = WIDTH_EPSILON,
+) {
+  const previousWidth = widths.get(element);
+  widths.set(element, nextWidth);
+
+  if (previousWidth === undefined) {
+    return false;
+  }
+
+  return Math.abs(previousWidth - nextWidth) > epsilon;
+}
diff --git a/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx b/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
index 502d9d6c80d..7b261eb5e24 100644
--- a/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
+++ b/packages/lab/stories/tabs-next/tabs-next.qa.stories.tsx
@@ -39,41 +39,42 @@ export const LotsOfTabsTabstrip: StoryFn = () => {
   const [value, setValue] = useState<string | undefined>("Home");
   return (
     <QAContainer itemPadding={10} cols={2}>
-      <TabsNext
-        value={value}
-        onChange={(_, value) => {
-          setValue(value);
-        }}
-      >
-        <TabBar inset divider>
-          <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
-            {tabs.map((label) => (
-              <TabNext key={label} value={label}>
-                <TabNextTrigger>{label}</TabNextTrigger>
-              </TabNext>
-            ))}
-          </TabListNext>
-        </TabBar>
-      </TabsNext>
-      <TabsNext
-        value={value}
-        onChange={(_, value) => {
-          setValue(value);
-        }}
-      >
-        <TabBar>
-          <TabListNext
-            appearance="transparent"
-            style={{ maxWidth: 350, margin: "auto" }}
-          >
-            {tabs.map((label) => (
-              <TabNext key={label} value={label}>
-                <TabNextTrigger>{label}</TabNextTrigger>
-              </TabNext>
-            ))}
-          </TabListNext>
-        </TabBar>
-      </TabsNext>
+      <div className="container">
+        <TabsNext
+          value={value}
+          onChange={(_, value) => {
+            setValue(value);
+          }}
+        >
+          <TabBar inset divider>
+            <TabListNext>
+              {tabs.map((label) => (
+                <TabNext key={label} value={label}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
+      <div className="container">
+        <TabsNext
+          value={value}
+          onChange={(_, value) => {
+            setValue(value);
+          }}
+        >
+          <TabBar>
+            <TabListNext appearance="transparent">
+              {tabs.map((label) => (
+                <TabNext key={label} value={label}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              ))}
+            </TabListNext>
+          </TabBar>
+        </TabsNext>
+      </div>
     </QAContainer>
   );
 };
diff --git a/packages/lab/stories/tabs-next/tabs-next.stories.css b/packages/lab/stories/tabs-next/tabs-next.stories.css
index ff0560eb23d..37c494946ca 100644
--- a/packages/lab/stories/tabs-next/tabs-next.stories.css
+++ b/packages/lab/stories/tabs-next/tabs-next.stories.css
@@ -1,10 +1,17 @@
 #storybook-root {
   min-width: 0;
+  width: 100%;
+  flex: 1 1 auto;
 }
 
 .container {
   min-width: 0;
   min-height: 200px;
-  width: 600px;
+  width: 70%;
+  margin-inline: auto;
+}
+
+.overflowContainer {
+  width: 408px;
   max-width: 100%;
 }
diff --git a/packages/lab/stories/tabs-next/tabs-next.stories.tsx b/packages/lab/stories/tabs-next/tabs-next.stories.tsx
index a0e5d885996..6d77d0eaa97 100644
--- a/packages/lab/stories/tabs-next/tabs-next.stories.tsx
+++ b/packages/lab/stories/tabs-next/tabs-next.stories.tsx
@@ -16,6 +16,7 @@ import {
   Panel,
   RadioButton,
   RadioButtonGroup,
+  Spinner,
   StackLayout,
   Text,
   useAriaAnnouncer,
@@ -23,11 +24,11 @@ import {
 import {
   AddIcon,
   BankCheckIcon,
+  ChartLineIcon,
   CloseIcon,
   CreditCardIcon,
   FavoriteIcon,
   HomeIcon,
-  LineChartIcon,
   MicroMenuIcon,
   ReceiptIcon,
 } from "@salt-ds/icons";
@@ -51,6 +52,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { fn } from "storybook/test";
 
 import "./tabs-next.stories.css";
 
@@ -59,7 +61,7 @@ export default {
   component: TabsNext,
   args: {
     value: undefined,
-    onChange: undefined,
+    onChange: fn(),
   },
 };
 
@@ -115,13 +117,15 @@ export const Inline: StoryFn<typeof TabsNext> = (args) => {
   return (
     <div className="container">
       <TabsNext {...args}>
-        <TabListNext appearance="transparent">
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-            </TabNext>
-          ))}
-        </TabListNext>
+        <TabBar>
+          <TabListNext appearance="transparent">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
 
         {tabs.map((label) => (
           <TabNextPanel value={label} key={label}>
@@ -142,7 +146,7 @@ const tabToIcon: Record<string, ComponentType> = {
   Transactions: ReceiptIcon,
   Loans: CreditCardIcon,
   Checks: BankCheckIcon,
-  Liquidity: LineChartIcon,
+  Liquidity: ChartLineIcon,
 };
 
 export const WithIcon: StoryFn<typeof TabsNext> = (args) => {
@@ -178,7 +182,7 @@ WithIcon.args = {
 
 export const WithBadge: StoryFn<typeof TabsNext> = (args) => {
   return (
-    <div style={{ minWidth: 0, maxWidth: "100%" }}>
+    <div className="container">
       <TabsNext {...args}>
         <TabBar inset divider>
           <TabListNext>
@@ -205,17 +209,22 @@ WithBadge.args = {
 
 export const Overflow: StoryFn<typeof TabsNext> = (args) => {
   return (
-    <TabsNext {...args}>
-      <TabBar inset divider>
-        <TabListNext style={{ margin: "auto", maxWidth: 360 }}>
-          {lotsOfTabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-            </TabNext>
-          ))}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div
+      className="container overflowContainer"
+      data-testid="tabs-next-overflow-boundary"
+    >
+      <TabsNext {...args}>
+        <TabBar inset divider>
+          <TabListNext>
+            {lotsOfTabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
 
@@ -223,7 +232,7 @@ Overflow.args = {
   defaultValue: lotsOfTabs[0],
 };
 
-export const Closable: StoryFn<typeof TabsNext> = (args) => {
+export const Dismissible: StoryFn<typeof TabsNext> = (args) => {
   const [tabs, setTabs] = useState([
     "Home",
     "Transactions",
@@ -234,21 +243,33 @@ export const Closable: StoryFn<typeof TabsNext> = (args) => {
 
   const { announce } = useAriaAnnouncer();
 
+  const handleDismissTab = (value: string) => {
+    setTabs((old) => old.filter((tab) => tab !== value));
+    announce(`${value} tab has been removed`, 150);
+  };
+
   return (
-    <div style={{ minWidth: 0, maxWidth: "100%" }}>
+    <div className="container">
       <TabsNext {...args}>
         <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
-                <TabNextTrigger>{label}</TabNextTrigger>
+                <TabNextTrigger
+                  onKeyDown={(event) => {
+                    if (event.key === "Delete" && tabs.length > 1) {
+                      handleDismissTab(label);
+                    }
+                  }}
+                >
+                  {label}
+                </TabNextTrigger>
                 {tabs.length > 1 ? (
                   <TabNextAction
                     onClick={() => {
-                      setTabs((old) => old.filter((tab) => tab !== label));
-                      announce(`${label} tab has been closed`, 150);
+                      handleDismissTab(label);
                     }}
-                    aria-label="Close tab"
+                    aria-label="Dismiss tab"
                   >
                     <CloseIcon aria-hidden />
                   </TabNextAction>
@@ -262,7 +283,7 @@ export const Closable: StoryFn<typeof TabsNext> = (args) => {
   );
 };
 
-Closable.args = {
+Dismissible.args = {
   defaultValue: tabs[0],
 };
 
@@ -301,13 +322,13 @@ export const AddTabs: StoryFn<typeof TabsNext> = (args) => {
   const { announce } = useAriaAnnouncer();
 
   return (
-    <div style={{ minWidth: 0, maxWidth: "100%" }}>
+    <div className="container">
       <TabsNext
         {...args}
         value={value}
         onChange={(_event, newValue) => setValue(newValue)}
       >
-        <TabBar inset divider style={{ width: 500 }}>
+        <TabBar inset divider>
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
@@ -323,6 +344,7 @@ export const AddTabs: StoryFn<typeof TabsNext> = (args) => {
               newCount.current += 1;
 
               setTabs((old) => old.concat(newTab));
+              setValue(newTab);
               announce(`${newTab} tab added`, 150);
             }}
           >
@@ -344,7 +366,7 @@ export const Backgrounds = (): ReactElement => {
 
   return (
     <StackLayout gap={6}>
-      <div style={{ alignItems: "center", width: "40vw" }}>
+      <div className="container">
         <TabsNext defaultValue={tabs[0]}>
           <TabBar divider>
             <TabListNext activeColor={variant} appearance="bordered">
@@ -475,7 +497,7 @@ export const AddWithDialog = () => {
   );
 };
 
-function CloseConfirmationDialog({
+function DismissConfirmationDialog({
   open,
   onConfirm,
   onCancel,
@@ -503,7 +525,7 @@ function CloseConfirmationDialog({
   );
 }
 
-export const CloseWithConfirmation = () => {
+export const DismissWithConfirmation = () => {
   const [tabs, setTabs] = useState(["Home", "Transactions", "Loans"]);
   const [valueToRemove, setValueToRemove] = useState<string | undefined>(
     undefined,
@@ -526,9 +548,14 @@ export const CloseWithConfirmation = () => {
     setValueToRemove(undefined);
   };
 
+  const handleDismissTab = (value: string) => {
+    setOpen(true);
+    setValueToRemove(value);
+  };
+
   return (
     <div className="container">
-      <CloseConfirmationDialog
+      <DismissConfirmationDialog
         open={open}
         onCancel={handleCancel}
         valueToRemove={valueToRemove}
@@ -540,14 +567,21 @@ export const CloseWithConfirmation = () => {
           <TabListNext>
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
-                <TabNextTrigger>{label}</TabNextTrigger>
+                <TabNextTrigger
+                  onKeyDown={(event) => {
+                    if (event.key === "Delete" && tabs.length > 1) {
+                      handleDismissTab(label);
+                    }
+                  }}
+                >
+                  {label}
+                </TabNextTrigger>
                 {tabs.length > 1 ? (
                   <TabNextAction
                     onClick={() => {
-                      setOpen(true);
-                      setValueToRemove(label);
+                      handleDismissTab(label);
                     }}
-                    aria-label="Close tab"
+                    aria-label="Dismiss tab"
                   >
                     <CloseIcon aria-hidden />
                   </TabNextAction>
@@ -614,7 +648,7 @@ export const WithMenu: StoryFn<typeof TabsNext> = (args) => {
   const [pinned, setPinned] = useState<string[]>([]);
 
   return (
-    <div style={{ minWidth: 0, maxWidth: "100%" }}>
+    <div className="container">
       <TabsNext {...args}>
         <TabBar inset divider>
           <TabListNext>
@@ -678,27 +712,115 @@ export const Controlled: StoryFn = () => {
     setValue(value);
   };
 
+  const handleDismissTab = (value: string) => {
+    setTabs((old) => old.filter((tab) => tab !== value));
+  };
+
   return (
-    <TabsNext value={value} onChange={handleChange}>
-      <TabBar inset divider>
-        <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-              {tabs.length > 1 ? (
-                <TabNextAction
-                  onClick={() => {
-                    setTabs((old) => old.filter((tab) => tab !== label));
+    <div className="container">
+      <TabsNext value={value} onChange={handleChange}>
+        <TabBar inset divider>
+          <TabListNext>
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger
+                  onKeyDown={(event) => {
+                    if (event.key === "Delete" && tabs.length > 1) {
+                      handleDismissTab(label);
+                    }
                   }}
-                  aria-label="Close tab"
                 >
-                  <CloseIcon aria-hidden />
-                </TabNextAction>
-              ) : null}
-            </TabNext>
-          ))}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+                  {label}
+                </TabNextTrigger>
+                {tabs.length > 1 ? (
+                  <TabNextAction
+                    onClick={() => {
+                      handleDismissTab(label);
+                    }}
+                    aria-label="Dismiss tab"
+                  >
+                    <CloseIcon aria-hidden />
+                  </TabNextAction>
+                ) : null}
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+};
+
+export const AsyncDismissibleTabs: StoryFn = () => {
+  const [tabs, setTabs] = useState([
+    "Home",
+    "Transactions",
+    "Loans",
+    "Checks",
+    "Liquidity",
+  ]);
+  const [value, setValue] = useState("Home");
+  const [closingTabs, setClosingTabs] = useState<string[]>([]);
+
+  const handleChange = (_event: SyntheticEvent | null, nextValue: string) => {
+    setValue(nextValue);
+  };
+
+  const handleDismiss = (tabToDismiss: string) => {
+    setClosingTabs((current) =>
+      current.includes(tabToDismiss) ? current : current.concat(tabToDismiss),
+    );
+    setTimeout(() => {
+      setTabs((oldTabs) => {
+        const removedIndex = oldTabs.indexOf(tabToDismiss);
+        const nextTabs = oldTabs.filter((tab) => tab !== tabToDismiss);
+
+        setValue((currentValue) => {
+          if (currentValue !== tabToDismiss) {
+            return currentValue;
+          }
+
+          return (
+            nextTabs[Math.min(removedIndex, nextTabs.length - 1)] ??
+            currentValue
+          );
+        });
+
+        return nextTabs;
+      });
+      setClosingTabs((current) =>
+        current.filter((tab) => tab !== tabToDismiss),
+      );
+    }, 1000);
+  };
+
+  return (
+    <div className="container">
+      <TabsNext value={value} onChange={handleChange}>
+        <TabBar inset divider>
+          <TabListNext>
+            {tabs.map((label) => (
+              <TabNext key={label} value={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+                {tabs.length > 1 ? (
+                  <TabNextAction
+                    aria-label="Dismiss tab"
+                    onClick={() => {
+                      handleDismiss(label);
+                    }}
+                  >
+                    {closingTabs.includes(label) ? (
+                      <Spinner size="small" aria-hidden disableAnnouncer />
+                    ) : (
+                      <CloseIcon aria-hidden />
+                    )}
+                  </TabNextAction>
+                ) : null}
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/docs/components/tabs/accessibility.mdx b/site/docs/components/tabs/accessibility.mdx
index a3d4f269dd7..234f64d257a 100644
--- a/site/docs/components/tabs/accessibility.mdx
+++ b/site/docs/components/tabs/accessibility.mdx
@@ -48,27 +48,11 @@ You need to check and test any focusable elements included in the tab content.
 
 ## Accessibility considerations
 
-### Scrollable region must have keyboard access ([scrollable-region-focusable](https://dequeuniversity.com/rules/axe/4.9/scrollable-region-focusable))
-
-#### Issue context
-
-This aXe issue is flagged when tabindex="-1" is applied to the overflow menu, which is technically a scrollable region. This implementation was added to prevent an additional, unnecessary tab stop in the navigation flow due to new browser enhancements that automatically apply focus to scrollable regions. While the menu itself is not focusable, its contents remain accessible via arrow key navigation when revealed.
-
 ### Certain ARIA roles must contain particular children ([aria-required-children](https://dequeuniversity.com/rules/axe/4.9/aria-required-children))
 
 #### Issue context
 
-This aXe issue is flagged in two scenarios:
-
-1. When an overflow menu is present within the tab list, where tabindex="-1" is applied to prevent focus, due to new browser enhancements, ensuring users don't encounter an additional tab stop when navigating away from the tab list
-
-2. When using nested action buttons within tabs. This example follows the W3C's experimental "Tabs with Action Buttons" example and maintains expected keyboard and screen reader interaction patterns
-
-### Note for overflow example
-
-- VoiceOver users receive inaccurate tab position information when navigating the overflow menu as it's treated as a separate tab list
-- In addition, when selecting a tab in the overflow menu, that tab is visually repositioned before the tab list to ensure visibility. Due to these position issues, the following announcement is provided to screen reader users: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected"
-
+This aXe issue is flagged when using nested action buttons within tabs. This example follows the W3C's experimental "Tabs with Action Buttons" example and maintains expected keyboard and screen reader interaction patterns
 Digital accessibility guidance continues to evolve as new design patterns and component challenges emerge. While we have worked to align with existing guidelines, some complex interactions and modern UI patterns present unique accessibility challenges that current guidelines may not fully address. We have implemented solutions that we believe create the most understandable and accessible experience possible, even when they conflict with current automated testing tools.
 
 ## Support and contributions
diff --git a/site/docs/components/tabs/examples.mdx b/site/docs/components/tabs/examples.mdx
index 8e8d9faa0f3..e5f2b768f00 100644
--- a/site/docs/components/tabs/examples.mdx
+++ b/site/docs/components/tabs/examples.mdx
@@ -54,17 +54,17 @@ Buttons can be nested inside `TabBar` to provide related actions e.g. adding a n
 
 <LivePreview componentName="tabs" exampleName="AddANewTab" />
 
-## Closable tabs
+## Dismissible tabs
 
-`TabAction`s can be used to add actions to tabs e.g. closing a tab. When closing a tab, a warning dialog may be used when closing a tab will result in data loss.
+`TabNextAction`s can be used to add actions to tabs e.g. dismissing a tab. When dismissing a tab, a warning dialog may be used when dismissing a tab will result in data loss.
 
 ### Best practices
 
-- Don't use closable tabs for tabs that are essential to the user's workflow.
-- Don't allow users to close the last tab in a tabstrip.
+- Don't use dismissible tabs for tabs that are essential to the user's workflow.
+- Don't allow users to dismiss the last tab in a tabstrip.
 - `useAriaAnnouncer` should be used to provide feedback to screen reader users.
 
-<LivePreview componentName="tabs" exampleName="ClosableTabs" />
+<LivePreview componentName="tabs" exampleName="DismissibleTabs" />
 
 ## Disabled tabs
 
diff --git a/site/docs/components/tabs/usage.mdx b/site/docs/components/tabs/usage.mdx
index a0b99885048..133cb4148cb 100644
--- a/site/docs/components/tabs/usage.mdx
+++ b/site/docs/components/tabs/usage.mdx
@@ -29,6 +29,8 @@ data:
 - Always use sentence case for badge labels when nesting in a tab.
 - Do not wrap labels. Use truncation with `Tooltip` if necessary.
 - Icon and text should match each other semantically.
+- Each `TabNext` and matching `TabNextPanel` must use a unique `value` within a
+  single `TabsNext`.
 
 ## Import
 
@@ -42,7 +44,7 @@ import {
   TabNext,
   TabNextTrigger,
   TabNextAction,
-  TabPanelNext,
+  TabNextPanel,
 } from "@salt-ds/lab";
 ```
 
@@ -64,6 +66,14 @@ import {
 
 <PropsTable packageName="lab" componentName="TabNext" />
 
+### `TabNextTrigger`
+
+<PropsTable packageName="lab" componentName="TabNextTrigger" />
+
 ### `TabNextAction`
 
 <PropsTable packageName="lab" componentName="TabNextAction" />
+
+### `TabNextPanel`
+
+<PropsTable packageName="lab" componentName="TabNextPanel" />
diff --git a/site/src/examples/badge/InlineBadge.tsx b/site/src/examples/badge/InlineBadge.tsx
index b7447b46fca..998312514ef 100644
--- a/site/src/examples/badge/InlineBadge.tsx
+++ b/site/src/examples/badge/InlineBadge.tsx
@@ -9,26 +9,24 @@ import {
 import type { ReactElement } from "react";
 
 export const InlineBadge = (): ReactElement => (
-  <TabsNext defaultValue="Home">
-    <TabBar inset divider>
-      <TabListNext
-        style={{
-          minWidth: 350,
-        }}
-      >
-        <TabNext value="Home">
-          <TabNextTrigger>Home</TabNextTrigger>
-        </TabNext>
-        <TabNext value="Transactions">
-          <TabNextTrigger aria-label="Transactions - 30 updates">
-            Transactions
-            <Badge value={30} />
-          </TabNextTrigger>
-        </TabNext>
-        <TabNext value="Loans">
-          <TabNextTrigger>Loans</TabNextTrigger>
-        </TabNext>
-      </TabListNext>
-    </TabBar>
-  </TabsNext>
+  <div style={{ width: "100%", minWidth: 0 }}>
+    <TabsNext defaultValue="Home" style={{ width: "100%", minWidth: 0 }}>
+      <TabBar inset divider>
+        <TabListNext>
+          <TabNext value="Home">
+            <TabNextTrigger>Home</TabNextTrigger>
+          </TabNext>
+          <TabNext value="Transactions">
+            <TabNextTrigger aria-label="Transactions - 30 updates">
+              Transactions
+              <Badge value={30} />
+            </TabNextTrigger>
+          </TabNext>
+          <TabNext value="Loans">
+            <TabNextTrigger>Loans</TabNextTrigger>
+          </TabNext>
+        </TabListNext>
+      </TabBar>
+    </TabsNext>
+  </div>
 );
diff --git a/site/src/examples/badge/InlineDotBadge.tsx b/site/src/examples/badge/InlineDotBadge.tsx
index 2565f5bdd33..b0fb98f16e1 100644
--- a/site/src/examples/badge/InlineDotBadge.tsx
+++ b/site/src/examples/badge/InlineDotBadge.tsx
@@ -10,23 +10,25 @@ import type { ReactElement } from "react";
 
 export const InlineDotBadge = (): ReactElement => {
   return (
-    <TabsNext defaultValue="Home">
-      <TabBar>
-        <TabListNext appearance="transparent" style={{ minWidth: 350 }}>
-          <TabNext value="Home">
-            <TabNextTrigger>Home</TabNextTrigger>
-          </TabNext>
-          <TabNext value="Transactions">
-            <TabNextTrigger aria-label="Transactions - New">
-              Transactions
-              <Badge />
-            </TabNextTrigger>
-          </TabNext>
-          <TabNext value="Loans">
-            <TabNextTrigger>Loans</TabNextTrigger>
-          </TabNext>
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue="Home" style={{ width: "100%", minWidth: 0 }}>
+        <TabBar>
+          <TabListNext appearance="transparent">
+            <TabNext value="Home">
+              <TabNextTrigger>Home</TabNextTrigger>
+            </TabNext>
+            <TabNext value="Transactions">
+              <TabNextTrigger aria-label="Transactions - New">
+                Transactions
+                <Badge />
+              </TabNextTrigger>
+            </TabNext>
+            <TabNext value="Loans">
+              <TabNextTrigger>Loans</TabNextTrigger>
+            </TabNext>
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/ActiveColor.tsx b/site/src/examples/tabs/ActiveColor.tsx
index 9705c297f3f..ff3fa12b481 100644
--- a/site/src/examples/tabs/ActiveColor.tsx
+++ b/site/src/examples/tabs/ActiveColor.tsx
@@ -28,25 +28,24 @@ export const ActiveColor = (): ReactElement => {
   };
 
   return (
-    <StackLayout gap={6}>
-      <div style={{ alignItems: "center", width: "40vw" }}>
-        <TabsNext defaultValue={tabs[0]}>
-          <TabBar divider>
-            <TabListNext activeColor={variant}>
-              {tabs.map((label) => (
-                <TabNext value={label} key={label}>
-                  <TabNextTrigger>{label}</TabNextTrigger>
-                </TabNext>
-              ))}
-            </TabListNext>
-          </TabBar>
-          {tabs.map((label) => (
-            <TabNextPanel value={label} key={label} style={{ height: 200 }}>
-              <Panel variant={variant}>{label}</Panel>
-            </TabNextPanel>
-          ))}
-        </TabsNext>
-      </div>
+    <StackLayout gap={6} style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar divider>
+          <TabListNext activeColor={variant} aria-label="Example tablist">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+        {tabs.map((label) => (
+          <TabNextPanel value={label} key={label} style={{ height: 200 }}>
+            <Panel variant={variant}>{label}</Panel>
+          </TabNextPanel>
+        ))}
+      </TabsNext>
+
       <FormField style={{ width: "auto" }}>
         <FormFieldLabel>Select tabstrip color</FormFieldLabel>
         <RadioButtonGroup
diff --git a/site/src/examples/tabs/AddANewTab.tsx b/site/src/examples/tabs/AddANewTab.tsx
index 4c62e36a7f5..4ea7426dc1a 100644
--- a/site/src/examples/tabs/AddANewTab.tsx
+++ b/site/src/examples/tabs/AddANewTab.tsx
@@ -16,29 +16,35 @@ export const AddANewTab = (): ReactElement => {
   const { announce } = useAriaAnnouncer();
 
   return (
-    <TabsNext value={value} onChange={(_event, newValue) => setValue(newValue)}>
-      <TabBar inset divider style={{ width: 500 }}>
-        <TabListNext>
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-            </TabNext>
-          ))}
-        </TabListNext>
-        <Button
-          aria-label="Add tab"
-          appearance="transparent"
-          onClick={() => {
-            const newTab = `New tab${newCount.current > 0 ? ` ${newCount.current}` : ""}`;
-            newCount.current += 1;
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext
+        value={value}
+        onChange={(_event, newValue) => setValue(newValue)}
+      >
+        <TabBar inset divider>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+          <Button
+            aria-label="Add tab"
+            appearance="transparent"
+            onClick={() => {
+              const newTab = `New tab${newCount.current > 0 ? ` ${newCount.current}` : ""}`;
+              newCount.current += 1;
 
-            setTabs((old) => old.concat(newTab));
-            announce(`${newTab} tab added`, 150);
-          }}
-        >
-          <AddIcon aria-hidden />
-        </Button>
-      </TabBar>
-    </TabsNext>
+              setTabs((old) => old.concat(newTab));
+              setValue(newTab);
+              announce(`${newTab} tab added`, 150);
+            }}
+          >
+            <AddIcon aria-hidden />
+          </Button>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/Appearance.tsx b/site/src/examples/tabs/Appearance.tsx
index ee66dda09eb..a34f9d48659 100644
--- a/site/src/examples/tabs/Appearance.tsx
+++ b/site/src/examples/tabs/Appearance.tsx
@@ -7,15 +7,16 @@ import {
   TabsNext,
 } from "@salt-ds/lab";
 import type { ReactElement } from "react";
+import styles from "./index.module.css";
 
 const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
 
 export const Appearance = (): ReactElement => {
   return (
-    <StackLayout>
+    <StackLayout className={styles.example}>
       <TabsNext defaultValue={tabs[0]}>
         <TabBar>
-          <TabListNext appearance="bordered">
+          <TabListNext appearance="bordered" aria-label="Example tablist">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
                 <TabNextTrigger>{label}</TabNextTrigger>
@@ -26,7 +27,7 @@ export const Appearance = (): ReactElement => {
       </TabsNext>
       <TabsNext defaultValue={tabs[0]}>
         <TabBar>
-          <TabListNext appearance="transparent">
+          <TabListNext appearance="transparent" aria-label="Example tablist">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
                 <TabNextTrigger>{label}</TabNextTrigger>
diff --git a/site/src/examples/tabs/ClosableTabs.tsx b/site/src/examples/tabs/ClosableTabs.tsx
deleted file mode 100644
index 6ee8dd6a666..00000000000
--- a/site/src/examples/tabs/ClosableTabs.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useAriaAnnouncer } from "@salt-ds/core";
-import { CloseIcon } from "@salt-ds/icons";
-import {
-  TabBar,
-  TabListNext,
-  TabNext,
-  TabNextAction,
-  TabNextTrigger,
-  TabsNext,
-} from "@salt-ds/lab";
-import { type ReactElement, useState } from "react";
-
-export const ClosableTabs = (): ReactElement => {
-  const [tabs, setTabs] = useState([
-    "Home",
-    "Transactions",
-    "Loans",
-    "Checks",
-    "Liquidity",
-  ]);
-
-  const { announce } = useAriaAnnouncer();
-
-  return (
-    <TabsNext defaultValue={tabs[0]}>
-      <TabBar inset divider>
-        <TabListNext>
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-              {tabs.length > 1 && (
-                <TabNextAction
-                  onClick={() => {
-                    setTabs(tabs.filter((tab) => tab !== label));
-                    announce(`${label} tab has been removed`, 150);
-                  }}
-                  aria-label="Close tab"
-                >
-                  <CloseIcon aria-hidden />
-                </TabNextAction>
-              )}
-            </TabNext>
-          ))}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
-  );
-};
diff --git a/site/src/examples/tabs/DisabledTabs.tsx b/site/src/examples/tabs/DisabledTabs.tsx
index 00ad71a5bc4..e6508c63e02 100644
--- a/site/src/examples/tabs/DisabledTabs.tsx
+++ b/site/src/examples/tabs/DisabledTabs.tsx
@@ -11,18 +11,20 @@ const tabs = ["Home", "Transactions", "Loans", "Checks", "Liquidity"];
 
 export const DisabledTabs = (): ReactElement => {
   return (
-    <TabsNext defaultValue={tabs[0]}>
-      <TabBar inset divider>
-        <TabListNext>
-          {tabs.map((label) => {
-            return (
-              <TabNext disabled={label === "Loans"} value={label} key={label}>
-                <TabNextTrigger>{label}</TabNextTrigger>
-              </TabNext>
-            );
-          })}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar inset divider>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => {
+              return (
+                <TabNext disabled={label === "Loans"} value={label} key={label}>
+                  <TabNextTrigger>{label}</TabNextTrigger>
+                </TabNext>
+              );
+            })}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/DismissibleTabs.tsx b/site/src/examples/tabs/DismissibleTabs.tsx
new file mode 100644
index 00000000000..0627149e700
--- /dev/null
+++ b/site/src/examples/tabs/DismissibleTabs.tsx
@@ -0,0 +1,62 @@
+import { useAriaAnnouncer } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
+import {
+  TabBar,
+  TabListNext,
+  TabNext,
+  TabNextAction,
+  TabNextTrigger,
+  TabsNext,
+} from "@salt-ds/lab";
+import { type ReactElement, useState } from "react";
+
+export const DismissibleTabs = (): ReactElement => {
+  const [tabs, setTabs] = useState([
+    "Home",
+    "Transactions",
+    "Loans",
+    "Checks",
+    "Liquidity",
+  ]);
+
+  const { announce } = useAriaAnnouncer();
+
+  const handleDismissTab = (value: string) => {
+    setTabs((oldTabs) => oldTabs.filter((tab) => tab !== value));
+    announce(`${value} tab has been removed`, 150);
+  };
+
+  return (
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar inset divider>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger
+                  onKeyDown={(event) => {
+                    if (event.key === "Delete" && tabs.length > 1) {
+                      handleDismissTab(label);
+                    }
+                  }}
+                >
+                  {label}
+                </TabNextTrigger>
+                {tabs.length > 1 && (
+                  <TabNextAction
+                    onClick={() => {
+                      handleDismissTab(label);
+                    }}
+                    aria-label="Dismiss tab"
+                  >
+                    <CloseIcon aria-hidden />
+                  </TabNextAction>
+                )}
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
+  );
+};
diff --git a/site/src/examples/tabs/DividerAndInset.tsx b/site/src/examples/tabs/DividerAndInset.tsx
index de49943f7e6..f88ae0741b9 100644
--- a/site/src/examples/tabs/DividerAndInset.tsx
+++ b/site/src/examples/tabs/DividerAndInset.tsx
@@ -15,10 +15,10 @@ export const DividerAndInset = (): ReactElement => {
   const [inset, setInset] = useState(true);
 
   return (
-    <StackLayout>
+    <StackLayout style={{ width: "100%", minWidth: 0 }}>
       <TabsNext defaultValue={tabs[0]}>
         <TabBar divider={divider} inset={inset}>
-          <TabListNext appearance="bordered">
+          <TabListNext appearance="bordered" aria-label="Example tablist">
             {tabs.map((label) => (
               <TabNext value={label} key={label}>
                 <TabNextTrigger>{label}</TabNextTrigger>
diff --git a/site/src/examples/tabs/Overflow.tsx b/site/src/examples/tabs/Overflow.tsx
index cca89995793..f7c42008a8b 100644
--- a/site/src/examples/tabs/Overflow.tsx
+++ b/site/src/examples/tabs/Overflow.tsx
@@ -29,16 +29,18 @@ const tabs = [
 
 export const Overflow = (): ReactElement => {
   return (
-    <TabsNext defaultValue={tabs[0]}>
-      <TabBar inset divider>
-        <TabListNext style={{ maxWidth: 350, margin: "auto" }}>
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>{label}</TabNextTrigger>
-            </TabNext>
-          ))}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div style={{ width: "100%", minWidth: 0, maxWidth: 350 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar inset divider>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger>{label}</TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/WithBadge.tsx b/site/src/examples/tabs/WithBadge.tsx
index 5ecb664b545..ff49e2e6e9f 100644
--- a/site/src/examples/tabs/WithBadge.tsx
+++ b/site/src/examples/tabs/WithBadge.tsx
@@ -15,26 +15,34 @@ const notifications: Record<(typeof tabs)[number], number> = {
   Checks: 6,
 };
 
+function getNotificationLabel(label: string) {
+  const count = notifications[label];
+
+  if (count === 0 || count === undefined) return "";
+
+  return `, ${count} update${count > 1 ? "s" : ""}`;
+}
 export const WithBadge = (): ReactElement => {
   return (
-    <TabsNext defaultValue={tabs[0]}>
-      <TabBar divider inset>
-        <TabListNext>
-          {tabs.map((label) => (
-            <TabNext value={label} key={label}>
-              <TabNextTrigger>
-                {label}
-                {notifications[label] > 0 ? (
-                  <Badge
-                    value={notifications[label]}
-                    aria-label={`${notifications[label]} updates`}
-                  />
-                ) : undefined}
-              </TabNextTrigger>
-            </TabNext>
-          ))}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar divider inset>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => (
+              <TabNext value={label} key={label}>
+                <TabNextTrigger
+                  aria-label={`${label}${getNotificationLabel(label)}`}
+                >
+                  <span aria-hidden>{label}</span>
+                  {notifications[label] > 0 ? (
+                    <Badge value={notifications[label]} aria-hidden />
+                  ) : undefined}
+                </TabNextTrigger>
+              </TabNext>
+            ))}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/WithIcon.tsx b/site/src/examples/tabs/WithIcon.tsx
index 9e4e515f297..e354fd8d44b 100644
--- a/site/src/examples/tabs/WithIcon.tsx
+++ b/site/src/examples/tabs/WithIcon.tsx
@@ -26,21 +26,23 @@ const tabToIcon: Record<string, ComponentType> = {
 
 export const WithIcon = (): ReactElement => {
   return (
-    <TabsNext defaultValue={tabs[0]}>
-      <TabBar divider inset>
-        <TabListNext>
-          {tabs.map((label) => {
-            const Icon = tabToIcon[label];
-            return (
-              <TabNext value={label} key={label}>
-                <TabNextTrigger>
-                  <Icon /> {label}
-                </TabNextTrigger>
-              </TabNext>
-            );
-          })}
-        </TabListNext>
-      </TabBar>
-    </TabsNext>
+    <div style={{ width: "100%", minWidth: 0 }}>
+      <TabsNext defaultValue={tabs[0]}>
+        <TabBar divider inset>
+          <TabListNext aria-label="Example tablist">
+            {tabs.map((label) => {
+              const Icon = tabToIcon[label];
+              return (
+                <TabNext value={label} key={label}>
+                  <TabNextTrigger>
+                    <Icon aria-hidden /> {label}
+                  </TabNextTrigger>
+                </TabNext>
+              );
+            })}
+          </TabListNext>
+        </TabBar>
+      </TabsNext>
+    </div>
   );
 };
diff --git a/site/src/examples/tabs/index.module.css b/site/src/examples/tabs/index.module.css
new file mode 100644
index 00000000000..a3a0a6b37f8
--- /dev/null
+++ b/site/src/examples/tabs/index.module.css
@@ -0,0 +1,9 @@
+.example {
+  width: 100%;
+  min-width: 0;
+}
+
+.example > * {
+  width: 100%;
+  min-width: 0;
+}
diff --git a/site/src/examples/tabs/index.ts b/site/src/examples/tabs/index.ts
index 20ff21a96e4..1b9a5a08781 100644
--- a/site/src/examples/tabs/index.ts
+++ b/site/src/examples/tabs/index.ts
@@ -1,8 +1,8 @@
 export * from "./ActiveColor";
 export * from "./AddANewTab";
 export * from "./Appearance";
-export * from "./ClosableTabs";
 export * from "./DisabledTabs";
+export * from "./DismissibleTabs";
 export * from "./DividerAndInset";
 export * from "./Overflow";
 export * from "./WithBadge";