@primer/react 38.32.0-rc.e7fe8806e → 38.32.0

package/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Minor Changes
 
+- [#8133](https://github.com/primer/react/pull/8133) [`0cb8e17`](https://github.com/primer/react/commit/0cb8e17219f61f853fcf06ce9ee09c755c9ef5ff) Thanks [@iansan5653](https://github.com/iansan5653)! - `UnderlineNav`: Replaced dynamic icon visibility with static breakpoints to avoid flickering. Breakpoints customizable via the `hideIconsBreakpoint` prop.
+
 - [#8112](https://github.com/primer/react/pull/8112) [`50face0`](https://github.com/primer/react/commit/50face041d55eb800d643b0d264d23fc12fd4121) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for:
 
   SplitPageLayout

package/dist/UnderlineNav/UnderlineNav-a06bbc74.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);container-type:inline-size;--UnderlineNav_moreButton-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-display:flex}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-display:flex}}@container (width < 20rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xsmall] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 34rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=small] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 48rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=medium] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 63.25rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=large] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 80rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xlarge] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 87.5rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xxlarge] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}.prc-UnderlineNav-WrapSpacer--aLgz{margin-inline-end:calc(var(--stack-gap-condensed,.5rem)*-1)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:var(--UnderlineNav_moreButton-display,flex)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc((var(--base-size-8,.5rem) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
+/*# sourceMappingURL=UnderlineNav-a06bbc74.css.map */

package/dist/UnderlineNav/UnderlineNav-a06bbc74.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CACtC,0BAA2B,CAE3B,sCAKF,CAHE,iEACE,sCACF,CAIF,kDACE,MAEE,sCACF,CACF,CAGE,2BACE,oIACE,YACF,CACF,CAIA,2BACE,mIACE,YACF,CACF,CAIA,2BACE,oIACE,YACF,CACF,CAIA,8BACE,mIACE,YACF,CACF,CAIA,2BACE,oIACE,YACF,CACF,CAIA,6BACE,qIACE,YACF,CACF,CAGF,mCAGE,2DACF,CAEA,4CAEE,kBAAmB,CADnB,mDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-a06bbc74.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n  container-type: inline-size;\n\n  --UnderlineNav_moreButton-display: none;\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-display: flex;\n  }\n}\n\n/* Set overflow button visibility with pure CSS to avoid a layout shift on hydration */\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-display: flex;\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xsmall'] {\n  @container (width < 20rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='small'] {\n  @container (width < 34rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='medium'] {\n  @container (width < 48rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='large'] {\n  @container (width < 63.25rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xlarge'] {\n  @container (width < 80rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xxlarge'] {\n  @container (width < 87.5rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.WrapSpacer {\n  /* Cancel out the flex gap so the first real item has no leading gap */\n  /* stylelint-disable-next-line primer/spacing -- negative margin required to cancel the flex gap from the list */\n  margin-inline-end: calc(-1 * var(--stack-gap-condensed));\n}\n\n.MoreButtonContainer {\n  display: var(--UnderlineNav_moreButton-display, flex);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      /* Pull down same amount as the item-level decoration, plus the border width of the button */\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n      height: 2px;\n      pointer-events: none;\n      content: '';\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 Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -16,6 +16,11 @@ type UnderlineNavProps = {
    * Setting this to `flush` will remove the horizontal padding on the items.
    */
   variant?: 'inset' | 'flush';
+  /**
+   * Customize when the icons are hidden to save space. Set to `null` to always show icons.
+   * Defaults to `xxlarge`; if you know there won't be very many tabs you might set this to a smaller value.
+   */
+  hideIconsBreakpoint?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null;
 };
 //#endregion
 export { UnderlineNavProps };

package/dist/UnderlineNav/UnderlineNav.js

@@ -18,143 +18,150 @@ import { forwardRef, useRef, useState } from "react";
 //#region src/UnderlineNav/UnderlineNav.tsx
 const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const $ = c(52);
-	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children } = t0;
+	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children, hideIconsBreakpoint: t4 } = t0;
 	const as = t1 === void 0 ? "nav" : t1;
 	const loadingCounters = t2 === void 0 ? false : t2;
 	const variant = t3 === void 0 ? "inset" : t3;
+	const hideIconsBreakpoint = t4 === void 0 ? "xxlarge" : t4;
 	const backupRef = useRef(null);
 	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const listRef = useRef(null);
-	const [hasEverOverflowed, setHasOverflowed] = useState(false);
 	const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
 	let isOverflowing;
 	let overflowMenuItems;
