@primer/react 38.33.0-rc.f640b3458 → 38.33.1-rc.0ad25a240

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.33.1
+
+### Patch Changes
+
+- [#8169](https://github.com/primer/react/pull/8169) [`1d6f559`](https://github.com/primer/react/commit/1d6f5593f5e482d1d03027522bc882560c7b1f06) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Timeline: `Timeline.Actions` now wraps onto a new row below `Timeline.Body`, left-aligned with the body content, when `Timeline.Item` is narrower than 480px.
+
 ## 38.33.0
 
 ### Minor Changes
@@ -14,6 +20,8 @@
 
 - [#8176](https://github.com/primer/react/pull/8176) [`f061bc4`](https://github.com/primer/react/commit/f061bc41483211bef1ec8b1dfe07937f20a9ddd6) Thanks [@francinelucca](https://github.com/francinelucca)! - FeatureFlags: Guard against missing context in `useFeatureFlag` so it returns `false` instead of throwing when used outside a provider
 
+- [#8188](https://github.com/primer/react/pull/8188) [`2a67c19`](https://github.com/primer/react/commit/2a67c191a0038df64d2225c0bc11c020c2def03c) Thanks [@iansan5653](https://github.com/iansan5653)! - Fix `UnderlineNav` items all being considered overflowing on Safari with text size overrides
+
 - [#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/Timeline/Timeline-b7e6685b.css

@@ -0,0 +1,2 @@
+.prc-Timeline-Timeline-awSoC{container-type:inline-size;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}@container (width < 480px){.prc-Timeline-TimelineItem-QwDVH{display:grid;grid-template-areas:"badge body" ".     actions";grid-template-columns:auto 1fr}.prc-Timeline-TimelineBadgeWrapper-SZw4k{grid-area:badge}.prc-Timeline-TimelineBody-tjOtb{grid-area:body}.prc-Timeline-TimelineItemActions-56Y7h{grid-area:actions;justify-content:flex-start;margin-left:0;margin-top:var(--base-size-8,.5rem);min-height:0}}
+/*# sourceMappingURL=Timeline-b7e6685b.css.map */

package/dist/Timeline/Timeline-b7e6685b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BASE,0BAA2B,CAR3B,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAEhB,QAAS,CADT,SAsCF,CA7BI,2GACE,aAeF,CAhBA,0GACE,aAeF,CAbE,kJAEE,4BACF,CAHA,iJAEE,4BACF,CAEA,0IACE,8BACF,CAFA,yIACE,8BACF,CAEA,0KAEE,6DACF,CAHA,yKAEE,6DACF,CAMF,wGACE,gBAKF,CANA,yGACE,gBAKF,CAHE,uIACE,iCACF,CAFA,wIACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF,CAKA,2BACE,iCACE,YAAa,CAEb,gDAEiB,CAHjB,8BAIF,CAEA,yCACE,eACF,CAEA,iCACE,cACF,CAEA,wCACE,iBAAkB,CAIlB,0BAA2B,CAD3B,aAAc,CADd,mCAA8B,CAG9B,YACF,CACF","file":"Timeline-b7e6685b.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  /* Container for the narrow-viewport rules at the end of this file. Uses\n     an inline-size container so behavior tracks the timeline's own width,\n     not the viewport (works inside narrow side panels and split views). */\n  container-type: inline-size;\n\n  &:where([data-clip-sidebar='start']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      .TimelineItemAvatar {\n        /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n        top: var(--base-size-16);\n      }\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n\n      &:where([data-condensed]) .TimelineItemAvatar {\n        /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n        top: calc(var(--base-size-8) + var(--base-size-8));\n      }\n    }\n  }\n\n  &:where([data-clip-sidebar='end']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n\n    .TimelineItemAvatar {\n      /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n      top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n    }\n  }\n}\n\n.TimelineItemAvatar {\n  position: absolute;\n  /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n  left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n  /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n  top: calc(var(--base-size-16) + var(--base-size-16));\n  z-index: 1;\n  transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-variant]) {\n    color: var(--fgColor-onEmphasis);\n  }\n\n  &:where([data-variant='accent']) {\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &:where([data-variant='success']) {\n    background-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-variant='attention']) {\n    background-color: var(--bgColor-attention-emphasis);\n  }\n\n  &:where([data-variant='severe']) {\n    background-color: var(--bgColor-severe-emphasis);\n  }\n\n  &:where([data-variant='danger']) {\n    background-color: var(--bgColor-danger-emphasis);\n  }\n\n  &:where([data-variant='done']) {\n    background-color: var(--bgColor-done-emphasis);\n  }\n\n  &:where([data-variant='open']) {\n    background-color: var(--bgColor-open-emphasis);\n  }\n\n  &:where([data-variant='closed']) {\n    background-color: var(--bgColor-closed-emphasis);\n  }\n\n  &:where([data-variant='sponsors']) {\n    background-color: var(--bgColor-sponsors-emphasis);\n  }\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n\n.TimelineItemActions {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n  min-height: var(--base-size-32);\n  margin-left: auto;\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n\n/* Below 480px inline size, wrap Timeline.Actions onto its own row under\n   Timeline.Body via a 2-column grid. The badge keeps the left column so\n   the vertical rule stays consistent. */\n@container (width < 480px) {\n  .TimelineItem {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas:\n      'badge body'\n      '.     actions';\n  }\n\n  .TimelineBadgeWrapper {\n    grid-area: badge;\n  }\n\n  .TimelineBody {\n    grid-area: body;\n  }\n\n  .TimelineItemActions {\n    grid-area: actions;\n    /* Reset flex-row auto-push; the wrapped row sits under Body. */\n    margin-top: var(--base-size-8);\n    margin-left: 0;\n    justify-content: flex-start;\n    min-height: 0;\n  }\n}\n"]}

package/dist/Timeline/Timeline.module.css.js

@@ -1,4 +1,4 @@
-import "./Timeline-ff81db92.css";
+import "./Timeline-b7e6685b.css";
 //#region src/Timeline/Timeline.module.css.js
 var Timeline_module_css_default = {
 	"Timeline": "prc-Timeline-Timeline-awSoC",

package/dist/internal/components/OverflowObserverProvider.js

@@ -50,7 +50,7 @@ function OverflowObserverProvider(t0) {
 				}
 			}, {
 				root,
-				threshold: [0, 1]
+				threshold: [0, .95]
 			});
 			observerRootRef.current = root;
 			return observerRef.current;
@@ -143,12 +143,12 @@ function OverflowObserverProvider(t0) {
 	return t9;
 }
 /**
-* Treat any target that is not fully visible within the observer root as overflowing. Wrapped items should be fully
-* clipped (`isIntersecting: false`, `intersectionRatio: 0`), but partial ratios also count as overflowing to guard
-* against sub-pixel boundary cases.
+* Treat any target that is not fully visible within the observer root as overflowing. Unwrapped items should be fully
+* visible, but in some scenarios the layout isn't perfectly accurate (ie, in Safari with extra-large text size) so we
+* allow for up to 5% to be clipped before hiding the item.
 */
 function getIsOverflowing(entry) {
-	return !entry.isIntersecting || entry.intersectionRatio < 1;
+	return !entry.isIntersecting || entry.intersectionRatio < .95;
 }
 function supportsIntersectionObserver() {
 	return typeof IntersectionObserver !== "undefined";

package/dist/internal/components/UnderlineTabbedInterface-798ef3cb.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:var(--base-size-32,2rem);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-798ef3cb.css.map */

package/dist/internal/components/UnderlineTabbedInterface-798ef3cb.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,+BAA2B,CAV3B,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-798ef3cb.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: var(--base-size-32);\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-3b4961a4.css";
+import "./UnderlineTabbedInterface-798ef3cb.css";
 //#region src/internal/components/UnderlineTabbedInterface.module.css.js
 var UnderlineTabbedInterface_module_css_default = {
 	"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",

package/generated/components.json

@@ -4067,18 +4067,12 @@
           "defaultValue": "false",
           "description": "Set to true for links adjacent to text, underlining them for clear visibility and improved accessibility."
         },
-        {
-          "name": "underline",
-          "type": "boolean",
-          "defaultValue": "false",
-          "description": "Use `inline` instead.",
-          "deprecated": true
-        },
         {
           "name": "hoverColor",
           "type": "string",
           "defaultValue": "",
-          "description": "Color used when hovering over the link."
+          "description": "Use CSS modules to style hover color.",
+          "deprecated": true
         },
         {
           "name": "ref",
@@ -8185,7 +8179,7 @@
         },
         {
           "id": "components-timeline-features--with-actions",
-          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.SignatureLabelVerified}>Verified</Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceContent}>\n              <div className={classes.CrossReferenceTitle}>\n                <Link href=\"#\" className={classes.CrossReferenceLink}>\n                  <span className={classes.CrossReferenceName}>\n                    Fix positioning of Autocomplete overlay menu\n                  </span>{' '}\n                  <span className={classes.CrossReferenceNumber}>\n                    primer/react#7431\n                  </span>\n                </Link>\n              </div>\n              <div className={classes.CrossReferenceTaskline}>\n                <Octicon icon={TasklistIcon} size={16} />\n                17 tasks\n              </div>\n            </div>\n            <div className={classes.CrossReferenceActions}>\n              <Octicon\n                icon={LockIcon}\n                size={16}\n                className={classes.CrossReferenceMeta}\n              />\n              <StateLabel status=\"pullOpened\" size=\"medium\">\n                Open\n              </StateLabel>\n            </div>\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
+          "code": "() => (\n  <div\n    className={classes.RealisticTimeline}\n    onClick={(e) => {\n      if ((e.target as HTMLElement).closest('a')) e.preventDefault()\n    }}\n  >\n    <Timeline>\n      <Timeline.Item>\n        <Timeline.Badge variant=\"done\">\n          <Octicon icon={GitMergeIcon} aria-label=\"Merged\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          merged via the queue into <BranchName href=\"#\">main</BranchName> with\n          commit{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.ChecksSubline}>28 checks passed</div>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">View details</Button>\n          <Button size=\"small\">Revert</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={RepoPushIcon} aria-label=\"Force-push\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          force-pushed the <BranchName href=\"#\">main</BranchName> branch from{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            01e49tb\n          </Link>{' '}\n          to{' '}\n          <Link href=\"#\" className={classes.CommitSha}>\n            02f50uc\n          </Link>{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            2 hours ago\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Button size=\"small\">Compare</Button>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Update README.md\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label\n            className={`${classes.SignatureLabelVerified} ${classes.HideAtNarrow}`}\n          >\n            Verified\n          </Label>\n          <Octicon\n            icon={CheckIcon}\n            className={classes.IconSuccess}\n            aria-label=\"All checks passed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item condensed>\n        <Timeline.Badge>\n          <Octicon icon={GitCommitIcon} aria-label=\"Commit\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Link href=\"#\" muted>\n            Initial commit\n          </Link>\n        </Timeline.Body>\n        <Timeline.Actions>\n          <Label className={classes.HideAtNarrow}>Unverified</Label>\n          <Octicon\n            icon={XIcon}\n            className={classes.IconDanger}\n            aria-label=\"Some checks failed\"\n          />\n          <Link href=\"#\" className={classes.ShaLink} muted>\n            3fbdc0\n          </Link>\n        </Timeline.Actions>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Badge>\n          <Octicon icon={CrossReferenceIcon} aria-label=\"Cross-reference\" />\n        </Timeline.Badge>\n        <Timeline.Body>\n          <Avatar\n            src=\"https://avatars.githubusercontent.com/u/92997159?v=4\"\n            size={20}\n            className={classes.InlineAvatar}\n          />\n          <Link href=\"#\" className={classes.LinkWithBoldStyle} muted>\n            Monalisa\n          </Link>\n          mentioned this pull request{' '}\n          <Link href=\"#\" className={classes.Timestamp} muted>\n            just now\n          </Link>\n          <div className={classes.CrossReferenceRow}>\n            <div className={classes.CrossReferenceTitle}>\n              <Link href=\"#\" className={classes.CrossReferenceLink}>\n                <span className={classes.CrossReferenceName}>\n                  Fix positioning of Autocomplete overlay menu\n                </span>{' '}\n                <span className={classes.CrossReferenceNumber}>\n                  primer/react#7431\n                </span>\n              </Link>\n            </div>\n            <Octicon\n              icon={LockIcon}\n              size={16}\n              className={classes.CrossReferenceMeta}\n              aria-label=\"Private\"\n            />\n            <StateLabel status=\"pullOpened\" size=\"small\">\n              Open\n            </StateLabel>\n          </div>\n          <div className={classes.CrossReferenceTaskline}>\n            <Octicon icon={TasklistIcon} size={16} />\n            17 tasks\n          </div>\n        </Timeline.Body>\n      </Timeline.Item>\n    </Timeline>\n  </div>\n)"
         },
         {
           "id": "components-timeline-features--with-avatar",

package/package.json

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

package/dist/Timeline/Timeline-ff81db92.css

@@ -1,2 +0,0 @@
-.prc-Timeline-Timeline-awSoC{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child{padding-top:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child .prc-Timeline-TimelineItemAvatar-4zO8f{top:var(--base-size-16,1rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]):before{top:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=start]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:first-child:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child{padding-bottom:0}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=end]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-Timeline-awSoC:where([data-clip-sidebar=both]) .prc-Timeline-TimelineItem-QwDVH:last-child:where([data-condensed]):before{height:var(--base-size-12,.75rem)}.prc-Timeline-TimelineItem-QwDVH{display:flex;margin-left:var(--base-size-16,1rem);padding:var(--base-size-16,1rem) 0;position:relative}.prc-Timeline-TimelineItem-QwDVH:before{background-color:var(--borderColor-muted,#d1d9e0b3);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:2px}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]){padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]):last-child{padding-bottom:var(--base-size-16,1rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineBadge-u0qSm{background-color:var(--bgColor-default,#fff);border:0;color:var(--fgColor-muted,#59636e);height:16px;margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}.prc-Timeline-TimelineItem-QwDVH:where([data-condensed]) .prc-Timeline-TimelineItemAvatar-4zO8f{top:calc(var(--base-size-4,.25rem) + var(--base-size-8,.5rem) + var(--base-size-8,.5rem))}.prc-Timeline-TimelineItemAvatar-4zO8f{left:calc((var(--base-size-40,2.5rem) + var(--base-size-32,2rem))*-1);position:absolute;top:calc(var(--base-size-16,1rem) + var(--base-size-16,1rem));transform:translateY(-50%);z-index:1}.prc-Timeline-TimelineBadgeWrapper-SZw4k{position:relative;z-index:1}.prc-Timeline-TimelineBadge-u0qSm{align-items:center;background-color:var(--timelineBadge-bgColor,#f6f8fa);border-color:var(--bgColor-default,#fff);border-radius:50%;border-style:solid;border-width:var(--borderWidth-thick,.125rem);color:var(--fgColor-muted,#59636e);display:flex;flex-shrink:0;height:32px;justify-content:center;margin-left:-15px;margin-right:var(--base-size-8,.5rem);overflow:hidden;width:32px}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant]){color:var(--fgColor-onEmphasis,#fff)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=accent]){background-color:var(--bgColor-accent-emphasis,#0969da)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=success]){background-color:var(--bgColor-success-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=attention]){background-color:var(--bgColor-attention-emphasis,#9a6700)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=severe]){background-color:var(--bgColor-severe-emphasis,#bc4c00)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=danger]){background-color:var(--bgColor-danger-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=done]){background-color:var(--bgColor-done-emphasis,#8250df)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=open]){background-color:var(--bgColor-open-emphasis,#1f883d)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=closed]){background-color:var(--bgColor-closed-emphasis,#cf222e)}.prc-Timeline-TimelineBadge-u0qSm:where([data-variant=sponsors]){background-color:var(--bgColor-sponsors-emphasis,#bf3989)}.prc-Timeline-TimelineBody-tjOtb{color:var(--fgColor-muted,#59636e);flex:auto;font-size:var(--text-body-size-medium,.875rem);margin-top:calc(var(--base-size-4,.25rem) + 1px);max-width:100%;min-width:0}.prc-Timeline-TimelineBreak-X8eti{background-color:var(--bgColor-default,#fff);border:0;border-top:var(--borderWidth-thicker,.25rem) solid var(--borderColor-default,#d1d9e0);height:var(--base-size-24,1.5rem);margin:0;margin-bottom:calc(var(--base-size-16,1rem)*-1);margin-left:0;position:relative;z-index:1}.prc-Timeline-TimelineBreak-X8eti:has(+[data-condensed]){margin-bottom:calc(var(--base-size-12,.75rem)*-1)}.prc-Timeline-TimelineItemActions-56Y7h{align-items:center;align-self:flex-start;display:flex;flex-shrink:0;gap:var(--base-size-8,.5rem);margin-left:auto;min-height:var(--base-size-32,2rem)}
-/*# sourceMappingURL=Timeline-ff81db92.css.map */

package/dist/Timeline/Timeline-ff81db92.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Timeline/Timeline.module.css.js"],"names":[],"mappings":"AAAA,6BACE,YAAa,CACb,qBAAsB,CACtB,eAAgB,CAEhB,QAAS,CADT,SAkCF,CA7BI,2GACE,aAeF,CAhBA,0GACE,aAeF,CAbE,kJAEE,4BACF,CAHA,iJAEE,4BACF,CAEA,0IACE,8BACF,CAFA,yIACE,8BACF,CAEA,0KAEE,6DACF,CAHA,yKAEE,6DACF,CAMF,wGACE,gBAKF,CANA,yGACE,gBAKF,CAHE,uIACE,iCACF,CAFA,wIACE,iCACF,CAKN,iCAEE,YAAa,CAEb,oCAAgC,CADhC,kCAA8B,CAF9B,iBAuCF,CAlCE,wCASE,mDAA0C,CAN1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,SAIF,CAEA,yDAEE,gBAAiB,CADjB,qCAoBF,CAjBE,oEACE,uCACF,CAEA,2FAKE,4CAAwC,CACxC,QAAS,CAFT,kCAA2B,CAH3B,WAAY,CAEZ,sCAAiC,CADjC,mCAKF,CAEA,gGAEE,yFACF,CAIJ,uCAGE,qEAA4D,CAF5D,iBAAkB,CAIlB,6DAAoD,CAEpD,0BAA2B,CAD3B,SAEF,CAEA,yCACE,iBAAkB,CAClB,SACF,CAEA,kCAkBE,kBAAmB,CANnB,qDAA8C,CAE9C,wCAAoC,CAGpC,iBAAkB,CAFlB,kBAAmB,CACnB,6CAAsC,CAPtC,kCAA2B,CAR3B,YAAa,CAMb,aAAc,CAJd,WAAY,CAgBZ,sBAAuB,CAbvB,iBAAkB,CAFlB,qCAAgC,CAIhC,eAAgB,CANhB,UA0DF,CAvCE,wDACE,oCACF,CAEA,+DACE,uDACF,CAEA,gEACE,wDACF,CAEA,kEACE,0DACF,CAEA,+DACE,uDACF,CAEA,+DACE,uDACF,CAEA,6DACE,qDACF,CAEA,6DACE,qDACF,CAEA,+DACE,uDACF,CAEA,iEACE,yDACF,CAGF,iCAME,kCAA2B,CAC3B,SAAU,CAFV,8CAAuC,CADvC,gDAA0C,CAF1C,cAAe,CADf,WAOF,CAEA,kCAOE,4CAAwC,CACxC,QAAS,CACT,qFAAuE,CANvE,iCAA2B,CAC3B,QAAS,CACT,+CAA6C,CAC7C,aAAc,CALd,iBAAkB,CAClB,SAaF,CAHE,yDACE,iDACF,CAGF,wCAEE,kBAAmB,CACnB,qBAAsB,CAFtB,YAAa,CAOb,aAAc,CADd,4BAAuB,CADvB,gBAAiB,CADjB,mCAIF","file":"Timeline-ff81db92.css","sourcesContent":[".Timeline {\n  display: flex;\n  flex-direction: column;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  &:where([data-clip-sidebar='start']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:first-child {\n      padding-top: 0;\n\n      .TimelineItemAvatar {\n        /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */\n        top: var(--base-size-16);\n      }\n\n      &:where([data-condensed])::before {\n        top: var(--base-size-12);\n      }\n\n      &:where([data-condensed]) .TimelineItemAvatar {\n        /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */\n        top: calc(var(--base-size-8) + var(--base-size-8));\n      }\n    }\n  }\n\n  &:where([data-clip-sidebar='end']),\n  &:where([data-clip-sidebar='both']) {\n    .TimelineItem:last-child {\n      padding-bottom: 0;\n\n      &:where([data-condensed])::before {\n        height: var(--base-size-12);\n      }\n    }\n  }\n}\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--base-size-16) 0;\n  margin-left: var(--base-size-16);\n\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: 2px;\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-muted);\n  }\n\n  &:where([data-condensed]) {\n    padding-top: var(--base-size-4);\n    padding-bottom: 0;\n\n    &:last-child {\n      padding-bottom: var(--base-size-16);\n    }\n\n    .TimelineBadge {\n      height: 16px;\n      margin-top: var(--base-size-8);\n      margin-bottom: var(--base-size-8);\n      color: var(--fgColor-muted);\n      background-color: var(--bgColor-default);\n      border: 0;\n    }\n\n    .TimelineItemAvatar {\n      /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */\n      top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));\n    }\n  }\n}\n\n.TimelineItemAvatar {\n  position: absolute;\n  /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */\n  left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));\n  /* Vertically center against the default badge (16px padding-top + 16px half-badge) */\n  top: calc(var(--base-size-16) + var(--base-size-16));\n  z-index: 1;\n  transform: translateY(-50%);\n}\n\n.TimelineBadgeWrapper {\n  position: relative;\n  z-index: 1;\n}\n\n.TimelineBadge {\n  display: flex;\n  width: 32px;\n  height: 32px;\n  margin-right: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -15px;\n  flex-shrink: 0;\n  overflow: hidden;\n  color: var(--fgColor-muted);\n\n  /* TODOl not quite sure if this is the correct migration for this line */\n  background-color: var(--timelineBadge-bgColor);\n  /* stylelint-disable-next-line primer/colors */\n  border-color: var(--bgColor-default);\n  border-style: solid;\n  border-width: var(--borderWidth-thick);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-variant]) {\n    color: var(--fgColor-onEmphasis);\n  }\n\n  &:where([data-variant='accent']) {\n    background-color: var(--bgColor-accent-emphasis);\n  }\n\n  &:where([data-variant='success']) {\n    background-color: var(--bgColor-success-emphasis);\n  }\n\n  &:where([data-variant='attention']) {\n    background-color: var(--bgColor-attention-emphasis);\n  }\n\n  &:where([data-variant='severe']) {\n    background-color: var(--bgColor-severe-emphasis);\n  }\n\n  &:where([data-variant='danger']) {\n    background-color: var(--bgColor-danger-emphasis);\n  }\n\n  &:where([data-variant='done']) {\n    background-color: var(--bgColor-done-emphasis);\n  }\n\n  &:where([data-variant='open']) {\n    background-color: var(--bgColor-open-emphasis);\n  }\n\n  &:where([data-variant='closed']) {\n    background-color: var(--bgColor-closed-emphasis);\n  }\n\n  &:where([data-variant='sponsors']) {\n    background-color: var(--bgColor-sponsors-emphasis);\n  }\n}\n\n.TimelineBody {\n  min-width: 0;\n  max-width: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: calc(var(--base-size-4) + 1px);\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: auto;\n}\n\n.TimelineBreak {\n  position: relative;\n  z-index: 1;\n  height: var(--base-size-24);\n  margin: 0;\n  margin-bottom: calc(-1 * var(--base-size-16));\n  margin-left: 0;\n  background-color: var(--bgColor-default);\n  border: 0;\n  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(+ [data-condensed]) {\n    margin-bottom: calc(-1 * var(--base-size-12));\n  }\n}\n\n.TimelineItemActions {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */\n  min-height: var(--base-size-32);\n  margin-left: auto;\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-3b4961a4.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{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

@@ -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,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"]}