diff --git a/.changeset/underline-nav-css-overflow.md b/.changeset/underline-nav-css-overflow.md
new file mode 100644
index 00000000000..e504c01bcc1
--- /dev/null
+++ b/.changeset/underline-nav-css-overflow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Refactors `UnderlineNav` overflow handling to use CSS-based overflow detection instead of JavaScript width measurements, eliminating layout shift (CLS) issues and improving performance. The overflow menu is now implemented with `ActionMenu`, and item registration uses a descendant registry instead of the `React.Children` API. Consumer-facing changes: items can now be wrapped in fragments or wrapper components; the current item may appear in the overflow menu when the viewport is narrow; and the overflow menu button is right-aligned.
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Truncated-Inline-Tooltip-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Truncated-Inline-Tooltip-light-colorblind-linux.png
new file mode 100644
index 00000000000..4bdd0e08ff8
Binary files /dev/null and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Truncated-Inline-Tooltip-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png
index e589866ea35..16ea1c565f6 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png
index d69b59ca7ae..89d82431694 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png
index c7c899b5533..c45c6c8ac1c 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png
index 21833ab702e..4225d2f622a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png
index d11a4868033..874a71d387a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png
index fa717e00333..824c09d1e09 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png
index aa4f37d5f75..2cf52e1852f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png
index 97e2b3a606e..aa38cbe11bd 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png
index ad0b25f7e0c..055c0cb580d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png
index e589866ea35..16ea1c565f6 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png
index d69b59ca7ae..89d82431694 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png
index c7c899b5533..c45c6c8ac1c 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png
index 21833ab702e..4225d2f622a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png
index d11a4868033..874a71d387a 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png
index fa717e00333..824c09d1e09 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png
index aa4f37d5f75..2cf52e1852f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png
index 97e2b3a606e..aa38cbe11bd 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png
index ad0b25f7e0c..055c0cb580d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-Pull-Request-Page-on-Narrow-Viewport-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png
index 6a9401bfb94..6766b0968e7 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-dimmed-linux.png
index 32587748744..a05c65f94cd 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png
index 905d37d9806..b37c5108bd8 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png
index 6a9401bfb94..6766b0968e7 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png
index 6a9401bfb94..6766b0968e7 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png
index bbafa321f46..d747f7ca1f0 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png
index bc5e542bf19..a3b4e158d7d 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png
index bbafa321f46..d747f7ca1f0 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png
index bbafa321f46..d747f7ca1f0 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Navigation-Slot-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png
index 8c779dd12e6..498f5f491bd 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png
index 3afb13ddaaa..ea2e53dd639 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png
index 8eebf42a9d0..d8c0954d423 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png
index 2b96048e01b..2d754e8ff68 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png
index d3e94e34b82..ef1ed7c56ba 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png
index 7703d73cb11..9afbe9c217f 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png
index 2d663b1fdab..6f2064a876b 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png
index e3a9dc55c58..db4baddea07 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-linux.png differ
diff --git a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png
index 79f7d3a7593..63d67786a50 100644
Binary files a/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png and b/.playwright/snapshots/components/PageHeader.test.ts-snapshots/PageHeader-With-Page-Layout-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png
index 3f45ba9d118..96f026220d3 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png
index 1679a7ea997..13cad0e73b5 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png
index d00678cdc32..7fabfb3c1f6 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png
index 3d00e606162..2ce3219c9c8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png
index 3f45ba9d118..2ce3219c9c8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png
index edc243ff0dc..d9fb291e676 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png
index 8b6ef7c93b7..e53b8320276 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png
index 51d52ed6bf1..379101baa28 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png
index 51d52ed6bf1..7a620cfe415 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-colorblind-linux.png
index 54ee955b959..0eb4a78a63b 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-dimmed-linux.png
index f0638cda9c9..ddf0af94002 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-high-contrast-linux.png
index 63ce28c7fac..cdd4d4bae04 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-linux.png
index 54ee955b959..0eb4a78a63b 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-tritanopia-linux.png
index 54ee955b959..0eb4a78a63b 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-colorblind-linux.png
index 6e0d04fd4b6..cf55e476475 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-high-contrast-linux.png
index c07b7ef9466..f6548a07562 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-linux.png
index 6e0d04fd4b6..cf55e476475 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-tritanopia-linux.png
index 6e0d04fd4b6..cf55e476475 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png
index 35a9211ab59..f9d2caa4ba4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png
index 0ec3d6bb868..c38f320a1f6 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png
index 1dac0d5ba24..4eaf0526678 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png
index 35a9211ab59..f9d2caa4ba4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png
index 35a9211ab59..f9d2caa4ba4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png
index a2cdcbf8c82..c78f15e5bad 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png
index b296726793b..a0ad6849655 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png
index a2cdcbf8c82..c78f15e5bad 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png
index a2cdcbf8c82..c78f15e5bad 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png
index c618454303a..cb71c14c6d8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-dimmed-linux.png
index 287929eec2b..ff1de97cc1b 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png
index 345f4c82741..28dfbc5caed 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png
index f7c4daa4f02..2190a76099a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png
index 5bdc1f2e6ff..05bba8d8b8c 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png
index f03de9e599e..31446f5a9bd 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png
index 360d88c481a..6092b58c95a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png
index f862bc5495c..eb1f48ef413 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png
index f530061ac87..a02228a5b39 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Pull-Request-Page-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 77df9587a7b..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-43cdc-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-a8f67-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-a8f67-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 35453dd4e4e..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-a8f67-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Hi-a8f67-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-1-linux.png
index 35453dd4e4e..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png
index 6e9e702bbc7..5d53b9920e1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png
index 2e5345075a1..62a9c031331 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png
index 76c1fc9989d..6f4b1a6383c 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-09dc1-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-09dc1-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 46b761402c8..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-09dc1-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-09dc1-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-4ae94-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-4ae94-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 5aa62bb4d54..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-4ae94-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-co-4ae94-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-1-linux.png
index 5aa62bb4d54..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png
index 728ad9254f1..5d53b9920e1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png
index 45838aaa28f..ae392617136 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png
index a3c79852ae3..6f4b1a6383c 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-colorblind-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-0885b-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-0885b-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index d3ead423e00..30a142133be 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-0885b-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-0885b-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-b98f2-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-b98f2-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index b9cd28632a2..30a142133be 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-b98f2-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-di-b98f2-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-1-linux.png
index d3ead423e00..30a142133be 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png
index f220a0f1b0e..bcdf453d439 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png
index 4c7a62a528d..cd98a699c0a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png
index 56fb325b6aa..7a6142d4d3f 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-277e8-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-277e8-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 735fa4e4db6..9e1ba3d87ec 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-277e8-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-277e8-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-75912-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-75912-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 28a73f11563..9e1ba3d87ec 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-75912-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-hi-75912-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-1-linux.png
index 28a73f11563..9e1ba3d87ec 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png
index a27baf3ea3b..1bdac881d39 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png
index 4eeeb3643d5..71d3168664b 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png
index 890f6e034fa..7861370c3b3 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-3b2b3-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-3b2b3-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 5aa62bb4d54..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-3b2b3-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-3b2b3-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-488ac-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-488ac-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 46b761402c8..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-488ac-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tr-488ac-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-1-linux.png
index 5aa62bb4d54..5b68a26b170 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png
index 728ad9254f1..5d53b9920e1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png
index 0caf8f92596..a2ea7e72074 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png
index 3041be8aaf9..6f4b1a6383c 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-38ba9-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-38ba9-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 626b6e9365e..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-38ba9-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-38ba9-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-42961-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-42961-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 18a91e75b21..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-42961-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-H-42961-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-1-linux.png
index 18a91e75b21..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png
index 6b23a5e9f34..ba992a82f05 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png
index 969f497dc2f..317a032e65d 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png
index bb7bfcdbff8..569e6460c61 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-5b01a-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-5b01a-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index e88f106526a..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-5b01a-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-5b01a-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-617fb-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-617fb-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index fc6b1e7a19b..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-617fb-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-c-617fb-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-1-linux.png
index fc6b1e7a19b..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png
index 776554276d7..ba992a82f05 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png
index f2c27af01b4..8c313c01b63 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png
index 95fb1dd3245..5d5feb48a03 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-colorblind-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-7fa44-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-7fa44-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index 89bc8e6c810..389f4d9cfc4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-7fa44-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-7fa44-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-9f6e1-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-9f6e1-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index 38b1fcb25bc..389f4d9cfc4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-9f6e1-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-h-9f6e1-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-1-linux.png
index 38b1fcb25bc..389f4d9cfc4 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png
index e964544be8b..8969c0877f8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png
index facf4c48062..2a57e93e3f5 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png
index 7176565d771..644f16371c6 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-high-contrast-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-c1290-t-enough-space-to-display-all-list-items-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-c1290-t-enough-space-to-display-all-list-items-vrt-1-linux.png
index fc6b1e7a19b..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-c1290-t-enough-space-to-display-all-list-items-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-c1290-t-enough-space-to-display-all-list-items-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-fd45e-t-enough-space-to-display-all-list-items-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-fd45e-t-enough-space-to-display-all-list-items-vrt-2-linux.png
index e88f106526a..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-fd45e-t-enough-space-to-display-all-list-items-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-t-fd45e-t-enough-space-to-display-all-list-items-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-1-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-1-linux.png
index fc6b1e7a19b..ff9b5825521 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-1-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-1-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png
index 776554276d7..ba992a82f05 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-2-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png
index 801591f2d90..69d3fea3382 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png
index e4eca459c79..569e6460c61 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-4-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-colorblind-linux.png
index 6eec3952cae..868fb58c57a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-dimmed-linux.png
index a3bf85b538f..19ef3098f15 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-high-contrast-linux.png
index cb8fee2ce9d..82cb747db14 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-linux.png
index 6eec3952cae..868fb58c57a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-tritanopia-linux.png
index 6eec3952cae..868fb58c57a 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-colorblind-linux.png
index ad0183d8078..22f241d7ecb 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-high-contrast-linux.png
index 72df85330ed..39ce8c52fc7 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-linux.png
index ad0183d8078..22f241d7ecb 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-tritanopia-linux.png
index ad0183d8078..22f241d7ecb 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-VariantFlush-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-colorblind-linux.png
index 9c033589973..7745c82ea15 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-dimmed-linux.png
index 340dc0c5c17..9fd72443d93 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-high-contrast-linux.png
index 937682e4bf5..198dcf78d6e 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-linux.png
index 9c033589973..7745c82ea15 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-tritanopia-linux.png
index 9c033589973..7745c82ea15 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-colorblind-linux.png
index 34d231078f9..8b0d1958b42 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-high-contrast-linux.png
index 6a85f679a31..4754eaa15b8 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-linux.png
index 34d231078f9..8b0d1958b42 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-tritanopia-linux.png
index 34d231078f9..8b0d1958b42 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Counter-Labels-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-colorblind-linux.png
index 92d8e164765..b19ede5e948 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-dimmed-linux.png
index 97f2bcce53b..7161a6a71e5 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-high-contrast-linux.png
index 698c1b4c227..a904c6b3547 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-linux.png
index 92d8e164765..b19ede5e948 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-tritanopia-linux.png
index 92d8e164765..b19ede5e948 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-colorblind-linux.png
index e80deef249f..63c9a9a4513 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-high-contrast-linux.png
index d1d1ab4d9da..20a9547c322 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-linux.png
index e80deef249f..63c9a9a4513 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-tritanopia-linux.png
index e80deef249f..63c9a9a4513 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-With-Icons-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png
index 6a8f78472df..7ab20cfd711 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png
index 118dcbf661d..32e303190e6 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png
index 41dec05cff9..3e7296b598c 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png
index 6a8f78472df..7ab20cfd711 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png
index 118dcbf661d..32e303190e6 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png
index 0f64d414ba4..26c340fd7b4 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png
index 41dec05cff9..3e7296b598c 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png
index d09b4e1dfaa..671a3728e47 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Dev-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png
index 775708b3e59..8fb3c968fdd 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png
index 44aa4f2f16a..59c750c4574 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png
index 5a59ac5cfc0..789a716f15f 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png
index 775708b3e59..8fb3c968fdd 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png
index 775708b3e59..8fb3c968fdd 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png
index 7ef2b17da04..26eb28687fb 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png
index 826116ad125..880a744ce57 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png
index 7ef2b17da04..26eb28687fb 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png
index 7ef2b17da04..26eb28687fb 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Labelled-By-External-Element-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png
index 664655cdbeb..6d0ad3bf353 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png
index bbe800e2cd9..6199bbccfa5 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png
index 874f31ad335..c726127dabc 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png
index 664655cdbeb..6d0ad3bf353 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png
index 664655cdbeb..6d0ad3bf353 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png
index da94fb6a6b1..254ab1962fe 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png
index 90ff2b16b82..5b3844fae3f 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png
index da94fb6a6b1..254ab1962fe 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png
index da94fb6a6b1..254ab1962fe 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-Selected-Tab-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png
index 715fc6a85c2..01dcd423dd2 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png
index 86f66a55db8..f719d9d39f7 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png
index 348a84e7c25..caadea25f94 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png
index 715fc6a85c2..01dcd423dd2 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png
index 715fc6a85c2..01dcd423dd2 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png
index 6d71e7f9136..1d60d56cad8 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png
index 6d9174fdbde..9bb47c8d609 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png
index 6d71e7f9136..1d60d56cad8 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png
index 6d71e7f9136..1d60d56cad8 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-In-Loading-State-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png
index 05310cda5a0..d0fb59f211b 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png
index f056d0e015a..0f4dd379128 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png
index 18c4cf8d547..519aef03074 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png
index 05310cda5a0..d0fb59f211b 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png
index 05310cda5a0..d0fb59f211b 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png
index e7b312f621f..b9176d05210 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png
index a1c517e9d03..f583b41153d 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png
index e7b312f621f..b9176d05210 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png
index e7b312f621f..b9176d05210 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Counters-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png
index d2f29609cfe..81c4a343ccf 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png
index 4395a9e4060..6689ce0c105 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png
index ca8b6ee887d..24f46ee257b 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png
index d2f29609cfe..81c4a343ccf 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png
index d2f29609cfe..81c4a343ccf 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png
index 57b1e931e9c..43cedd51c45 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png
index dec0112cb8d..06f45fc3218 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png
index 57b1e931e9c..43cedd51c45 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png
index 57b1e931e9c..43cedd51c45 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-Hidden-On-Narrow-Screen-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png
index 287c4c41139..b84f324e00e 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png
index 6d7cbeced8e..00bed13eb3b 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png
index b5d2251b3d1..58f705fea6d 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png
index 287c4c41139..b84f324e00e 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png
index 287c4c41139..b84f324e00e 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png
index eb6cf1622fe..8e18e9502ea 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png
index 9f579f54af2..aaf252a1faf 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png
index eb6cf1622fe..8e18e9502ea 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png
index eb6cf1622fe..8e18e9502ea 100644
Binary files a/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlinePanels.test.ts-snapshots/UnderlinePanels-With-Icons-light-tritanopia-linux.png differ
diff --git a/e2e/components/UnderlineNav.test.ts b/e2e/components/UnderlineNav.test.ts
index dc8546fa4cc..50c2d6cc474 100644
--- a/e2e/components/UnderlineNav.test.ts
+++ b/e2e/components/UnderlineNav.test.ts
@@ -199,19 +199,19 @@ test.describe('UnderlineNav', () => {
           })
 
           // Default state
