@primer/react 0.0.0-20260618024924 → 0.0.0-20260619191426

package/dist/UnderlineNav/UnderlineNavItem.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlineNavItem-b65e8fd3.css';
+import './UnderlineNavItem-402cd41c.css';
 
 var classes = {"UnderlineNavItem":"prc-UnderlineNav-UnderlineNavItem-syRjR"};
 

package/dist/UnderlineNav/utils.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+import type { UnderlineNavItemProps } from './UnderlineNavItem';
 export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement<any>[];
+export declare const isCurrent: (props: UnderlineNavItemProps) => boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/UnderlineNav/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAE7D,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,qBAAqB,YACuD,CAAA"}

package/dist/UnderlineNav/utils.js

@@ -4,5 +4,6 @@ const getValidChildren = children => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 };
+const isCurrent = props => props['aria-current'] !== undefined && props['aria-current'] !== false && props['aria-current'] !== 'false';
 
-export { getValidChildren };
+export { getValidChildren, isCurrent };

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css

@@ -0,0 +1,2 @@
+.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}
+/*# sourceMappingURL=UnderlinePanels-162f9aed.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF","file":"UnderlinePanels-162f9aed.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n"]}

package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlinePanels-e4b325b9.css';
+import './UnderlinePanels-162f9aed.css';
 
 var classes = {"StyledUnderlineWrapper":"prc-UnderlinePanels-StyledUnderlineWrapper-aiLna"};
 

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.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-hide-icons=true] [data-component=icon]{display:none}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{max-height:var(--control-xlarge-size,3rem);overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{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-1745a3d6.css.map */

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.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,+CA8BF,CAnBE,2DAEE,oBACF,CAEA,mFACE,YACF,CAEA,gEAGE,0CAAsC,CADtC,eAOF,CAJE,wGACE,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-1745a3d6.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-hide-icons='true'] [data-component='icon'] {\n    display: none;\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    .UnderlineItemList {\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"]}

package/dist/internal/components/UnderlineTabbedInterface.d.ts

@@ -15,7 +15,6 @@ export declare const LoadingCounter: () => React.JSX.Element;
 export type UnderlineItemProps<As extends React.ElementType> = {
     as?: As | 'a' | 'button';
     className?: string;
-    iconsVisible?: boolean;
     loadingCounters?: boolean;
     counter?: number | string;
     icon?: FC<IconProps> | React.ReactElement<any>;

package/dist/internal/components/UnderlineTabbedInterface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAA0B,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAWvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}
+{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAAE,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAYvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}

package/dist/internal/components/UnderlineTabbedInterface.js

@@ -6,8 +6,6 @@ import { clsx } from 'clsx';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CounterLabel from '../../CounterLabel/CounterLabel.js';
 
-const GAP = 8;
-
 // Helper to extract direct text content from children for the data-content attribute.
 // This is used by CSS to reserve space for bold text (preventing layout shift).
 // Only extracts strings/numbers, not text from nested React elements (e.g., Popovers).
@@ -75,37 +73,50 @@ const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   return t3;
 });
 const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(7);
+  const $ = c(11);
   let children;
