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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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/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-25587345.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",
+  "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/internal/components/UnderlineTabbedInterface-25587345.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{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

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