@primer/react 38.32.1-rc.1e5efd5e2 → 38.32.1-rc.49a6c95af

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +0 -4
  2. package/dist/ActionList/Group.js +1 -1
  3. package/dist/ActionList/Item.js +1 -1
  4. package/dist/ActionList/List.js +1 -1
  5. package/dist/ActionMenu/ActionMenu.js +1 -1
  6. package/dist/AnchoredOverlay/AnchoredOverlay.js +1 -2
  7. package/dist/Autocomplete/AutocompleteMenu.js +2 -3
  8. package/dist/Breadcrumbs/Breadcrumbs.js +1 -4
  9. package/dist/Dialog/Dialog.js +1 -1
  10. package/dist/FilteredActionList/useAnnouncements.js +14 -20
  11. package/dist/NavList/NavList.js +1 -1
  12. package/dist/PageHeader/PageHeader.js +1 -1
  13. package/dist/PageLayout/PageLayout.js +1 -1
  14. package/dist/TextInputWithTokens/TextInputWithTokens.js +1 -1
  15. package/dist/TooltipV2/Tooltip.js +1 -2
  16. package/dist/TreeView/TreeView.js +3 -6
  17. package/dist/experimental/SelectPanel2/SelectPanel.js +2 -2
  18. package/dist/experimental/UnderlinePanels/UnderlinePanels.js +1 -1
  19. package/dist/experimental/index.js +1 -1
  20. package/dist/hooks/useDialog.js +1 -2
  21. package/dist/hooks/useScrollFlash.js +1 -2
  22. package/dist/index.js +4 -4
  23. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +1 -1
  24. package/dist/internal/components/UnderlineTabbedInterface-25587345.css +2 -0
  25. package/dist/internal/components/UnderlineTabbedInterface-25587345.css.map +1 -0
  26. package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
  27. package/dist/utils/warning.js +2 -3
  28. package/package.json +2 -2
  29. package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css +0 -2
  30. package/dist/internal/components/UnderlineTabbedInterface-93bd865a.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -8,10 +8,6 @@
8
8
 
