@primer/react 38.32.1-rc.ea8470aaa → 38.32.1-rc.ed231141b

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - [#8064](https://github.com/primer/react/pull/8064) [`eb447fe`](https://github.com/primer/react/commit/eb447fef0f1565934dc38d09df21d8063957aa9d) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Update the ActionBar overflow menu anchor label to `More items`
 
+- [#8166](https://github.com/primer/react/pull/8166) [`4045abe`](https://github.com/primer/react/commit/4045abea621d0940edcd1120fc70e6ed5f797205) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Add `contain: layout` to high-churn overflow containers (`ActionBar`, `UnderlineNav`, `UnderlinePanels`, and `LabelGroup`) so their frequent reflows no longer invalidate ancestor layout.
+
 - [#8116](https://github.com/primer/react/pull/8116) [`cade4af`](https://github.com/primer/react/commit/cade4af9a70f3fd2622031af585dc07dccd79e11) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `useAnchoredPosition`: improve performance by caching the scrollable-ancestor walk per anchor, reducing repositioning work for overlays, menus, and tooltips.
 
 - [#8164](https://github.com/primer/react/pull/8164) [`f86e5a6`](https://github.com/primer/react/commit/f86e5a6420e857e7476c3954d419f4e228bdcf1a) Thanks [@jonrohan](https://github.com/jonrohan)! - Fix `UnderlineNav` tab list not filling the full width of the underline nav in Safari

package/dist/ActionBar/ActionBar-3767d551.css

@@ -0,0 +1,2 @@
+.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block);contain:layout}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{contain:layout;flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
+/*# sourceMappingURL=ActionBar-3767d551.css.map */

package/dist/ActionBar/ActionBar-3767d551.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAAsC,CAKtC,cAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAgBF,CAbA,uCAQE,cAAe,CANf,cAAe,CAEf,wBAAyB,CACzB,eAQF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-3767d551.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* Isolate the frequent overflow-driven reflows (JS visibility toggling + item wrapping) so they\n  can't invalidate ancestor layout. Safe because the list already clips (overflow: hidden) and the\n  More menu is portaled, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  /* Contain the wrap/measure reflows to this subtree. */\n  contain: layout;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/ActionBar/ActionBar.module.css.js

@@ -1,4 +1,4 @@
-import "./ActionBar-e63def3c.css";
+import "./ActionBar-3767d551.css";
 //#region src/ActionBar/ActionBar.module.css.js
 var ActionBar_module_css_default = {
 	"List": "prc-ActionBar-List-9uz46",

package/dist/LabelGroup/LabelGroup-db41f443.css

@@ -0,0 +1,2 @@
+.prc-LabelGroup-Container-E-ePP{contain:layout;display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
+/*# sourceMappingURL=LabelGroup-db41f443.css.map */

package/dist/LabelGroup/LabelGroup-db41f443.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCAYE,cAAe,CAXf,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAiBF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-db41f443.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  /* Isolate the IntersectionObserver-driven show/hide of overflowing labels so it can't invalidate\n  ancestor layout. Safe because the row already clips (overflow: hidden) and the expanded overlay is\n  rendered separately, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

package/dist/LabelGroup/LabelGroup.module.css.js

@@ -1,4 +1,4 @@
-import "./LabelGroup-7d19205a.css";
+import "./LabelGroup-db41f443.css";
 //#region src/LabelGroup/LabelGroup.module.css.js
 var LabelGroup_module_css_default = {
 	"Container": "prc-LabelGroup-Container-E-ePP",

package/dist/internal/components/UnderlineTabbedInterface-3b4961a4.css

@@ -0,0 +1,2 @@
+.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{contain:layout;display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
+/*# sourceMappingURL=UnderlineTabbedInterface-3b4961a4.css.map */

package/dist/internal/components/UnderlineTabbedInterface-3b4961a4.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,qBAAsB,CAHtB,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAaE,cAAe,CAXf,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBASF,CAEA,4EATE,kBAAmB,CANnB,iBA8CF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-3b4961a4.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n\n  /* Isolate the ResizeObserver-driven item swapping (UnderlineNav overflow menu / UnderlinePanels)\n  so it can't invalidate ancestor layout. Safe because UnderlineNav's overflow menu is rendered via ActionMenu.Overlay\n  (portal by default), and layout containment does not clip. */\n  contain: layout;\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: 32px;\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n  @media (forced-colors: active) {\n    /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface.module.css.js

@@ -1,4 +1,4 @@
-import "./UnderlineTabbedInterface-93bd865a.css";
+import "./UnderlineTabbedInterface-3b4961a4.css";
 //#region src/internal/components/UnderlineTabbedInterface.module.css.js
 var UnderlineTabbedInterface_module_css_default = {
 	"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.1-rc.ea8470aaa",
+  "version": "38.32.1-rc.ed231141b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/ActionBar/ActionBar-e63def3c.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block)}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
-/*# sourceMappingURL=ActionBar-e63def3c.css.map */

package/dist/ActionBar/ActionBar-e63def3c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAaF,CAVA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eAKF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-e63def3c.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/LabelGroup/LabelGroup-7d19205a.css

@@ -1,2 +0,0 @@
-.prc-LabelGroup-Container-E-ePP{display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
-/*# sourceMappingURL=LabelGroup-7d19205a.css.map */

package/dist/LabelGroup/LabelGroup-7d19205a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCACE,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAYF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-7d19205a.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:32px;line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
-/*# sourceMappingURL=UnderlineTabbedInterface-93bd865a.css.map */

package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,qBAAsB,CAHtB,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-93bd865a.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: 32px;\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n  @media (forced-colors: active) {\n    /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}