diff --git a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/AccordionView/index.jsx b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/AccordionView/index.jsx
index d37546c6c7..a7be33c0e2 100644
--- a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/AccordionView/index.jsx
+++ b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/AccordionView/index.jsx
@@ -94,11 +94,13 @@ const AccordionView = ({ programs, actionUrls }) => {
       content: {
         header: resolver.getMajorDesc(),
         body: `<ul>
-          <li>
-            <strong>Major:</strong>
-            <br />
-              ${majorNameHtml}
-          </li>
+        <li>
+          <strong>Major:</strong>
+          <br />
+            <a href=${resolver.getDegreeSearchUrl()}>
+              ${resolver.getMajorDesc()}
+            </a>
+        </li>
         <li>
           <strong>Degree:</strong>
           <br />${resolver.getDegree()}
diff --git a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/GridView/index.jsx b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/GridView/index.jsx
index 13ac343d5c..058c283ca1 100644
--- a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/GridView/index.jsx
+++ b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/GridView/index.jsx
@@ -39,8 +39,8 @@ function GridView({ programs, loading, actionUrls }) {
               image={imageUrl}
               imageAltText="An example image"
               title={resolver.getMajorDesc()}
-              linkLabel={url ? "View Program Details" : undefined}
-              linkUrl={url || undefined}
+              linkLabel="View Program Details"
+              linkUrl={resolver.getDegreeSearchUrl()}
               buttons={[
                 {
                   color: "maroon",
diff --git a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/ListView/index.colums.config.jsx b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/ListView/index.colums.config.jsx
index a3be74ee2a..49581f75cc 100644
--- a/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/ListView/index.colums.config.jsx
+++ b/packages/app-degree-pages/src/components/ListingPage/components/ProgramList/ListView/index.colums.config.jsx
@@ -26,24 +26,19 @@ const columns = [
     label: "Major",
     className: "major",
     sortable: true,
-    contentTemplate: ({ resolver, rowIndex, actionUrls, onClick }) => {
-      const url = resolver.getDegreeSearchUrl();
-      return (
-        <div className="cell-container">
-          {url ? (
-            <a href={url}>{resolver.getMajorDesc()}</a>
-          ) : (
-            <span>{resolver.getMajorDesc()}</span>
-          )}
-          <ChevronIconButton
-            dataId="show-row-detail"
-            ariaLabel={`${resolver.getMajorDesc()} arrow`}
-            ariaControls={`row-info-${rowIndex}`}
-            onClick={selected => onClick(rowIndex, selected)}
-          />
-        </div>
-      );
-    },
+    contentTemplate: ({ resolver, rowIndex, actionUrls, onClick }) => (
+      <div className="cell-container">
+        <a href={resolver.getDegreeSearchUrl()}>
+          {resolver.getMajorDesc()}
+        </a>
+        <ChevronIconButton
+          dataId="show-row-detail"
+          ariaLabel={`${resolver.getMajorDesc()} arrow`}
+          ariaControls={`row-info-${rowIndex}`}
+          onClick={selected => onClick(rowIndex, selected)}
+        />
+      </div>
+    ),
   },
   {
     dataKey: "Degree",
diff --git a/packages/component-events/CHANGELOG.md b/packages/component-events/CHANGELOG.md
index 1ea0223e13..0b32c53944 100644
--- a/packages/component-events/CHANGELOG.md
+++ b/packages/component-events/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [@asu/component-events-v3.2.0](https://github.com/asu/asu-unity-stack/compare/@asu/component-events-v3.1.0...@asu/component-events-v3.2.0) (2026-07-14)
+
+
+### Bug Fixes
+
+* **component-events:** fall back to default noFeedText when blank ([e85d4da](https://github.com/asu/asu-unity-stack/commit/e85d4dacd9d7ee6138805fd505ceabca737f3aeb))
+
+
+### Features
+
+* **component-events:** expose configurable noFeedText prop ([9cac3e9](https://github.com/asu/asu-unity-stack/commit/9cac3e912e1b0bc4c573f8e72378b1d147b0bce8))
+
 # [@asu/component-events-v3.1.0](https://github.com/asu/asu-unity-stack/compare/@asu/component-events-v3.0.1...@asu/component-events-v3.1.0) (2026-04-03)
 
 
diff --git a/packages/component-events/package.json b/packages/component-events/package.json
index 8b7600ad61..3402038070 100644
--- a/packages/component-events/package.json
+++ b/packages/component-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asu/component-events",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "ASU Events component",
   "main": "./dist/asuEvents.cjs.js",
   "browser": "./dist/asuEvents.umd.js",
diff --git a/packages/component-events/src/components/CardsGridEvents/index.jsx b/packages/component-events/src/components/CardsGridEvents/index.jsx
index 5ddff92e4c..ce3b3269ea 100644
--- a/packages/component-events/src/components/CardsGridEvents/index.jsx
+++ b/packages/component-events/src/components/CardsGridEvents/index.jsx
@@ -15,7 +15,13 @@ import { GridView } from "./GridView";
  * @param {FeedType} props
  * @returns {JSX.Element}
  */
-const CardsGridEvents = ({ header, ctaButton, dataSource, maxItems }) => {
+const CardsGridEvents = ({
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = "No events to show.",
+}) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -33,7 +39,7 @@ const CardsGridEvents = ({ header, ctaButton, dataSource, maxItems }) => {
   }, []);
   return (
     // Calling the high order component that fetch the data
-    <BaseFeed {...{ header, ctaButton, dataSource, maxItems }}>
+    <BaseFeed {...{ header, ctaButton, dataSource, maxItems, noFeedText }}>
       <GridView />
     </BaseFeed>
   );
diff --git a/packages/component-events/src/components/CardsGridEvents/index.stories.jsx b/packages/component-events/src/components/CardsGridEvents/index.stories.jsx
index ec930b008b..6c57519dda 100644
--- a/packages/component-events/src/components/CardsGridEvents/index.stories.jsx
+++ b/packages/component-events/src/components/CardsGridEvents/index.stories.jsx
@@ -75,3 +75,20 @@ WithNoHeader.args = {
     url: "/api/mocks/feeds-json",
   },
 };
+
+/**
+ * Demonstrates a custom "no results" message. The empty data source forces the
+ * feed to render the `noFeedText` instead of cards.
+ * @type {{ args: FeedType, parameters: object}}
+ */
+export const WithCustomNoFeedText = Template.bind({});
+WithCustomNoFeedText.args = {
+  header: { color: "dark", text: "Events Cards" },
+  dataSource: {
+    url: "/api/mocks/empty-feeds-json",
+  },
+  noFeedText: "There are no upcoming events at this time.",
+};
+WithCustomNoFeedText.parameters = {
+  msw: { handlers: createMockHandlers({ empty: true }) },
+};
diff --git a/packages/component-events/src/components/CardsGridEvents/index.test.jsx b/packages/component-events/src/components/CardsGridEvents/index.test.jsx
index 7b7790410f..216f227aa5 100644
--- a/packages/component-events/src/components/CardsGridEvents/index.test.jsx
+++ b/packages/component-events/src/components/CardsGridEvents/index.test.jsx
@@ -1,6 +1,7 @@
 // @ts-check
 import { render, cleanup, act } from "@testing-library/react";
 import React from "react";
+import { vi } from "vitest";
 
 import { CardsGridEvents } from "./index";
 
@@ -63,6 +64,49 @@ describe("#Cards Grid Events", () => {
     });
   });
 
+  describe("#No feed text", () => {
+    // Force an empty feed so the "no results" message is rendered
+    const emptyFeedArgs = { ...defaultArgs, dataSource: { url: "/empty" } };
+
+    beforeEach(() => {
+      vi.mocked(fetch).mockImplementation(
+        async () =>
+          new Response(JSON.stringify({ nodes: [] }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          })
+      );
+    });
+
+    afterEach(() => {
+      vi.mocked(fetch).mockReset();
+      cleanup();
+    });
+
+    it("should render the default no-feed text when noFeedText is not provided", async () => {
+      await renderCardsGridEvents(emptyFeedArgs);
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+
+    it("should render a custom no-feed text when noFeedText is provided", async () => {
+      const customText = "Nothing happening right now.";
+      await renderCardsGridEvents({ ...emptyFeedArgs, noFeedText: customText });
+      expect(await component.findByText(customText)).toBeInTheDocument();
+      expect(
+        component.queryByText("No events to show.")
+      ).not.toBeInTheDocument();
+    });
+
+    it("should fall back to the default no-feed text when noFeedText is empty", async () => {
+      await renderCardsGridEvents({ ...emptyFeedArgs, noFeedText: "" });
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("#With No Header", () => {
     const noHeaderArgs = { ...defaultArgs, header: undefined };
     beforeEach(async () => {
diff --git a/packages/component-events/src/components/CardsListEvents/index.jsx b/packages/component-events/src/components/CardsListEvents/index.jsx
index e1ca97f272..4af4e19772 100644
--- a/packages/component-events/src/components/CardsListEvents/index.jsx
+++ b/packages/component-events/src/components/CardsListEvents/index.jsx
@@ -15,7 +15,13 @@ import { ListView } from "./ListView";
  * @param {FeedType} props
  * @returns {JSX.Element}
  */
-const CardsListEvents = ({ header, ctaButton, dataSource, maxItems }) => {
+const CardsListEvents = ({
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = "No events to show.",
+}) => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       trackReactComponent({
@@ -34,7 +40,7 @@ const CardsListEvents = ({ header, ctaButton, dataSource, maxItems }) => {
 
   return (
     // Calling the high order component that fetch the data
-    <BaseFeed {...{ header, ctaButton, dataSource, maxItems }}>
+    <BaseFeed {...{ header, ctaButton, dataSource, maxItems, noFeedText }}>
       <ListView />
     </BaseFeed>
   );
diff --git a/packages/component-events/src/components/CardsListEvents/index.stories.jsx b/packages/component-events/src/components/CardsListEvents/index.stories.jsx
index 9e3ee25607..4739a8709b 100644
--- a/packages/component-events/src/components/CardsListEvents/index.stories.jsx
+++ b/packages/component-events/src/components/CardsListEvents/index.stories.jsx
@@ -78,3 +78,20 @@ WithNoHeader.args = {
     url: "/api/mocks/feeds-json",
   },
 };
+
+/**
+ * Demonstrates a custom "no results" message. The empty data source forces the
+ * feed to render the `noFeedText` instead of cards.
+ * @type {{ args: FeedType, parameters: object}}
+ */
+export const WithCustomNoFeedText = Template.bind({});
+WithCustomNoFeedText.args = {
+  header: { color: "dark", text: "Events List" },
+  dataSource: {
+    url: "/api/mocks/empty-feeds-json",
+  },
+  noFeedText: "There are no upcoming events at this time.",
+};
+WithCustomNoFeedText.parameters = {
+  msw: { handlers: createMockHandlers({ empty: true }) },
+};
diff --git a/packages/component-events/src/components/CardsListEvents/index.test.jsx b/packages/component-events/src/components/CardsListEvents/index.test.jsx
index 73d9f7bbd1..86a5ad5ffd 100644
--- a/packages/component-events/src/components/CardsListEvents/index.test.jsx
+++ b/packages/component-events/src/components/CardsListEvents/index.test.jsx
@@ -1,6 +1,7 @@
 // @ts-check
 import { render, cleanup, act } from "@testing-library/react";
 import React from "react";
+import { vi } from "vitest";
 
 import { CardsListEvents } from "./index";
 
@@ -63,6 +64,49 @@ describe("#Cards List Events", () => {
     });
   });
 
+  describe("#No feed text", () => {
+    // Force an empty feed so the "no results" message is rendered
+    const emptyFeedArgs = { ...defaultArgs, dataSource: { url: "/empty" } };
+
+    beforeEach(() => {
+      vi.mocked(fetch).mockImplementation(
+        async () =>
+          new Response(JSON.stringify({ nodes: [] }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          })
+      );
+    });
+
+    afterEach(() => {
+      vi.mocked(fetch).mockReset();
+      cleanup();
+    });
+
+    it("should render the default no-feed text when noFeedText is not provided", async () => {
+      await renderCardsListEvents(emptyFeedArgs);
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+
+    it("should render a custom no-feed text when noFeedText is provided", async () => {
+      const customText = "Nothing happening right now.";
+      await renderCardsListEvents({ ...emptyFeedArgs, noFeedText: customText });
+      expect(await component.findByText(customText)).toBeInTheDocument();
+      expect(
+        component.queryByText("No events to show.")
+      ).not.toBeInTheDocument();
+    });
+
+    it("should fall back to the default no-feed text when noFeedText is empty", async () => {
+      await renderCardsListEvents({ ...emptyFeedArgs, noFeedText: "" });
+      expect(
+        await component.findByText("No events to show.")
+      ).toBeInTheDocument();
+    });
+  });
+
   describe("#With No Header", () => {
     const noHeaderArgs = { ...defaultArgs, header: undefined };
     beforeEach(async () => {
diff --git a/packages/component-events/src/core/components/BaseFeed/index.jsx b/packages/component-events/src/core/components/BaseFeed/index.jsx
index 8a6d06f881..3141661b92 100644
--- a/packages/component-events/src/core/components/BaseFeed/index.jsx
+++ b/packages/component-events/src/core/components/BaseFeed/index.jsx
@@ -14,7 +14,16 @@ import { defaultProps } from "../../constants/default-props";
 import { filterData } from "../../services/dataManager";
 import { transformData } from "../../transformers/data.transfromer";
 
-const BaseFeed = ({ children, header, ctaButton, dataSource, maxItems }) => (
+const DEFAULT_NO_FEED_TEXT = "No events to show.";
+
+const BaseFeed = ({
+  children,
+  header,
+  ctaButton,
+  dataSource,
+  maxItems,
+  noFeedText = DEFAULT_NO_FEED_TEXT,
+}) => (
   // Calling the unity-react-core component to fetch the data, transform it and filter it
   // We provide in the renderBody the view specified before in the parent component, recieved as "children" in this component.
   // We provide in the renderHeader the unity-react-core header, if it is desired to be shown
@@ -36,7 +45,7 @@ const BaseFeed = ({ children, header, ctaButton, dataSource, maxItems }) => (
     dataFilter={filterData}
     dataSource={dataSource}
     defaultProps={defaultProps}
-    noFeedText="No events to show."
+    noFeedText={noFeedText.trim() ? noFeedText : DEFAULT_NO_FEED_TEXT}
     maxItems={maxItems}
   />
 );
@@ -46,6 +55,7 @@ BaseFeed.propTypes = {
   ctaButton: feedCtaButtonShape,
   dataSource: feedDataSourceShape,
   maxItems: PropTypes.number,
+  noFeedText: PropTypes.string,
   children: PropTypes.element,
 };
 
diff --git a/packages/component-events/src/core/models/propTypes.js b/packages/component-events/src/core/models/propTypes.js
index 26cbb51e9a..c2f682304b 100644
--- a/packages/component-events/src/core/models/propTypes.js
+++ b/packages/component-events/src/core/models/propTypes.js
@@ -22,6 +22,7 @@ const eventsPropTypes = {
   ctaButton: layoutCTAPropTypes,
   dataSource: dataSourcePropTypes,
   maxItems: PropTypes.number,
+  noFeedText: PropTypes.string,
 };
 
 export {
diff --git a/packages/component-events/src/core/utils/story-utils.js b/packages/component-events/src/core/utils/story-utils.js
index 74d6a33e00..d3db73b705 100644
--- a/packages/component-events/src/core/utils/story-utils.js
+++ b/packages/component-events/src/core/utils/story-utils.js
@@ -3,13 +3,28 @@
 import { http, HttpResponse } from "msw";
 import * as feeds from "../../../__mocks__/api/feeds.json";
 
-function createMockHandlers() {
-  return [
+/**
+ * @param {{ empty?: boolean }} [options] - When `empty` is true an additional
+ * handler is registered that returns a feed with no nodes, useful to showcase
+ * the configurable `noFeedText`.
+ */
+function createMockHandlers(options = {}) {
+  const handlers = [
     http.get("/api/mocks/feeds-json", () => {
       // @ts-ignore
       return HttpResponse.json(feeds.default || feeds);
     }),
   ];
+
+  if (options.empty) {
+    handlers.push(
+      http.get("/api/mocks/empty-feeds-json", () =>
+        HttpResponse.json({ nodes: [] })
+      )
+    );
+  }
+
+  return handlers;
 }
 
 export { createMockHandlers };
diff --git a/packages/unity-bootstrap-theme/CHANGELOG.md b/packages/unity-bootstrap-theme/CHANGELOG.md
index da442db104..8e2486003c 100644
--- a/packages/unity-bootstrap-theme/CHANGELOG.md
+++ b/packages/unity-bootstrap-theme/CHANGELOG.md
@@ -1,3 +1,51 @@
+# [@asu/unity-bootstrap-theme-v2.0.0](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-bootstrap-theme-v1.39.7...@asu/unity-bootstrap-theme-v2.0.0) (2026-07-17)
+
+
+### Bug Fixes
+
+* **unity-bootstrap-theme:** fix safari dropdown issue in tab panels ([33d209b](https://github.com/ASU/asu-unity-stack/commit/33d209b038a7ee70e75b964aa77c379f1dc8904e))
+* **unity-bootstrap-theme:** todo 3.2 ([970c8e8](https://github.com/ASU/asu-unity-stack/commit/970c8e813f89d862e6f80127d8639cc94ba19f71))
+* **unity-bootstrap-theme:** todo 3.3, changed MoreDropdown.js to fit _tabbed-panels.scss ([f55a827](https://github.com/ASU/asu-unity-stack/commit/f55a8272e6c605a2a8817f522e369f68a94a7fe4))
+* **unity-bootstrap-theme:** update bootstrap tabbed panels JS and styles ([bcdd640](https://github.com/ASU/asu-unity-stack/commit/bcdd640d67a05b1ca523ab4e3712aa4901fe7011))
+* **unity-bootstrap-theme:** update tabbed panel JS ([9123d4b](https://github.com/ASU/asu-unity-stack/commit/9123d4b7ea6f54e6765e9d5a82aa872572bc665c))
+* **unity-bootstrap-theme:** update tabbed panel JS ([c171ba8](https://github.com/ASU/asu-unity-stack/commit/c171ba8600225ce5df75f8c7d1d138486ec78d74))
+* **unity-bootstrap-theme:** update tabbed panel JS ([f994c24](https://github.com/ASU/asu-unity-stack/commit/f994c24fda479a5f1e6dcf019a1618e54126c91e))
+* **unity-bootstrap-theme:** update tabbed panel JS and styles ([71e53af](https://github.com/ASU/asu-unity-stack/commit/71e53afed5fd3e33bede1ba9c41f5cdb08dcb540))
+* **unity-bootstrap-theme:** update tabbed panel JS to mimic react version ([72b763b](https://github.com/ASU/asu-unity-stack/commit/72b763bc4a1ef5840ad85d743f32c3b7568b04f2))
+* **unity-react-core:** add NavControls for app-webdir-ui use ([a4fecfe](https://github.com/ASU/asu-unity-stack/commit/a4fecfeb0a4d58f7927d3171e67695aea832d9d3))
+* **unity-react-core:** address tabbed panel pr comments ([5c7085b](https://github.com/ASU/asu-unity-stack/commit/5c7085b9a5f516a2a602fe5d8d8464c04032164a))
+* **unity-react-core:** changes made after review ([c35491c](https://github.com/ASU/asu-unity-stack/commit/c35491c851ba00e9fdbe66ceb4abac2601bb8ec9))
+* **unity-react-core:** final design before completeing tests ([5a44c52](https://github.com/ASU/asu-unity-stack/commit/5a44c526ba43553f9f565a0cd162dd91795ef444))
+* **unity-react-core:** scrolling feature final ([13ba723](https://github.com/ASU/asu-unity-stack/commit/13ba723ae95a8bc103fe652e8f0a42fc842c52ee))
+* **unity-react-core:** toDo 5.1 ([50abf19](https://github.com/ASU/asu-unity-stack/commit/50abf198e6b3c776933f329b7fb1ddec3695f4da))
+* **unity-react-core:** update tabbed panel logic ([084885b](https://github.com/ASU/asu-unity-stack/commit/084885b2cd94c79625ecf6f6ab11996f87c8f2e3))
+
+
+### Features
+
+* **unity-bootstrap-theme:** tabbed panel rewrite ([299f76e](https://github.com/ASU/asu-unity-stack/commit/299f76ef2016bafe1eac50a6f62bde93684e794f))
+* **unity-bootstrap-theme:** tODO 3.1 ([934f119](https://github.com/ASU/asu-unity-stack/commit/934f119924c227bb55791fcb7560282d6c2bf309))
+* **unity-bootstrap-theme:** todo 3.2 ([f90438c](https://github.com/ASU/asu-unity-stack/commit/f90438c7b160dacb274d54a2d13b9f4823da1cbf))
+
+
+### BREAKING CHANGES
+
+* **unity-bootstrap-theme:** New html styles are relying on unity-react-core html
+
+# [@asu/unity-bootstrap-theme-v1.39.7](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-bootstrap-theme-v1.39.6...@asu/unity-bootstrap-theme-v1.39.7) (2026-07-14)
+
+
+### Bug Fixes
+
+* **unity-bootstrap-theme:** add bottom spacing to hero-sm title when no CTA is present ([51ebf35](https://github.com/ASU/asu-unity-stack/commit/51ebf358d8e487b02b247e95c7542829b0fd7ff0))
+
+# [@asu/unity-bootstrap-theme-v1.39.6](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-bootstrap-theme-v1.39.5...@asu/unity-bootstrap-theme-v1.39.6) (2026-07-14)
+
+
+### Bug Fixes
+
+* **unity-bootstrap-theme:** keep hero CTA inside the hero box below md breakpoint ([0057cd4](https://github.com/ASU/asu-unity-stack/commit/0057cd44f9919319ce6d07033d0b4f05950609bb))
+
 # [@asu/unity-bootstrap-theme-v1.39.5](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-bootstrap-theme-v1.39.4...@asu/unity-bootstrap-theme-v1.39.5) (2026-07-07)
 
 
diff --git a/packages/unity-bootstrap-theme/package.json b/packages/unity-bootstrap-theme/package.json
index f950524716..86cabb2cc9 100644
--- a/packages/unity-bootstrap-theme/package.json
+++ b/packages/unity-bootstrap-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asu/unity-bootstrap-theme",
-  "version": "1.39.5",
+  "version": "2.0.0",
   "description": "Please see @asu/unity-react-core for up-to-date stories and examples.\nBase UI theme for ASU Web Standards 2.0 developed with Bootstrap 5",
   "homepage": "https://github.com/ASU/asu-unity-stack#readme",
   "license": "MIT",
diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels-v2.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels-v2.js
new file mode 100644
index 0000000000..84cc5d83a0
--- /dev/null
+++ b/packages/unity-bootstrap-theme/src/js/tabbed-panels-v2.js
@@ -0,0 +1,482 @@
+import { EventHandler } from "./bootstrap-helper";
+
+let resizeAttached = false;
+
+// must match $tabbed-panels-dropdown-width in SCSS.
+const DROPDOWN_WIDTH = 282;
+
+/**
+ * Read layout constants from the live DOM and CSS.
+ * - tabGap: from the actual computed column-gap of the nav-tabs flex container
+ * - moreBtnWidth: from the actual rendered width of the More button (always in DOM, hidden when unused)
+ * @param {HTMLElement} container - The .uds-tabbed-panels element
+ * @param {HTMLElement} navTabs - The .nav.nav-tabs element
+ */
+function readLayoutConstants(container, navTabs) {
+  const style = getComputedStyle(navTabs);
+  const tabGap = parseFloat(style.columnGap || style.gap) || 8;
+
+  const moreBtn = navTabs.querySelector(".more-dropdown-button");
+  const moreBtnWidth = moreBtn
+    ? Math.round(moreBtn.getBoundingClientRect().width)
+    : 83;
+
+  return { tabGap, moreBtnWidth };
+}
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Build (or re-use) the More dropdown wrapper, button, and menu for a given
+ * nav-tabs container.  Returns { wrapper, button, menu }.
+ */
+function ensureDropdown(navTabs, isDark) {
+  let wrapper = navTabs.querySelector(".uds-more-dropdown");
+
+  if (!wrapper) {
+    wrapper = document.createElement("div");
+    wrapper.className = "uds-more-dropdown";
+
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "uds-tab more-dropdown-button";
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-expanded", "false");
+    btn.setAttribute("aria-controls", "more-dropdown-menu");
+    btn.innerHTML =
+      '<span class="more-dropdown-button-inner">' +
+      '<span aria-hidden="true">More</span>' +
+      '<i aria-hidden="true" class="fas fa-chevron-down more-dropdown-icon"></i>' +
+      "</span>" +
+      '<span class="more-dropdown-button-indicator" aria-hidden="true"></span>';
+
+    const menu = document.createElement("ul");
+    menu.id = "more-dropdown-menu";
+    menu.className = "more-dropdown-menu uds-more-dropdown-list";
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-label", "More tabs");
+    menu.setAttribute("aria-hidden", "true");
+
+    wrapper.appendChild(btn);
+    wrapper.appendChild(menu);
+    navTabs.appendChild(wrapper);
+  }
+
+  // Wire events once and guard with data attribute to prevent duplicates on reusee
+  if (!wrapper.hasAttribute("data-uds-events-wired")) {
+    wrapper.setAttribute("data-uds-events-wired", "true");
+    const btn = wrapper.querySelector(".more-dropdown-button");
+    const menu = wrapper.querySelector(".more-dropdown-menu");
+    wireDropdownEvents(wrapper, btn, menu);
+  }
+
+  return {
+    wrapper,
+    button: wrapper.querySelector(".more-dropdown-button"),
+    menu: wrapper.querySelector(".more-dropdown-menu"),
+  };
+}
+
+/**
+ * Attach open/close and keyboard behaviour to a dropdown
+ */
+function wireDropdownEvents(wrapper, btn, menu) {
+  // ── toggle open/close ──────────────────────────────────────────────────────
+  EventHandler.on(btn, "click.uds.tabbed-panels-v2", e => {
+    e.preventDefault();
+    const opening = btn.getAttribute("aria-expanded") !== "true";
+    setOpen(btn, menu, opening);
+  });
+
+  // ── keyboard on trigger button ────────────────────────────────────────────
+  EventHandler.on(btn, "keydown.uds.tabbed-panels-v2", e => {
+    const isOpen = btn.getAttribute("aria-expanded") === "true";
+    const items = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setOpen(btn, menu, true);
+          // Per ARIA APG menu-button pattern: keyboard open must move focus to first item
+          requestAnimationFrame(() => items[0]?.focus());
+        } else {
+          setOpen(btn, menu, false);
+        }
+        break;
+      case "ArrowDown":
+        if (isOpen) {
+          e.preventDefault();
+          items[0]?.focus();
+        }
+        break;
+      case "ArrowUp":
+        if (isOpen) {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+        break;
+      case "Escape":
+        if (isOpen) {
+          e.preventDefault();
+          setOpen(btn, menu, false);
+          btn.focus();
+        }
+        break;
+      default:
+        break;
+    }
+  });
+
+  // ── close on outside click ─────────────────────────────────────────────────
+  EventHandler.on(document, "mousedown.uds.tabbed-panels-v2", e => {
+    if (!wrapper.contains(e.target)) {
+      setOpen(btn, menu, false);
+    }
+  };
+  EventHandler.on(document, "mousedown.uds.tabbed-panels-v2", closeIfOutside);
+  EventHandler.on(document, "touchstart.uds.tabbed-panels-v2", closeIfOutside);
+
+  // ── keyboard navigation inside menu ───────────────────────────────────────
+  EventHandler.on(menu, "keydown.uds.tabbed-panels-v2", e => {
+    const items = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    const idx = items.indexOf(document.activeElement);
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        (items[idx + 1] ?? items[0]).focus();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        (items[idx - 1] ?? items[items.length - 1]).focus();
+        break;
+      case "Home":
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setOpen(btn, menu, false);
+        btn.focus();
+        break;
+      case "Tab":
+        setOpen(btn, menu, false);
+        break;
+      default:
+        break;
+    }
+  });
+}
+
+function setOpen(btn, menu, open) {
+  btn.setAttribute("aria-expanded", String(open));
+  menu.setAttribute("aria-hidden", String(!open));
+  menu.classList.toggle("open", open);
+  // The chevron rotation is driven by the button's [aria-expanded] state in CSS,
+  // so both the React and vanilla layers share a single mechanism.
+}
+
+// ─── overflow calculation ─────────────────────────────────────────────────────
+
+/**
+ * Measure all tabs, decide which fit, hide the rest and populate the More menu.
+ */
+function calculateOverflow(container) {
+  // React manages its own instances; never enhance one from the bootstrap version
+  if (container.hasAttribute("data-react")) return;
+
+  const navTabs = container.querySelector(".nav.nav-tabs");
+  if (!navTabs) return;
+
+  // Collect original tab buttons (exclude the More wrapper itself)
+  const tabLinks = Array.from(navTabs.querySelectorAll("button.nav-link"));
+
+  if (tabLinks.length === 0) return;
+
+  const isDark = container.classList.contains("uds-tabbed-panels-dark");
+  const { wrapper, button, menu } = ensureDropdown(navTabs, isDark);
+
+  // Temporarily show all tabs so we can measure them
+  tabLinks.forEach(a => {
+    a.style.display = "";
+    a.removeAttribute("aria-hidden");
+    a.removeAttribute("tabindex");
+    a.removeAttribute("inert");
+  });
+
+  const availableWidth = navTabs.clientWidth;
+  const { moreBtnWidth, tabGap } = readLayoutConstants(container, navTabs);
+  const widths = tabLinks.map(a => a.getBoundingClientRect().width || 80);
+
+  const visibleIds = [];
+  const overflowIds = [];
+  let used = 0;
+
+  for (let i = 0; i < tabLinks.length; i++) {
+    const w = widths[i];
+    if (used + w + moreBtnWidth > availableWidth) {
+      for (let j = i; j < tabLinks.length; j++) {
+        overflowIds.push(tabLinks[j].id);
+      }
+      break;
+    }
+    visibleIds.push(tabLinks[i].id);
+    used += w + tabGap;
+  }
+
+  // Show / hide tab links
+  // Overflow tabs get display:none + tabindex="-1" + aria-hidden + inert
+  // so they are completely unreachable by any keyboard interaction.
+  tabLinks.forEach(a => {
+    if (overflowIds.includes(a.id)) {
+      a.style.display = "none";
+      a.setAttribute("tabindex", "-1");
+      a.setAttribute("aria-hidden", "true");
+      a.setAttribute("inert", "");
+    }
+  });
+
+  if (overflowIds.length === 0) {
+    wrapper.classList.add("uds-more-dropdown-hidden");
+    wrapper.setAttribute("aria-hidden", "true");
+    return;
+  }
+  wrapper.classList.remove("uds-more-dropdown-hidden");
+  wrapper.removeAttribute("aria-hidden");
+
+  // Anchor dropdown to the right of the More button when the container is
+  // narrower than 1200px AND the dropdown still fits within the viewport
+  // (so it doesn't overflow on mobile).
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const fitsInViewport = wrapperRect.left + DROPDOWN_WIDTH <= window.innerWidth;
+  const fitsIn1200 = wrapperRect.left + DROPDOWN_WIDTH <= 1200;
+  const containerWidth = container.getBoundingClientRect().width;
+  const isNarrow = containerWidth < 1200;
+  wrapper.classList.toggle(
+    "dropdown-open-right",
+    isNarrow && fitsInViewport && fitsIn1200
+  );
+
+  // Determine the active tab
+  const activeTab = navTabs.querySelector("button.nav-link.active");
+  const activeId = activeTab?.id ?? "";
+  const hasActiveOverflow = overflowIds.includes(activeId);
+
+  button.classList.toggle("active", hasActiveOverflow);
+
+  // Update More button aria-label to announce the overflow count to screen readers
+  const overflowCount = overflowIds.length;
+  button.setAttribute(
+    "aria-label",
+    `More, ${overflowCount} additional tab${overflowCount !== 1 ? "s" : ""}`
+  );
+
+  // Roving tabindex: only one visible tab gets tabindex="0" so keyboard users
+  // can reach the tab row. If the active tab is hidden in the dropdown, the
+  // first visible tab becomes the focus entry point instead.
+  const rovingFocusId = hasActiveOverflow ? visibleIds[0] : activeId;
+  tabLinks.forEach(a => {
+    if (!overflowIds.includes(a.id)) {
+      a.setAttribute("tabindex", a.id === rovingFocusId ? "0" : "-1");
+    }
+  });
+
+  // Rebuild menu items
+  menu.innerHTML = "";
+  overflowIds.forEach(tabId => {
+    const originalLink = navTabs.querySelector(`#${CSS.escape(tabId)}`);
+    if (!originalLink) return;
+
+    const isActive = tabId === activeId;
+    const li = document.createElement("li");
+    li.setAttribute("role", "none");
+
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("role", "menuitem");
+    btn.setAttribute("tabindex", "-1");
+    btn.className = "more-dropdown-item";
+    btn.dataset.tabId = tabId;
+    if (isActive) btn.setAttribute("aria-current", "true");
+    btn.textContent = originalLink.textContent.trim();
+
+    EventHandler.on(btn, "click.uds.tabbed-panels-v2", e => {
+      e.preventDefault();
+      setOpen(button, menu, false);
+      button.focus();
+      activateTab(container, tabId);
+      // Update active state on button and menu items
+      updateActiveState(navTabs, tabId, button, menu);
+    });
+
+    li.appendChild(btn);
+    menu.appendChild(li);
+  });
+}
+
+/**
+ * Manually activate a tab without the Bootstrap JS dependency.
+ */
+function activateTab(container, tabId) {
+  const navTabs = container.querySelector(".nav.nav-tabs");
+  const tabContent =
+    container.closest("div")?.querySelector(".tab-content") ??
+    container.parentElement?.querySelector(".tab-content");
+
+  // Deactivate all
+  navTabs.querySelectorAll("button.nav-link").forEach(a => {
+    a.classList.remove("active");
+    a.setAttribute("aria-selected", "false");
+  });
+  tabContent?.querySelectorAll(".tab-pane").forEach(pane => {
+    pane.classList.remove("show", "active");
+  });
+
+  // Activate target
+  const targetLink = navTabs.querySelector(`#${CSS.escape(tabId)}`);
+  targetLink?.classList.add("active");
+  targetLink?.setAttribute("aria-selected", "true");
+
+  const panelId = `nav-${tabId}`;
+  const targetPane = tabContent?.querySelector(`#${CSS.escape(panelId)}`);
+  targetPane?.classList.add("show", "active");
+}
+
+/**
+ * Sync the More button active state and aria-current on menu items.
+ */
+function updateActiveState(navTabs, activeId, button, menu) {
+  const overflowIds = Array.from(
+    menu.querySelectorAll('[role="menuitem"]')
+  ).map((_, i) => i);
+  // Re-check which ids are in the menu
+  const menuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+  const overflowVisible = menuItems.some(item => {
+    // item text matches an overflow tab — check the hidden link
+    return true; // we'll match by aria-current below
+  });
+
+  menuItems.forEach(item => {
+    // Re-derive: find hidden button whose text matches
+    const matchingHiddenLink = Array.from(
+      navTabs.querySelectorAll("button.nav-link")
+    ).find(
+      a =>
+        a.style.display === "none" &&
+        a.textContent.trim() === item.textContent.trim()
+    );
+    const tabId = matchingHiddenLink?.id;
+    if (tabId === activeId) {
+      item.setAttribute("aria-current", "true");
+    } else {
+      item.removeAttribute("aria-current");
+    }
+  });
+
+  const anyOverflowActive = menuItems.some(item =>
+    item.hasAttribute("aria-current")
+  );
+  button.classList.toggle("active", anyOverflowActive);
+}
+
+// ─── listen for Bootstrap tab-shown events ────────────────────────────────────
+
+function listenForTabChanges(container) {
+  const navTabs = container.querySelector(".nav.nav-tabs");
+  if (!navTabs) return;
+
+  // Arrow key navigation between visible tabs (WCAG 2.1 tablist pattern).
+  // IMPORTANT: use native addEventListener with { capture: true } so this fires
+  // BEFORE Bootstrap's own keydown handler, which is attached directly on each
+  // tab element (bubble phase). stopImmediatePropagation prevents Bootstrap from
+  // also handling the event on the same element.
+  function handleTabKeydown(e) {
+    if (e.target?.getAttribute("role") !== "tab") return;
+    const isArrow = ["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key);
+    if (!isArrow) return;
+
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    const visibleTabs = Array.from(
+      navTabs.querySelectorAll("button.nav-link")
+    ).filter(a => a.style.display !== "none");
+    const idx = visibleTabs.indexOf(e.target);
+    if (idx === -1) return;
+
+    let next = null;
+    if (e.key === "ArrowRight") {
+      next = visibleTabs[idx + 1] ?? visibleTabs[0];
+    } else if (e.key === "ArrowLeft") {
+      next = visibleTabs[idx - 1] ?? visibleTabs[visibleTabs.length - 1];
+    } else if (e.key === "Home") {
+      next = visibleTabs[0];
+    } else if (e.key === "End") {
+      next = visibleTabs[visibleTabs.length - 1];
+    }
+
+    if (next && next !== e.target) {
+      // Update roving tabindex
+      e.target.setAttribute("tabindex", "-1");
+      next.setAttribute("tabindex", "0");
+      next.focus();
+      // Activate the tab — buttons use our own activateTab, no Bootstrap plugin needed
+      activateTab(container, next.id);
+      const moreBtn = navTabs.querySelector(".more-dropdown-button");
+      const moreMenu = navTabs.querySelector(".more-dropdown-menu");
+      if (moreBtn && moreMenu)
+        updateActiveState(navTabs, next.id, moreBtn, moreMenu);
+    }
+  }
+
+  navTabs.addEventListener("keydown", handleTabKeydown, true);
+
+  // Click handler for tab buttons — Bootstrap's Tab plugin is not involved
+  // (buttons have no data-bs-toggle), so we activate tabs manually on click.
+  EventHandler.on(navTabs, "click.uds.tabbed-panels-v2", e => {
+    const btn = e.target?.closest("button.nav-link");
+    if (!btn || btn.style.display === "none") return;
+    e.preventDefault();
+    activateTab(container, btn.id);
+    const moreBtn = navTabs.querySelector(".more-dropdown-button");
+    const moreMenu = navTabs.querySelector(".more-dropdown-menu");
+    if (moreBtn && moreMenu)
+      updateActiveState(navTabs, btn.id, moreBtn, moreMenu);
+  });
+}
+
+// ─── public init ──────────────────────────────────────────────────────────────
+
+function initTabbedPanelsV2() {
+  document
+    .querySelectorAll(".uds-tabbed-panels:not([data-react])")
+    .forEach(container => {
+      calculateOverflow(container);
+      listenForTabChanges(container);
+    });
+
+  // Recalculate on resize (debounced)
+  let resizeTimer;
+  EventHandler.on(window, "resize.uds.tabbed-panels-v2", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      document
+        .querySelectorAll(".uds-tabbed-panels:not([data-react])")
+        .forEach(calculateOverflow);
+    }, 100);
+  });
+}
+
+export { initTabbedPanelsV2 };
+
+if (document.readyState === "complete") {
+  setTimeout(initTabbedPanelsV2, 0);
+} else {
+  // Wait for full load so dynamically-generated HTML is in the DOM
+  EventHandler.on(window, "load.uds.tabbed-panels-v2", initTabbedPanelsV2);
+}
diff --git a/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js b/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
index c45d6aa1b9..34d6362b9f 100644
--- a/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
+++ b/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
@@ -11,7 +11,7 @@ import { initGlobalHeader } from "./global-header.js";
 import { initHeroesVideo } from "./heroes-video.js";
 import { initImageParallax } from "./image-parallax.js";
 import { initModals } from "./modals.js";