-	let t4;
-	if ($[0] !== hasEverOverflowed || $[1] !== registeredItems) {
+	let t5;
+	if ($[0] !== registeredItems) {
 		var _registeredItems$entr;
 		overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(_temp);
 		isOverflowing = overflowMenuItems.length > 0;
-		if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
-		t4 = overflowMenuItems.some(_temp2);
-		$[0] = hasEverOverflowed;
-		$[1] = registeredItems;
-		$[2] = isOverflowing;
-		$[3] = overflowMenuItems;
-		$[4] = t4;
+		t5 = overflowMenuItems.some(_temp2);
+		$[0] = registeredItems;
+		$[1] = isOverflowing;
+		$[2] = overflowMenuItems;
+		$[3] = t5;
 	} else {
-		isOverflowing = $[2];
-		overflowMenuItems = $[3];
-		t4 = $[4];
+		isOverflowing = $[1];
+		overflowMenuItems = $[2];
+		t5 = $[3];
 	}
-	const overflowingCurrentItem = t4;
-	let t5;
-	if ($[5] !== children) {
-		t5 = getValidChildren(children);
-		$[5] = children;
-		$[6] = t5;
-	} else t5 = $[6];
-	const validChildren = t5;
+	const overflowingCurrentItem = t5;
 	let t6;
+	if ($[4] !== children) {
+		t6 = getValidChildren(children);
+		$[4] = children;
+		$[5] = t6;
+	} else t6 = $[5];
+	const validChildren = t6;
 	let t7;
-	if ($[7] !== ariaLabel || $[8] !== validChildren) {
-		t6 = () => {
+	let t8;
+	if ($[6] !== ariaLabel || $[7] !== validChildren) {
+		t7 = () => {
 			!(validChildren.filter(_temp3).length <= 1) && invariant(false, "Only one current element is allowed");
 			!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
 		};
-		t7 = [validChildren, ariaLabel];
-		$[7] = ariaLabel;
-		$[8] = validChildren;
-		$[9] = t6;
-		$[10] = t7;
+		t8 = [validChildren, ariaLabel];
+		$[6] = ariaLabel;
+		$[7] = validChildren;
+		$[8] = t7;
+		$[9] = t8;
 	} else {
-		t6 = $[9];
-		t7 = $[10];
+		t7 = $[8];
+		t8 = $[9];
 	}
-	useDevOnlyEffect(t6, t7);
-	let t8;
-	if ($[11] !== loadingCounters) {
-		t8 = { loadingCounters };
-		$[11] = loadingCounters;
-		$[12] = t8;
-	} else t8 = $[12];
-	const contextValue = t8;
+	useDevOnlyEffect(t7, t8);
+	let t9;
+	if ($[10] !== loadingCounters) {
+		t9 = { loadingCounters };
+		$[10] = loadingCounters;
+		$[11] = t9;
+	} else t9 = $[11];
+	const contextValue = t9;
 	const [menuOpen, setMenuOpen] = useState(false);
 	if (menuOpen && !isOverflowing) setMenuOpen(false);
-	let t9;
-	if ($[13] !== ariaLabel) {
-		t9 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
+	let t10;
+	if ($[12] !== ariaLabel) {
+		t10 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "h2",
 			children: `${ariaLabel} navigation`
 		});
-		$[13] = ariaLabel;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== className) {
-		t10 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
-		$[15] = className;
-		$[16] = t10;
-	} else t10 = $[16];
-	const t11 = hasEverOverflowed ? "true" : void 0;
-	const t12 = isOverflowing ? "true" : void 0;
-	let t13;
+		$[12] = ariaLabel;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== className) {
+		t11 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
+		$[14] = className;
+		$[15] = t11;
+	} else t11 = $[15];
+	const t12 = hideIconsBreakpoint !== null && hideIconsBreakpoint !== void 0 ? hideIconsBreakpoint : void 0;
+	const t13 = isOverflowing ? "true" : void 0;
+	let t14;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /*#__PURE__*/ jsx("li", {
+			role: "presentation",
+			"aria-hidden": true,
+			className: UnderlineNav_module_css_default.WrapSpacer
+		});
+		$[16] = t14;
+	} else t14 = $[16];
+	let t15;
 	if ($[17] !== children || $[18] !== setRegisteredItems) {
-		t13 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
+		t15 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
 			setRegistry: setRegisteredItems,
 			children
 		});
 		$[17] = children;
 		$[18] = setRegisteredItems;