-          // expect(await page.screenshot()).toMatchSnapshot()
+          expect(await page.screenshot()).toMatchSnapshot()
 
           await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768})
-          await page.locator('button', {hasText: 'More Repository Items'}).waitFor()
+          await page.locator('button', {hasText: 'More items'}).waitFor()
 
           // Resize
-          // expect(await page.screenshot()).toMatchSnapshot()
+          expect(await page.screenshot()).toMatchSnapshot()
 
-          await page.getByRole('button', {name: 'More Repository Items'}).click()
-          // expect(await page.screenshot()).toMatchSnapshot()
+          await page.getByRole('button', {name: 'More items'}).click()
+          expect(await page.screenshot()).toMatchSnapshot()
 
-          await page.getByRole('link', {name: 'Settings (10)'}).click()
-          // expect(await page.screenshot()).toMatchSnapshot()
+          await page.getByRole('menuitem', {name: 'Settings (10)'}).click()
+          expect(await page.screenshot()).toMatchSnapshot()
         })
 
         test('Hide icons when there is not enough space to display all list items @vrt', async ({page}) => {
@@ -223,61 +223,13 @@ test.describe('UnderlineNav', () => {
           })
 
           // Default State
-          // expect(await page.screenshot()).toMatchSnapshot()
+          expect(await page.screenshot()).toMatchSnapshot()
 
           // Resize
           await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768})
 
           // Icons should be hidden