-import { initTabbedPanels } from "./tabbed-panels.js";
+import { initTabbedPanelsV2 } from "./tabbed-panels-v2.js";
 import { initFixedTable } from "./tables.js";
 import { initTooltips } from "./tooltips.js";
 import { initVideo } from "./video.js";
@@ -30,7 +30,7 @@ const unityBootstrap = {
   initImageParallax,
   initModals,
   initRankingCard,
-  initTabbedPanels,
+  initTabbedPanelsV2,
   initTooltips,
   initVideo,
   initCardBodies,
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss b/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss
index c29965c6a4..693028ab65 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_heroes.scss
@@ -213,7 +213,7 @@ div[class^="uds-hero"] {
 
 div.uds-hero-sm {
   min-height: $uds-size-spacing-32;
-  grid-template-rows: 1fr auto auto 3rem;
+  grid-template-rows: 1fr auto auto auto 3rem;
 
   h1,
   a.btn,
@@ -251,16 +251,12 @@ div.uds-hero-sm {
       min-height: $uds-size-spacing-32;
     }
   }
-
-  > a.btn {
-    top: 15rem;
-  }
 }
 
 div.uds-hero-md {
   min-height: 21rem;
   // by design, the hero-md has no content on mobile, change grid template rows and hide .content
-  grid-template-rows: 1fr auto auto 3rem;
+  grid-template-rows: 1fr auto auto auto 3rem;
 
   .content {
     display: none;
@@ -270,18 +266,12 @@ div.uds-hero-md {
     .btn-row {
       flex-wrap: wrap;
       align-self: flex-start;
-      top: 20rem;
     }
 
     .hero-overlay {
       min-height: 21rem;
     }
   }
-
-  // TODO: Remove, fallback for buttons without btn-row
-  > a.btn {
-    top: 20rem;
-  }
 }
 
 div.uds-hero-lg {
@@ -307,7 +297,6 @@ div.uds-hero-lg {
 
     .btn-row {
       align-self: flex-start;
-      top: 31rem;
     }
 
     .hero-overlay {
@@ -319,10 +308,30 @@ div.uds-hero-lg {
   &.uds-video-hero .video-hero-controls {
     display: none;
   }
+}
 
-  // TODO: Remove, fallback for buttons without btn-row
-  > a.btn {
-    top: 31rem;
+// WS2-2950: below the md breakpoint, hero CTAs flow in their own auto grid row
+// instead of hanging at a fixed absolute offset that overflows the hero box.
+// Scoped to media-breakpoint-down(md) so tablet/desktop styles are untouched.
+@include media-breakpoint-down(md) {
+  div.uds-hero-md.has-btn-row .btn-row,
+  div.uds-hero-lg.has-btn-row .btn-row {
+    grid-row: 4;
+    position: relative;
+    top: auto;
+    margin-top: 1rem;
+  }
+
+  div.uds-hero-sm,
+  div.uds-hero-md,
+  div.uds-hero-lg {
+    // TODO: Remove, fallback for buttons without btn-row
+    > a.btn {
+      position: relative;
+      top: auto;
+      grid-row: 4;
+      margin-top: 1rem;
+    }
   }
 }
 
@@ -380,10 +389,23 @@ div.uds-hero-lg {
   div.uds-hero-sm {
     grid-template-rows: 0px 1fr auto auto;
 
+    // Row 4 collapses to 0 when the hero has no CTA, leaving the h1 flush
+    // against the bottom edge — carry the bottom spacing on the h1 instead.
+    h1 {
+      margin-bottom: $uds-size-spacing-4;
+    }
+
+    &.has-btn-row h1,
+    &:has(> a.btn) h1 {
+      margin-bottom: 0;
+    }
+
     > a.btn {
       position: relative;
       top: auto;
       grid-row: 4;
+      margin-top: 1rem;
+      margin-bottom: 1rem;
     }
 
     &.has-btn-row {
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss b/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss
index f77deceab2..268543f9ff 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_tabbed-panels.scss
@@ -1,7 +1,12 @@
 .uds-tabbed-panels {
+  --uds-tab-gap: #{$tabbed-panels-tab-gap};
+
   box-shadow: inset 0px -2px 0px 0px $asu-gray-4;
   flex-wrap: inherit;
-  overflow: hidden;
+
+  // allow dropdown to extend outside container
+  overflow: visible;
+
   position: relative;
   -webkit-overflow-scrolling: touch;
   white-space: nowrap;
@@ -10,43 +15,51 @@
     display: none;
   }
 
-  &:hover span.carousel-control-prev-icon,
-  &:hover span.carousel-control-next-icon {
-    @media screen and (min-width: $uds-breakpoint-lg) {
-      opacity: 1;
-    }
-  }
-
   .nav-tabs {
     display: flex;
     flex-wrap: inherit;
-    left: 0px;
     position: relative;
     transition: all 0.25s ease 0s;
     white-space: nowrap;
-    overflow-x: auto;
+
+    overflow: visible;
+
     scroll-behavior: smooth;
     -ms-overflow-style: none; // to hide scrollbar in IE and Edge
     scrollbar-width: none; // to hide scrollbar in Firefox
+
     &::-webkit-scrollbar {
       display: none; // to hide scrollbar In Chrome, Safari, Opera, and other WebKit-based browsers
     }
 
     .nav-link {
       color: #000;
-      padding: 0.2em 0.8em;
-      border-right: 0;
-      border-left: 0;
-      border-top: 0;
+      height: 41px;
+      padding: $tabbed-panels-tab-padding-top $tabbed-panels-tab-padding-x 0 $tabbed-panels-tab-padding-x;
+      margin: 0 0.5rem 0 0;
+
+      // Reset button styles
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+
+      // Simplified borders
+      border: none;
+      border-bottom: $tabbed-panels-active-border-width solid transparent;
+
       text-decoration: none;
-      font-weight: bold;
-      font-size: 24px;
-      margin: 0.2em 0.2em 0 0.2em;
+      font-weight: 400;
+      font-size: $tabbed-panels-font-size;
+      line-height: 24px;
     }
 
     .nav-link.active {
       background-color: transparent;
-      border-bottom: 8px solid $uds-color-base-maroon;
+
+      // Active tab indicator
+      border-bottom: $tabbed-panels-active-border-width solid $uds-color-base-maroon;
+
+      padding-bottom: 0;
     }
 
     .nav-link:hover,
@@ -63,8 +76,7 @@
 
       .nav-link.active {
         color: $uds-color-brand-gold;
-        background-color: transparent;
-        border-bottom: 8px solid $uds-color-brand-gold;
+        border-bottom: $tabbed-panels-active-border-width solid $uds-color-brand-gold;
       }
 
       .nav-link:hover,
@@ -73,80 +85,41 @@
       }
     }
 
-    &:hover span.carousel-control-prev-icon,
-    &:hover span.carousel-control-next-icon {
-      @media screen and (min-width: $uds-breakpoint-lg) {
-        opacity: 1;
-      }
+    .more-dropdown-button {
+      background: transparent;
+      color: $uds-color-brand-gold;
     }
-  }
-}
 
-.scroll-control {
-  &-prev {
-    outline: none;
-    border: none;
-    width: 80px;
-    position: absolute;
-    height: 100%;
-    top: 0;
-    background: linear-gradient(
-      90deg,
-      rgba(25, 25, 25, 0.25) 0%,
-      rgba(25, 25, 25, 0) 100%
-    );
-    left: 0;
+    .more-dropdown-button.active {
+      border-bottom-color: $uds-color-brand-gold;
+    }
 
-  }
+    .more-dropdown-icon {
+      color: $uds-color-brand-gold;
+    }
 
-  &-next {
-    width: 80px;
-    position: absolute;
-    height: 100%;
-    top: 0;
-    right: 0;
-    background: linear-gradient(
-      90deg,
-      rgba(25, 25, 25, 0) 0%,
-      rgba(25, 25, 25, 0.25) 100%
-    );
-
-    span.carousel-control-next-icon {
-      margin: 0 12px 0 42px;
+    .more-dropdown-menu {
+      background: $asu-gray-1;
+      border: 1px solid $asu-gray-5;
     }
-  }
 
-  &-prev span.carousel-control-prev-icon,
-  &-next span.carousel-control-next-icon {
-    background-size: 60% 60%;
-    display: block;
-    opacity: 1;
-    padding: 12px;
-    position: relative;
-    top: 50%;
-    left: 0;
-    transform: translate(0, -50%);
-    background-color: $asu-gray-7;
-    border: solid 1px $asu-gray-5;
-    border-radius: 100%;
-    color: #000;
-  }
-  @media screen and (max-width: $uds-breakpoint-md) {
-    &-prev,
-    &-next {
-      width: 48px;
+    .more-dropdown-item {
+      color: $asu-gray-7;
     }
-    &-next,
-    &-prev {
-    span.carousel-control-next-icon,
-    span.carousel-control-prev-icon
-    {
-      margin: 0px 12px 0px 8px;
+
+    .more-dropdown-item:hover,
+    .more-dropdown-item:focus,
+    .more-dropdown-item:focus-visible {
+      color: $uds-color-brand-gold;
     }
-    span.carousel-control-prev-icon {
-      margin-left: 0px;
+
+    .more-dropdown-item[aria-current="true"] {
+      color: $uds-color-brand-gold;
+    }
+
+    .more-dropdown-item[aria-current="true"]::after {
+      background: $uds-color-brand-gold;
     }
-  }
   }
 }
 
@@ -158,12 +131,159 @@
   margin-bottom: $uds-size-spacing-4;
 }
 
-.carousel-control-next-icon {
-  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'></path></svg>");
-  background-position: 80% 50%;
+// ------- Nav control (prev/next scroll) buttons for TabbedPanels -------
+
+.uds-tab-nav-controls {
+  button {
+    padding: 16px 0;
+    border: none;
+    outline: none;
+  }
+}
+
+// ------- More dropdown styles for TabbedPanels redesign -------
+
+.uds-more-dropdown {
+  position: relative;
+  margin-left: auto;
+  // Isolate from the nav's inset box-shadow so it doesn't bleed into the dropdown
+  isolation: isolate;
+}
+
+// Applied when there are no overflow tabs: keep the button in the layout (so its
+// width is still measurable) but hide it from view and pointer interaction.
+.uds-more-dropdown-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.more-dropdown-button {
+  padding: $tabbed-panels-tab-padding-top 4px 0 4px;
+  height: $tabbed-panels-tab-height;
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-bottom: $tabbed-panels-active-border-width solid transparent;
+  color: $asu-gray-3;
+  cursor: pointer;
+  font-size: $tabbed-panels-font-size;
+  white-space: nowrap;
+}
+
+.more-dropdown-button-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  height: 17px;
+  line-height: 24px;
+}
+
+.more-dropdown-button.active {
+  border-bottom-color: $uds-color-base-maroon;
+}
+
+.more-dropdown-icon {
+  transition: transform 0.3s ease;
+}
+
+// Rotate the chevron from the button's [aria-expanded] state rather than a class
+// on the icon itself. FontAwesome's SVG-with-JS swaps the <i> for an <svg>,
+// which detaches the node React toggles a class on — so a class-based approach
+// silently fails in React. Both the React and vanilla layers set aria-expanded.
+.more-dropdown-button[aria-expanded="true"] .more-dropdown-icon {
+  transform: rotate(180deg);
+}
+
+.more-dropdown-menu {
+  padding: $uds-size-spacing-4;
+  position: absolute;
+  top: calc(#{$tabbed-panels-tab-height} + 2px);
+  right: 0;
+  left: auto;
+  width: $tabbed-panels-dropdown-width;
+  max-width: $tabbed-panels-dropdown-width;
+  max-height: $tabbed-panels-dropdown-max-height;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: $white;
+  border: 1px solid $asu-gray-4;
+  display: none;
+  flex-direction: column;
+  gap: $uds-size-spacing-2;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  &.open {
+    display: flex;
+  }
+}
+
+// When the container is narrower than 1200px and the dropdown fits to the right
+// within the 1200px content area, anchor the menu to the left of the button
+// instead of the default right-anchored. This is specified on the Figma
+.uds-more-dropdown.dropdown-open-right {
+  .more-dropdown-menu {
+    left: 0;
+    right: auto;
+  }
+}
+
+.uds-more-dropdown-list {
+  list-style: none;
+  margin: 0;
+}
+
+.uds-more-dropdown-list li {
+  margin: 0;
+  padding: 0;
+  border: none;
+  list-style: none;
+}
+
+.more-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  background: transparent;
+  font-size: $tabbed-panels-font-size;
+  line-height: 24px;
+  color: #191919;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: normal;
+  border: none !important;
+}
+
+/* hover style */
+.more-dropdown-item:hover {
+  color: $uds-color-base-maroon;
+  text-decoration: underline;
+}
+
+/* focus-visible: use color + underline (same as hover) — avoids outline overflow artifacts */
+.more-dropdown-item:focus,
+.more-dropdown-item:focus-visible {
+  color: $uds-color-base-maroon;
+  text-decoration: underline;
+  outline: none;
+}
+.more-dropdown-item:focus:not(:focus-visible) {
+  outline: none;
+  text-decoration: none;
+  color: #191919;
+}
+
+.more-dropdown-item[aria-current="true"] {
+  color: #191919;
 }
 
-.carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''><path fill='currentColor' d='M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z'></path></svg>");
-  background-position: 60% 50%;
+.more-dropdown-item[aria-current="true"]::after {
+  content: "";
+  display: block;
+  height: 8px;
+  background: $uds-color-base-maroon;
+  border: none;
+  margin-top: 4px;
 }
diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_tabbed-panels.scss b/packages/unity-bootstrap-theme/src/scss/variables/_tabbed-panels.scss
index ee63485bd8..7c88b82969 100644
--- a/packages/unity-bootstrap-theme/src/scss/variables/_tabbed-panels.scss
+++ b/packages/unity-bootstrap-theme/src/scss/variables/_tabbed-panels.scss
@@ -4,3 +4,16 @@ $nav-tabs-border-color: #000;
 $nav-tabs-border-radius: 0;
 $nav-tabs-link-active-color: $uds-color-base-maroon;
 $nav-tabs-link-active-border-color: $uds-color-base-maroon;
+
+// Tabbed Panels V2 Variables
+$tabbed-panels-tab-height: 41px;
+$tabbed-panels-tab-padding-x: 0.5rem;
+$tabbed-panels-tab-padding-top: 0.5rem;
+
+$tabbed-panels-active-border-width: 8px;
+$tabbed-panels-tab-gap: 8px;
+
+$tabbed-panels-font-size: 1rem; // 16px (body text)
+
+$tabbed-panels-dropdown-width: 282px;
+$tabbed-panels-dropdown-max-height: 332px;
diff --git a/packages/unity-bootstrap-theme/src/scss/variables/_typography.scss b/packages/unity-bootstrap-theme/src/scss/variables/_typography.scss
index 2e0207fd60..4ca26faace 100644
--- a/packages/unity-bootstrap-theme/src/scss/variables/_typography.scss
+++ b/packages/unity-bootstrap-theme/src/scss/variables/_typography.scss
@@ -58,3 +58,7 @@ strong {
   font-weight: $uds-font-weight-bold !important;
 }
 
+p, li {
+  max-width: 700px;
+}
+
diff --git a/packages/unity-bootstrap-theme/stories/atoms/form-fields/form-fields.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/form-fields/form-fields.examples.stories.js
index 6a95682cd3..5d94cc8806 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/form-fields/form-fields.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/form-fields/form-fields.examples.stories.js
@@ -118,7 +118,10 @@ export const TextInputs = () => (
         data-ga-input-section="text label"
       />
       <small id="successHelp" className="form-text valid-feedback">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
     </div>
@@ -224,7 +227,10 @@ export const TextInputsVariousBackgrounds = () => (
             value="Input text"
           />
           <small id="successHelp" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -315,7 +321,10 @@ export const TextInputsVariousBackgrounds = () => (
             value="Input text"
           />
           <small id="successHelpGray1" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -406,7 +415,10 @@ export const TextInputsVariousBackgrounds = () => (
             value="Input text"
           />
           <small id="successHelpGray2" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -497,7 +509,10 @@ export const TextInputsVariousBackgrounds = () => (
             value="Input text"
           />
           <small id="successHelpGray7" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -618,7 +633,10 @@ export const Textareas = () => (
         Agreeable content was entered.
       </textarea>
       <small id="successTextareaHelp" className="form-textarea valid-feedback">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
     </div>
@@ -709,7 +727,10 @@ export const TextareasMultipleBackgrounds = () => (
             id="successTextareaHelpWhite"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -798,7 +819,10 @@ export const TextareasMultipleBackgrounds = () => (
             id="successTextareaHelpGray1"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -887,7 +911,10 @@ export const TextareasMultipleBackgrounds = () => (
             id="successTextareaHelpGray2"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -976,7 +1003,10 @@ export const TextareasMultipleBackgrounds = () => (
             id="successTextareaHelpGray7"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -1054,7 +1084,10 @@ export const Checkboxes = () => (
         I accept
       </label>
       <small id="myValidCheckMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
     </div>
@@ -1145,7 +1178,10 @@ export const Checkboxes = () => (
     <fieldset>
       <legend>A Group of Valid Checkboxes</legend>
       <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
       <div className="form-check">
@@ -1447,7 +1483,10 @@ export const Radios = () => (
     <fieldset>
       <legend>A Group of Valid Radios</legend>
       <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
       <div className="form-check">
@@ -1561,7 +1600,10 @@ export const CheckboxesAndRadiosWhiteBackground = () => (
           I accept
         </label>
         <small id="myValidCheckMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
       </div>
@@ -1628,7 +1670,10 @@ export const CheckboxesAndRadiosWhiteBackground = () => (
       <fieldset>
         <legend>A Group of Valid Checkboxes</legend>
         <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -1845,7 +1890,10 @@ export const CheckboxesAndRadiosWhiteBackground = () => (
       <fieldset>
         <legend>A Group of Valid Radios</legend>
         <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -1936,7 +1984,10 @@ export const CheckboxesAndRadiosGray1Background = () => (
           I accept
         </label>
         <small id="myValidCheckMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
       </div>
@@ -2003,7 +2054,10 @@ export const CheckboxesAndRadiosGray1Background = () => (
       <fieldset>
         <legend>A Group of Valid Checkboxes</legend>
         <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -2220,7 +2274,10 @@ export const CheckboxesAndRadiosGray1Background = () => (
       <fieldset>
         <legend>A Group of Valid Radios</legend>
         <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -2311,7 +2368,10 @@ export const CheckboxesAndRadiosGray2Background = () => (
           I accept
         </label>
         <small id="myValidCheckMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
       </div>
@@ -2378,7 +2438,10 @@ export const CheckboxesAndRadiosGray2Background = () => (
       <fieldset>
         <legend>A Group of Valid Checkboxes</legend>
         <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -2595,7 +2658,10 @@ export const CheckboxesAndRadiosGray2Background = () => (
       <fieldset>
         <legend>A Group of Valid Radios</legend>
         <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -2686,7 +2752,10 @@ export const CheckboxesAndRadiosGray7Background = () => (
           I accept
         </label>
         <small id="myValidCheckMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
       </div>
@@ -2753,7 +2822,10 @@ export const CheckboxesAndRadiosGray7Background = () => (
       <fieldset>
         <legend>A Group of Valid Checkboxes</legend>
         <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -2970,7 +3042,10 @@ export const CheckboxesAndRadiosGray7Background = () => (
       <fieldset>
         <legend>A Group of Valid Radios</legend>
         <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-          <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+          <span
+            title="Success"
+            className="fa fa-icon fa-check-circle">
+          </span>
           Success message
         </small>
         <div className="form-check">
@@ -3074,7 +3149,10 @@ export const Selects = () => (
         <option>5</option>
       </select>
       <small id="myValidSelectMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+        <span
+          title="Success"
+          className="fa fa-icon fa-check-circle">
+        </span>
         Success message
       </small>
     </div>
@@ -3388,7 +3466,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
             value="Input text"
           />
           <small id="successHelp1" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3449,7 +3530,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
             id="successTextareaHelp"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3489,7 +3573,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
             I accept (required field)
           </label>
           <small id="myValidCheckMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3523,7 +3610,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
         <fieldset>
           <legend>A Group of Valid Checkboxes</legend>
           <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
           <div className="form-check">
@@ -3709,7 +3799,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
         <fieldset>
           <legend>A Group of Valid Radios</legend>
           <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
           <div className="form-check">
@@ -3868,7 +3961,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
             value="Input text"
           />
           <small id="successHelp1" className="form-text valid-feedback">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3925,7 +4021,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
             id="successTextareaHelp"
             className="form-textarea valid-feedback"
           >
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3965,7 +4064,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
             I accept (required)
           </label>
           <small id="myValidCheckMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -3999,7 +4101,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
         <fieldset>
           <legend>A Group of Valid Checkboxes</legend>
           <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
           <div className="form-check">
@@ -4185,7 +4290,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
         <fieldset>
           <legend>A Group of Valid Radios</legend>
           <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
           <div className="form-check">
@@ -4258,7 +4366,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
             <option>5</option>
           </select>
           <small id="myValidSelectMsg" className="valid-feedback is-valid">
-            <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+            <span
+              title="Success"
+              className="fa fa-icon fa-check-circle">
+            </span>
             Success message
           </small>
         </div>
@@ -4373,7 +4484,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
               value="Input text"
             />
             <small id="successHelp1" className="form-text valid-feedback">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4434,7 +4548,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
               id="successTextareaHelp"
               className="form-textarea valid-feedback"
             >
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4474,7 +4591,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
               I accept (required field)
             </label>
             <small id="myValidCheckMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4511,7 +4631,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
           <fieldset>
             <legend>A Group of Valid Checkboxes</legend>
             <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
             <div className="form-check">
@@ -4697,7 +4820,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidNotYetValidat
           <fieldset>
             <legend>A Group of Valid Radios</legend>
             <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
             <div className="form-check">
@@ -4861,7 +4987,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
               value="Input text"
             />
             <small id="successHelp1" className="form-text valid-feedback">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4918,7 +5047,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
               id="successTextareaHelp"
               className="form-textarea valid-feedback"
             >
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4958,7 +5090,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
               I accept (required)
             </label>
             <small id="myValidCheckMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
@@ -4995,7 +5130,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
           <fieldset>
             <legend>A Group of Valid Checkboxes</legend>
             <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
             <div className="form-check">
@@ -5181,7 +5319,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
           <fieldset>
             <legend>A Group of Valid Radios</legend>
             <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
             <div className="form-check">
@@ -5254,7 +5395,10 @@ export const KitchenSinkFormClientSideValidationWithInvalidAndValidValidatedForm
               <option>5</option>
             </select>
             <small id="myValidSelectMsg" className="valid-feedback is-valid">
-              <span title="Alert" className="fa fa-icon fa-check-circle"></span>
+              <span
+                title="Success"
+                className="fa fa-icon fa-check-circle">
+              </span>
               Success message
             </small>
           </div>
diff --git a/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js
index fa35fbd8c3..97b3907d0f 100644
--- a/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js
+++ b/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js
@@ -1,274 +1,10 @@
-const extraOptions = {
-  bgColor: {
-    name: "Color",
-    options: [null, "gray-faint-bg", "gray-light-bg", "bg-dark"],
-    defaultValue: null,
-    control: {
-      type: "radio",
-      labels: {
-        "null": "None",
-        "gray-faint-bg": "gray-faint-bg",
-        "gray-light-bg": "gray-light-bg",
-        "bg-dark": "bg-dark",
-      },
-    },
-  },
-};
-
 export const TabbedPanels = args => {
   return (
-    <div className={args.bgColor}>
-      <h2>Tabbed panels</h2>
-      <nav
-        className={`uds-tabbed-panels uds-content-align ${
-          args.bgColor === "bg-dark" ? "uds-tabbed-panels-dark" : ""
-        }`}
-      >
-        <div
-          className="nav nav-tabs"
-          id="nav-tab"
-          role="tablist"
-          data-scroll-position="0"
-        >
-          <a
-            className="nav-item nav-link active"
-            id="nav-home-tab"
-            data-bs-toggle="tab"
-            href="#nav-home"
-            role="tab"
-            aria-controls="nav-home"
-            aria-selected="true"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Home long tab"
-          >
-            Home long tab
-          </a>
-          <a
-            className="nav-item nav-link"
-            id="nav-profile-tab"
-            data-bs-toggle="tab"
-            href="#nav-profile"
-            role="tab"
-            aria-controls="nav-profile"
-            aria-selected="false"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Profile long tab"
-          >
-            Profile long tab
-          </a>
-          <a
-            className="nav-item nav-link"
-            id="nav-contact-tab"
-            data-bs-toggle="tab"
-            href="#nav-contact"
-            role="tab"
-            aria-controls="nav-contact"
-            aria-selected="false"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Contact us is a long tab"
-          >
-            Contact us is a long tab
-          </a>
-          <a
-            className="nav-item nav-link"
-            id="nav-another-tab"
-            data-bs-toggle="tab"
-            href="#nav-another"
-            role="tab"
-            aria-controls="nav-another"
-            aria-selected="false"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Another tab, long tab"
-          >
-            Another tab, long tab
-          </a>
-          <a
-            className="nav-item nav-link"
-            id="nav-another-2-tab"
-            data-bs-toggle="tab"
-            href="#nav-another-2"
-            role="tab"
-            aria-controls="nav-another-2"
-            aria-selected="false"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Another tab, 5th tab"
-          >
-            Another tab, 5th tab
-          </a>
-          <a
-            className="nav-item nav-link"
-            id="nav-another-3-tab"
-            data-bs-toggle="tab"
-            href="#nav-another-3"
-            role="tab"
-            aria-controls="nav-another-3"
-            aria-selected="false"
-            data-ga-event="link"
-            data-ga-action="click"
-            data-ga-name="onclick"
-            data-ga-type="internal link"
-            data-ga="Another tab, 6th tab"
-          >
-            Another tab, 6th tab
-          </a>
-        </div>
-        <a
-          className="scroll-control-prev"
-          href="#carouselExampleControls"
-          role="button"
-          data-scroll="prev"
-          tabIndex="-1"
-          data-ga-event="select"
-          data-ga-action="click"
-          data-ga-name="onclick"
-          data-ga-type="carousel"
-          data-ga-region="main content"
-          data-ga="left chevron"
-        >
-          <span
-            className="carousel-control-prev-icon"
-            aria-hidden="true"
-          ></span>
-          <span className="visually-hidden">Previous</span>
-        </a>
-        <a
-          className="scroll-control-next"
-          href="#carouselExampleControls"
-          role="button"
-          data-scroll="next"
-          tabIndex="-1"
-          data-ga-event="select"
-          data-ga-action="click"
-          data-ga-name="onclick"
-          data-ga-type="carousel"
-          data-ga-region="main content"
-          data-ga="right chevron"
-        >
-          <span
-            className="carousel-control-next-icon"
-            aria-hidden="true"
-          ></span>
-          <span className="visually-hidden">Next</span>
-        </a>
-      </nav>
-      <div className="tab-content" id="nav-tabContent">
-        <div
-          className={`tab-pane fade show active ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-home"
-          role="tabpanel"
-          aria-labelledby="nav-home-tab"
-          tabIndex="0"
-        >
-          TAB 1. <a href="#">This is an ordinary paragraph</a> that is long
-          enough to wrap to multiple lines so that you can see how spacing
-          looks. At vero eos et accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-        <div
-          className={`tab-pane fade ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-profile"
-          role="tabpanel"
-          aria-labelledby="nav-profile-tab"
-          tabIndex="0"
-        >
-          TAB 2. This is an ordinary paragraph that is long enough to wrap to
-          multiple lines so that you can see how spacing looks. At vero eos et
-          accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-        <div
-          className={`tab-pane fade ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-contact"
-          role="tabpanel"
-          aria-labelledby="nav-contact-tab"
-          tabIndex="0"
-        >
-          TAB 3. This is an ordinary paragraph that is long enough to wrap to
-          multiple lines so that you can see how spacing looks. At vero eos et
-          accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-        <div
-          className={`tab-pane fade ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-another"
-          role="tabpanel"
-          aria-labelledby="nav-another-tab"
-          tabIndex="0"
-        >
-          TAB 4. This is an ordinary paragraph that is long enough to wrap to
-          multiple lines so that you can see how spacing looks. At vero eos et
-          accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-        <div
-          className={`tab-pane fade ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-another-2"
-          role="tabpanel"
-          aria-labelledby="nav-another-2-tab"
-          tabIndex="0"
-        >
-          TAB 5. This is an ordinary paragraph that is long enough to wrap to
-          multiple lines so that you can see how spacing looks. At vero eos et
-          accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-        <div
-          className={`tab-pane fade ${
-            args.bgColor === "bg-dark" ? "text-white" : ""
-          }`}
-          id="nav-another-3"
-          role="tabpanel"
-          aria-labelledby="nav-another-3-tab"
-          tabIndex="0"
-        >
-          TAB 6. This is an ordinary paragraph that is long enough to wrap to
-          multiple lines so that you can see how spacing looks. At vero eos et
-          accusam et justo duo dolores et ea rebu.
-          <br />
-          Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-        </div>
-      </div>
-    </div>
+    <div>See updated HTML output in unity-react-core Tabbed panels story.</div>
   );
 };
 
 export default {
   title: "Molecules/Tabbed Panels",
   component: TabbedPanels,
-  argTypes: { ...extraOptions },
-  parameters: {
-    initFunc: {
-      disable: false,
-    },
-  },
 };
diff --git a/packages/unity-react-core/.storybook/decorators.tsx b/packages/unity-react-core/.storybook/decorators.tsx
index d745b5f526..8308b03839 100644
--- a/packages/unity-react-core/.storybook/decorators.tsx
+++ b/packages/unity-react-core/.storybook/decorators.tsx
@@ -75,7 +75,7 @@ export const withContainer: Decorator = (
       window.unloading = true; // variable to prevent calling mount function before the page is reloaded
 
       // adding this timeout allows controls time to update
-      setTimeout(()=>{window.location.reload()}, 100);
+      setTimeout(()=>{window.location.reload()}, 500);
     }
   }
 
diff --git a/packages/unity-react-core/.storybook/main.js b/packages/unity-react-core/.storybook/main.js
index cad185cfc9..2fa5c509f2 100644
--- a/packages/unity-react-core/.storybook/main.js
+++ b/packages/unity-react-core/.storybook/main.js
@@ -1,10 +1,11 @@
-import { dirname } from "path";
+import { dirname, resolve } from "path";
 import { fileURLToPath } from "url";
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 function getAbsolutePath(value) {
   return dirname(fileURLToPath(import.meta.resolve(value)));
 }
-
 export default {
   // staticDirs: ['../dist'],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -26,5 +27,15 @@ export default {
 
   typescript: {
     reactDocgen: "react-docgen-typescript",
-  }
+  },
+
+  async viteFinal(config) {
+    config.server = config.server ?? {};
+    config.server.fs = config.server.fs ?? {};
+    config.server.fs.allow = [
+      ...(config.server.fs.allow ?? []),
+      resolve(__dirname, "../../"),
+    ];
+    return config;
+  },
 };
diff --git a/packages/unity-react-core/CHANGELOG.md b/packages/unity-react-core/CHANGELOG.md
index aee00dce5f..e8578ff3f6 100644
--- a/packages/unity-react-core/CHANGELOG.md
+++ b/packages/unity-react-core/CHANGELOG.md
@@ -1,3 +1,47 @@
+# [@asu/unity-react-core-v2.0.0](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-react-core-v1.11.4...@asu/unity-react-core-v2.0.0) (2026-07-17)
+
+
+### Bug Fixes
+
+* **unity-bootstrap-theme:** todo 3.3, changed MoreDropdown.js to fit _tabbed-panels.scss ([f55a827](https://github.com/ASU/asu-unity-stack/commit/f55a8272e6c605a2a8817f522e369f68a94a7fe4))
+* **unity-bootstrap-theme:** update tabbed panel JS ([c171ba8](https://github.com/ASU/asu-unity-stack/commit/c171ba8600225ce5df75f8c7d1d138486ec78d74))
+* **unity-react-core:** 2.1 ([97fd7c0](https://github.com/ASU/asu-unity-stack/commit/97fd7c018659b1ee96f33bbda83ff022437eef7e))
+* **unity-react-core:** 2.1 changes ([8021a59](https://github.com/ASU/asu-unity-stack/commit/8021a590e529995c1dbd85e17d4b7af4a68f90db))
+* **unity-react-core:** 2.2 with changes in tabheader.jsx file ([ccc955c](https://github.com/ASU/asu-unity-stack/commit/ccc955cafecc449a8700214d382e8c01be841bec))
+* **unity-react-core:** add NavControls for app-webdir-ui use ([a4fecfe](https://github.com/ASU/asu-unity-stack/commit/a4fecfeb0a4d58f7927d3171e67695aea832d9d3))
+* **unity-react-core:** added scrolling feature ([9770d53](https://github.com/ASU/asu-unity-stack/commit/9770d53df10997491acce94c9ee8a6746f590034))
+* **unity-react-core:** address tabbed panel pr comments ([5c7085b](https://github.com/ASU/asu-unity-stack/commit/5c7085b9a5f516a2a602fe5d8d8464c04032164a))
+* **unity-react-core:** changes ([cfbc917](https://github.com/ASU/asu-unity-stack/commit/cfbc917f87cc84ebe4e2278e43debe89eaab4004))
+* **unity-react-core:** changes made after review ([c35491c](https://github.com/ASU/asu-unity-stack/commit/c35491c851ba00e9fdbe66ceb4abac2601bb8ec9))
+* **unity-react-core:** final design before completing all tests ([4e70b71](https://github.com/ASU/asu-unity-stack/commit/4e70b712f527402dc32a8e93764f3ba78fce395d))
+* **unity-react-core:** fix react more dropdown disappearing ([f76633f](https://github.com/ASU/asu-unity-stack/commit/f76633f0923092cfd90cab9d8cc5beae01c8917d))
+* **unity-react-core:** fix resize issue with react tabbed panel ([e0d4eb8](https://github.com/ASU/asu-unity-stack/commit/e0d4eb819bf930fb94c5cda1d17a55a68523d9b1))
+* **unity-react-core:** fix two issues in pr ([1b9fce5](https://github.com/ASU/asu-unity-stack/commit/1b9fce55a15c710a72f6d9431828d15f7dd47615))
+* **unity-react-core:** readd stories to Typescript config ([22e8d73](https://github.com/ASU/asu-unity-stack/commit/22e8d734da55242a9f173df5b36b1b5f6177b2cb))
+* **unity-react-core:** remove focus on more tabbed panel click ([080ea5c](https://github.com/ASU/asu-unity-stack/commit/080ea5ce4b454303b468d8b356eb15e4abb39fa1))
+* **unity-react-core:** to do 1.2 ([20cc261](https://github.com/ASU/asu-unity-stack/commit/20cc261d2710a2e5d1a6cda2b1d4f2c7ca12f31f))
+* **unity-react-core:** toDo 1.1 ([ba5caef](https://github.com/ASU/asu-unity-stack/commit/ba5caef9bdc854b991dc1884d34d6077935a8036))
+* **unity-react-core:** toDo 5.1 ([50abf19](https://github.com/ASU/asu-unity-stack/commit/50abf198e6b3c776933f329b7fb1ddec3695f4da))
+* **unity-react-core:** toDo 5.2 ([11c58a1](https://github.com/ASU/asu-unity-stack/commit/11c58a11a0d9553018d6a4ae579f80a748fedde8))
+* **unity-react-core:** update dropdown for tabbed panel placement ([5e2eba8](https://github.com/ASU/asu-unity-stack/commit/5e2eba89310f4613675c1208aabdf6e95231a274))
+* **unity-react-core:** update tabbed panel logic ([084885b](https://github.com/ASU/asu-unity-stack/commit/084885b2cd94c79625ecf6f6ab11996f87c8f2e3))
+* **unity-react-core:** update tabbed panels markup ([aec1303](https://github.com/ASU/asu-unity-stack/commit/aec130359925ffb4ad81f2e569c46873d196c76a))
+
+
+### Features
+
+* **unity-react-core:** phase 4 ([2a688c5](https://github.com/ASU/asu-unity-stack/commit/2a688c5a288fe80f10fc7a9fb2b38e32c2ac0fe3))
+* **unity-react-core:** rewrite tabbed panels ([e20622d](https://github.com/ASU/asu-unity-stack/commit/e20622dfcaaf317708433cbb380f53c9be778119))
+* **unity-react-core:** tabbed Panel Rewrite ([5021fc4](https://github.com/ASU/asu-unity-stack/commit/5021fc4b8aff3cd725c12b9b191ff14a0185c2e6))
+* **unity-react-core:** toDo 1.3 ([85b1bd9](https://github.com/ASU/asu-unity-stack/commit/85b1bd93ff37aca11f906e2a910b1ea7a33c472b))
+* **unity-react-core:** tODO 2.3 ([e2452b3](https://github.com/ASU/asu-unity-stack/commit/e2452b3128c969e99d72f7c9e3e42c1a7465482d))
+
+
+### BREAKING CHANGES
+
+* **unity-react-core:** Tabbed panels have been rewritten to include a dropdown and overflow logic with a
+More button. This changes the fundamental behavior
+
 # [@asu/unity-react-core-v1.11.4](https://github.com/ASU/asu-unity-stack/compare/@asu/unity-react-core-v1.11.3...@asu/unity-react-core-v1.11.4) (2026-07-01)
 
 
diff --git a/packages/unity-react-core/package.json b/packages/unity-react-core/package.json
index b51f25a78d..c02c6c5587 100644
--- a/packages/unity-react-core/package.json
+++ b/packages/unity-react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asu/unity-react-core",
-  "version": "1.11.4",
+  "version": "2.0.0",
   "main": "./dist/unityReactCore.umd.js",
   "module": "./dist/unityReactCore.es.js",
   "browser": "./dist/unityReactCore.umd.js",
@@ -49,6 +49,7 @@
     "test:browser": "vitest --workspace=vitest.workspace.ts"
   },
   "devDependencies": {
+    "@asu/component-header-footer": "*",
     "@asu/shared": "*",
     "@asu/unity-bootstrap-theme": "^1.21.3",
     "@babel/cli": "^7.19.3",
diff --git a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
index 5f40893108..6f6e82b5eb 100644
--- a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
+++ b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
@@ -10,13 +10,11 @@ const AnchorMenuWrapper = styled.div`
   .mobile-menu-toggler {
     background-color: transparent;
     border: none;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    text-align: inherit;
+    cursor: default;
+    h4,
+    h2 {
+      align-items: center;
+    }
     i {
       transition: all 0.3s;
     }
diff --git a/packages/unity-react-core/src/components/Checkbox/Checkbox.tsx b/packages/unity-react-core/src/components/Checkbox/Checkbox.tsx
index eb0a8034a4..9e250ffa91 100644
--- a/packages/unity-react-core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/unity-react-core/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
+// import React from "react";
 
 export const Checkboxes = () => (
   <form className="uds-form">
@@ -70,7 +70,7 @@ export const Checkboxes = () => (
         I accept
       </label>
       <small id="myValidCheckMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>Success
+        <span title="Success" className="fa fa-icon fa-check-circle"></span>Success
         message
       </small>
     </div>
@@ -158,7 +158,7 @@ export const Checkboxes = () => (
     <fieldset>
       <legend>A Group of Valid Checkboxes</legend>
       <small id="myValidCheckboxMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>Success
+        <span title="Success" className="fa fa-icon fa-check-circle"></span>Success
         message
       </small>
       <div className="form-check">
diff --git a/packages/unity-react-core/src/components/Radio/Radio.tsx b/packages/unity-react-core/src/components/Radio/Radio.tsx
index fa56880a68..f3ddc66212 100644
--- a/packages/unity-react-core/src/components/Radio/Radio.tsx
+++ b/packages/unity-react-core/src/components/Radio/Radio.tsx
@@ -170,7 +170,7 @@ export const Radios = () => (
     <fieldset>
       <legend>A Group of Valid Radios</legend>
       <small id="myValidRadiosMsg" className="valid-feedback is-valid">
-        <span title="Alert" className="fa fa-icon fa-check-circle"></span>Success
+        <span title="Success" className="fa fa-icon fa-check-circle"></span>Success
         message
       </small>
       <div className="form-check">
diff --git a/packages/unity-react-core/src/components/Select/Select.tsx b/packages/unity-react-core/src/components/Select/Select.tsx
index c848205b66..79acab753b 100644
--- a/packages/unity-react-core/src/components/Select/Select.tsx
+++ b/packages/unity-react-core/src/components/Select/Select.tsx
@@ -45,7 +45,7 @@ const defaultGaEvent = {
 
 export const propDefaults: SelectProps = {
   id: undefined,
-  label: undefined,
+  label: "",
   displaySize: "md",
   required: false,
   disabled: false,
@@ -112,7 +112,7 @@ export const Select: React.FC<SelectProps> = ({
       </GaEventWrapper>
       {valid && (
         <small id={successId} className="valid-feedback">
-          <span title="Alert" className="fa fa-icon fa-exclamation-triangle" />
+          <span title="Success" className="fa fa-icon fa-check-circle" />
           {validMessage}
         </small>
       )}
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.jsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.jsx
deleted file mode 100644
index abf43081d5..0000000000
--- a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.jsx
+++ /dev/null
@@ -1,267 +0,0 @@
-// @ts-nocheck
-/**
- *
- *
- * TODO: Does not work with Bootstrap Framework
- * Requires functionality UDS-1664
- *
- *
- */
-import { throttle, debounce } from "@asu/shared";
-import PropTypes from "prop-types";
-import React, { useState, useEffect, useRef, useCallback } from "react";
-
-import { useBaseSpecificFramework } from "../GaEventWrapper/useBaseSpecificFramework";
-import { NavControls, TabHeader } from "./components";
-
-function useRefs() {
-  const refs = useRef({});
-
-  const register = useCallback(
-    refName => ref => {
-      refs.current[refName] = ref;
-    },
-    []
-  );
-
-  return [refs, register];
-}
-
-const Tab = ({ id, bgColor, selected, children }) => {
-  const { isBootstrap } = useBaseSpecificFramework();
-
-  if (!(selected || isBootstrap)) {
-    return null;
-  }
-
-  return (
-    <div
-      className={`tab-pane fade show ${selected ? "show active" : ""} ${
-        bgColor === "bg-dark" ? "text-white" : ""
-      }`}
-      id={`nav-${id}`}
-      role="tabpanel"
-      aria-labelledby={`nav-${id}-tab`}
-    >
-      {children}
-    </div>
-  );
-};
-
-Tab.propTypes = {
-  id: PropTypes.string.isRequired,
-  bgColor: PropTypes.string,
-  selected: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]),
-};
-
-const TabbedPanels = ({
-  initialTab = "",
-  children,
-  bgColor = "",
-  onTabChange = _ => {},
-}) => {
-  const childrenArray = React.Children.toArray(children);
-
-  // Move all hooks before any early returns
-  const isMounted = useRef(false);
-  const [activeTabID, setActiveTabID] = useState(
-    initialTab && initialTab !== "null"
-      ? initialTab
-      : childrenArray[0]?.props?.id || ""
-  );
-  const headerTabs = useRef(null);
-  const [headerTabItems, setHeaderTabItems] = useRefs();
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const [scrollableWidth, setScrollableWidth] = useState();
-
-  const handleResize = useCallback(() => {
-    setScrollableWidth(
-      headerTabs.current?.scrollWidth - headerTabs.current?.offsetWidth
-    );
-  }, []);
-
-  const handleScroll = useCallback(() => {
-    setScrollLeft(headerTabs.current?.scrollLeft);
-  }, []);
-
-  const throttleScroll = useCallback(() => {
-    const timeout = 150;
-    // prevent function from being called excessively
-    throttle(handleScroll, timeout);
-    // ensure function executes after scrolling stops
-    debounce(handleScroll, timeout);
-  }, [handleScroll]);
-
-  const throttleResize = useCallback(() => {
-    const timeout = 150;
-    // prevent function from being called excessively
-    throttle(handleResize, timeout);
-    // ensure function executes after scrolling stops
-    debounce(handleResize, timeout);
-  }, [handleResize]);
-
-  // Move all useEffect hooks before early return
-  useEffect(() => {
-    const currentHeaderTabs = headerTabs.current;
-    if (currentHeaderTabs) {
-      currentHeaderTabs.addEventListener("scroll", throttleScroll);
-      handleScroll();
-    }
-    return () => {
-      if (currentHeaderTabs) {
-        currentHeaderTabs.removeEventListener("scroll", throttleScroll);
-      }
-    };
-  }, [scrollableWidth, throttleScroll, handleScroll]);
-
-  useEffect(() => {
-    window.addEventListener("resize", throttleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", throttleResize);
-    };
-  }, [throttleResize, handleResize]);
-
-  useEffect(() => {
-    if (headerTabItems.current[activeTabID]) {
-      headerTabItems.current[activeTabID].scrollIntoView();
-    }
-  }, [activeTabID, headerTabItems]);
-
-  useEffect(() => {
-    if (
-      isMounted.current &&
-      initialTab &&
-      initialTab !== "null" &&
-      activeTabID !== initialTab
-    ) {
-      setActiveTabID(initialTab);
-    }
-  }, [initialTab, activeTabID]);
-
-  useEffect(() => {
-    isMounted.current = true;
-  }, []);
-
-  // Early return check after all hooks
-  if (childrenArray.length === 0) {
-    return null;
-  }
-
-  const updateActiveTabID = tab => {
-    onTabChange(tab);
-
-    headerTabItems.current[tab]?.focus();
-    setActiveTabID(tab);
-  };
-
-  const trackArrowsEvent = {
-    event: "select",
-    action: "click",
-    name: "onclick",
-    type: "carousel",
-    region: "main content",
-    text: "",
-  };
-
-  const trackLinkEvent = {
-    event: "link",
-    action: "click",
-    name: "onclick",
-    type: "internal link",
-    text: "",
-  };
-
-  const tabs = childrenArray.map(el => {
-    return React.cloneElement(el, {
-      bgColor,
-      selected: activeTabID === el.props.id,
-    });
-  });
-
-  const slideNav = direction => {
-    const container = headerTabs.current;
-    const maxScrollLeft = container.scrollWidth - container.clientWidth;
-    const currentScrollLeft = container.scrollLeft;
-
-    let newScrollLeft = currentScrollLeft + 200 * direction;
-
-    // Ensure the scroll position stays within bounds
-    newScrollLeft = Math.max(0, Math.min(maxScrollLeft, newScrollLeft));
-
-    container.scrollTo({
-      left: newScrollLeft,
-      behavior: "smooth",
-    });
-  };
-
-  const switchToTab = (e, tabID, title) => {
-    // trackLinkEvent(title);
-    e.preventDefault();
-    updateActiveTabID(tabID);
-  };
-
-  const incrementIndex = (up = true) => {
-    const count = childrenArray.length;
-    const num = up ? 1 : -1;
-    const currPos = childrenArray.findIndex(c => c.props.id === activeTabID);
-    const newTabID = childrenArray[(count + currPos + num) % count].props.id;
-    updateActiveTabID(newTabID);
-  };
-
-  let navClasses = "uds-tabbed-panels";
-  if (bgColor === "bg-dark") {
-    navClasses += " uds-tabbed-panels-dark";
-  }
-
-  return (
-    <div className={bgColor}>
-      <nav className={navClasses}>
-        <div className="nav nav-tabs" role="tablist" ref={headerTabs}>
-          {childrenArray.map((child, index) => {
-            return (
-              <TabHeader
-                ref={setHeaderTabItems(child.props.id)}
-                id={child.props.id}
-                title={child.props.title}
-                selected={activeTabID === child.props.id}
-                gaData={trackLinkEvent}
-                selectTab={switchToTab}
-                key={child.props.id}
-                leftKeyPressed={() => incrementIndex(false)}
-                rightKeyPressed={() => incrementIndex()}
-                icon={child.props.icon}
-                index={index}
-              />
-            );
-          })}
-        </div>
-
-        <NavControls
-          hidePrev={scrollLeft <= 0}
-          hideNext={scrollLeft >= scrollableWidth}
-          gaData={trackArrowsEvent}
-          slideNav={slideNav}
-        />
-      </nav>
-      <div
-        className="tab-content"
-        tabIndex={0}
-        role="tabpanel"
-        id="nav-tabContent"
-      >
-        {tabs}
-      </div>
-    </div>
-  );
-};
-
-TabbedPanels.propTypes = {
-  initialTab: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.element).isRequired,
-  bgColor: PropTypes.string,
-  onTabChange: PropTypes.func,
-};
-
-export { TabbedPanels, Tab, NavControls, TabHeader };
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
deleted file mode 100644
index 68f90e2d2a..0000000000
--- a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-// @ts-nocheck
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
-
-import { TabbedPanels, Tab } from "./TabbedPanels";
-
-export default {
-  title: "Components/TabbedPanels",
-  component: TabbedPanels,
-};
-
-const Template = () => {
-  return (
-    <MemoryRouter>
-      <div className="row no-gutters" style={{ padding: "10rem 0rem" }}>
-        <div className="col uds-full-width">
-          <TabbedPanels>
-            <Tab id="home" title="Home long tab">
-              <div>
-                1 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-            <Tab id="profile" title="Profile long tab">
-              <div>
-                2 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-            <Tab id="contact" title="Contact us is a long tab">
-              <div>
-                3 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-            <Tab id="another" title="Another tab, long tab">
-              <div>
-                4 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-            <Tab id="another-2" title="Another tab, long tab">
-              <div>
-                5 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-            <Tab id="another-3" title="Another tab, long tab">
-              <div>
-                6 - Home long tab - This is an ordinary paragraph that is long
-                enough to to to wrap to multiple lines so that you can see how
-                spacing eos et accusam et justo duo dolores et ea rebu.
-                <br />
-                Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
-              </div>
-            </Tab>
-          </TabbedPanels>
-        </div>
-      </div>
-    </MemoryRouter>
-  );
-};
-
-export const Default = Template.bind({});
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.tsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.tsx
new file mode 100644
index 0000000000..9f029110dd
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.stories.tsx
@@ -0,0 +1,306 @@
+import React from "react";
+import { ASUHeader } from "@asu/component-header-footer";
+import { ASUFooter } from "@asu/component-header-footer";
+import { basicNavTree } from "@asu/component-header-footer/src/header/core/utils/data-mock";
+
+import { TabbedPanels, Tab } from "./TabbedPanels";
+
+export default {
+  title: "Components/TabbedPanels",
+  component: TabbedPanels,
+};
+
+const Template = () => {
+  return (
+    <div className="row no-gutters">
+      <div className="col uds-full-width">
+        <TabbedPanels>
+          <Tab id="home" title="Home long tab">
+            <div>
+              1 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+          <Tab id="profile" title="Profile long tab">
+            <div>
+              2 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+          <Tab id="contact" title="Contact us is a long tab">
+            <div>
+              3 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+          <Tab id="another" title="Another tab, long tab">
+            <div>
+              4 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+          <Tab id="another-2" title="Another tab, long tab">
+            <div>
+              5 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+          <Tab id="another-3" title="Another tab, long tab">
+            <div>
+              6 - Home long tab - This is an ordinary paragraph that is long
+              enough to to to wrap to multiple lines so that you can see how
+              spacing eos et accusam et justo duo dolores et ea rebu.
+              <br />
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem.
+            </div>
+          </Tab>
+        </TabbedPanels>
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+export const WithOverflowTabs = () => {
+  return (
+      <div className="row no-gutters">
+        <div className="col uds-full-width">
+          <TabbedPanels>
+            <Tab id="home" title="This is a really long tab"><div>1</div></Tab>
+            <Tab id="profile" title="This is a longer one"><div>2</div></Tab>
+            <Tab id="contact" title="Here's a tab that's long too"><div>3</div></Tab>
+            <Tab id="another" title="Here's an example of a really long tab so we can see what it would look like"><div>4</div></Tab>
+            <Tab id="tab-5" title="Tab 5"><div>5</div></Tab>
+            <Tab id="tab-6" title="Tab six"><div>6</div></Tab>
+            <Tab id="tab-7" title="Tab seven"><div>7</div></Tab>
+            <Tab id="tab-8" title="Tab eight"><div>8</div></Tab>
+            <Tab id="tab-9" title="Tab nine"><div>9</div></Tab>
+            <Tab id="tab-10" title="Tab ten"><div>10</div></Tab>
+            <Tab id="tab-11" title="Tab eleven"><div>11</div></Tab>
+            <Tab id="tab-12" title="Tab twelve"><div>12</div></Tab>
+          </TabbedPanels>
+        </div>
+      </div>
+  );
+};
+
+export const ResponsiveBehavior = () => {
+  return (
+      <div className="row no-gutters">
+        <div className="col uds-full-width">
+          <div style={{ width: "320px" }}>
+            <TabbedPanels>
+              <Tab id="home" title="Home long tab"><div>1</div></Tab>
+              <Tab id="profile" title="Profile long tab"><div>2</div></Tab>
+              <Tab id="contact" title="Contact us is a long tab"><div>3</div></Tab>
+              <Tab id="another" title="Another tab, long tab"><div>4</div></Tab>
+              <Tab id="another-2" title="Another tab, long tab"><div>5</div></Tab>
+              <Tab id="another-3" title="Another tab, long tab"><div>6</div></Tab>
+              <Tab id="tab-7" title="Extra Tab 7"><div>7</div></Tab>
+              <Tab id="tab-8" title="Extra Tab 8"><div>8</div></Tab>
+            </TabbedPanels>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export const DarkBackgroundOverflow = () => {
+  return (
+      <div className="row no-gutters">
+        <div className="col uds-full-width bg-dark p-3">
+          <div style={{ width: "320px" }}>
+            <TabbedPanels bgColor="bg-dark">
+              <Tab id="home" title="Home long tab"><div>1</div></Tab>
+              <Tab id="profile" title="Profile long tab"><div>2</div></Tab>
+              <Tab id="contact" title="Contact us is a long tab"><div>3</div></Tab>
+              <Tab id="another" title="Another tab, long tab"><div>4</div></Tab>
+              <Tab id="another-2" title="Another tab, long tab"><div>5</div></Tab>
+              <Tab id="another-3" title="Another tab, long tab"><div>6</div></Tab>
+              <Tab id="tab-7" title="Tab 7"><div>7</div></Tab>
+              <Tab id="tab-8" title="Tab 8"><div>8</div></Tab>
+              <Tab id="tab-9" title="Tab 9"><div>9</div></Tab>
+              <Tab id="tab-10" title="Tab 10"><div>10</div></Tab>
+            </TabbedPanels>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export const ManyOverflowTabs = () => {
+  return (
+      <div className="row no-gutters">
+        <div className="col uds-full-width">
+          <div style={{ width: "320px" }}>
+            <TabbedPanels>
+              <Tab id="tab-1" title="Tab one"><div>1</div></Tab>
+              <Tab id="tab-2" title="Tab two"><div>2</div></Tab>
+              <Tab id="tab-3" title="Tab three"><div>3</div></Tab>
+              <Tab id="tab-4" title="Tab four"><div>4</div></Tab>
+              <Tab id="tab-5" title="Tab five"><div>5</div></Tab>
+              <Tab id="tab-6" title="Tab six"><div>6</div></Tab>
+              <Tab id="tab-7" title="Tab seven"><div>7</div></Tab>
+              <Tab id="tab-8" title="Tab eight"><div>8</div></Tab>
+              <Tab id="tab-9" title="Tab nine"><div>9</div></Tab>
+              <Tab id="tab-10" title="Tab ten"><div>10</div></Tab>
+              <Tab id="tab-11" title="Tab eleven"><div>11</div></Tab>
+              <Tab id="tab-12" title="Tab twelve"><div>12</div></Tab>
+              <Tab id="tab-13" title="Tab thirteen"><div>13</div></Tab>
+              <Tab id="tab-14" title="Tab fourteen"><div>14</div></Tab>
+              <Tab id="tab-15" title="Tab fifteen"><div>15</div></Tab>
+            </TabbedPanels>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export const FullPage = () => (
+  <>
+    <ASUHeader
+      {...({
+        loggedIn: false,
+        userName: "",
+        navTree: basicNavTree,
+        title: "Subdomain name",
+        breakpoint: "Lg",
+        searchUrl: "https://search.asu.edu/search",
+        site: "subdomain",
+      } as any)}
+    />
+    <div style={{ marginTop: "140px" }}>
+      <div className="container">
+        <div className="row">
+          <div className="col uds-full-width">
+            <h1 className="uds-headline">TabbedPanels in page context</h1>
+            <p className="uds-body-copy" style={{ marginBottom: "2rem" }}>
+              This story shows TabbedPanels embedded in a full page layout with
+              the ASU header and footer. Resize the window to see overflow
+              behaviour.
+            </p>
+            <TabbedPanels>
+              <Tab id="home" title="This is a really long tab">
+                <h2>Overview</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                <ul>
+                  <li>First item with some additional detail about this particular list entry</li>
+                  <li>Second item describing another important concept worth noting here</li>
+                  <li>Third item providing more context about the subject matter at hand</li>
+                  <li>Fourth item rounding out the list with a final relevant point</li>
+                </ul>
+              </Tab>
+              <Tab id="profile" title="This is a longer one">
+                <h2>Academics</h2>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+                <blockquote style={{ borderLeft: "4px solid #8c1d40", paddingLeft: "1rem", margin: "1rem 0" }}>
+                  <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi."</p>
+                </blockquote>
+              </Tab>
+              <Tab id="contact" title="Here's a tab that's long too">
+                <h2>Admissions</h2>
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
+                <table style={{ width: "100%", borderCollapse: "collapse", marginTop: "1rem" }}>
+                  <thead>
+                    <tr style={{ backgroundColor: "#8c1d40", color: "#fff" }}>
+                      <th style={{ padding: "0.5rem 1rem", textAlign: "left" }}>Requirement</th>
+                      <th style={{ padding: "0.5rem 1rem", textAlign: "left" }}>Details</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr style={{ borderBottom: "1px solid #ccc" }}>
+                      <td style={{ padding: "0.5rem 1rem" }}>GPA</td>
+                      <td style={{ padding: "0.5rem 1rem" }}>3.0 minimum cumulative</td>
+                    </tr>
+                    <tr style={{ borderBottom: "1px solid #ccc" }}>
+                      <td style={{ padding: "0.5rem 1rem" }}>Test Scores</td>
+                      <td style={{ padding: "0.5rem 1rem" }}>SAT 1200+ or ACT 24+</td>
+                    </tr>
+                    <tr>
+                      <td style={{ padding: "0.5rem 1rem" }}>Application</td>
+                      <td style={{ padding: "0.5rem 1rem" }}>Submit by December 1</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </Tab>
+              <Tab id="another" title="Here's an example of a really long tab so we can see what it would look like">
+                <h2>Research</h2>
+                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
+                <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
+                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
+              </Tab>
+              <Tab id="tab-5" title="Tab 5">
+                <h2>Student Life</h2>
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
+                <p>Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
+              </Tab>
+              <Tab id="tab-6" title="Tab six">
+                <h2>Alumni</h2>
+                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.</p>
+              </Tab>
+              <Tab id="tab-7" title="Tab seven">
+                <h2>News &amp; Events</h2>
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
+              </Tab>
+              <Tab id="tab-8" title="Tab eight">
+                <h2>Faculty</h2>
+                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
+              </Tab>
+              <Tab id="tab-9" title="Tab nine">
+                <h2>Giving</h2>
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae ab illo inventore veritatis.</p>
+              </Tab>
+              <Tab id="tab-10" title="Tab ten">
+                <h2>About</h2>
+                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+              </Tab>
+              <Tab id="tab-11" title="Tab eleven">
+                <h2>Contact</h2>
+                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+              </Tab>
+              <Tab id="tab-12" title="Tab twelve">
+                <h2>Resources</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
+              </Tab>
+            </TabbedPanels>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ASUFooter
+      contact={{
+        title: "Subdomain name",
+        contactLink: "https://www.asu.edu/about/contact",
+        contributionLink: "https://www.asu.edu/give",
+      }}
+      social={{
+        logoUrl: "https://www.asu.edu",
+        mediaLinks: {
+          facebook: "https://www.facebook.com/asuonline",
+          twitter: "https://twitter.com/ASUOnline",
+          instagram: "https://www.instagram.com/asu",
+          linkedIn: "https://www.linkedin.com/school/arizona-state-university",
+          youtube: "https://www.youtube.com/user/asuofficial",
+        },
+      } as any}
+    />
+  </>
+);
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.jsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.tsx
similarity index 65%
rename from packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.jsx
rename to packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.tsx
index b46e0c225e..e6aba7610f 100644
--- a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.jsx
+++ b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.test.tsx
@@ -1,4 +1,3 @@
-// @ts-check
 import { render, cleanup } from "@testing-library/react";
 import React from "react";
 import { expect, describe, it, afterEach, beforeEach } from "vitest";
@@ -9,21 +8,13 @@ const tabbedPanelsDefaultArgs = {
   bgColor: "bg-dark",
 };
 
-const renderTabbedPanels = props => {
+const renderTabbedPanels = (props: typeof tabbedPanelsDefaultArgs) => {
   return render(
-    <TabbedPanels {...{ ...props }}>
-      <Tab
-        id="one"
-        // @ts-ignore
-        title="One"
-      >
+    <TabbedPanels {...props}>
+      <Tab id="one" title="One">
         <div>One</div>
       </Tab>
-      <Tab
-        id="two"
-        // @ts-ignore
-        title="Two"
-      >
+      <Tab id="two" title="Two">
         <div>Two</div>
       </Tab>
     </TabbedPanels>
@@ -31,8 +22,7 @@ const renderTabbedPanels = props => {
 };
 
 describe("#TabbedPanels", () => {
-  /** @type {import("@testing-library/react").RenderResult} */
-  let component;
+  let component: ReturnType<typeof renderTabbedPanels>;
 
   beforeEach(() => {
     component = renderTabbedPanels(tabbedPanelsDefaultArgs);
diff --git a/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.tsx b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.tsx
new file mode 100644
index 0000000000..eb23c2b14a
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/TabbedPanels.tsx
@@ -0,0 +1,306 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { MoreDropdown, TabHeader, NavControls } from "./components";
+import type { GaEventData } from "./components/MoreDropdown";
+import { useBaseSpecificFramework } from "../GaEventWrapper/useBaseSpecificFramework";
+
+type RefMap = Record<string, HTMLButtonElement | null>;
+
+function useRefs(): [
+  React.MutableRefObject<RefMap>,
+    (name: string) => (ref: HTMLButtonElement | null) => void,
+] {
+  const refs = useRef<RefMap>({});
+
+  const register = useCallback(
+    (refName: string) => (ref: HTMLButtonElement | null) => {
+      refs.current[refName] = ref;
+    },
+    []
+  );
+
+  return [refs, register];
+}
+
+// ─── Tab ─────────────────────────────────────────────────────────────────────
+
+interface TabProps {
+  id: string;
+  title: string;
+  icon?: [string, string];
+  bgColor?: string;
+  selected?: boolean;
+  children?: React.ReactNode;
+}
+
+const Tab = ({ id, bgColor, selected, children }: TabProps) => {
+  return (
+    <div
+      className={`tab-pane fade ${selected ? "show active" : ""} ${
+        bgColor === "bg-dark" ? "text-white" : ""
+      }`}
+      id={`nav-${id}`}
+      role="tabpanel"
+      aria-labelledby={`nav-${id}-tab`}
+    >
+      {children}
+    </div>
+  );
+};
+
+// ─── TabbedPanels ─────────────────────────────────────────────────────────────
+
+interface TabbedPanelsProps {
+  initialTab?: string;
+  children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];
+  bgColor?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+function readTabGap(container: HTMLElement): number {
+  const style = getComputedStyle(container);
+  // Read the actual rendered gap from the nav-tabs flex container
+  return parseFloat(style.getPropertyValue("column-gap") || style.getPropertyValue("gap")) || 8;
+}
+
+const TabbedPanels = ({
+  initialTab = "",
+  children,
+  bgColor = "",
+  onTabChange = () => {},
+}: TabbedPanelsProps) => {
+  const childrenArray = useMemo(
+    () =>
+      React.Children.toArray(children) as React.ReactElement<TabProps>[],
+    [children]
+  );
+
+  const idToChild = useMemo(() => {
+    const map: Record<string, React.ReactElement<TabProps>> = {};
+    childrenArray.forEach((child) => {
+      if (child?.props?.id) {
+        map[child.props.id] = child;
+      }
+    });
+    return map;
+  }, [childrenArray]);
+
+  const isMounted = useRef(false);
+  const [activeTabID, setActiveTabID] = useState(
+    initialTab && initialTab !== "null"
+      ? initialTab
+      : childrenArray[0]?.props?.id ?? ""
+  );
+  const headerTabs = useRef<HTMLDivElement>(null);
+  const moreBtnRef = useRef<HTMLDivElement>(null);
+  const [headerTabItems, setHeaderTabItems] = useRefs();
+  const tabRefs = useRef<Record<string, HTMLButtonElement>>({});
+  const tabWidthsRef = useRef<Record<string, number>>({});
+
+  const registerTabNode = useCallback(
+    (id: string) => (node: HTMLButtonElement | null) => {
+      setHeaderTabItems(id)(node);
+      if (node) {
+        tabRefs.current[id] = node;
+        tabWidthsRef.current[id] = Math.round(
+          node.getBoundingClientRect().width
+        );
+      } else {
+        delete tabRefs.current[id];
+      }
+    },
+    [setHeaderTabItems]
+  );
+
+  const [overflowTabs, setOverflowTabs] = useState<string[]>([]);
+  const [visibleTabs, setVisibleTabs] = useState<string[]>(
+    childrenArray.map((c) => c.props.id)
+  );
+
+  const calculateOverflow = useCallback(() => {
+    const container = headerTabs.current;
+    if (!container) {
+      setVisibleTabs(childrenArray.map((c) => c.props.id));
+      setOverflowTabs([]);
+      return;
+    }
+
+    const tabIDs = childrenArray.map((c) => c.props.id);
+
+    const widths = tabIDs.map((id) => {
+      if (typeof tabWidthsRef.current[id] === "number") {
+        return tabWidthsRef.current[id];
+      }
+      const domNode = tabRefs.current[id] ?? headerTabItems.current?.[id];
+      if (domNode && typeof domNode.getBoundingClientRect === "function") {
+        const width = Math.round(domNode.getBoundingClientRect().width);
+        tabWidthsRef.current[id] = width;
+        return width;
+      }
+      return 80;
+    });
+
+    const availableWidth = container.clientWidth ?? 0;
+    const moreBtnWidth = moreBtnRef.current
+      ? Math.round(moreBtnRef.current.getBoundingClientRect().width)
+      : 83;
+    const tabGap = readTabGap(container);
+    const newVisibleTabs: string[] = [];
+    const newOverflowTabs: string[] = [];
+    let used = 0;
+
+    for (let i = 0; i < tabIDs.length; i++) {
+      const w = widths[i] ?? 0;
+      if (used + w + moreBtnWidth > availableWidth) {
+        for (let j = i; j < tabIDs.length; j++) {
+          newOverflowTabs.push(tabIDs[j]);
+        }
+        break;
+      }
+      newVisibleTabs.push(tabIDs[i]);
+      used += w + tabGap;
+    }
+
+    setVisibleTabs(newVisibleTabs);
+    setOverflowTabs(newOverflowTabs);
+  }, [childrenArray, headerTabItems]);
+
+  useLayoutEffect(() => {
+    calculateOverflow();
+    window.addEventListener("resize", calculateOverflow);
+    return () => window.removeEventListener("resize", calculateOverflow);
+  }, [calculateOverflow]);
+
+  useEffect(() => {
+    if (
+      isMounted.current &&
+      initialTab &&
+      initialTab !== "null" &&
+      activeTabID !== initialTab
+    ) {
+      setActiveTabID(initialTab);
+    }
+  }, [initialTab, activeTabID]);
+
+  useEffect(() => {
+    isMounted.current = true;
+  }, []);
+
+  if (childrenArray.length === 0) {
+    return null;
+  }
+
+  const updateActiveTabID = (tab: string) => {
+    onTabChange(tab);
+    setActiveTabID(tab);
+  };
+
+  const trackLinkEvent: GaEventData = {
+    event: "link",
+    action: "click",
+    name: "onclick",
+    type: "internal link",
+    text: "",
+  };
+
+  const tabs = childrenArray.map((el) =>
+    React.cloneElement(el, {
+      bgColor,
+      selected: activeTabID === el.props.id,
+    })
+  );
+
+  const switchToTab = (
+    e: React.MouseEvent | React.KeyboardEvent,
+    tabID: string,
+    _title: string
+  ) => {
+    e.preventDefault();
+    updateActiveTabID(tabID);
+  };
+
+  const incrementIndex = (up = true) => {
+    // Only navigate through currently visible (non-overflow) tabs
+    const navigableTabs = visibleTabs;
+    const count = navigableTabs.length;
+    if (count === 0) return;
+    const num = up ? 1 : -1;
+    const currPos = navigableTabs.indexOf(activeTabID);
+    // If active tab is in overflow, start from edge of visible list
+    const startPos = currPos === -1 ? (up ? count - 1 : 0) : currPos;
+    const newTabID = navigableTabs[(count + startPos + num) % count];
+    updateActiveTabID(newTabID);
+    // Focus the new tab (keyboard-triggered navigation)
+    headerTabItems.current[newTabID]?.focus();
+  };
+
+  const { isReact } = useBaseSpecificFramework();
+
+  let navClasses = "uds-tabbed-panels";
+  if (bgColor === "bg-dark") {
+    navClasses += " uds-tabbed-panels-dark";
+  }
+
+  // When the active tab is in the overflow dropdown, the first visible tab
+  // becomes the roving-tabindex entry point so keyboard users can reach the row.
+  const activeIsOverflow = overflowTabs.includes(activeTabID);
+
+  return (
+    <div className={bgColor}>
+      <nav className={navClasses} {...(isReact ? { "data-react": "true" } : {})}>
+        <div className="nav nav-tabs" role="tablist" ref={headerTabs}>
+          {visibleTabs.map((tabId, index) => {
+            const child = idToChild[tabId];
+            if (!child) return null;
+            const isFocusEntry = activeIsOverflow
+              ? index === 0
+              : activeTabID === tabId;
+
+            return (
+              <TabHeader
+                ref={registerTabNode(tabId)}
+                id={child.props.id}
+                title={child.props.title}
+                selected={activeTabID === child.props.id}
+                isFocusEntry={isFocusEntry}
+                gaData={trackLinkEvent}
+                selectTab={switchToTab}
+                key={child.props.id}
+                leftKeyPressed={() => incrementIndex(false)}
+                rightKeyPressed={() => incrementIndex()}
+                icon={child.props.icon}
+              />
+            );
+          })}
+
+          <MoreDropdown
+            ref={moreBtnRef}
+            overflowTabs={overflowTabs}
+            idToChild={idToChild}
+            activeTabID={activeTabID}
+            selectTab={switchToTab}
+            gaData={trackLinkEvent}
+          />
+        </div>
+      </nav>
+      <div
+        className="tab-content"
+        tabIndex={0}
+        role="tabpanel"
+        id="nav-tabContent"
+      >
+        {tabs}
+      </div>
+    </div>
+  );
+};
+
+export { TabbedPanels, Tab, TabHeader, NavControls };
+export type { TabProps, TabbedPanelsProps };
diff --git a/packages/unity-react-core/src/components/TabbedPanels/components/MoreDropdown.tsx b/packages/unity-react-core/src/components/TabbedPanels/components/MoreDropdown.tsx
new file mode 100644
index 0000000000..f981cab269
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/components/MoreDropdown.tsx
@@ -0,0 +1,227 @@
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+
+import { GaEventWrapper } from "../../GaEventWrapper/GaEventWrapper";
+
+interface DropdownItem {
+  id: string;
+  title: string;
+  icon: [string, string] | null;
+}
+
+interface ChildProps {
+  title: string;
+  icon?: [string, string];
+}
+
+interface IdToChild {
+  [id: string]: React.ReactElement<ChildProps>;
+}
+
+interface GaEventData {
+  event?: string;
+  action?: string;
+  name?: string;
+  type?: string;
+  region?: string;
+  text?: string;
+}
+
+interface MoreDropdownProps {
+  overflowTabs: string[];
+  idToChild: IdToChild;
+  activeTabID?: string;
+  selectTab?: (e: React.MouseEvent | React.KeyboardEvent, id: string, title: string) => void;
+  gaData?: GaEventData;
+}
+
+const MoreDropdown = React.forwardRef<HTMLDivElement, MoreDropdownProps>((
+  {
+    overflowTabs,
+    idToChild,
+    activeTabID,
+    selectTab,
+    gaData,
+  },
+  ref
+) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const itemRefs = useRef<HTMLButtonElement[]>([]);
+  const safeOverflow = Array.isArray(overflowTabs) ? overflowTabs : [];
+  const menuId = useId();
+  const hasActiveOverflowTab = safeOverflow.includes(activeTabID ?? "");
+
+  const items: DropdownItem[] = safeOverflow.map((tabId) => {
+    const child = idToChild?.[tabId];
+    if (!child) {
+      return { id: tabId, title: tabId, icon: null };
+    }
+    return {
+      id: tabId,
+      title: child.props.title,
+      icon: child.props.icon ?? null,
+    };
+  });
+
+  const close = useCallback((returnFocus = true) => {
+    setIsOpen(false);
+    if (returnFocus) {
+      triggerRef.current?.focus();
+    }
+  }, []);
+
+  // Move focus to first item when dropdown opens
+  useEffect(() => {
+    if (isOpen) {
+      itemRefs.current[0]?.focus();
+    }
+  }, [isOpen]);
+
+  const toggle = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setIsOpen((prev) => !prev);
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    function onDocClick(event: MouseEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, []);
+
+  // Arrow key navigation + Escape inside the dropdown
+  const onItemKeyDown = useCallback(
+    (event: React.KeyboardEvent, index: number) => {
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          const next = itemRefs.current[index + 1] ?? itemRefs.current[0];
+          next?.focus();
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          const prev =
+            itemRefs.current[index - 1] ??
+            itemRefs.current[items.length - 1];
+          prev?.focus();
+          break;
+        }
+        case "Home":
+          event.preventDefault();
+          itemRefs.current[0]?.focus();
+          break;
+        case "End":
+          event.preventDefault();
+          itemRefs.current[items.length - 1]?.focus();
+          break;
+        case "Escape":
+          event.preventDefault();
+          close();
+          break;
+        case "Tab":
+          // Let Tab close the dropdown naturally without stealing focus
+          setIsOpen(false);
+          break;
+        default:
+          break;
+      }
+    },
+    [items.length, close]
+  );
+
+  const onItemClick = (
+    event: React.MouseEvent,
+    id: string,
+    title: string
+  ) => {
+    event.preventDefault();
+    close(false);
+    selectTab?.(event, id, title);
+  };
+
+  const hidden = items.length === 0;
+
+  const setRootRef = (node: HTMLDivElement | null) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+  };
+
+  return (
+    <div
+      ref={setRootRef}
+      className="uds-more-dropdown"
+      aria-hidden={hidden || undefined}
+      style={hidden ? { visibility: "hidden", pointerEvents: "none" } : undefined}
+    >
+      <GaEventWrapper gaData={gaData ?? {}}>
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={toggle}
+          aria-haspopup="true"
+          aria-expanded={isOpen}
+          aria-controls={menuId}
+          aria-label={`More, ${items.length} additional tab${items.length !== 1 ? "s" : ""}`}
+          className={`uds-tab more-dropdown-button${hasActiveOverflowTab ? " active" : ""}`}
+        >
+          <span className="more-dropdown-button-inner">
+            <span aria-hidden="true">More</span>
+            <i
+              aria-hidden="true"
+              className={`fas fa-chevron-down more-dropdown-icon${isOpen ? " open" : ""}`}
+            />
+          </span>
+          <span className="more-dropdown-button-indicator" aria-hidden="true" />
+        </button>
+      </GaEventWrapper>
+
+      <ul
+          id={menuId}
+          role="menu"
+          aria-label="More tabs"
+          aria-hidden={!isOpen}
+          className={`more-dropdown-menu uds-more-dropdown-list${isOpen ? " open" : ""}`}
+        >
+          {items.map((item, index) => {
+            const isActive = item.id === activeTabID;
+            return (
+              <li key={item.id} role="none">
+                <button
+                  ref={(el) => {
+                    if (el) itemRefs.current[index] = el;
+                  }}
+                  type="button"
+                  role="menuitem"
+                  tabIndex={-1}
+                  onClick={(e) => onItemClick(e, item.id, item.title)}
+                  onKeyDown={(e) => onItemKeyDown(e, index)}
+                  className="more-dropdown-item"
+                  aria-current={isActive || undefined}
+                >
+                  {item.icon && (
+                    <i
+                      aria-hidden="true"
+                      className={`${item.icon[0]} fa-${item.icon[1]} me-1`}
+                    />
+                  )}
+                  {item.title}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+    </div>
+  );
+});
+
+MoreDropdown.displayName = "MoreDropdown";
+
+export { MoreDropdown };
+export type { MoreDropdownProps, GaEventData };
diff --git a/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.jsx b/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.jsx
index 9ce627ff4d..ddc72aab82 100644
--- a/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.jsx
+++ b/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.jsx
@@ -4,7 +4,7 @@
  * TODO: Fix type errors
  * */
 import PropTypes from "prop-types";
-import React, { useRef, useImperativeHandle } from "react";
+import React, { forwardRef, useRef} from "react";
 
 import { GaEventWrapper } from "../../GaEventWrapper/GaEventWrapper";
 import { useBaseSpecificFramework } from "../../GaEventWrapper/useBaseSpecificFramework";
@@ -32,24 +32,6 @@ const TabHeader = function TabHeader(props) {
 
   const inputRef = useRef(null);
 
-  useImperativeHandle(ref, () => {
-    return {
-      focus() {
-        inputRef.current.focus();
-      },
-      scrollIntoView() {
-        const middle =
-          inputRef.current?.offsetWidth / 2 + inputRef.current.offsetLeft;
-        const targetMiddle =
-          inputRef.current?.offsetParent?.scrollLeft +
-          inputRef.current?.offsetParent?.offsetWidth / 2;
-
-        inputRef.current?.offsetParent?.scrollBy({
-          left: middle - targetMiddle,
-        });
-      },
-    };
-  }, []);
 
   const func = e => {
     if (e.keyCode === 37) {
@@ -63,17 +45,21 @@ const TabHeader = function TabHeader(props) {
   return (
     <GaEventWrapper gaData={{ ...gaData, text: title }}>
       <a
-        ref={inputRef}
+        ref={(node) => {
+          inputRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
         className={`nav-item nav-link ${selected ? "active" : ""}`}
         id={id}
         href={`#nav-${id}`}
         role="tab"
         aria-controls={`nav-${id}`}
         aria-selected={selected}
-        data-bs-toggle={isBootstrap && "tab"}
-        onClick={isReact && (e => selectTab(e, id, title))}
-        onKeyDown={isReact && func}
-        tabIndex={selected ? "" : "-1"}
+        data-bs-toggle={isBootstrap ? "tab" : undefined}
+        onClick={isReact ? (e => selectTab(e, id, title)) : undefined}
+        onKeyDown={isReact ? func : undefined}
+        tabIndex={selected ? 0 : -1}
       >
         {title} {icon && <i className={`${icon?.[0]} fa-${icon?.[1]} me-1`} />}
       </a>
diff --git a/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.tsx b/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.tsx
new file mode 100644
index 0000000000..ad174533f9
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/components/TabHeader.tsx
@@ -0,0 +1,58 @@
+import React, { useRef } from "react";
+
+import { GaEventWrapper } from "../../GaEventWrapper/GaEventWrapper";
+import { useBaseSpecificFramework } from "../../GaEventWrapper/useBaseSpecificFramework";
+import type { GaEventData } from "./MoreDropdown";
+
+interface TabHeaderProps {
+  id: string;
+  selected: boolean;
+  isFocusEntry?: boolean;
+  title: string;
+  selectTab: (e: React.MouseEvent | React.KeyboardEvent, id: string, title: string) => void;
+  leftKeyPressed: () => void;
+  rightKeyPressed: () => void;
+  icon?: [string, string];
+  gaData?: GaEventData;
+}
+
+const TabHeader = React.forwardRef<HTMLButtonElement, TabHeaderProps>(
+  ({ id, selected, isFocusEntry, title, selectTab, leftKeyPressed, rightKeyPressed, icon, gaData }, ref) => {
+    const { isReact } = useBaseSpecificFramework();
+
+    const onKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        leftKeyPressed();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        rightKeyPressed();
+      }
+    };
+
+    return (
+      <GaEventWrapper gaData={{ ...gaData, text: title }}>
+        <button
+          ref={ref}
+          type="button"
+          className={`nav-item nav-link ${selected ? "active" : ""}`}
+          id={id}
+          role="tab"
+          aria-controls={`nav-${id}`}
+          aria-selected={selected}
+          onClick={(e) => selectTab(e, id, title)}
+          onKeyDown={isReact ? onKeyDown : undefined}
+          tabIndex={isFocusEntry ?? selected ? 0 : -1}
+        >
+          {title}{" "}
+          {icon && <i aria-hidden="true" className={`${icon[0]} fa-${icon[1]} me-1`} />}
+        </button>
+      </GaEventWrapper>
+    );
+  }
+);
+
+TabHeader.displayName = "TabHeader";
+
+export { TabHeader };
+export type { TabHeaderProps };
diff --git a/packages/unity-react-core/src/components/TabbedPanels/components/index.js b/packages/unity-react-core/src/components/TabbedPanels/components/index.js
deleted file mode 100644
index 6769bd7e72..0000000000
--- a/packages/unity-react-core/src/components/TabbedPanels/components/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { NavControls } from "./NavControls";
-export { TabHeader } from "./TabHeader";
diff --git a/packages/unity-react-core/src/components/TabbedPanels/components/index.ts b/packages/unity-react-core/src/components/TabbedPanels/components/index.ts
new file mode 100644
index 0000000000..03c3b7dd58
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/components/index.ts
@@ -0,0 +1,5 @@
+export { NavControls } from "./NavControls";
+export { TabHeader } from "./TabHeader";
+export type { TabHeaderProps } from "./TabHeader";
+export { MoreDropdown } from "./MoreDropdown";
+export type { MoreDropdownProps, GaEventData } from "./MoreDropdown";
diff --git a/packages/unity-react-core/src/components/TabbedPanels/tabbed-panels-v2.test.ts b/packages/unity-react-core/src/components/TabbedPanels/tabbed-panels-v2.test.ts
new file mode 100644
index 0000000000..1e514deca0
--- /dev/null
+++ b/packages/unity-react-core/src/components/TabbedPanels/tabbed-panels-v2.test.ts
@@ -0,0 +1,881 @@
+/**
+ * tabbed-panels-v2.test.ts
+ *
+ * Unit tests for the vanilla-JS progressive-enhancement layer that powers the
+ * Bootstrap HTML version of UDS TabbedPanels.
+ *
+ * Strategy
+ * --------
+ * • `bootstrap-helper` is mocked so EventHandler.on/off delegate to plain
+ *   addEventListener / removeEventListener.  This lets us fire real DOM events
+ *   with dispatchEvent() and assert on outcomes without Bootstrap internals.
+ * • jsdom is the test environment (set in vitest.config.ts).
+ * • Layout APIs (getBoundingClientRect, clientWidth) return zeros in jsdom, so
+ *   overflow tests mock them per element to exercise the width-fitting logic.
+ * • The module has top-level side-effects (load-event wiring).  We suppress
+ *   console.log noise via beforeAll and call initTabbedPanelsV2 directly.
+ */
+
+import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from "vitest";
+
+// ─── mock bootstrap-helper BEFORE the module under test is loaded ─────────────
+// vi.mock is hoisted by vitest, so the mock is in place when the import below
+// resolves the real module and it calls EventHandler.on at the top level.
+vi.mock("../../../../unity-bootstrap-theme/src/js/bootstrap-helper", () => ({
+  EventHandler: {
+    on(el: EventTarget, namespacedEvent: string, handler: EventListenerOrEventListenerObject) {
+      const type = namespacedEvent.split(".")[0];
+      el.addEventListener(type, handler);
+    },
+    off(el: EventTarget, namespacedEvent: string, handler?: EventListenerOrEventListenerObject) {
+      const type = namespacedEvent.split(".")[0];
+      if (handler) el.removeEventListener(type, handler);
+    },
+  },
+}));
+
+import { initTabbedPanelsV2 } from "../../../../unity-bootstrap-theme/src/js/tabbed-panels-v2";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Build a minimal .uds-tabbed-panels container with N tabs, appended to
+ * document.body so querySelectorAll picks it up.
+ *
+ * @param tabCount   Number of tabs to generate
+ * @param opts.dark  Whether to add the dark-theme modifier class
+ * @param opts.activeIndex  Which tab is initially active (default 0)
+ */
+function buildContainer(
+  tabCount = 3,
+  opts: { dark?: boolean; activeIndex?: number; navWidth?: number } = {}
+): HTMLElement {
+  const { dark = false, activeIndex = 0, navWidth = 1000 } = opts;
+
+  const container = document.createElement("nav");
+  container.className = `uds-tabbed-panels${dark ? " uds-tabbed-panels-dark" : ""}`;
+
+  const navTabs = document.createElement("div");
+  navTabs.className = "nav nav-tabs";
+  navTabs.setAttribute("role", "tablist");
+  // Set a visible width so calculateOverflow doesn't treat all tabs as overflow
+  // (jsdom returns 0 for layout APIs by default).
+  Object.defineProperty(navTabs, "clientWidth", { configurable: true, get: () => navWidth });
+
+  for (let i = 0; i < tabCount; i++) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `nav-link${i === activeIndex ? " active" : ""}`;
+    btn.id = `tab-${i}`;
+    btn.setAttribute("role", "tab");
+    btn.setAttribute("aria-selected", i === activeIndex ? "true" : "false");
+    btn.textContent = `Tab ${i + 1}`;
+    navTabs.appendChild(btn);
+  }
+
+  container.appendChild(navTabs);
+  document.body.appendChild(container);
+
+  // Also build matching tab-content so activateTab can find panels
+  const tabContent = document.createElement("div");
+  tabContent.className = "tab-content";
+
+  for (let i = 0; i < tabCount; i++) {
+    const pane = document.createElement("div");
+    pane.id = `nav-tab-${i}`;
+    pane.className = `tab-pane fade${i === activeIndex ? " show active" : ""}`;
+    tabContent.appendChild(pane);
+  }
+
+  // Wrap container + tabContent in a shared parent (mirrors real HTML)
+  const wrapper = document.createElement("div");
+  wrapper.appendChild(container);
+  wrapper.appendChild(tabContent);
+  document.body.appendChild(wrapper);
+
+  return container;
+}
+
+/**
+ * Return the More button inside a container, asserting it exists.
+ */
+function getMoreButton(container: HTMLElement): HTMLButtonElement {
+  const btn = container.querySelector<HTMLButtonElement>(".more-dropdown-button");
+  if (!btn) throw new Error("More button not found");
+  return btn;
+}
+
+/**
+ * Return the More dropdown menu, asserting it exists.
+ */
+function getMenu(container: HTMLElement): HTMLUListElement {
+  const menu = container.querySelector<HTMLUListElement>(".more-dropdown-menu");
+  if (!menu) throw new Error("More menu not found");
+  return menu;
+}
+
+/**
+ * Dispatch a keyboard event on an element.
+ */
+function keydown(el: HTMLElement, key: string): void {
+  el.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+}
+
+/**
+ * Make jsdom report a specific clientWidth for an element.
+ */
+function setClientWidth(el: HTMLElement, width: number): void {
+  Object.defineProperty(el, "clientWidth", { configurable: true, get: () => width });
+}
+
+/**
+ * Make jsdom report a specific getBoundingClientRect width for an element.
+ */
+function setOffsetWidth(el: HTMLElement, width: number): void {
+  el.getBoundingClientRect = () =>
+    ({ width, height: 40, top: 0, left: 0, right: width, bottom: 40, x: 0, y: 0, toJSON: () => ({}) } as DOMRect);
+}
+
+// ─── suite ────────────────────────────────────────────────────────────────────
+
+beforeAll(() => {
+  // jsdom does not implement requestAnimationFrame — provide a synchronous stub
+  // so keyboard-open → focus-first-item works synchronously in tests.
+  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => { cb(0); return 0; });
+});
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("initTabbedPanelsV2", () => {
+  it("marks each container with data-uds-v2-init after initialization", () => {
+    buildContainer(3);
+    initTabbedPanelsV2();
+    const container = document.querySelector(".uds-tabbed-panels")!;
+    expect(container.hasAttribute("data-uds-v2-init")).toBe(true);
+  });
+
+  it("skips containers that have [data-react]", () => {
+    const container = buildContainer(3);
+    container.setAttribute("data-react", "");
+    initTabbedPanelsV2();
+    expect(container.hasAttribute("data-uds-v2-init")).toBe(false);
+  });
+
+  it("skips containers already marked with [data-uds-v2-init]", () => {
+    const container = buildContainer(3);
+    container.setAttribute("data-uds-v2-init", "true");
+    // The More button should NOT be created on a skipped container
+    initTabbedPanelsV2();
+    // No second dropdown wrapper should have appeared (still 0 wrappers because
+    // we never called calculateOverflow on it)
+    expect(container.querySelectorAll(".uds-more-dropdown").length).toBe(0);
+  });
+
+  it("initializes multiple independent containers in one call", () => {
+    buildContainer(3);
+    buildContainer(3);
+    initTabbedPanelsV2();
+    const initialized = document.querySelectorAll(".uds-tabbed-panels[data-uds-v2-init]");
+    expect(initialized.length).toBe(2);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("ensureDropdown — DOM creation", () => {
+  it("appends a .uds-more-dropdown wrapper to the nav-tabs element", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const navTabs = container.querySelector(".nav.nav-tabs")!;
+    expect(navTabs.querySelector(".uds-more-dropdown")).not.toBeNull();
+  });
+
+  it("More button has correct ARIA attributes", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const btn = getMoreButton(container);
+    expect(btn.getAttribute("aria-haspopup")).toBe("true");
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+    expect(btn.getAttribute("aria-controls")).toBeTruthy();
+  });
+
+  it("menu has role=menu and aria-hidden=true initially", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const menu = getMenu(container);
+    expect(menu.getAttribute("role")).toBe("menu");
+    expect(menu.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("reuses a pre-existing .uds-more-dropdown wrapper without duplicating it", () => {
+    const container = buildContainer(3);
+    // Simulate a pre-rendered wrapper (e.g. SSR or React output)
+    const navTabs = container.querySelector(".nav.nav-tabs")!;
+    const preExisting = document.createElement("div");
+    preExisting.className = "uds-more-dropdown";
+    const preBtn = document.createElement("button");
+    preBtn.className = "more-dropdown-button uds-tab";
+    preBtn.setAttribute("aria-expanded", "false");
+    preBtn.setAttribute("aria-haspopup", "true");
+    preBtn.setAttribute("aria-controls", "pre-menu");
+    const preMenu = document.createElement("ul");
+    preMenu.id = "pre-menu";
+    preMenu.className = "more-dropdown-menu uds-more-dropdown-list";
+    preMenu.setAttribute("role", "menu");
+    preMenu.setAttribute("aria-hidden", "true");
+    preExisting.appendChild(preBtn);
+    preExisting.appendChild(preMenu);
+    navTabs.appendChild(preExisting);
+
+    initTabbedPanelsV2();
+
+    // Still exactly one wrapper
+    expect(navTabs.querySelectorAll(".uds-more-dropdown").length).toBe(1);
+  });
+
+  it("wires click events on a pre-existing wrapper that lacks data-uds-events-wired", () => {
+    const container = buildContainer(3);
+    const navTabs = container.querySelector(".nav.nav-tabs")!;
+
+    // Pre-existing wrapper with NO data-uds-events-wired
+    const wrapper = document.createElement("div");
+    wrapper.className = "uds-more-dropdown";
+    const btn = document.createElement("button");
+    btn.className = "more-dropdown-button uds-tab";
+    btn.setAttribute("aria-expanded", "false");
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-controls", "pre-menu");
+    const menu = document.createElement("ul");
+    menu.id = "pre-menu";
+    menu.className = "more-dropdown-menu uds-more-dropdown-list";
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-hidden", "true");
+    wrapper.appendChild(btn);
+    wrapper.appendChild(menu);
+    navTabs.appendChild(wrapper);
+
+    initTabbedPanelsV2();
+
+    // Now clicking should toggle aria-expanded
+    btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(btn.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("does not wire events twice when data-uds-events-wired is already present", () => {
+    const container = buildContainer(3);
+    const navTabs = container.querySelector(".nav.nav-tabs")!;
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "uds-more-dropdown";
+    wrapper.setAttribute("data-uds-events-wired", "true"); // already wired
+    const btn = document.createElement("button");
+    btn.className = "more-dropdown-button uds-tab";
+    btn.setAttribute("aria-expanded", "false");
+    btn.setAttribute("aria-haspopup", "true");
+    btn.setAttribute("aria-controls", "pre-menu");
+    const menu = document.createElement("ul");
+    menu.id = "pre-menu";
+    menu.className = "more-dropdown-menu uds-more-dropdown-list";
+    menu.setAttribute("role", "menu");
+    menu.setAttribute("aria-hidden", "true");
+    wrapper.appendChild(btn);
+    wrapper.appendChild(menu);
+    navTabs.appendChild(wrapper);
+
+    const clickSpy = vi.fn();
+    btn.addEventListener("click", clickSpy);
+
+    initTabbedPanelsV2();
+
+    // Click event should only fire the manually-added spy — the module should
+    // not have added another listener (since data-uds-events-wired was set).
+    btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+    // aria-expanded stays false because no module handler was added
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("More button — open / close", () => {
+  let container: HTMLElement;
+  let moreBtn: HTMLButtonElement;
+  let menu: HTMLUListElement;
+
+  beforeEach(() => {
+    container = buildContainer(3);
+    initTabbedPanelsV2();
+    moreBtn = getMoreButton(container);
+    menu = getMenu(container);
+  });
+
+  it("click opens the dropdown: aria-expanded → true, aria-hidden → false", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("true");
+    expect(menu.getAttribute("aria-hidden")).toBe("false");
+  });
+
+  it("second click closes the dropdown: aria-expanded → false, aria-hidden → true", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+    expect(menu.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("mousedown outside the wrapper closes an open dropdown", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("true");
+
+    const outside = document.createElement("button");
+    document.body.appendChild(outside);
+    document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, target: outside } as MouseEventInit));
+    // Use the outside element as the target directly
+    outside.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("touchstart outside the wrapper closes an open dropdown", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    const outside = document.createElement("div");
+    document.body.appendChild(outside);
+    outside.dispatchEvent(new TouchEvent("touchstart", { bubbles: true }));
+
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("mousedown inside the wrapper does NOT close the dropdown", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // Click on the button itself (inside wrapper)
+    moreBtn.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+    // The second click fires from the click listener — just check mousedown alone
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("true");
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("More button — keyboard (ARIA APG menu-button pattern)", () => {
+  let container: HTMLElement;
+  let moreBtn: HTMLButtonElement;
+  let menu: HTMLUListElement;
+
+  /**
+   * Add a couple of real menu items so keyboard tests have items to focus.
+   */
+  function seedMenuItems() {
+    for (let i = 0; i < 3; i++) {
+      const li = document.createElement("li");
+      li.setAttribute("role", "none");
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "menuitem");
+      btn.setAttribute("tabindex", "-1");
+      btn.className = "more-dropdown-item";
+      btn.textContent = `Overflow Tab ${i + 1}`;
+      li.appendChild(btn);
+      menu.appendChild(li);
+    }
+  }
+
+  beforeEach(() => {
+    container = buildContainer(3);
+    initTabbedPanelsV2();
+    moreBtn = getMoreButton(container);
+    menu = getMenu(container);
+    seedMenuItems();
+  });
+
+  it("Enter opens the dropdown and moves focus to the first menu item", () => {
+    keydown(moreBtn, "Enter");
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("true");
+    const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it("Space opens the dropdown and moves focus to the first menu item", () => {
+    keydown(moreBtn, " ");
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("true");
+    const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it("Enter on an open dropdown closes it", () => {
+    keydown(moreBtn, "Enter"); // open
+    keydown(moreBtn, "Enter"); // close
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("Escape closes an open dropdown and returns focus to the trigger button", () => {
+    keydown(moreBtn, "Enter"); // open
+    keydown(moreBtn, "Escape"); // close
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(moreBtn);
+  });
+
+  it("ArrowDown focuses the first menu item when the dropdown is open", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); // open via click
+    keydown(moreBtn, "ArrowDown");
+    const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it("ArrowUp focuses the last menu item when the dropdown is open", () => {
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    keydown(moreBtn, "ArrowUp");
+    const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(document.activeElement).toBe(items[items.length - 1]);
+  });
+
+  it("ArrowDown does nothing when the dropdown is closed", () => {
+    const focusBefore = document.activeElement;
+    keydown(moreBtn, "ArrowDown");
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(focusBefore);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("Menu keyboard navigation", () => {
+  let container: HTMLElement;
+  let moreBtn: HTMLButtonElement;
+  let menu: HTMLUListElement;
+  let items: HTMLElement[];
+
+  beforeEach(() => {
+    container = buildContainer(3);
+    initTabbedPanelsV2();
+    moreBtn = getMoreButton(container);
+    menu = getMenu(container);
+
+    // Add 4 menu items
+    for (let i = 0; i < 4; i++) {
+      const li = document.createElement("li");
+      li.setAttribute("role", "none");
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "menuitem");
+      btn.setAttribute("tabindex", "-1");
+      btn.className = "more-dropdown-item";
+      btn.textContent = `Item ${i + 1}`;
+      li.appendChild(btn);
+      menu.appendChild(li);
+    }
+    items = Array.from(menu.querySelectorAll<HTMLElement>('[role="menuitem"]'));
+
+    // Open the menu first
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+
+  it("ArrowDown advances focus to the next item", () => {
+    items[0].focus();
+    keydown(items[0], "ArrowDown");
+    expect(document.activeElement).toBe(items[1]);
+  });
+
+  it("ArrowDown wraps from last to first item", () => {
+    items[3].focus();
+    keydown(items[3], "ArrowDown");
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it("ArrowUp moves focus to the previous item", () => {
+    items[2].focus();
+    keydown(items[2], "ArrowUp");
+    expect(document.activeElement).toBe(items[1]);
+  });
+
+  it("ArrowUp wraps from first to last item", () => {
+    items[0].focus();
+    keydown(items[0], "ArrowUp");
+    expect(document.activeElement).toBe(items[3]);
+  });
+
+  it("Home moves focus to the first item", () => {
+    items[2].focus();
+    keydown(items[2], "Home");
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it("End moves focus to the last item", () => {
+    items[1].focus();
+    keydown(items[1], "End");
+    expect(document.activeElement).toBe(items[3]);
+  });
+
+  it("Escape closes the menu and returns focus to the trigger button", () => {
+    items[1].focus();
+    keydown(items[1], "Escape");
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+    expect(document.activeElement).toBe(moreBtn);
+  });
+
+  it("Tab closes the dropdown without stealing focus", () => {
+    items[0].focus();
+    keydown(items[0], "Tab");
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("activateTab — tab switching", () => {
+  it("activates the clicked tab and its panel, deactivates the previous one", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    const wrapper = container.closest("div")!;
+    const panes = Array.from(wrapper.querySelectorAll<HTMLElement>(".tab-pane"));
+
+    // Simulate clicking tab index 1
+    tabs[1].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(tabs[0].classList.contains("active")).toBe(false);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("false");
+    expect(tabs[1].classList.contains("active")).toBe(true);
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
+
+    expect(panes[0].classList.contains("active")).toBe(false);
+    expect(panes[1].classList.contains("active")).toBe(true);
+    expect(panes[1].classList.contains("show")).toBe(true);
+  });
+
+  it("clicking a tab that is already active keeps it active", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+
+    tabs[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(tabs[0].classList.contains("active")).toBe(true);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("Tab-list keyboard navigation (WCAG 2.1 tablist pattern)", () => {
+  it("ArrowRight moves focus to the next tab and activates it", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[0].focus();
+
+    keydown(tabs[0], "ArrowRight");
+
+    expect(document.activeElement).toBe(tabs[1]);
+    expect(tabs[1].classList.contains("active")).toBe(true);
+  });
+
+  it("ArrowRight wraps from last tab to first", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[2].focus();
+
+    keydown(tabs[2], "ArrowRight");
+
+    expect(document.activeElement).toBe(tabs[0]);
+  });
+
+  it("ArrowLeft moves focus to the previous tab", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[2].focus();
+
+    keydown(tabs[2], "ArrowLeft");
+
+    expect(document.activeElement).toBe(tabs[1]);
+    expect(tabs[1].classList.contains("active")).toBe(true);
+  });
+
+  it("ArrowLeft wraps from first tab to last", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[0].focus();
+
+    keydown(tabs[0], "ArrowLeft");
+
+    expect(document.activeElement).toBe(tabs[2]);
+  });
+
+  it("Home moves focus to the first tab", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[2].focus();
+
+    keydown(tabs[2], "Home");
+
+    expect(document.activeElement).toBe(tabs[0]);
+  });
+
+  it("End moves focus to the last tab", () => {
+    const container = buildContainer(3);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+    tabs[0].focus();
+
+    keydown(tabs[0], "End");
+
+    expect(document.activeElement).toBe(tabs[2]);
+  });
+
+  it("arrow keys skip tabs that are hidden (display:none)", () => {
+    const container = buildContainer(4);
+    initTabbedPanelsV2();
+    const tabs = Array.from(container.querySelectorAll<HTMLButtonElement>("button.nav-link"));
+
+    // Hide tab index 1
+    tabs[1].style.display = "none";
+    tabs[0].focus();
+
+    keydown(tabs[0], "ArrowRight");
+
+    // Should skip index 1 and land on index 2
+    expect(document.activeElement).toBe(tabs[2]);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("calculateOverflow — width-based tab hiding", () => {
+  it("hides tabs that exceed the available nav width", () => {
+    const container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    // nav is 300px wide; each tab is 100px; More button is 83px.
+    // tabs[0] (100) fits → used=100
+    // tabs[1] (100) → 100+100+83=283 ≤ 300 → fits → used=200
+    // tabs[2] (100) → 200+100+83=383 > 300 → overflow from here
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    expect(tabs[0].style.display).not.toBe("none");
+    expect(tabs[1].style.display).not.toBe("none");
+    expect(tabs[2].style.display).toBe("none");
+    expect(tabs[3].style.display).toBe("none");
+    expect(tabs[4].style.display).toBe("none");
+  });
+
+  it("shows the More button when there are overflow tabs", () => {
+    const container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const wrapper = navTabs.querySelector<HTMLElement>(".uds-more-dropdown")!;
+    expect(wrapper.classList.contains("uds-more-dropdown-hidden")).toBe(false);
+  });
+
+  it("hides the More button when all tabs fit", () => {
+    const container = buildContainer(3);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    // 3 tabs × 50px = 150px, well within 600px
+    setClientWidth(navTabs, 600);
+    tabs.forEach(t => setOffsetWidth(t, 50));
+
+    initTabbedPanelsV2();
+
+    const wrapper = navTabs.querySelector<HTMLElement>(".uds-more-dropdown")!;
+    expect(wrapper.classList.contains("uds-more-dropdown-hidden")).toBe(true);
+  });
+
+  it("sets aria-label on More button with the overflow tab count", () => {
+    const container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const btn = getMoreButton(container);
+    // 3 tabs overflow (indices 2, 3, 4)
+    expect(btn.getAttribute("aria-label")).toBe("More, 3 additional tabs");
+  });
+
+  it("sets aria-label in singular form when exactly 1 tab overflows", () => {
+    const container = buildContainer(2);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    // 200px nav; tab[0]=150px fits; tab[1]=150px → 150+150+83=383>200 → overflows
+    setClientWidth(navTabs, 200);
+    tabs.forEach(t => setOffsetWidth(t, 150));
+
+    initTabbedPanelsV2();
+
+    const btn = getMoreButton(container);
+    expect(btn.getAttribute("aria-label")).toBe("More, 1 additional tab");
+  });
+
+  it("marks the More button active when the currently active tab is in overflow", () => {
+    // Make tab[2] the active one, and force it into overflow
+    const container = buildContainer(5, { activeIndex: 2 });
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const btn = getMoreButton(container);
+    expect(btn.classList.contains("active")).toBe(true);
+  });
+
+  it("does NOT mark the More button active when the active tab is visible", () => {
+    const container = buildContainer(5, { activeIndex: 0 });
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const btn = getMoreButton(container);
+    expect(btn.classList.contains("active")).toBe(false);
+  });
+
+  it("populates the menu with a menuitem for each overflow tab", () => {
+    const container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const menu = getMenu(container);
+    const items = menu.querySelectorAll('[role="menuitem"]');
+    expect(items.length).toBe(3); // tabs 2, 3, 4 overflow
+  });
+
+  it("overflow menu items carry the correct data-tab-id", () => {
+    const container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const menu = getMenu(container);
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    expect(items[0].dataset.tabId).toBe("tab-2");
+    expect(items[1].dataset.tabId).toBe("tab-3");
+    expect(items[2].dataset.tabId).toBe("tab-4");
+  });
+
+  it("overflow menu items get aria-current when their tab is active", () => {
+    const container = buildContainer(5, { activeIndex: 3 });
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const menu = getMenu(container);
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    const activeItem = items.find(i => i.dataset.tabId === "tab-3");
+    expect(activeItem?.getAttribute("aria-current")).toBe("true");
+  });
+
+  it("applies roving tabindex so only one visible tab has tabindex=0", () => {
+    const container = buildContainer(5, { activeIndex: 0 });
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    const visibleTabs = tabs.filter(t => t.style.display !== "none");
+    const tabbable = visibleTabs.filter(t => t.getAttribute("tabindex") === "0");
+    expect(tabbable.length).toBe(1);
+    expect(tabbable[0]).toBe(tabs[0]); // active tab gets tabindex=0
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+describe("Menu item click — selecting an overflow tab", () => {
+  let container: HTMLElement;
+  let moreBtn: HTMLButtonElement;
+  let menu: HTMLUListElement;
+
+  beforeEach(() => {
+    container = buildContainer(5);
+    const navTabs = container.querySelector<HTMLElement>(".nav.nav-tabs")!;
+    const tabs = Array.from(navTabs.querySelectorAll<HTMLElement>("button.nav-link"));
+
+    setClientWidth(navTabs, 300);
+    tabs.forEach(t => setOffsetWidth(t, 100));
+
+    initTabbedPanelsV2();
+
+    moreBtn = getMoreButton(container);
+    menu = getMenu(container);
+
+    // Open the dropdown first
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+
+  it("clicking a menu item activates the corresponding tab pane", () => {
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    // Click item for tab-2
+    items[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    const activeTab = container.querySelector<HTMLButtonElement>("#tab-2");
+    expect(activeTab?.classList.contains("active")).toBe(true);
+  });
+
+  it("clicking a menu item closes the dropdown", () => {
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    items[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(moreBtn.getAttribute("aria-expanded")).toBe("false");
+    expect(menu.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("clicking a menu item updates aria-current on menu items", () => {
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    items[1].dispatchEvent(new MouseEvent("click", { bubbles: true })); // tab-3
+
+    // Re-open to inspect items
+    moreBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    const updatedItems = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    const activeItem = updatedItems.find(i => i.dataset.tabId === "tab-3");
+    expect(activeItem?.getAttribute("aria-current")).toBe("true");
+
+    const inactiveItem = updatedItems.find(i => i.dataset.tabId === "tab-2");
+    expect(inactiveItem?.hasAttribute("aria-current")).toBe(false);
+  });
+
+  it("clicking a menu item marks the More button active", () => {
+    const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    items[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    expect(moreBtn.classList.contains("active")).toBe(true);
+  });
+});
diff --git a/packages/unity-react-core/src/components/TextInput/TextInput.tsx b/packages/unity-react-core/src/components/TextInput/TextInput.tsx
index d9096fc5f5..e78bc2e179 100644
--- a/packages/unity-react-core/src/components/TextInput/TextInput.tsx
+++ b/packages/unity-react-core/src/components/TextInput/TextInput.tsx
@@ -30,7 +30,7 @@ const defaultGaEvent = {
 
 export const propDefaults: TextInputProps = {
   id: undefined,
-  label: undefined,
+  label: "",
   placeholder: undefined,
   displaySize: "md",
   required: false,
@@ -85,7 +85,7 @@ export const TextInput: React.FC<TextInputProps> = ({
       </GaEventWrapper>
       {valid && (
         <small id={successId} className="valid-feedback">
-          <span title="Alert" className="fa fa-icon fa-exclamation-triangle" />
+          <span title="Success" className="fa fa-icon fa-check-circle" />
           {validMessage}
         </small>
       )}
diff --git a/packages/unity-react-core/src/components/Textarea/Textarea.tsx b/packages/unity-react-core/src/components/Textarea/Textarea.tsx
index 871813e3c0..2e35b39cf5 100644
--- a/packages/unity-react-core/src/components/Textarea/Textarea.tsx
+++ b/packages/unity-react-core/src/components/Textarea/Textarea.tsx
@@ -31,7 +31,7 @@ const defaultGaEvent = {
 
 export const propDefaults: TextareaProps = {
   id: undefined,
-  label: undefined,
+  label: "",
   placeholder: undefined,
   displaySize: "md",
   required: false,
@@ -85,7 +85,7 @@ export const Textarea: React.FC<TextareaProps> = ({
       </GaEventWrapper>
       {valid && (
         <small id={successId} className="valid-feedback">
-          <span title="Alert" className="fa fa-icon fa-exclamation-triangle" />
+          <span title="Success" className="fa fa-icon fa-check-circle" />
           {validMessage}
         </small>
       )}
diff --git a/yarn.lock b/yarn.lock
index 1d5bbf0910..22455086de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -279,7 +279,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@asu/component-header-footer@npm:^1.0.0, @asu/component-header-footer@workspace:packages/component-header-footer":
+"@asu/component-header-footer@npm:*, @asu/component-header-footer@npm:^1.0.0, @asu/component-header-footer@workspace:packages/component-header-footer":
   version: 0.0.0-use.local
   resolution: "@asu/component-header-footer@workspace:packages/component-header-footer"
   dependencies:
@@ -428,7 +428,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@asu/unity-bootstrap-theme@npm:^1.0.0, @asu/unity-bootstrap-theme@npm:^1.20, @asu/unity-bootstrap-theme@npm:^1.21.3, @asu/unity-bootstrap-theme@workspace:packages/unity-bootstrap-theme":
+"@asu/unity-bootstrap-theme@npm:^1.0.0, @asu/unity-bootstrap-theme@npm:^1.20, @asu/unity-bootstrap-theme@npm:^1.21.3":
+  version: 1.39.7
+  resolution: "@asu/unity-bootstrap-theme@npm:1.39.7::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40asu%2Funity-bootstrap-theme%2F1.39.7%2F3cd9a99aa2e5a872bf867247a19e19cb6ee73fab"
+  peerDependencies:
+    "@fortawesome/fontawesome-free": ^5.15.3
+  checksum: 10c0/9eb5e02a944026c0206412778ecfaffb18ab9b566be957bb179f908a4268129823b4695104ab74a89da163d061694d07140910dd2075852da96052f69edc77f2
+  languageName: node
+  linkType: hard
+
+"@asu/unity-bootstrap-theme@workspace:packages/unity-bootstrap-theme":
   version: 0.0.0-use.local
   resolution: "@asu/unity-bootstrap-theme@workspace:packages/unity-bootstrap-theme"
   dependencies:
@@ -482,10 +491,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@asu/unity-react-core@npm:^1.0.0, @asu/unity-react-core@workspace:packages/unity-react-core":
+"@asu/unity-react-core@npm:^1.0.0":
+  version: 1.11.4
+  resolution: "@asu/unity-react-core@npm:1.11.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40asu%2Funity-react-core%2F1.11.4%2Fb75273d3986c565d7ac8fb20de6659accd130f3d"
+  dependencies:
+    "@glidejs/glide": "npm:^3.6.0"
+    react-share: "npm:^5.3"
+  peerDependencies:
+    "@asu/unity-bootstrap-theme": ^1.21.3
+    "@fortawesome/fontawesome-free": ^5.15.3
+    react: ^19.0.0
+    react-dom: ^19.0.0
+    react-router-dom: ">= 5.2.0 < 7"
+  checksum: 10c0/0116ad0df26c1ff7f003e8e0134dba074390428d1a23469f946316b635955c1c8f35a34adcb74b27f8721960c14de5176939f1a8587aa262f41b55825f2d9ca4
+  languageName: node
+  linkType: hard
+
+"@asu/unity-react-core@workspace:packages/unity-react-core":
   version: 0.0.0-use.local
   resolution: "@asu/unity-react-core@workspace:packages/unity-react-core"
   dependencies:
+    "@asu/component-header-footer": "npm:*"
     "@asu/shared": "npm:*"
     "@asu/unity-bootstrap-theme": "npm:^1.21.3"
     "@babel/cli": "npm:^7.19.3"