+  let className;
   let rest;
   if ($[0] !== t0) {
     ({
       children,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
+    $[2] = className;
+    $[3] = rest;
   } else {
     children = $[1];
-    rest = $[2];
+    className = $[2];
+    rest = $[3];
   }
   let t1;
-  if ($[3] !== children || $[4] !== forwardedRef || $[5] !== rest) {
-    t1 = /*#__PURE__*/jsx("ul", {
-      className: classes.UnderlineItemList,
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.UnderlineItemList);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx("ul", {
+      className: t1,
       ref: forwardedRef,
       ...rest,
       children: children
     });
-    $[3] = children;
-    $[4] = forwardedRef;
-    $[5] = rest;
-    $[6] = t1;
+    $[6] = children;
+    $[7] = forwardedRef;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
   } else {
-    t1 = $[6];
+    t2 = $[10];
   }
-  return t1;
+  return t2;
 });
 const LoadingCounter = () => {
   const $ = c(1);
@@ -121,12 +132,11 @@ const LoadingCounter = () => {
   return t0;
 };
 const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = c(30);
+  const $ = c(28);
   let Icon;
   let children;
   let className;
   let counter;
-  let iconsVisible;
   let loadingCounters;
   let rest;
   let t0;
@@ -136,7 +146,6 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       children,
       counter,
       icon: Icon,
-      iconsVisible,
       loadingCounters,
       className,
       ...rest
@@ -146,65 +155,62 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     $[2] = children;
     $[3] = className;
     $[4] = counter;
-    $[5] = iconsVisible;
-    $[6] = loadingCounters;
-    $[7] = rest;
-    $[8] = t0;
+    $[5] = loadingCounters;
+    $[6] = rest;
+    $[7] = t0;
   } else {
     Icon = $[1];
     children = $[2];
     className = $[3];
     counter = $[4];
-    iconsVisible = $[5];
-    loadingCounters = $[6];
-    rest = $[7];
-    t0 = $[8];
+    loadingCounters = $[5];
+    rest = $[6];
+    t0 = $[7];
   }
   const Component = t0 === undefined ? "a" : t0;
   let t1;
-  if ($[9] !== children) {
+  if ($[8] !== children) {
     t1 = getTextContent(children);
-    $[9] = children;
-    $[10] = t1;
+    $[8] = children;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   const textContent = t1;
   let t2;
-  if ($[11] !== className) {
+  if ($[10] !== className) {
     t2 = clsx(classes.UnderlineItem, className);
-    $[11] = className;
-    $[12] = t2;
+    $[10] = className;
+    $[11] = t2;
   } else {
-    t2 = $[12];
+    t2 = $[11];
   }
   let t3;
-  if ($[13] !== Icon || $[14] !== iconsVisible) {
-    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
+  if ($[12] !== Icon) {
+    t3 = Icon && /*#__PURE__*/jsx("span", {
       "data-component": "icon",
       children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
     });
-    $[13] = Icon;
-    $[14] = iconsVisible;
-    $[15] = t3;
+    $[12] = Icon;
+    $[13] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[13];
   }
   let t4;
-  if ($[16] !== children || $[17] !== textContent) {
+  if ($[14] !== children || $[15] !== textContent) {
     t4 = children && /*#__PURE__*/jsx("span", {
       "data-component": "text",
       "data-content": textContent || undefined,
       children: children
     });
-    $[16] = children;
-    $[17] = textContent;
-    $[18] = t4;
+    $[14] = children;
+    $[15] = textContent;
+    $[16] = t4;
   } else {
-    t4 = $[18];
+    t4 = $[16];
   }
   let t5;
-  if ($[19] !== counter || $[20] !== loadingCounters) {
+  if ($[17] !== counter || $[18] !== loadingCounters) {
     t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsx(LoadingCounter, {})
@@ -214,32 +220,32 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
         children: counter
       })
     }) : null;
-    $[19] = counter;
-    $[20] = loadingCounters;
-    $[21] = t5;
+    $[17] = counter;
+    $[18] = loadingCounters;
+    $[19] = t5;
   } else {
-    t5 = $[21];
+    t5 = $[19];
   }
   let t6;
-  if ($[22] !== Component || $[23] !== ref || $[24] !== rest || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
+  if ($[20] !== Component || $[21] !== ref || $[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5) {
     t6 = /*#__PURE__*/jsxs(Component, {
       ...rest,
       ref: ref,
       className: t2,
       children: [t3, t4, t5]
     });
-    $[22] = Component;
-    $[23] = ref;
-    $[24] = rest;
-    $[25] = t2;
-    $[26] = t3;
-    $[27] = t4;
-    $[28] = t5;
-    $[29] = t6;
+    $[20] = Component;
+    $[21] = ref;
+    $[22] = rest;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
   } else {
-    t6 = $[29];
+    t6 = $[27];
   }
   return t6;
 });
 
-export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };
+export { LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };

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

@@ -1,4 +1,4 @@
-import './UnderlineTabbedInterface-4197ee28.css';
+import './UnderlineTabbedInterface-1745a3d6.css';
 
 var classes = {"UnderlineWrapper":"prc-components-UnderlineWrapper-eT-Yj","UnderlineItemList":"prc-components-UnderlineItemList-xKlKC","UnderlineItem":"prc-components-UnderlineItem-7fP-n","LoadingCounter":"prc-components-LoadingCounter-dBuLy","loadingCounterKeyFrames":"prc-components-loadingCounterKeyFrames-8tMlf"};
 

package/generated/components.json

@@ -8956,11 +8956,11 @@
         },
         {
           "id": "components-underlinenav-features--overflow-template",
-          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav\n      aria-label=\"Repository\"\n      // @ts-ignore UnderlineNav does not take selectionVariant prop, but we need to pass it to the underlying ActionList so it doesn't show Selections.\n      selectionVariant={undefined}\n    >\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
+          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
         },
         {
           "id": "components-underlinenav-features--overflow-on-narrow-screen",
-          "code": "() => {\n  return <OverflowTemplate initialSelectedIndex={1} />\n}"
+          "code": "() => {\n  return <OverflowTemplate initialSelectedIndex={items.length - 1} />\n}"
         },
         {
           "id": "components-underlinenav-features--counters-loading-state",

package/package.json

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

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css

@@ -1,2 +0,0 @@
-.prc-UnderlineNav-MenuItemContent-3J7gB{align-items:center;display:flex;justify-content:space-between}.prc-UnderlineNav-MoreButton-Y8soj{background:transparent;border:0;box-shadow:none;font-weight:var(--base-text-weight-normal,400);margin:0;padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}
-/*# sourceMappingURL=UnderlineNav-4344d9b0.css.map */

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,wCAEE,kBAAmB,CADnB,YAAa,CAEb,6BACF,CAGA,mCAGE,sBAAuB,CADvB,QAAS,CAGT,eAAgB,CADhB,8CAA2C,CAH3C,QAAS,CAQT,0DAKF,CAHE,mEACE,aACF","file":"UnderlineNav-4344d9b0.css","sourcesContent":[".MenuItemContent {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* More button styles migrated from styles.ts (was moreBtnStyles) */\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  border: 0;\n  background: transparent;\n  font-weight: var(--base-text-weight-normal);\n  box-shadow: none;\n  padding-top: var(--base-size-4);\n  padding-bottom: var(--base-size-4);\n  padding-left: var(--base-size-8);\n  padding-right: var(--base-size-8);\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css

@@ -1,2 +0,0 @@
-.prc-UnderlineNav-UnderlineNavItem-syRjR{align-items:center;display:flex;flex-direction:column}
-/*# sourceMappingURL=UnderlineNavItem-b65e8fd3.css.map */

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAEF","file":"UnderlineNavItem-b65e8fd3.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n"]}

package/dist/UnderlineNav/styles.d.ts

@@ -1,16 +0,0 @@
-export declare const dividerStyles: {
-    display: string;
-    borderLeft: string;
-    width: string;
-    borderLeftColor: string;
-    marginRight: string;
-    height: string;
-};
-export declare const menuItemStyles: {
-    '& > span': {
-        display: string;
-    };
-    textDecoration: string;
-};
-export declare const baseMenuMinWidth = 192;
-//# sourceMappingURL=styles.d.ts.map

package/dist/UnderlineNav/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;CAO1B,CAAA;AAED,eAAO,MAAM,gBAAgB,MAAM,CAAA"}

package/dist/UnderlineNav/styles.js

@@ -1,19 +0,0 @@
-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
-};
-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'
-};
-const baseMenuMinWidth = 192;
-
-export { baseMenuMinWidth, dividerStyles, menuItemStyles };

package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css

@@ -1,2 +0,0 @@
-.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna[data-icons-visible=false] [data-component=icon]{display:none}
-/*# sourceMappingURL=UnderlinePanels-e4b325b9.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF,CAEA,kGACE,YACF","file":"UnderlinePanels-e4b325b9.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n\n.StyledUnderlineWrapper[data-icons-visible='false'] [data-component='icon'] {\n  display: none;\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:center;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,48px);overflow:visible;padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=false]{overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=true]{overflow:visible}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:8px;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,var(--borderRadius-small,.1875rem));color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);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=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;border-radius:0;bottom:calc(50% - var(--control-xlarge-size, var(--base-size-48,3rem))/2 - 1px);content:"";height:2px;pointer-events:none;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.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-4197ee28.css.map */

package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAKE,kBAAmB,CAOnB,0DAAiD,CAXjD,YAAa,CAGb,0BAA2B,CAI3B,0CAA4C,CAO5C,gBAAiB,CAZjB,+CA0BF,CAZE,qEACE,eACF,CAEA,oEACE,gBACF,CAEA,2DAEE,oBACF,CAGF,wCAEE,YAAa,CAMb,OAAQ,CAFR,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAsCF,CA5BA,oCAgBE,eAAgB,CALhB,4BAA6B,CAC7B,QAAS,CACT,2EAAoE,CANpE,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CACvC,qDAAuD,CAYvD,wCAAiC,CADjC,uCAAkC,CATlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAmBF,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,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAaE,4BAA6B,CAC7B,eAAgB,CANhB,+EAAmF,CAInF,UAAW,CAFX,UAAW,CACX,mBAAoB,CAVpB,iBAAkB,CAClB,SAAU,CAaV,6BAA+B,CAN/B,UAOF,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-4197ee28.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: center;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size, 48px);\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  /* Hide overflow until calculation is complete to prevent CLS */\n  overflow: visible;\n\n  &[data-overflow-measured='false'] {\n    overflow: hidden;\n  }\n\n  &[data-overflow-measured='true'] {\n    overflow: visible;\n  }\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\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: 8px;\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, var(--borderRadius-small));\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.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  right: 50%;\n\n  /* TODO: see if we can simplify this positioning */\n\n  /* 48px total height / 2 (24px) + 1px */\n  /* stylelint-disable-next-line primer/spacing */\n  bottom: calc(50% - calc(var(--control-xlarge-size, var(--base-size-48)) / 2 + 1px));\n  width: 100%;\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n  border-radius: 0;\n  transform: translate(50%, -50%);\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"]}