upgrade @github/tab-container-element@latest (primer#2624)

Author: keithamus

.changeset/fifty-experts-melt.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Upgrade @github/tab-container, using shadowdom

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/default.png

@@ -30,7 +30,7 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
   flex-direction: column;
   overflow-y: hidden;
 
-  & > .tabnav {
+  &::part(tablist-wrapper) {
     margin: var(--base-size-8) 0;
     padding: 0 var(--base-size-8);
   }
@@ -39,4 +39,4 @@ anchored-position.not-anchored::backdrop, dialog::backdrop {
 .Overlay-tabPanel {
   overflow: hidden;
   display: flex;
-}
+}

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/focused.png

@@ -13,6 +13,11 @@
   overflow: auto;
 }
 
+.tabnav::part(tablist-wrapper) {
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
@@ -66,6 +71,11 @@
   }
 }
 
+tab-container .tabnav-tab {
+  margin-bottom: -1px;
+}
+
+
 /* Tabnav extras
 **
 ** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/default.png

@@ -1,13 +1,9 @@
-<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
-  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-    <%= extra if @align == :left %>
-    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
-      <% tabs.each do |tab| %>
-        <%= tab %>
-      <% end %>
-    <% end %>
-    <%= extra if @align == :right %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= extra if @align == :left %>
+  <% tabs.each do |tab| %>
+    <%= tab %>
   <% end %>
+  <%= extra if @align == :right %>
   <% tabs.each do |tab| %>
     <%= tab.panel %>
   <% end %>