-          // expect(await page.screenshot()).toMatchSnapshot()
-        })
-
-        test('Keep selected item visible @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-underlinenav-features--overflow-template',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await page.setViewportSize({width: viewports['primer.breakpoint.sm'], height: 768})
-
-          await page.locator('button', {hasText: 'More Repository Items'}).waitFor()
-          await page.getByRole('button', {name: 'More Repository Items'}).click()
-          await page.getByRole('link', {name: 'Settings (10)'}).click()
-
-          // State after selecting the second last item
-          // expect(await page.screenshot()).toMatchSnapshot()
-
-          // Resize
-          await page.setViewportSize({
-            width: 1100,
-            height: 480,
-          })
-          await page.locator('button', {hasText: 'More Repository Items'}).waitFor({
-            state: 'hidden',
-          })
-
-          // Current state
-          // expect(await page.screenshot()).toMatchSnapshot()
-
-          // Resize
-          await page.setViewportSize({
-            width: 800,
-            height: 480,
-          })
-          await page.locator('button', {hasText: 'More Repository Items'}).waitFor()
-
-          // Current state
-          // expect(await page.screenshot()).toMatchSnapshot()
-
-          // Resize
-          await page.setViewportSize({
-            width: 600,
-            height: 480,
-          })
-          await page.locator('button', {hasText: 'More Repository Items'}).waitFor()
-          // Current state
-          // expect(await page.screenshot()).toMatchSnapshot()
+          expect(await page.screenshot()).toMatchSnapshot()
         })
       })
     }
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx
index 6b35a2c739b..faee270b0fd 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.features.stories.tsx
@@ -77,11 +77,7 @@ const items: {navigation: string; icon: React.ReactElement; counter?: number | s
 export const OverflowTemplate = ({initialSelectedIndex = 1}: {initialSelectedIndex?: number}) => {
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(initialSelectedIndex)
   return (
-    <UnderlineNav
-      aria-label="Repository"
-      // @ts-ignore UnderlineNav does not take selectionVariant prop, but we need to pass it to the underlying ActionList so it doesn't show Selections.
-      selectionVariant={undefined}
-    >
+    <UnderlineNav aria-label="Repository">
       {items.map((item, index) => (
         <UnderlineNav.Item
           key={item.navigation}
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.interactions.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.interactions.stories.tsx
index 409737b58d3..942d92e1638 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.interactions.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.interactions.stories.tsx
@@ -110,7 +110,7 @@ SelectAMenuItem.play = async ({canvasElement}: {canvasElement: HTMLElement}) =>
 
   await delay(1000)
 
-  const moreBtn = canvas.getByRole('button', {name: 'More Repository items'})
+  const moreBtn = canvas.getByRole('button', {name: 'More items'})
   userEvent.hover(moreBtn)
 
   await delay()
@@ -131,35 +131,4 @@ SelectAMenuItem.play = async ({canvasElement}: {canvasElement: HTMLElement}) =>
   expect(lastListItem).toEqual(menuListItem)
 }
 
-const KeepSelectedItemVisible = () => {
-  return <OverflowTemplate initialSelectedIndex={7} />
-}
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-KeepSelectedItemVisible.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
-  const canvas = within(canvasElement)
-  // await delay(2000)
-  const selectedItem = canvas.getByRole('link', {name: 'Settings (10)'})
-  expect(selectedItem).toHaveAttribute('aria-current', 'page')
-  // change viewport
-  canvasElement.style.width = '900px'
-  await delay(1000)
-  expect(selectedItem).toHaveAttribute('aria-current', 'page')
-  canvasElement.style.width = '800px'
-  await delay(1000)
-  expect(selectedItem).toHaveAttribute('aria-current', 'page')
-  canvasElement.style.width = '700px'
-  await delay(1000)
-  expect(selectedItem).toHaveAttribute('aria-current', 'page')
-  canvasElement.style.width = '600px'
-  await delay(1000)
-  expect(selectedItem).toHaveAttribute('aria-current', 'page')
-  canvasElement.style.width = '500px'
-  await delay(1000)
-  const lastListItem = canvas.getByRole('list').children[2].children[0]
-  const menuListItem = canvas.getByRole('link', {name: 'Settings (10)'})
-  // expect Settings be the last element on the list.
-  expect(lastListItem).toEqual(menuListItem)
-}
-
-export {KeyboardNavigation, SelectAMenuItem, KeepSelectedItemVisible}
+export {KeyboardNavigation, SelectAMenuItem}
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.module.css b/packages/react/src/UnderlineNav/UnderlineNav.module.css
index d905aff3fcf..a3f7a5bc90f 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.module.css
+++ b/packages/react/src/UnderlineNav/UnderlineNav.module.css
@@ -1,10 +1,62 @@
-.MenuItemContent {
+.UnderlineWrapper {
+  /* Progressive enhancement: Detect overflow using scroll-based animations.
+  The idiomatic way would be a scroll-state container query but browser support
+  is slightly better for animations. */
+  animation: detect-overflow linear;
+  animation-timeline: scroll(self block);
+
+  &[data-hide-icons='true'] {
+    --UnderlineNav_icons-display: none;
+  }
+
+  &[data-has-overflow='true'] {
+    --UnderlineNav_moreButton-visibility: visible;
+  }
+}
+
+@keyframes detect-overflow {
+  0%,
+  100% {
+    --UnderlineNav_moreButton-visibility: visible;
+    --UnderlineNav_icons-display: none;
+  }
+}
+
+.ItemsList [data-component='icon'] {
+  display: var(--UnderlineNav_icons-display, inline);
+}
+
+.MoreButtonContainer {
   display: flex;
+  visibility: var(--UnderlineNav_moreButton-visibility, hidden);
   align-items: center;
-  justify-content: space-between;
 }
 
-/* More button styles migrated from styles.ts (was moreBtnStyles) */
+.OverflowMenuItem [aria-current] {
+  position: relative;
+
+  .OverflowMenuItemLabel {
+    font-weight: var(--base-text-weight-semibold);
+  }
+
+  &::after {
+    content: '';
+    width: var(--base-size-2);
+    position: absolute;
+    inset: var(--base-size-2) auto var(--base-size-2) 0;
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--underlineNav-borderColor-active);
+  }
+}
+
+.MoreButtonDivider {
+  display: inline-block;
+  border-left: var(--borderWidth-default) solid var(--borderColor-muted);
+  width: 0;
+  margin-inline: var(--base-size-4);
+  height: var(--base-size-24);
+}
+
 .MoreButton {
   margin: 0; /* reset Safari extra margin */
   border: 0;
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
index 6039ec2ad8a..3d7ec501109 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.test.tsx
@@ -1,6 +1,6 @@
 import {describe, expect, it, vi} from 'vitest'
 import type React from 'react'
-import {render, screen} from '@testing-library/react'
+import {render, screen, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {
   CodeIcon,
@@ -16,6 +16,7 @@ import {UnderlineNav} from '.'
 import {implementsClassName} from '../utils/testing'
 import classes from '../internal/components/UnderlineTabbedInterface.module.css'
 import {clsx} from 'clsx'
+import {page} from 'vitest/browser'
 
 const ResponsiveUnderlineNav = ({
   selectedItemText = 'Code',
@@ -78,7 +79,8 @@ describe('UnderlineNav', () => {
   it('renders icons correctly', () => {
     const {getByRole} = render(<ResponsiveUnderlineNav />)
     const nav = getByRole('navigation')
-    expect(nav.getElementsByTagName('svg').length).toEqual(7)
+    const list = within(nav).getByRole('list')
+    expect(list.getElementsByTagName('svg').length).toEqual(7)
   })
 
   it('fires onSelect on click', async () => {
@@ -141,9 +143,10 @@ describe('UnderlineNav', () => {
     expect(counter.textContent).toBe('\u00A0(120)')
   })
 
-  it('respects loadingCounters prop', () => {
+  it('respects loadingCounters prop', async () => {
+    await page.viewport(1000, 500)
     const {getByRole} = render(<ResponsiveUnderlineNav loadingCounters={true} />)
-    const item = getByRole('link', {name: 'Actions'})
+    const item = getByRole('link', {name: 'Actions', hidden: true})
     const loadingCounter = item.getElementsByTagName('span')[2]
     expect(loadingCounter.className).toContain('LoadingCounter')
     expect(loadingCounter.textContent).toBe('')
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 14c52ee9683..d33e2b04c9c 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -1,22 +1,16 @@
 import type {RefObject} from 'react'
-import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react'
-import {UnderlineNavContext} from './UnderlineNavContext'
-import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
-import {useResizeObserver} from '../hooks/useResizeObserver'
-import type {ChildWidthArray, ResponsiveProps, ChildSize} from './types'
+import React, {forwardRef, useEffect, useRef, useState} from 'react'
 import VisuallyHidden from '../_VisuallyHidden'
-import {dividerStyles, menuItemStyles, baseMenuMinWidth} from './styles'
-import {UnderlineItemList, UnderlineWrapper, LoadingCounter, GAP} from '../internal/components/UnderlineTabbedInterface'
-import {Button} from '../Button'
-import {TriangleDownIcon} from '@primer/octicons-react'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
-import {useId} from '../hooks/useId'
 import {ActionList} from '../ActionList'
+import {ActionMenu} from '../ActionMenu'
 import CounterLabel from '../CounterLabel'
+import {LoadingCounter, UnderlineItemList, UnderlineWrapper} from '../internal/components/UnderlineTabbedInterface'
 import {invariant} from '../utils/invariant'
 import classes from './UnderlineNav.module.css'
-import {getAnchoredPosition} from '@primer/behaviors'
+import {UnderlineNavContext} from './UnderlineNavContext'
+import {UnderlineNavItemsRegistry, type UnderlineNavItemProps} from './UnderlineNavItem'
+import {SkeletonText} from '../SkeletonText'
+import {clsx} from 'clsx'
 
 export type UnderlineNavProps = {
   children: React.ReactNode
@@ -34,115 +28,12 @@ export type UnderlineNavProps = {
    */
   variant?: 'inset' | 'flush'
 }
-// When page is loaded, we don't have ref for the more button as it is not on the DOM yet.
-// However, we need to calculate number of possible items when the more button present as well. So using the width of the more button as a constant.
-export const MORE_BTN_WIDTH = 86
-// The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
-const MORE_BTN_HEIGHT = 45
 
-const overflowEffect = (
-  navWidth: number,
-  moreMenuWidth: number,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  childArray: Array<React.ReactElement<any>>,
-  childWidthArray: ChildWidthArray,
-  noIconChildWidthArray: ChildWidthArray,
-  updateListAndMenu: (props: ResponsiveProps, iconsVisible: boolean, overflowMeasured: boolean) => void,
-) => {
-  let iconsVisible = true
-  if (childWidthArray.length === 0) {
-    updateListAndMenu({items: childArray, menuItems: []}, iconsVisible, false)
-    return
-  }
-  const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth)
-  const numberOfItemsWithoutIconPossible = calculatePossibleItems(noIconChildWidthArray, navWidth)
-  // We need to take more menu width into account when calculating the number of items possible
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(
-    noIconChildWidthArray,
-    navWidth,
-    moreMenuWidth || MORE_BTN_WIDTH,
-  )
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const items: Array<React.ReactElement<any>> = []
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const menuItems: Array<React.ReactElement<any>> = []
-
-  // First, we check if we can fit all the items with their icons
-  if (childArray.length <= numberOfItemsPossible) {
-    items.push(...childArray)
-  } else if (childArray.length <= numberOfItemsWithoutIconPossible) {
-    // if we can't fit all the items with their icons, we check if we can fit all the items without their icons
-    iconsVisible = false
-    items.push(...childArray)
-  } else {
-    // if we can't fit all the items without their icons, we keep the icons hidden and show the ones that doesn't fit into the list in the overflow menu
-    iconsVisible = false
-
-    /* Below is an accessibility requirement. Never show only one item in the overflow menu.
-     * If there is only one item left to display in the overflow menu according to the calculation,
-     * we need to pull another item from the list into the overflow menu.
-     */
-    const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu
-    const numberOfListItems =
-      numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu
-    for (const [index, child] of childArray.entries()) {
-      if (index < numberOfListItems) {
-        items.push(child)
-      } else {
-        const ariaCurrent = child.props['aria-current']
-        const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false'
-        // We need to make sure to keep the selected item always visible.
-        // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
-        if (isCurrent && numberOfListItems > 0) {
-          // If selected item couldn't make in to the list, we swap it with the last item in the list.
-          const indexToReplaceAt = numberOfListItems - 1 // because we are replacing the last item in the list
-          // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
-          const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0]
-          menuItems.push(propsectiveAction)
-        } else {
-          menuItems.push(child)
-        }
-      }
-    }
-  }
-  updateListAndMenu({items, menuItems}, iconsVisible, true)
-}
-
-export const getValidChildren = (children: React.ReactNode) => {
+const getValidChildren = (children: React.ReactNode) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement<any>[]
 }
 
-const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: number, moreMenuWidth = 0) => {
-  const widthToFit = navWidth - moreMenuWidth
-  let breakpoint = childWidthArray.length // assume all items will fit
-  let sumsOfChildWidth = 0
-  for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth = sumsOfChildWidth + childWidth.width + GAP
-    if (sumsOfChildWidth > widthToFit) {
-      breakpoint = index
-      break
-    } else {
-      continue
-    }
-  }
-  return breakpoint
-}
-
-// Inline styles converted from baseMenuStyles for use as CSSProperties
-const baseMenuInlineStyles: React.CSSProperties = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-  borderRadius: 12,
-  background: 'var(--overlay-bgColor)',
-  listStyle: 'none',
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: 0,
-}
-
 export const UnderlineNav = forwardRef(
   (
     {
@@ -158,39 +49,22 @@ export const UnderlineNav = forwardRef(
     const backupRef = useRef<HTMLElement>(null)
     const navRef = (forwardedRef ?? backupRef) as RefObject<HTMLElement>
     const listRef = useRef<HTMLUListElement>(null)
-    const moreMenuRef = useRef<HTMLLIElement>(null)
-    const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
-    const containerRef = React.useRef<HTMLUListElement>(null)
-    const disclosureWidgetId = useId()
-
-    const [isWidgetOpen, setIsWidgetOpen] = useState(false)
-    const [iconsVisible, setIconsVisible] = useState<boolean>(true)
-    const [childWidthArray, setChildWidthArray] = useState<ChildWidthArray>([])
-    const [noIconChildWidthArray, setNoIconChildWidthArray] = useState<ChildWidthArray>([])
-    // Track whether the initial overflow calculation is complete to prevent CLS
-    const [isOverflowMeasured, setIsOverflowMeasured] = useState(false)
 
-    const validChildren = getValidChildren(children)
+    /** Tracks whether any item has ever overflowed for the lifecycle of this component. Used to prevent flickering. */
+    const [hasEverOverflowed, setHasOverflowed] = useState(false)
 
-    // Responsive props object manages which items are in the list and which items are in the menu.
-    const [responsiveProps, setResponsiveProps] = useState<ResponsiveProps>({
-      items: validChildren,
-      menuItems: [],
-    })
+    const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState()
 
-    // Make sure to have the fresh props data for list items when children are changed (keeping aria-current up-to-date)
-    const listItems = responsiveProps.items.map(item => {
-      return validChildren.find(child => child.key === item.key) ?? item
-    })
+    const menuItems = Array.from(registeredItems?.entries() ?? []).filter(
+      (entry): entry is [string, UnderlineNavItemProps] => entry[1] !== null,
+    )
 
-    // Make sure to have the fresh props data for menu items when children are changed (keeping aria-current up-to-date)
-    const menuItems = responsiveProps.menuItems.map(menuItem => {
-      return validChildren.find(child => child.key === menuItem.key) ?? menuItem
-    })
-    // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
-    const onlyMenuVisible = responsiveProps.items.length === 0
+    const isOverflowing = menuItems.length > 0
+    if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true)
 
     if (__DEV__) {
+      const validChildren = getValidChildren(children)
+
       // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useEffect(() => {
@@ -203,244 +77,81 @@ export const UnderlineNav = forwardRef(
       })
     }
 
-    function getItemsWidth(itemText: string): number {
-      return noIconChildWidthArray.find(item => item.text === itemText)?.width ?? 0
-    }
-
-    const swapMenuItemWithListItem = (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      prospectiveListItem: React.ReactElement<any>,
-      indexOfProspectiveListItem: number,
-      event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
-      callback: (props: ResponsiveProps, displayIcons: boolean, overflowMeasured: boolean) => void,
-    ) => {
-      // get the selected menu item's width
-      const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children)
-      // Check if there is any empty space on the right side of the list
-      const availableSpace =
-        (navRef.current?.getBoundingClientRect().width ?? 0) - (listRef.current?.getBoundingClientRect().width ?? 0)
-
-      // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
-      // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
-      const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace)
-      const indexToSliceAt = responsiveProps.items.length - 1 - index
-      // Form the new list of items
-      const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt)
-      const updatedItemList = [...itemsLeftInList, prospectiveListItem]
-      // Form the new menu items
-      const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt)
-      const updatedMenuItems = [...menuItems]
-      // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
-      updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu)
-      callback({items: updatedItemList, menuItems: updatedMenuItems}, false, true)
-    }
-    // How many items do we need to pull in to the menu to make room for the selected menu item.
-    function getBreakpointForItemSwapping(widthToFitIntoList: number, availableSpace: number) {
-      let widthToSwap = 0
-      let breakpoint = 0
-      for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
-        widthToSwap += getItemsWidth(item.props.children)
-        if (widthToFitIntoList < widthToSwap + availableSpace) {
-          breakpoint = index
-          break
-        }
-      }
-      return breakpoint
-    }
-
-    const updateListAndMenu = useCallback(
-      (props: ResponsiveProps, displayIcons: boolean, overflowMeasured: boolean) => {
-        setResponsiveProps(props)
-        setIconsVisible(displayIcons)
-
-        if (overflowMeasured) {
-          setIsOverflowMeasured(true)
-        }
-      },
-      [],
-    )
-    const setChildrenWidth = useCallback((size: ChildSize) => {
-      setChildWidthArray(arr => {
-        const newArr = [...arr, size]
-        return newArr
-      })
-    }, [])
-
-    const setNoIconChildrenWidth = useCallback((size: ChildSize) => {
-      setNoIconChildWidthArray(arr => {
-        const newArr = [...arr, size]
-        return newArr
-      })
-    }, [])
-
-    const closeOverlay = React.useCallback(() => {
-      setIsWidgetOpen(false)
-    }, [setIsWidgetOpen])
-
-    const focusOnMoreMenuBtn = React.useCallback(() => {
-      moreMenuBtnRef.current?.focus()
-    }, [])
-
-    const onAnchorClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-      if (event.defaultPrevented || event.button !== 0) {
-        return
-      }
-      setIsWidgetOpen(isWidgetOpen => !isWidgetOpen)
-    }, [])
-
-    useOnEscapePress(
-      (event: KeyboardEvent) => {
-        if (isWidgetOpen) {
-          event.preventDefault()
-          closeOverlay()
-          focusOnMoreMenuBtn()
-        }
-      },
-      [isWidgetOpen],
-    )
-
-    useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
-
-    useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
-      const navWidth = resizeObserverEntries[0].contentRect.width
-      const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
-      navWidth !== 0 &&
-        overflowEffect(
-          navWidth,
-          moreMenuWidth,
-          validChildren,
-          childWidthArray,
-          noIconChildWidthArray,
-          updateListAndMenu,
-        )
-    }, navRef as RefObject<HTMLElement>)
-
-    // Compute menuInlineStyles if needed
-    let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles}
-    if (containerRef.current && listRef.current) {
-      const {left} = getAnchoredPosition(containerRef.current, listRef.current, {
-        align: 'start',
-        side: 'outside-bottom',
-      })
-
-      menuInlineStyles = {
-        ...baseMenuInlineStyles,
-        right: undefined,
-        left,
-      }
-    }
-
     return (
       <UnderlineNavContext.Provider
         value={{
-          setChildrenWidth,
-          setNoIconChildrenWidth,
           loadingCounters,
-          iconsVisible,
         }}
       >
         {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
         <UnderlineWrapper
           as={as}
           aria-label={ariaLabel}
-          className={className}
+          className={clsx(classes.UnderlineWrapper, className)}
           ref={navRef}
           data-variant={variant}
-          data-overflow-measured={isOverflowMeasured ? 'true' : 'false'}
+          data-overflow-mode="wrap"
+          // Force icons to stay hidden, avoiding flickering as icons create/remove overflow
+          data-hide-icons={hasEverOverflowed ? 'true' : 'false'}
+          // Ensure button is shown (after initial render) on browsers that don't support scroll-driven animations
+          data-has-overflow={isOverflowing ? 'true' : 'false'}
         >
-          <UnderlineItemList ref={listRef} role="list">
-            {listItems}
-            {menuItems.length > 0 && (
-              <li ref={moreMenuRef} style={{display: 'flex', alignItems: 'center', height: `${MORE_BTN_HEIGHT}px`}}>
-                {!onlyMenuVisible && <div style={dividerStyles}></div>}
-                <Button
-                  ref={moreMenuBtnRef}
-                  className={classes.MoreButton}
-                  aria-controls={disclosureWidgetId}
-                  aria-expanded={isWidgetOpen}
-                  onClick={onAnchorClick}
-                  trailingAction={TriangleDownIcon}
-                >
-                  <span>
-                    {onlyMenuVisible ? (
-                      <>
-                        <VisuallyHidden as="span">{`${ariaLabel}`}&nbsp;</VisuallyHidden>Menu
-                      </>
-                    ) : (
-                      <>
-                        More<VisuallyHidden as="span">&nbsp;{`${ariaLabel} items`}</VisuallyHidden>
-                      </>
-                    )}
-                  </span>
-                </Button>
-                <ActionList
-                  selectionVariant="single"
-                  ref={containerRef}
-                  id={disclosureWidgetId}
-                  style={{
-                    ...(listRef.current?.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth
-                      ? baseMenuInlineStyles
-                      : menuInlineStyles),
-                    display: isWidgetOpen ? 'block' : 'none',
-                  }}
-                >
-                  {menuItems.map((menuItem, index) => {
-                    const {
-                      children: menuItemChildren,
-                      counter,
-                      'aria-current': ariaCurrent,
-                      onSelect,
-                      ...menuItemProps
-                    } = menuItem.props
+          <UnderlineItemList ref={listRef} role="list" className={classes.ItemsList}>
+            <UnderlineNavItemsRegistry.Provider setRegistry={setRegisteredItems}>
+              {children}
+            </UnderlineNavItemsRegistry.Provider>
+          </UnderlineItemList>
 
-                    // This logic is used to pop the selected item out of the menu and into the list when the navigation is control externally
-                    if (Boolean(ariaCurrent) && ariaCurrent !== 'false') {
-                      const event = new MouseEvent('click')
-                      !onlyMenuVisible &&
-                        swapMenuItemWithListItem(
-                          menuItem,
-                          index,
-                          // @ts-ignore - not a big deal because it is internally creating an event but ask help
-                          event as React.MouseEvent<HTMLAnchorElement>,
-                          updateListAndMenu,
-                        )
-                    }
+          <div className={classes.MoreButtonContainer}>
+            <div className={classes.MoreButtonDivider} />
+
+            <ActionMenu>
+              <ActionMenu.Button className={classes.MoreButton} data-component="overflow-menu-button">
+                <span>
+                  More<VisuallyHidden as="span"> items</VisuallyHidden>
+                </span>
+              </ActionMenu.Button>
+
+              <ActionMenu.Overlay>
+                <ActionList>
+                  {registeredItems === undefined ? (
+                    <ActionList.Item>
+                      <SkeletonText />
+                    </ActionList.Item>
+                  ) : (
+                    menuItems.map(([key, allProps]) => {
+                      const {children: menuItemChildren, counter, onSelect, ...menuItemProps} = allProps
+
+                      return (
+                        <ActionList.LinkItem
+                          key={key}
+                          className={classes.OverflowMenuItem}
+                          onClick={event => onSelect?.(event)}
+                          {...(menuItemProps as Omit<typeof menuItemProps, 'as'>)}
+                        >
+                          <span className={classes.OverflowMenuItemLabel}>{menuItemChildren}</span>
 
-                    return (
-                      <ActionList.LinkItem
-                        key={menuItemChildren}
-                        style={menuItemStyles}
-                        onClick={(
-                          event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>,
-                        ) => {
-                          // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
-                          !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu)
-                          closeOverlay()
-                          focusOnMoreMenuBtn()
-                          // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
-                          typeof onSelect === 'function' && onSelect(event)
-                        }}
-                        {...menuItemProps}
-                      >
-                        <span className={classes.MenuItemContent}>
-                          {menuItemChildren}
                           {loadingCounters ? (
-                            <LoadingCounter />
+                            <ActionList.TrailingVisual>
+                              <LoadingCounter />
+                            </ActionList.TrailingVisual>
                           ) : (
                             counter !== undefined && (
-                              <span data-component="counter">
-                                <CounterLabel>{counter}</CounterLabel>
-                              </span>
+                              <ActionList.TrailingVisual>
+                                <span data-component="counter">
+                                  <CounterLabel>{counter}</CounterLabel>
+                                </span>
+                              </ActionList.TrailingVisual>
                             )
                           )}
-                        </span>
-                      </ActionList.LinkItem>
-                    )
-                  })}
+                        </ActionList.LinkItem>
+                      )
+                    })
+                  )}
                 </ActionList>
-              </li>
-            )}
-          </UnderlineItemList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </div>
         </UnderlineWrapper>
       </UnderlineNavContext.Provider>
     )
diff --git a/packages/react/src/UnderlineNav/UnderlineNavContext.tsx b/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
index f276771efac..610d18e8b38 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavContext.tsx
@@ -1,14 +1,7 @@
-import type React from 'react'
 import {createContext} from 'react'
 
 export const UnderlineNavContext = createContext<{
-  setChildrenWidth: React.Dispatch<{text: string; width: number}>
-  setNoIconChildrenWidth: React.Dispatch<{text: string; width: number}>
   loadingCounters: boolean
-  iconsVisible: boolean
 }>({
-  setChildrenWidth: () => null,
-  setNoIconChildrenWidth: () => null,
   loadingCounters: false,
-  iconsVisible: true,
 })
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.module.css b/packages/react/src/UnderlineNav/UnderlineNavItem.module.css
index c1e75b06204..3cc20b69036 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.module.css
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.module.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow: hidden;
 }
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 3341f677e11..abd5790dab1 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -1,11 +1,11 @@
-import type {MutableRefObject, RefObject} from 'react'
-import React, {forwardRef, useRef, useContext} from 'react'
+import React, {forwardRef, useRef, useContext, useCallback, useSyncExternalStore} from 'react'
 import type {IconProps} from '@primer/octicons-react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {UnderlineNavContext} from './UnderlineNavContext'
-import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import {UnderlineItem} from '../internal/components/UnderlineTabbedInterface'
 import classes from './UnderlineNavItem.module.css'
+import {createDescendantRegistry} from '../utils/descendant-registry'
+import {useRefObjectAsForwardedRef} from '../hooks'
 
 // adopted from React.AnchorHTMLAttributes
 export type LinkProps = {
@@ -59,86 +59,85 @@ export type UnderlineNavItemProps = {
   counter?: number | string
 } & LinkProps
 
-export const UnderlineNavItem = forwardRef(
-  (
-    {
-      as: Component = 'a',
-      href = '#',
-      children,
-      counter,
-      onSelect,
-      'aria-current': ariaCurrent,
-      icon: Icon,
-      leadingVisual,
-      ...props
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+export const UnderlineNavItemsRegistry = createDescendantRegistry<UnderlineNavItemProps | null>()
+
+export const UnderlineNavItem = forwardRef((allProps, forwardedRef) => {
+  const {
+    as: Component = 'a',
+    href = '#',
+    children,
+    counter,
+    onSelect,
+    'aria-current': ariaCurrent,
+    icon: Icon,
+    leadingVisual,
+    ...props
+  } = allProps
+
+  const ref = useRef<HTMLAnchorElement>(null)
+  useRefObjectAsForwardedRef(forwardedRef, ref)
+
+  const {loadingCounters} = useContext(UnderlineNavContext)
+
+  const isOverflowing = useSyncExternalStore(
+    useCallback(
+      onChange => {
+        const observer = new IntersectionObserver(() => onChange(), {
+          threshold: 1,
+        })
+        if (ref.current) observer.observe(ref.current)
+        return () => observer.disconnect()
+      },
+      [ref],
+    ),
+    // Note: the IntersectionObserver is just being used as a trigger to re-check
+    // `offsetTop > 0`; this is fast and simpler than checking visibility from
+    // the observed entry. When an item wraps, it will move to the next row which
+    // increases its `offsetTop`
+    () => (ref.current ? ref.current.offsetTop > 0 : false),
+    () => false,
+  )
+
+  UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null)
+
+  const keyDownHandler = React.useCallback(
+    (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+      if ((event.key === ' ' || event.key === 'Enter') && !event.defaultPrevented && typeof onSelect === 'function') {
+        onSelect(event)
+      }
     },
-    forwardedRef,
-  ) => {
-    const backupRef = useRef<HTMLElement>(null)
-    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
-    const {setChildrenWidth, setNoIconChildrenWidth, loadingCounters, iconsVisible} = useContext(UnderlineNavContext)
-
-    useLayoutEffect(() => {
-      if (ref.current) {
-        const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
-
-        const icon = Array.from((ref as MutableRefObject<HTMLElement>).current.children).find(
-          child => child.getAttribute('data-component') === 'icon',
-        )
-
-        const content = Array.from((ref as MutableRefObject<HTMLElement>).current.children).find(
-          child => child.getAttribute('data-component') === 'text',
-        ) as HTMLElement
-        const text = content.textContent as string
-
-        const iconWidthWithMargin = icon
-          ? icon.getBoundingClientRect().width +
-            Number(getComputedStyle(icon).marginRight.slice(0, -2)) +
-            Number(getComputedStyle(icon).marginLeft.slice(0, -2))
-          : 0
-
-        setChildrenWidth({text, width: domRect.width})
-        setNoIconChildrenWidth({text, width: domRect.width - iconWidthWithMargin})
+    [onSelect],
+  )
+  const clickHandler = React.useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (!event.defaultPrevented && typeof onSelect === 'function') {
+        onSelect(event)
       }
-    }, [ref, setChildrenWidth, setNoIconChildrenWidth])
-
-    const keyDownHandler = React.useCallback(
-      (event: React.KeyboardEvent<HTMLAnchorElement>) => {
-        if ((event.key === ' ' || event.key === 'Enter') && !event.defaultPrevented && typeof onSelect === 'function') {
-          onSelect(event)
-        }
-      },
-      [onSelect],
-    )
-    const clickHandler = React.useCallback(
-      (event: React.MouseEvent<HTMLAnchorElement>) => {
-        if (!event.defaultPrevented && typeof onSelect === 'function') {
-          onSelect(event)
-        }
-      },
-      [onSelect],
-    )
-
-    return (
-      <li className={classes.UnderlineNavItem}>
-        <UnderlineItem
-          ref={ref}
-          as={Component}
-          href={href}
-          aria-current={ariaCurrent}
-          onKeyDown={keyDownHandler}
-          onClick={clickHandler}
-          counter={counter}
-          icon={leadingVisual ?? Icon}
-          loadingCounters={loadingCounters}
-          iconsVisible={iconsVisible}
-          {...props}
-        >
-          {children}
-        </UnderlineItem>
-      </li>
-    )
-  },
-) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>
+    },
+    [onSelect],
+  )
+
+  return (
+    <li className={classes.UnderlineNavItem}>
+      <UnderlineItem
+        ref={ref}
+        as={Component}
+        href={href}
+        aria-current={ariaCurrent}
+        onKeyDown={keyDownHandler}
+        onClick={clickHandler}
+        counter={counter}
+        icon={leadingVisual ?? Icon}
+        loadingCounters={loadingCounters}
+        {...props}
+        aria-hidden={isOverflowing ? true : allProps['aria-hidden']}
+        tabIndex={isOverflowing ? -1 : allProps.tabIndex}
+      >
+        {children}
+      </UnderlineItem>
+    </li>
+  )
+}) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>
 
 UnderlineNavItem.displayName = 'UnderlineNavItem'
diff --git a/packages/react/src/UnderlineNav/styles.ts b/packages/react/src/UnderlineNav/styles.ts
deleted file mode 100644
index 71ad7910619..00000000000
--- a/packages/react/src/UnderlineNav/styles.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const dividerStyles = {
-  display: 'inline-block',
-  borderLeft: '1px solid',
-  width: '1px',
-  borderLeftColor: 'var(--borderColor-muted)',
-  marginRight: 'var(--base-size-4)',
-  height: '24px', // The height of the divider - reference from Figma
-}
-
-export const menuItemStyles = {
-  // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/tree/main/packages/react/src/ActionList/Selection.tsx#L32
-  '& > span': {
-    display: 'none',
-  },
-  // To reset the style when the menu items are rendered as react router links
-  textDecoration: 'none',
-}
-
-export const baseMenuMinWidth = 192
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.module.css b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.module.css
index 9e4905c2c7f..ce3d49e5f4f 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.module.css
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.module.css
@@ -4,7 +4,3 @@
   overflow-y: hidden;
   -webkit-overflow-scrolling: auto;
 }
-
-.StyledUnderlineWrapper[data-icons-visible='false'] [data-component='icon'] {
-  display: none;
-}
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 575593ece7d..dd43f61da9c 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -178,7 +178,7 @@ const UnderlinePanels: FCWithSlotMarker<UnderlinePanelsProps> = ({
       <UnderlineWrapper
         ref={wrapperRef}
         slot="tablist-wrapper"
-        data-icons-visible={iconsVisible}
+        data-hide-icons={!iconsVisible}
         className={clsx(className, classes.StyledUnderlineWrapper)}
         {...props}
       >
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css
index 83cdd50d81f..c005eb1f429 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css
@@ -1,31 +1,36 @@
 .UnderlineWrapper {
   display: flex;
+  padding-top: var(--base-size-8);
   /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--stack-padding-normal);
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
 
   /* make space for the underline */
-  min-height: var(--control-xlarge-size, 48px);
+  min-height: var(--control-xlarge-size);
 
   /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */
   /* stylelint-disable-next-line primer/box-shadow */
   box-shadow: inset 0 -1px var(--borderColor-muted);
 
-  /* Hide overflow until calculation is complete to prevent CLS */
-  overflow: visible;
-
-  &[data-overflow-measured='false'] {
-    overflow: hidden;
+  &[data-variant='flush'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: unset;
   }
 
-  &[data-overflow-measured='true'] {
-    overflow: visible;
+  &[data-hide-icons='true'] [data-component='icon'] {
+    display: none;
   }
 
-  &[data-variant='flush'] {
-    /* stylelint-disable-next-line primer/spacing */
-    padding-inline: unset;
+  &[data-overflow-mode='wrap'] {
+    /* Wrap items onto hidden next lines */
+    overflow: hidden;
+    max-height: var(--control-xlarge-size);
+
+    .UnderlineItemList {
+      flex-wrap: wrap;
+      overflow: hidden;
+    }
   }
 }
 
@@ -37,7 +42,7 @@
   white-space: nowrap;
   list-style: none;
   align-items: center;
-  gap: 8px;
+  gap: var(--stack-gap-condensed);
 }
 
 .UnderlineItem {
@@ -54,6 +59,8 @@
   background-color: transparent;
   border: 0;
   border-radius: var(--borderRadius-medium, var(--borderRadius-small));
+  max-width: 100%;
+  margin-bottom: var(--base-size-8);
 
   /* button resets */
   appearance: none;
@@ -104,6 +111,13 @@
   margin-inline-end: var(--base-size-8);
 }
 
+/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */
+.UnderlineItem [data-component='text'] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .UnderlineItem [data-component='counter'] {
   margin-inline-start: var(--base-size-8);
   display: flex;
@@ -112,20 +126,12 @@
 
 .UnderlineItem::after {
   position: absolute;
-  right: 50%;
-
-  /* TODO: see if we can simplify this positioning */
-
-  /* 48px total height / 2 (24px) + 1px */
-  /* stylelint-disable-next-line primer/spacing */
-  bottom: calc(50% - calc(var(--control-xlarge-size, var(--base-size-48)) / 2 + 1px));
-  width: 100%;
+  inset: auto 0 0;
+  margin-bottom: calc(-1 * var(--base-size-8));
   height: 2px;
   pointer-events: none;
   content: '';
   background-color: transparent;
-  border-radius: 0;
-  transform: translate(50%, -50%);
 }
 
 .UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 509459ea47f..3e7de268225 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -1,7 +1,7 @@
 // Used for UnderlineNav and UnderlinePanels components
 
 import React from 'react'
-import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react'
+import {type ForwardedRef, forwardRef, type FC, type ElementType} from 'react'
 import {isElement} from 'react-is'
 import type {IconProps} from '@primer/octicons-react'
 import CounterLabel from '../../CounterLabel'
@@ -36,6 +36,7 @@ type UnderlineWrapperProps<As extends React.ElementType> = {
 
 export const UnderlineWrapper = forwardRef((props, ref) => {
   const {children, className, as: Component = 'div', ...rest} = props
+
   return (
     <Component
       className={clsx(classes.UnderlineWrapper, className)}
@@ -47,9 +48,9 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
   )
 }) as PolymorphicForwardRefComponent<ElementType, UnderlineWrapperProps<ElementType>>
 
-export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => {
+export const UnderlineItemList = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <ul className={classes.UnderlineItemList} ref={forwardedRef} {...rest}>
+    <ul className={clsx(className, classes.UnderlineItemList)} ref={forwardedRef} {...rest}>
       {children}
     </ul>
   )
@@ -62,7 +63,6 @@ export const LoadingCounter = () => {
 export type UnderlineItemProps<As extends React.ElementType> = {
   as?: As | 'a' | 'button'
   className?: string
-  iconsVisible?: boolean
   loadingCounters?: boolean
   counter?: number | string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,11 +72,11 @@ export type UnderlineItemProps<As extends React.ElementType> = {
 } & React.ComponentPropsWithoutRef<As extends 'a' ? 'a' : As extends 'button' ? 'button' : As>
 
 export const UnderlineItem = React.forwardRef((props, ref) => {
-  const {as: Component = 'a', children, counter, icon: Icon, iconsVisible, loadingCounters, className, ...rest} = props
+  const {as: Component = 'a', children, counter, icon: Icon, loadingCounters, className, ...rest} = props
   const textContent = getTextContent(children)
   return (
     <Component {...rest} ref={ref} className={clsx(classes.UnderlineItem, className)}>
-      {iconsVisible && Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
+      {Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
       {children && (
         <span data-component="text" data-content={textContent || undefined}>
           {children}