@primer/react 38.32.1-rc.c81a2c8d7 → 38.32.1-rc.ed231141b

package/CHANGELOG.md

@@ -6,8 +6,14 @@
 
 - [#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`
 
+- [#8166](https://github.com/primer/react/pull/8166) [`4045abe`](https://github.com/primer/react/commit/4045abea621d0940edcd1120fc70e6ed5f797205) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Add `contain: layout` to high-churn overflow containers (`ActionBar`, `UnderlineNav`, `UnderlinePanels`, and `LabelGroup`) so their frequent reflows no longer invalidate ancestor layout.
+
 - [#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-3767d551.css

@@ -0,0 +1,2 @@
+.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block);contain:layout}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{contain:layout;flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
+/*# sourceMappingURL=ActionBar-3767d551.css.map */

package/dist/ActionBar/ActionBar-3767d551.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAAsC,CAKtC,cAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAgBF,CAbA,uCAQE,cAAe,CANf,cAAe,CAEf,wBAAyB,CACzB,eAQF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-3767d551.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* Isolate the frequent overflow-driven reflows (JS visibility toggling + item wrapping) so they\n  can't invalidate ancestor layout. Safe because the list already clips (overflow: hidden) and the\n  More menu is portaled, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  /* Contain the wrap/measure reflows to this subtree. */\n  contain: layout;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/ActionBar/ActionBar.module.css.js

@@ -1,4 +1,4 @@
-import "./ActionBar-e63def3c.css";
+import "./ActionBar-3767d551.css";
 //#region src/ActionBar/ActionBar.module.css.js
 var ActionBar_module_css_default = {
 	"List": "prc-ActionBar-List-9uz46",

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/LabelGroup/LabelGroup-db41f443.css

@@ -0,0 +1,2 @@
+.prc-LabelGroup-Container-E-ePP{contain:layout;display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
+/*# sourceMappingURL=LabelGroup-db41f443.css.map */

package/dist/LabelGroup/LabelGroup-db41f443.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCAYE,cAAe,CAXf,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAiBF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-db41f443.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  /* Isolate the IntersectionObserver-driven show/hide of overflowing labels so it can't invalidate\n  ancestor layout. Safe because the row already clips (overflow: hidden) and the expanded overlay is\n  rendered separately, so it isn't affected by the new containing block/stacking context. */\n  contain: layout;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

package/dist/LabelGroup/LabelGroup.module.css.js

@@ -1,4 +1,4 @@
-import "./LabelGroup-7d19205a.css";
+import "./LabelGroup-db41f443.css";
 //#region src/LabelGroup/LabelGroup.module.css.js
 var LabelGroup_module_css_default = {
 	"Container": "prc-LabelGroup-Container-E-ePP",

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/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-3b4961a4.css

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

package/dist/internal/components/UnderlineTabbedInterface-3b4961a4.css.map

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

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

@@ -1,4 +1,4 @@
-import "./UnderlineTabbedInterface-25587345.css";
+import "./UnderlineTabbedInterface-3b4961a4.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.1-rc.c81a2c8d7",
+  "version": "38.32.1-rc.ed231141b",
   "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/ActionBar/ActionBar-e63def3c.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-9uz46{align-items:flex-start;animation:prc-ActionBar-detect-overflow-mAuJu linear;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative;animation-timeline:scroll(self block)}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-OverflowContainer-AkYZs .prc-ActionBar-OverflowSpacer-tbHkV{height:var(--actionbar-height)}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
-/*# sourceMappingURL=ActionBar-e63def3c.css.map */

package/dist/ActionBar/ActionBar-e63def3c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CASvB,oDAAiC,CAhBjC,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBAAkB,CAkBlB,qCAsCF,CAnCE,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WAaF,CAVA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eAKF,CAHE,2EACE,8BACF,CAGF,gCACE,sCACF","file":"ActionBar-e63def3c.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n  so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n  browser support for scroll-driven animations is slightly better. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n\n  .OverflowSpacer {\n    height: var(--actionbar-height);\n  }\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}

package/dist/LabelGroup/LabelGroup-7d19205a.css

@@ -1,2 +0,0 @@
-.prc-LabelGroup-Container-E-ePP{display:flex;flex-wrap:nowrap;gap:var(--base-size-4,.25rem);line-height:1;max-width:100%;overflow:hidden}.prc-LabelGroup-Container-E-ePP:where([data-overflow=inline]){flex-wrap:wrap}.prc-LabelGroup-Container-E-ePP:where([data-list]){list-style-type:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.prc-LabelGroup-ItemWrapper-GkO4t{align-items:center;display:flex;min-height:28px}.prc-LabelGroup-ItemWrapper--hidden-mdrB0{order:9999;pointer-events:none;visibility:hidden}.prc-LabelGroup-OverlayContainer-duQvd{align-items:flex-start;display:flex}.prc-LabelGroup-OverlayInner-nDXRC{display:flex;flex-wrap:wrap;gap:var(--base-size-4,.25rem)}.prc-LabelGroup-CloseButton-IyLno{flex-shrink:0}
-/*# sourceMappingURL=LabelGroup-7d19205a.css.map */

package/dist/LabelGroup/LabelGroup-7d19205a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/LabelGroup/LabelGroup.module.css.js"],"names":[],"mappings":"AAAA,gCACE,YAAa,CACb,gBAAiB,CACjB,6BAAuB,CAEvB,aAAc,CACd,cAAe,CACf,eAYF,CAVE,8DACE,cACF,CAEA,mDAIE,oBAAqB,CADrB,kBAAmB,CADnB,oBAAqB,CADrB,sBAIF,CAGF,kCAEE,kBAAmB,CADnB,YAAa,CAOb,eACF,CAEA,0CACE,UAAW,CACX,mBAAoB,CACpB,iBACF,CAEA,uCACE,sBAAuB,CACvB,YACF,CAEA,mCACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,kCACE,aACF","file":"LabelGroup-7d19205a.css","sourcesContent":[".Container {\n  display: flex;\n  flex-wrap: nowrap;\n  gap: var(--base-size-4);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 1;\n  max-width: 100%;\n  overflow: hidden;\n\n  &:where([data-overflow='inline']) {\n    flex-wrap: wrap;\n  }\n\n  &:where([data-list]) {\n    padding-inline-start: 0;\n    margin-block-start: 0;\n    margin-block-end: 0;\n    list-style-type: none;\n  }\n}\n\n.ItemWrapper {\n  display: flex;\n  align-items: center;\n  /* This min-height matches the height of the expand/collapse button.\n     Without it, the labels/tokens will do a slight layout shift when expanded.\n     This is because the height of the first row will match the token sizes,\n     but the height of the second row will be the height of the collapse button.\n  */\n  min-height: 28px;\n}\n\n.ItemWrapper--hidden {\n  order: 9999;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.OverlayContainer {\n  align-items: flex-start;\n  display: flex;\n}\n\n.OverlayInner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--base-size-4);\n}\n\n.CloseButton {\n  flex-shrink: 0;\n}\n"]}

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