@primer/react 38.32.0-rc.e7fe8806e → 38.32.1-rc.1e5efd5e2

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # @primer/react
 
+## 38.32.1
+
+### Patch Changes
+
+- [#8064](https://github.com/primer/react/pull/8064) [`eb447fe`](https://github.com/primer/react/commit/eb447fef0f1565934dc38d09df21d8063957aa9d) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Update the ActionBar overflow menu anchor label to `More items`
+
+- [#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
+
+- [#8165](https://github.com/primer/react/pull/8165) [`d60d05b`](https://github.com/primer/react/commit/d60d05b2684056b653cb605418d6f1cae0ba38e2) Thanks [@jonrohan](https://github.com/jonrohan)! - Pin the underline tabbed interface wrapper's vertical box model in wrap mode so external border and padding overrides can no longer offset its height and incorrectly trigger the overflow "more" menu
+
 ## 38.32.0
 
 ### 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/ActionBar/ActionBar.js

@@ -74,7 +74,7 @@ const ActionBar = ({ size = "medium", children, "aria-label": ariaLabel, "aria-l
 					})]
 				}), /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Anchor, { children: /*#__PURE__*/ jsx(IconButton, {
 					variant: "invisible",
-					"aria-label": `More ${ariaLabel} items ${overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.length}`,
+					"aria-label": "More items",
 					icon: KebabHorizontalIcon,
 					className: ActionBar_module_css_default.MoreButton,
 					"data-more-button-inactive": overflowItems !== null && overflowItems !== void 0 && overflowItems.length ? void 0 : true,

package/dist/ActionList/Group.js

@@ -1,6 +1,6 @@
 import { useId as useId$1 } from "../hooks/useId.js";
-import { invariant } from "../utils/invariant.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { invariant } from "../utils/invariant.js";
 import { ListContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";
 import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";

package/dist/ActionList/Item.js

@@ -1,11 +1,11 @@
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
 import { invariant } from "../utils/invariant.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
 import { TooltipContext } from "../TooltipV2/TooltipContext.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import { ItemContext, ListContext } from "./shared.js";
 import ActionList_module_css_default from "./ActionList.module.css.js";

package/dist/ActionList/List.js

@@ -1,8 +1,8 @@
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useId as useId$1 } from "../hooks/useId.js";
-import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
 import { ActionListContainerContext } from "./ActionListContainerContext.js";
 import { ListContext } from "./shared.js";

package/dist/ActionMenu/ActionMenu.js

@@ -2,10 +2,10 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
 import { useMenuKeyboardNavigation } from "../hooks/useMenuKeyboardNavigation.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { isSlot } from "../utils/is-slot.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { ButtonComponent } from "../Button/Button.js";
 import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
-import { isSlot } from "../utils/is-slot.js";
 import { DialogContext } from "../Dialog/DialogContext.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import { Divider } from "../ActionList/Divider.js";

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -122,7 +122,8 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
 			else currentOverlay.style.removeProperty("position-try-fallbacks");
 			pendingPositionFrame = requestAnimationFrame(() => {
 				pendingPositionFrame = null;
-				const result = getDefaultPosition(anchorElement, currentOverlay, width ? parseInt(widthMap[width]) : parseInt(widthMap.small));
+				const fallbackWidth = width ? parseInt(widthMap[width]) : parseInt(widthMap.small);
+				const result = getDefaultPosition(anchorElement, currentOverlay, fallbackWidth);
 				currentOverlay.setAttribute("data-align", result.horizontal);
 				if (result.suggestedSide) currentOverlay.setAttribute("data-side", result.suggestedSide);
 				const offset = result.horizontal === "left" ? result.leftOffset : result.rightOffset;

package/dist/Autocomplete/AutocompleteMenu.js

@@ -193,10 +193,11 @@ function AutocompleteMenu(props) {
 		t12 = (current, _previous, directlyActivated) => {
 			activeDescendantRef.current = current || null;
 			if (current) {
-				setHighlightedItem(allItemsToRenderRef.current.find((item_1) => {
+				const selectedItem = allItemsToRenderRef.current.find((item_1) => {
 					var _current$closest;
 					return item_1.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
-				}));
+				});
+				setHighlightedItem(selectedItem);
 				setIsMenuDirectlyActivated(directlyActivated);
 			}
 			if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -250,7 +250,10 @@ function Breadcrumbs(t0) {
 			const measuredContainerWidth = containerElement.offsetWidth;
 			setContainerWidth((prev_0) => prev_0 === measuredContainerWidth ? prev_0 : measuredContainerWidth);
 			const listElement = containerElement.querySelector("ol");
-			if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) setChildArrayWidths(Array.from(listElement.children).map(_temp3));
+			if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
+				const widths = Array.from(listElement.children).map(_temp3);
+				setChildArrayWidths(widths);
+			}
 		};
 		$[3] = childArray.length;
 		$[4] = overflow;

package/dist/Dialog/Dialog.js

@@ -3,9 +3,9 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
 import { useResizeObserver } from "../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { useFocusTrap } from "../hooks/useFocusTrap.js";
 import { useFocusZone } from "../hooks/useFocusZone.js";
 import Portal_default from "../Portal/index.js";

package/dist/FilteredActionList/useAnnouncements.js

@@ -31,20 +31,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 	}, [enabled]);
 	useEffect(function announceInitialFocus() {
 		const focusHandler = () => {
-			if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
-				delayMs,
-				from: liveRegion ? liveRegion : void 0
-			});
-			else window.requestAnimationFrame(() => {
+			if (usingRovingTabindex) {
+				const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+				announce$1(announcementText, {
+					delayMs,
+					from: liveRegion ? liveRegion : void 0
+				});
+			} else window.requestAnimationFrame(() => {
 				const activeItem = getItemWithActiveDescendant(listContainerRef, items);
 				if (!activeItem) return;
 				const { index, text, selected } = activeItem;
-				announce$1([
+				const announcementText = [
 					`Focus on filter text box and list of items`,
 					`Focused item: ${text}`,
 					`${selected ? "selected" : "not selected"}`,
 					`${index + 1} of ${items.length}`
-				].join(", "), {
+				].join(", ");
+				announce$1(announcementText, {
 					delayMs,
 					from: liveRegion ? liveRegion : void 0
 				});
@@ -70,20 +73,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
 			announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
 			return;
 		}
-		if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
-			delayMs,
-			from: liveRegion ? liveRegion : void 0
-		});
-		else window.requestAnimationFrame(() => {
+		if (usingRovingTabindex) {
+			const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+			announce$1(announcementText, {
+				delayMs,
+				from: liveRegion ? liveRegion : void 0
+			});
+		} else window.requestAnimationFrame(() => {
 			const activeItem = getItemWithActiveDescendant(listContainerRef, items);
 			if (!activeItem) return;
 			const { index, text, selected } = activeItem;
-			announce$1([
+			const announcementText = [
 				`List updated`,
 				`Focused item: ${text}`,
 				`${selected ? "selected" : "not selected"}`,
 				`${index + 1} of ${items.length}`
-			].join(", "), {
+			].join(", ");
+			announce$1(announcementText, {
 				delayMs,
 				from: liveRegion ? liveRegion : void 0
 			});

package/dist/NavList/NavList.js

@@ -1,8 +1,8 @@
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useId as useId$1 } from "../hooks/useId.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import Heading$1 from "../Heading/Heading.js";
 import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";

package/dist/PageHeader/PageHeader.js

@@ -1,7 +1,7 @@
 import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
 import { warning } from "../utils/warning.js";
-import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { isSlot } from "../utils/is-slot.js";
+import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import Heading from "../Heading/Heading.js";
 import Link from "../Link/Link.js";

package/dist/PageLayout/PageLayout.js

@@ -1,8 +1,8 @@
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { useId as useId$1 } from "../hooks/useId.js";
 import { warning } from "../utils/warning.js";
-import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { useSlots } from "../hooks/useSlots.js";
+import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import PageLayout_module_css_default from "./PageLayout.module.css.js";

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -12,8 +12,8 @@ import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from "react";
-import { FocusKeys } from "@primer/behaviors";
 import { isFocusable } from "@primer/behaviors/utils";
+import { FocusKeys } from "@primer/behaviors";
 import { isValidElementType } from "react-is";
 //#region src/TextInputWithTokens/TextInputWithTokens.tsx
 /**

package/dist/TooltipV2/Tooltip.js

@@ -184,12 +184,13 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 				(_child$props$onFocus = (_child$props3 = child.props).onFocus) === null || _child$props$onFocus === void 0 || _child$props$onFocus.call(_child$props3, event);
 			},
 			onMouseOverCapture: (event) => {
+				const delayTime = delayTimeMap[delay] || 50;
 				openTimeoutRef.current = safeSetTimeout(() => {
 					var _child$props$onMouseE, _child$props4;
 					if (!openTimeoutRef.current) return;
 					openTooltip();
 					(_child$props$onMouseE = (_child$props4 = child.props).onMouseEnter) === null || _child$props$onMouseE === void 0 || _child$props$onMouseE.call(_child$props4, event);
-				}, delayTimeMap[delay] || 50);
+				}, delayTime);
 			},
 			onMouseLeave: (event) => {
 				var _child$props$onMouseL, _child$props5;

package/dist/TreeView/TreeView.js

@@ -1,4 +1,6 @@
 import { useId as useId$1 } from "../hooks/useId.js";
+import { isSlot } from "../utils/is-slot.js";
+import { useSlots } from "../hooks/useSlots.js";
 import Spinner from "../Spinner/Spinner.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
@@ -10,8 +12,6 @@ import useSafeTimeout from "../hooks/useSafeTimeout.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
 import { IconButton } from "../Button/IconButton.js";
 import { ButtonComponent } from "../Button/Button.js";
-import { isSlot } from "../utils/is-slot.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog.js";
 import { ActionList } from "../ActionList/index.js";
@@ -349,7 +349,10 @@ const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
 				});
 				setLoadingFocused(false);
 			}
-		} else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
+		} else if (state === "loading") {
+			const parentName = getAccessibleName(parentElement);
+			announceUpdate(`${parentName} content loading`);
+		}
 	}, [
 		loadingFocused,
 		previousState,

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/experimental/SelectPanel2/SelectPanel.js

@@ -1,14 +1,14 @@
 import { useProvidedRefOrCreate } from "../../hooks/useProvidedRefOrCreate.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { isSlot } from "../../utils/is-slot.js";
+import { useSlots } from "../../hooks/useSlots.js";
 import Spinner from "../../Spinner/Spinner.js";
 import { AriaStatus } from "../../live-region/AriaStatus.js";
 import { invariant } from "../../utils/invariant.js";
 import { IconButton } from "../../Button/IconButton.js";
 import { ButtonComponent } from "../../Button/Button.js";
 import { useResponsiveValue } from "../../hooks/useResponsiveValue.js";
-import { isSlot } from "../../utils/is-slot.js";
-import { useSlots } from "../../hooks/useSlots.js";
 import { ActionListContainerContext } from "../../ActionList/ActionListContainerContext.js";
 import Heading from "../../Heading/Heading.js";
 import Link from "../../Link/Link.js";

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,8 +1,8 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
-import { invariant } from "../../utils/invariant.js";
 import { isSlot } from "../../utils/is-slot.js";
+import { invariant } from "../../utils/invariant.js";
 import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";

package/dist/experimental/index.js

@@ -1,4 +1,5 @@
 "use client";
+import { useSlots } from "../hooks/useSlots.js";
 import { Announce } from "../live-region/Announce.js";
 import { AriaAlert } from "../live-region/AriaAlert.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
@@ -6,7 +7,6 @@ import { ButtonBase } from "../Button/ButtonBase.js";
 import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
 import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";
-import { useSlots } from "../hooks/useSlots.js";
 import { useOverflow } from "../hooks/useOverflow.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
 import { Dialog } from "../Dialog/Dialog.js";

package/dist/hooks/useAnchoredPosition.js

@@ -106,6 +106,10 @@ function useAnchoredPosition(settings, dependencies = []) {
 	}, [updatePosition]);
 	useResizeObserver(updatePosition, void 0, [], enabled);
 	useResizeObserver(updatePosition, floatingElementRef, [], enabled);
+	const scrollAncestorsCacheRef = React.useRef({
+		anchor: null,
+		scrollables: []
+	});
 	React.useEffect(() => {
 		if (!enabled) return;
 		const anchorEl = anchorElementRef.current;
@@ -118,7 +122,16 @@ function useAnchoredPosition(settings, dependencies = []) {
 				updatePosition();
 			});
 		};
-		const scrollables = getScrollableAncestors(anchorEl);
+		const cache = scrollAncestorsCacheRef.current;
+		let scrollables;
+		if (cache.anchor === anchorEl) scrollables = cache.scrollables;
+		else {
+			scrollables = getScrollableAncestors(anchorEl);
+			scrollAncestorsCacheRef.current = {
+				anchor: anchorEl,
+				scrollables
+			};
+		}
 		for (const scrollable of scrollables) scrollable.addEventListener("scroll", handleScroll);
 		return () => {
 			for (const scrollable of scrollables) scrollable.removeEventListener("scroll", handleScroll);

package/dist/hooks/useDialog.js

@@ -91,7 +91,8 @@ function useDialog(t0) {
 	let t8;
 	if ($[15] !== getFocusableItem) {
 		t8 = (e_1) => {
-			const focusableItem_0 = getFocusableItem(e_1, e_1.shiftKey ? -1 : 1);
+			const movement_0 = e_1.shiftKey ? -1 : 1;
+			const focusableItem_0 = getFocusableItem(e_1, movement_0);
 			if (!focusableItem_0) return;
 			focusableItem_0.focus();
 		};

package/dist/hooks/useScrollFlash.js

@@ -15,7 +15,8 @@ function useScrollFlash(scrollContainerRef) {
 			if (!scrollContainer) return;
 			const id = requestAnimationFrame(() => {
 				const currentScroll = scrollContainer.scrollTop;
-				scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				const altScroll = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				scrollContainer.scrollTop = altScroll;
 				scrollContainer.scrollTop = currentScroll;
 			});
 			return () => cancelAnimationFrame(id);

package/dist/index.js

@@ -9,12 +9,15 @@ import { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.js";
 import { useOnOutsideClick } from "./hooks/useOnOutsideClick.js";
 import { useProvidedRefOrCreate } from "./hooks/useProvidedRefOrCreate.js";
 import { useOnEscapePress } from "./hooks/useOnEscapePress.js";
+import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
 import useIsomorphicLayoutEffect from "./utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "./hooks/useResizeObserver.js";
 import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
-import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
 import { useOverlay } from "./hooks/useOverlay.js";
+import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
 import { useId } from "./hooks/useId.js";
+import { isSlot } from "./utils/is-slot.js";
+import { useSlots } from "./hooks/useSlots.js";
 import Spinner from "./Spinner/Spinner.js";
 import CounterLabel from "./CounterLabel/CounterLabel.js";
 import { ButtonBase } from "./Button/ButtonBase.js";
@@ -25,8 +28,6 @@ import { IconButton } from "./Button/IconButton.js";
 import { LinkButton } from "./Button/LinkButton.js";
 import { ButtonComponent } from "./Button/Button.js";
 import { useResponsiveValue } from "./hooks/useResponsiveValue.js";
-import { isSlot } from "./utils/is-slot.js";
-import { useSlots } from "./hooks/useSlots.js";
 import { PageLayout } from "./PageLayout/PageLayout.js";
 import { SplitPageLayout } from "./SplitPageLayout/SplitPageLayout.js";
 import useDetails from "./hooks/useDetails.js";
@@ -38,7 +39,6 @@ import Portal_default from "./Portal/index.js";
 import { Dialog } from "./Dialog/Dialog.js";
 import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 import { useConfirm } from "./ConfirmationDialog/useConfirm.js";
-import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
 import { createComponent } from "./utils/create-component.js";
 import { asSlot } from "./utils/as-slot.js";
 import Radio from "./Radio/Radio.js";

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js

@@ -1,6 +1,6 @@
 import { useId as useId$1 } from "../../../hooks/useId.js";
-import VisuallyHidden from "../../../_VisuallyHidden.js";
 import { useSlots } from "../../../hooks/useSlots.js";
+import VisuallyHidden from "../../../_VisuallyHidden.js";
 import ValidationAnimationContainer from "../ValidationAnimationContainer.js";
 import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
 import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";

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

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

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

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

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

package/dist/utils/warning.js

@@ -5,9 +5,10 @@ const warn = function warn(message) {
 const warning = function warning(condition, format, ...args) {
 	if (condition) {
 		let index = 0;
-		warn(format.replace(/%s/g, () => {
+		const message = format.replace(/%s/g, () => {
 			return args[index++];
-		}));
+		});
+		warn(message);
 	}
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.0-rc.e7fe8806e",
+  "version": "38.32.1-rc.1e5efd5e2",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -169,7 +169,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.1.2",
+    "rolldown": "^1.1.4",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",

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