-		$[19] = t13;
-	} else t13 = $[19];
-	let t14;
-	if ($[20] !== navRef || $[21] !== t13) {
-		t14 = /*#__PURE__*/ jsx(UnderlineItemList, {
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== navRef || $[21] !== t15) {
+		t16 = /*#__PURE__*/ jsxs(UnderlineItemList, {
 			ref: listRef,
 			role: "list",
 			className: UnderlineNav_module_css_default.ItemsList,
-			children: /*#__PURE__*/ jsx(OverflowObserverProvider, {
+			children: [t14, /*#__PURE__*/ jsx(OverflowObserverProvider, {
 				rootRef: navRef,
-				children: t13
-			})
+				children: t15
+			})]
 		});
 		$[20] = navRef;
-		$[21] = t13;
-		$[22] = t14;
-	} else t14 = $[22];
-	let t15;
+		$[21] = t15;
+		$[22] = t16;
+	} else t16 = $[22];
+	let t17;
 	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
-		$[23] = t15;
-	} else t15 = $[23];
-	const t16 = overflowingCurrentItem ? "true" : void 0;
-	const t17 = overflowingCurrentItem ? "More items, including current item" : void 0;
-	let t18;
+		t17 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
+		$[23] = t17;
+	} else t17 = $[23];
+	const t18 = overflowingCurrentItem ? "true" : void 0;
+	const t19 = overflowingCurrentItem ? "More items, including current item" : void 0;
+	let t20;
 	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
+		t20 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "span",
 			children: " items"
 		})] });
-		$[24] = t18;
-	} else t18 = $[24];
-	let t19;
-	if ($[25] !== t16 || $[26] !== t17) {
-		t19 = /*#__PURE__*/ jsx(ActionMenu.Button, {
+		$[24] = t20;
+	} else t20 = $[24];
+	let t21;
+	if ($[25] !== t18 || $[26] !== t19) {
+		t21 = /*#__PURE__*/ jsx(ActionMenu.Button, {
 			className: UnderlineNav_module_css_default.MoreButton,
 			variant: "invisible",
 			"data-component": "overflow-menu-button",
-			"data-current": t16,
-			"aria-label": t17,
-			children: t18
+			"data-current": t18,
+			"aria-label": t19,
+			children: t20
 		});
-		$[25] = t16;
-		$[26] = t17;
-		$[27] = t19;
-	} else t19 = $[27];
-	let t20;
+		$[25] = t18;
+		$[26] = t19;
+		$[27] = t21;
+	} else t21 = $[27];
+	let t22;
 	if ($[28] !== loadingCounters || $[29] !== overflowMenuItems || $[30] !== registeredItems) {
-		t20 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t21) => {
-			const [key, allProps] = t21;
+		t22 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t23) => {
+			const [key, allProps] = t23;
 			const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
 			return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
 				onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
@@ -172,65 +179,65 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		$[28] = loadingCounters;
 		$[29] = overflowMenuItems;
 		$[30] = registeredItems;
-		$[31] = t20;
-	} else t20 = $[31];
-	let t21;
-	if ($[32] !== t20) {
-		t21 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t20 }) });
-		$[32] = t20;
-		$[33] = t21;
-	} else t21 = $[33];
-	let t22;
-	if ($[34] !== menuOpen || $[35] !== t19 || $[36] !== t21) {
-		t22 = /*#__PURE__*/ jsxs("div", {
+		$[31] = t22;
+	} else t22 = $[31];
+	let t23;
+	if ($[32] !== t22) {
+		t23 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t22 }) });
+		$[32] = t22;
+		$[33] = t23;
+	} else t23 = $[33];
+	let t24;
+	if ($[34] !== menuOpen || $[35] !== t21 || $[36] !== t23) {
+		t24 = /*#__PURE__*/ jsxs("div", {
 			className: UnderlineNav_module_css_default.MoreButtonContainer,
-			children: [t15, /*#__PURE__*/ jsxs(ActionMenu, {
+			children: [t17, /*#__PURE__*/ jsxs(ActionMenu, {
 				open: menuOpen,
 				onOpenChange: setMenuOpen,
-				children: [t19, t21]
+				children: [t21, t23]
 			})]
 		});
 		$[34] = menuOpen;
-		$[35] = t19;
-		$[36] = t21;
-		$[37] = t22;
-	} else t22 = $[37];
-	let t23;
-	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t10 || $[42] !== t11 || $[43] !== t12 || $[44] !== t14 || $[45] !== t22 || $[46] !== variant) {
-		t23 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
+		$[35] = t21;
+		$[36] = t23;
+		$[37] = t24;
+	} else t24 = $[37];
+	let t25;
+	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t11 || $[42] !== t12 || $[43] !== t13 || $[44] !== t16 || $[45] !== t24 || $[46] !== variant) {
+		t25 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
 			as,
 			"aria-label": ariaLabel,
-			className: t10,
+			className: t11,
 			ref: navRef,
 			"data-variant": variant,
 			"data-overflow-mode": "wrap",
-			"data-hide-icons": t11,
-			"data-has-overflow": t12,
-			children: [t14, t22]
+			"data-hide-icons-breakpoint": t12,
+			"data-has-overflow": t13,
+			children: [t16, t24]
 		});
 		$[38] = ariaLabel;
 		$[39] = as;
 		$[40] = navRef;