9
9
  - [#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.
10
10
 
11
- - [#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
12
-
13
- - [#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
14
-
15
11
  ## 38.32.0
16
12
 
17
13
  ### Minor Changes
@@ -1,6 +1,6 @@
1
1
  import { useId as useId$1 } from "../hooks/useId.js";
2
- import { useSlots } from "../hooks/useSlots.js";
3
2
  import { invariant } from "../utils/invariant.js";
3
+ import { useSlots } from "../hooks/useSlots.js";
4
4
  import { ListContext } from "./shared.js";
5
5
  import ActionList_module_css_default from "./ActionList.module.css.js";
6
6
  import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
@@ -1,11 +1,11 @@
1
1
  import { useId as useId$1 } from "../hooks/useId.js";
2
- import { useSlots } from "../hooks/useSlots.js";
3
2
  import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
4
3
  import { invariant } from "../utils/invariant.js";
5
4
  import { fixedForwardRef } from "../utils/modern-polymorphic.js";
6
5
  import VisuallyHidden from "../_VisuallyHidden.js";
7
6
  import { TooltipContext } from "../TooltipV2/TooltipContext.js";
8
7
  import { Tooltip } from "../TooltipV2/Tooltip.js";
8
+ import { useSlots } from "../hooks/useSlots.js";
9
9
  import { ActionListContainerContext } from "./ActionListContainerContext.js";
10
10
  import { ItemContext, ListContext } from "./shared.js";
11
11
  import ActionList_module_css_default from "./ActionList.module.css.js";
@@ -1,8 +1,8 @@
1
1
  import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
2
2
  import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
3
3
  import { useId as useId$1 } from "../hooks/useId.js";
4
- import { useSlots } from "../hooks/useSlots.js";
5
4
  import { fixedForwardRef } from "../utils/modern-polymorphic.js";
5
+ import { useSlots } from "../hooks/useSlots.js";
6
6
  import { FocusKeys, useFocusZone } from "../hooks/useFocusZone.js";
7
7
  import { ActionListContainerContext } from "./ActionListContainerContext.js";
8
8
  import { ListContext } from "./shared.js";
@@ -2,10 +2,10 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
2
2
  import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
3
3
  import { useMenuKeyboardNavigation } from "../hooks/useMenuKeyboardNavigation.js";
4
4
  import { useId as useId$1 } from "../hooks/useId.js";
5
- import { isSlot } from "../utils/is-slot.js";
6
5
  import { Tooltip } from "../TooltipV2/Tooltip.js";
7
6
  import { ButtonComponent } from "../Button/Button.js";
8
7
  import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
8
+ import { isSlot } from "../utils/is-slot.js";
9
9
  import { DialogContext } from "../Dialog/DialogContext.js";
10
10
  import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
11
11
  import { Divider } from "../ActionList/Divider.js";
@@ -122,8 +122,7 @@ const AnchoredOverlay = ({ renderAnchor, anchorRef: externalAnchorRef, anchorId:
122
122
  else currentOverlay.style.removeProperty("position-try-fallbacks");
123
123
  pendingPositionFrame = requestAnimationFrame(() => {
124
124
  pendingPositionFrame = null;
125
- const fallbackWidth = width ? parseInt(widthMap[width]) : parseInt(widthMap.small);
126
- const result = getDefaultPosition(anchorElement, currentOverlay, fallbackWidth);
125
+ const result = getDefaultPosition(anchorElement, currentOverlay, width ? parseInt(widthMap[width]) : parseInt(widthMap.small));
127
126
  currentOverlay.setAttribute("data-align", result.horizontal);
128
127
  if (result.suggestedSide) currentOverlay.setAttribute("data-side", result.suggestedSide);
129
128
  const offset = result.horizontal === "left" ? result.leftOffset : result.rightOffset;
@@ -193,11 +193,10 @@ function AutocompleteMenu(props) {
193
193
  t12 = (current, _previous, directlyActivated) => {
194
194
  activeDescendantRef.current = current || null;
195
195
  if (current) {
196
- const selectedItem = allItemsToRenderRef.current.find((item_1) => {
196
+ setHighlightedItem(allItemsToRenderRef.current.find((item_1) => {
197
197
  var _current$closest;
198
198
  return item_1.id === ((_current$closest = current.closest("li")) === null || _current$closest === void 0 ? void 0 : _current$closest.getAttribute("data-id"));
199
- });
200
- setHighlightedItem(selectedItem);
199
+ }));
201
200
  setIsMenuDirectlyActivated(directlyActivated);
202
201
  }
203
202
  if (current && customScrollContainerRef && customScrollContainerRef.current && directlyActivated) scrollIntoView(current, customScrollContainerRef.current, menuScrollMargins);
@@ -250,10 +250,7 @@ function Breadcrumbs(t0) {
250
250
  const measuredContainerWidth = containerElement.offsetWidth;
251
251
  setContainerWidth((prev_0) => prev_0 === measuredContainerWidth ? prev_0 : measuredContainerWidth);
252
252
  const listElement = containerElement.querySelector("ol");
253
- if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) {
254
- const widths = Array.from(listElement.children).map(_temp3);
255
- setChildArrayWidths(widths);
256
- }
253
+ if (listElement && listElement.children.length > 0 && listElement.children.length === childArray.length) setChildArrayWidths(Array.from(listElement.children).map(_temp3));
257
254
  };
258
255
  $[3] = childArray.length;
259
256
  $[4] = overflow;
@@ -3,9 +3,9 @@ import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
3
3
  import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
4
4
  import { useResizeObserver } from "../hooks/useResizeObserver.js";
5
5
  import { useId as useId$1 } from "../hooks/useId.js";
6
- import { useSlots } from "../hooks/useSlots.js";
7
6
  import { IconButton } from "../Button/IconButton.js";
8
7
  import { ButtonComponent } from "../Button/Button.js";
8
+ import { useSlots } from "../hooks/useSlots.js";
9
9
  import { useFocusTrap } from "../hooks/useFocusTrap.js";
10
10
  import { useFocusZone } from "../hooks/useFocusZone.js";
11
11
  import Portal_default from "../Portal/index.js";
@@ -31,23 +31,20 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
31
31
  }, [enabled]);
32
32
  useEffect(function announceInitialFocus() {
33
33
  const focusHandler = () => {
34
- if (usingRovingTabindex) {
35
- const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
36
- announce$1(announcementText, {
37
- delayMs,
38
- from: liveRegion ? liveRegion : void 0
39
- });
40
- } else window.requestAnimationFrame(() => {
34
+ if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
35
+ delayMs,
36
+ from: liveRegion ? liveRegion : void 0
37
+ });
38
+ else window.requestAnimationFrame(() => {
41
39
  const activeItem = getItemWithActiveDescendant(listContainerRef, items);
42
40
  if (!activeItem) return;
43
41
  const { index, text, selected } = activeItem;
44
- const announcementText = [
42
+ announce$1([
45
43
  `Focus on filter text box and list of items`,
46
44
  `Focused item: ${text}`,
47
45
  `${selected ? "selected" : "not selected"}`,
48
46
  `${index + 1} of ${items.length}`
49
- ].join(", ");
50
- announce$1(announcementText, {
47
+ ].join(", "), {
51
48
  delayMs,
52
49
  from: liveRegion ? liveRegion : void 0
53
50
  });
@@ -73,23 +70,20 @@ const useAnnouncements = (items, listContainerRef, inputRef, enabled = true, loa
73
70
  announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, { delayMs });
74
71
  return;
75
72
  }
76
- if (usingRovingTabindex) {
77
- const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
78
- announce$1(announcementText, {
79
- delayMs,
80
- from: liveRegion ? liveRegion : void 0
81
- });
82
- } else window.requestAnimationFrame(() => {
73
+ if (usingRovingTabindex) announce$1(`${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`, {
74
+ delayMs,
75
+ from: liveRegion ? liveRegion : void 0
76
+ });
77
+ else window.requestAnimationFrame(() => {
83
78
  const activeItem = getItemWithActiveDescendant(listContainerRef, items);
84
79
  if (!activeItem) return;
85
80
  const { index, text, selected } = activeItem;
86
- const announcementText = [
81
+ announce$1([
87
82
  `List updated`,
88
83
  `Focused item: ${text}`,
89
84
  `${selected ? "selected" : "not selected"}`,
90
85
  `${index + 1} of ${items.length}`
91
- ].join(", ");
92
- announce$1(announcementText, {
86
+ ].join(", "), {
93
87
  delayMs,
94
88
  from: liveRegion ? liveRegion : void 0
95
89
  });
@@ -1,8 +1,8 @@
1
1
  import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
2
2
  import { useId as useId$1 } from "../hooks/useId.js";
3
- import { useSlots } from "../hooks/useSlots.js";
4
3
  import { fixedForwardRef } from "../utils/modern-polymorphic.js";
5
4
  import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
5
+ import { useSlots } from "../hooks/useSlots.js";
6
6
  import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
7
7
  import Heading$1 from "../Heading/Heading.js";
8
8
  import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";
@@ -1,7 +1,7 @@
1
1
  import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
2
2
  import { warning } from "../utils/warning.js";
3
- import { isSlot } from "../utils/is-slot.js";
4
3
  import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
4
+ import { isSlot } from "../utils/is-slot.js";
5
5
  import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
6
6
  import Heading from "../Heading/Heading.js";
7
7
  import Link from "../Link/Link.js";
@@ -1,8 +1,8 @@
1
1
  import { useMergedRefs } from "../hooks/useMergedRefs.js";
2
2
  import { useId as useId$1 } from "../hooks/useId.js";
3
3
  import { warning } from "../utils/warning.js";
4
- import { useSlots } from "../hooks/useSlots.js";
5
4
  import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
5
+ import { useSlots } from "../hooks/useSlots.js";
6
6
  import { useOverflow } from "../hooks/useOverflow.js";
7
7
  import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
8
8
  import PageLayout_module_css_default from "./PageLayout.module.css.js";
@@ -12,8 +12,8 @@ import { c } from "react-compiler-runtime";
12
12
  import { clsx } from "clsx";
13
13
  import { jsx, jsxs } from "react/jsx-runtime";
14
14
  import React, { useRef, useState } from "react";
15
- import { isFocusable } from "@primer/behaviors/utils";
16
15
  import { FocusKeys } from "@primer/behaviors";
16
+ import { isFocusable } from "@primer/behaviors/utils";
17
17
  import { isValidElementType } from "react-is";
18
18
  //#region src/TextInputWithTokens/TextInputWithTokens.tsx
19
19
  /**
@@ -184,13 +184,12 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
184
184
  (_child$props$onFocus = (_child$props3 = child.props).onFocus) === null || _child$props$onFocus === void 0 || _child$props$onFocus.call(_child$props3, event);
185
185
  },
186
186
  onMouseOverCapture: (event) => {
187
- const delayTime = delayTimeMap[delay] || 50;
188
187
  openTimeoutRef.current = safeSetTimeout(() => {
189
188
  var _child$props$onMouseE, _child$props4;
190
189
  if (!openTimeoutRef.current) return;
191
190
  openTooltip();
192
191
  (_child$props$onMouseE = (_child$props4 = child.props).onMouseEnter) === null || _child$props$onMouseE === void 0 || _child$props$onMouseE.call(_child$props4, event);
193
- }, delayTime);
192
+ }, delayTimeMap[delay] || 50);
194
193
  },
195
194
  onMouseLeave: (event) => {
196
195
  var _child$props$onMouseL, _child$props5;
@@ -1,6 +1,4 @@
1
1
  import { useId as useId$1 } from "../hooks/useId.js";
2
- import { isSlot } from "../utils/is-slot.js";
3
- import { useSlots } from "../hooks/useSlots.js";
4
2
  import Spinner from "../Spinner/Spinner.js";
5
3
  import { AriaStatus } from "../live-region/AriaStatus.js";
6
4
  import { fixedForwardRef } from "../utils/modern-polymorphic.js";
@@ -12,6 +10,8 @@ import useSafeTimeout from "../hooks/useSafeTimeout.js";
12
10
  import { Tooltip } from "../TooltipV2/Tooltip.js";
13
11
  import { IconButton } from "../Button/IconButton.js";
14
12
  import { ButtonComponent } from "../Button/Button.js";
13
+ import { isSlot } from "../utils/is-slot.js";
14
+ import { useSlots } from "../hooks/useSlots.js";
15
15
  import { Dialog } from "../Dialog/Dialog.js";
16
16
  import { ConfirmationDialog } from "../ConfirmationDialog/ConfirmationDialog.js";
17
17
  import { ActionList } from "../ActionList/index.js";
@@ -349,10 +349,7 @@ const SubTree = ({ count, state, children, "aria-label": ariaLabel }) => {
349
349
  });
350
350
  setLoadingFocused(false);
351
351
  }
352
- } else if (state === "loading") {
353
- const parentName = getAccessibleName(parentElement);
354
- announceUpdate(`${parentName} content loading`);
355
- }
352
+ } else if (state === "loading") announceUpdate(`${getAccessibleName(parentElement)} content loading`);
356
353
  }, [
357
354
  loadingFocused,
358
355
  previousState,
@@ -1,14 +1,14 @@
1
1
  import { useProvidedRefOrCreate } from "../../hooks/useProvidedRefOrCreate.js";
2
2
  import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
3
3
  import { useId as useId$1 } from "../../hooks/useId.js";
4
- import { isSlot } from "../../utils/is-slot.js";
5
- import { useSlots } from "../../hooks/useSlots.js";
6
4
  import Spinner from "../../Spinner/Spinner.js";
7
5
  import { AriaStatus } from "../../live-region/AriaStatus.js";
8
6
  import { invariant } from "../../utils/invariant.js";
9
7
  import { IconButton } from "../../Button/IconButton.js";
10
8
  import { ButtonComponent } from "../../Button/Button.js";
11
9
  import { useResponsiveValue } from "../../hooks/useResponsiveValue.js";
10
+ import { isSlot } from "../../utils/is-slot.js";
11
+ import { useSlots } from "../../hooks/useSlots.js";
12
12
  import { ActionListContainerContext } from "../../ActionList/ActionListContainerContext.js";
13
13
  import Heading from "../../Heading/Heading.js";
14
14
  import Link from "../../Link/Link.js";
@@ -1,8 +1,8 @@
1
1
  import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
2
2
  import { useResizeObserver } from "../../hooks/useResizeObserver.js";
3
3
  import { useId as useId$1 } from "../../hooks/useId.js";
4
- import { isSlot } from "../../utils/is-slot.js";
5
4
  import { invariant } from "../../utils/invariant.js";
5
+ import { isSlot } from "../../utils/is-slot.js";
6
6
  import { createComponent } from "../../utils/create-component.js";
7
7
  import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
8
8
  import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
@@ -1,5 +1,4 @@
1
1
  "use client";
2
- import { useSlots } from "../hooks/useSlots.js";
3
2
  import { Announce } from "../live-region/Announce.js";
4
3
  import { AriaAlert } from "../live-region/AriaAlert.js";
5
4
  import { AriaStatus } from "../live-region/AriaStatus.js";
@@ -7,6 +6,7 @@ import { ButtonBase } from "../Button/ButtonBase.js";
7
6
  import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
8
7
  import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
9
8
  import { Tooltip } from "../TooltipV2/Tooltip.js";
9
+ import { useSlots } from "../hooks/useSlots.js";
10
10
  import { useOverflow } from "../hooks/useOverflow.js";
11
11
  import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
12
12
  import { Dialog } from "../Dialog/Dialog.js";
@@ -91,8 +91,7 @@ function useDialog(t0) {
91
91
  let t8;
92
92
  if ($[15] !== getFocusableItem) {
93
93
  t8 = (e_1) => {
94
- const movement_0 = e_1.shiftKey ? -1 : 1;
95
- const focusableItem_0 = getFocusableItem(e_1, movement_0);
94
+ const focusableItem_0 = getFocusableItem(e_1, e_1.shiftKey ? -1 : 1);
96
95
  if (!focusableItem_0) return;
97
96
  focusableItem_0.focus();
98
97
  };
@@ -15,8 +15,7 @@ function useScrollFlash(scrollContainerRef) {
15
15
  if (!scrollContainer) return;
16
16
  const id = requestAnimationFrame(() => {
17
17
  const currentScroll = scrollContainer.scrollTop;
18
- const altScroll = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
19
- scrollContainer.scrollTop = altScroll;
18
+ scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
20
19
  scrollContainer.scrollTop = currentScroll;
21
20
  });
22
21
  return () => cancelAnimationFrame(id);
package/dist/index.js CHANGED
@@ -9,15 +9,12 @@ import { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.js";
9
9
  import { useOnOutsideClick } from "./hooks/useOnOutsideClick.js";
10
10
  import { useProvidedRefOrCreate } from "./hooks/useProvidedRefOrCreate.js";
11
11
  import { useOnEscapePress } from "./hooks/useOnEscapePress.js";
12
- import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
13
12
  import useIsomorphicLayoutEffect from "./utils/useIsomorphicLayoutEffect.js";
14
13
  import { useResizeObserver } from "./hooks/useResizeObserver.js";
15
14
  import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
15
+ import { useOpenAndCloseFocus } from "./hooks/useOpenAndCloseFocus.js";
16
16
  import { useOverlay } from "./hooks/useOverlay.js";
17
- import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
18
17
  import { useId } from "./hooks/useId.js";
19
- import { isSlot } from "./utils/is-slot.js";
20
- import { useSlots } from "./hooks/useSlots.js";
21
18
  import Spinner from "./Spinner/Spinner.js";
22
19
  import CounterLabel from "./CounterLabel/CounterLabel.js";
23
20
  import { ButtonBase } from "./Button/ButtonBase.js";
@@ -28,6 +25,8 @@ import { IconButton } from "./Button/IconButton.js";
28
25
  import { LinkButton } from "./Button/LinkButton.js";
29
26
  import { ButtonComponent } from "./Button/Button.js";
30
27
  import { useResponsiveValue } from "./hooks/useResponsiveValue.js";
28
+ import { isSlot } from "./utils/is-slot.js";
29
+ import { useSlots } from "./hooks/useSlots.js";
31
30
  import { PageLayout } from "./PageLayout/PageLayout.js";
32
31
  import { SplitPageLayout } from "./SplitPageLayout/SplitPageLayout.js";
33
32
  import useDetails from "./hooks/useDetails.js";
@@ -39,6 +38,7 @@ import Portal_default from "./Portal/index.js";
39
38
  import { Dialog } from "./Dialog/Dialog.js";
40
39
  import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
41
40
  import { useConfirm } from "./ConfirmationDialog/useConfirm.js";
41
+ import { useRefObjectAsForwardedRef } from "./hooks/useRefObjectAsForwardedRef.js";
42
42
  import { createComponent } from "./utils/create-component.js";
43
43
  import { asSlot } from "./utils/as-slot.js";
44
44
  import Radio from "./Radio/Radio.js";
@@ -1,6 +1,6 @@
1
1
  import { useId as useId$1 } from "../../../hooks/useId.js";
2
- import { useSlots } from "../../../hooks/useSlots.js";
3
2
  import VisuallyHidden from "../../../_VisuallyHidden.js";
3
+ import { useSlots } from "../../../hooks/useSlots.js";
4
4
  import ValidationAnimationContainer from "../ValidationAnimationContainer.js";
5
5
  import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
6
6
  import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";
@@ -0,0 +1,2 @@
1
+ .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}}
2
+ /*# sourceMappingURL=UnderlineTabbedInterface-25587345.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CA0BF,CAfE,2DAEE,oBACF,CAEA,gEAGE,0CAAsC,CADtC,eAOF,CAJE,wGACE,cAAe,CACf,eACF,CAIJ,wCAEE,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAyCF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,WAAY,CAVZ,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-25587345.css","sourcesContent":[".UnderlineWrapper {\n display: flex;\n padding-top: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--stack-padding-normal);\n justify-content: flex-start;\n align-items: flex-start;\n\n /* make space for the underline */\n min-height: var(--control-xlarge-size);\n\n /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 -1px var(--borderColor-muted);\n\n &[data-variant='flush'] {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: unset;\n }\n\n &[data-overflow-mode='wrap'] {\n /* Wrap items onto hidden next lines */\n overflow: hidden;\n max-height: var(--control-xlarge-size);\n\n .UnderlineItemList {\n flex-wrap: wrap;\n overflow: hidden;\n }\n }\n}\n\n.UnderlineItemList {\n position: relative;\n display: flex;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n list-style: none;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.UnderlineItem {\n /* underline tab specific styles */\n position: relative;\n display: inline-flex;\n font: inherit;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium, 1.4285);\n color: var(--fgColor-default);\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium);\n max-width: 100%;\n margin-bottom: var(--base-size-8);\n height: 32px;\n\n /* button resets */\n appearance: none;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n align-items: center;\n\n @media (hover: hover) {\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n transition: background-color 0.12s ease-out;\n }\n }\n}\n\n.UnderlineItem:focus {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n /* where focus-visible is supported, remove the focus box-shadow */\n &:not(:focus-visible) {\n box-shadow: none;\n }\n}\n\n.UnderlineItem:focus-visible {\n outline: 2px solid transparent;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n white-space: nowrap;\n visibility: hidden;\n content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n display: inline-flex;\n color: var(--fgColor-muted);\n align-items: center;\n margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n}\n\n.UnderlineItem::after {\n position: absolute;\n inset: auto 0 0;\n margin-bottom: calc(-1 * var(--base-size-8));\n height: 2px;\n pointer-events: none;\n content: '';\n background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n @media (forced-colors: active) {\n /* Support for Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n background-color: LinkText;\n }\n}\n\n.LoadingCounter {\n display: inline-block;\n width: 1.5rem;\n height: 1rem;\n /* 16px */\n background-color: var(--bgColor-neutral-muted);\n border-color: var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 20px;\n animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0.2;\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
- import "./UnderlineTabbedInterface-93bd865a.css";
1
+ import "./UnderlineTabbedInterface-25587345.css";
2
2
  //#region src/internal/components/UnderlineTabbedInterface.module.css.js
3
3
  var UnderlineTabbedInterface_module_css_default = {
4
4
  "UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",
@@ -5,10 +5,9 @@ const warn = function warn(message) {
5
5
  const warning = function warning(condition, format, ...args) {
6
6
  if (condition) {
7
7
  let index = 0;
8
- const message = format.replace(/%s/g, () => {
8
+ warn(format.replace(/%s/g, () => {
9
9
  return args[index++];
10
- });
11
- warn(message);
10
+ }));
12
11
  }
13
12
  };
14
13
  //#endregion
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.32.1-rc.1e5efd5e2",
4
+ "version": "38.32.1-rc.49a6c95af",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -169,7 +169,7 @@
169
169
  "react-is": "18.3.1",
170
170
  "recast": "0.23.7",
171
171
  "rimraf": "5.0.5",
172
- "rolldown": "^1.1.4",
172
+ "rolldown": "^1.1.2",
173
173
  "rolldown-plugin-dts": "^0.26.0",
174
174
  "rolldown-plugin-import-css": "^0.0.0",
175
175
  "rolldown-plugin-preserve-directives": "^0.0.0",
@@ -1,2 +0,0 @@
1
- .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}}
2
- /*# sourceMappingURL=UnderlineTabbedInterface-93bd865a.css.map */
@@ -1 +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"]}