-		$[41] = t10;
-		$[42] = t11;
-		$[43] = t12;
-		$[44] = t14;
-		$[45] = t22;
+		$[41] = t11;
+		$[42] = t12;
+		$[43] = t13;
+		$[44] = t16;
+		$[45] = t24;
 		$[46] = variant;
-		$[47] = t23;
-	} else t23 = $[47];
-	let t24;
-	if ($[48] !== contextValue || $[49] !== t23 || $[50] !== t9) {
-		t24 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
+		$[47] = t25;
+	} else t25 = $[47];
+	let t26;
+	if ($[48] !== contextValue || $[49] !== t10 || $[50] !== t25) {
+		t26 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
 			value: contextValue,
-			children: [t9, t23]
+			children: [t10, t25]
 		});
 		$[48] = contextValue;
-		$[49] = t23;
-		$[50] = t9;
-		$[51] = t24;
-	} else t24 = $[51];
-	return t24;
+		$[49] = t10;
+		$[50] = t25;
+		$[51] = t26;
+	} else t26 = $[51];
+	return t26;
 });
 UnderlineNav.displayName = "UnderlineNav";
 function _temp(entry) {

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

@@ -1,9 +1,10 @@
-import "./UnderlineNav-47547980.css";
+import "./UnderlineNav-a06bbc74.css";
 //#region src/UnderlineNav/UnderlineNav.module.css.js
 var UnderlineNav_module_css_default = {
 	"UnderlineWrapper": "prc-UnderlineNav-UnderlineWrapper-GWONT",
 	"detect-overflow": "prc-UnderlineNav-detect-overflow-6HuSH",
 	"ItemsList": "prc-UnderlineNav-ItemsList-oj8gN",
+	"WrapSpacer": "prc-UnderlineNav-WrapSpacer--aLgz",
 	"MoreButtonContainer": "prc-UnderlineNav-MoreButtonContainer-Dnrq6",
 	"OverflowMenuItem": "prc-UnderlineNav-OverflowMenuItem-7SG7M",
 	"OverflowMenuItemLabel": "prc-UnderlineNav-OverflowMenuItemLabel-F80v6",

package/dist/internal/components/UnderlineTabbedInterface-25587345.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]{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-25587345.css.map */

package/dist/internal/components/UnderlineTabbedInterface-25587345.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,+CA0BF,CAfE,2DAEE,oBACF,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-25587345.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    .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.module.css.js

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

package/package.json

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

package/dist/UnderlineNav/UnderlineNav-47547980.css

@@ -1,2 +0,0 @@
-.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);--UnderlineNav_moreButton-visibility:hidden;--UnderlineNav_icons-display:inline}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons=true]{--UnderlineNav_icons-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-visibility:visible}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-visibility:visible;--UnderlineNav_icons-display:none}}.prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:var(--UnderlineNav_icons-display)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:flex;visibility:var(--UnderlineNav_moreButton-visibility)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc((var(--base-size-8,.5rem) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
-/*# sourceMappingURL=UnderlineNav-47547980.css.map */

package/dist/UnderlineNav/UnderlineNav-47547980.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CAEtC,2CAA4C,CAC5C,mCASF,CAPE,+DACE,iCACF,CAEA,iEACE,4CACF,CAGF,kDACE,MAEE,4CAA6C,CAC7C,iCACF,CACF,CAEA,wDACE,yCACF,CAEA,4CAGE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-47547980.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  --UnderlineNav_moreButton-visibility: hidden;\n  --UnderlineNav_icons-display: inline;\n\n  &[data-hide-icons='true'] {\n    --UnderlineNav_icons-display: none;\n  }\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-visibility: visible;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-visibility: visible;\n    --UnderlineNav_icons-display: none;\n  }\n}\n\n.ItemsList [data-component='icon'] {\n  display: var(--UnderlineNav_icons-display);\n}\n\n.MoreButtonContainer {\n  display: flex;\n  visibility: var(--UnderlineNav_moreButton-visibility);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      /* Pull down same amount as the item-level decoration, plus the border width of the button */\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n      height: 2px;\n      pointer-events: none;\n      content: '';\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 Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.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-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

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