@primer/react 0.0.0-20260619134534 → 0.0.0-20260619191426

package/CHANGELOG.md

@@ -1,10 +1,12 @@
 # @primer/react
 
-## 0.0.0-20260619134534
+## 0.0.0-20260619191426
 
-### Patch Changes
+### Minor Changes
 
-- [#7935](https://github.com/primer/react/pull/7935) [`2765933`](https://github.com/primer/react/commit/276593387ec84f72aeba02a940b5e0a4d0a026a9) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - ConfirmationDialog: `useConfirm`/`confirm` now removes its host element from `document.body` after the dialog is closed, and uses a fresh host element per call, so the empty container no longer lingers or leaks into other components and tests
+- [#7622](https://github.com/primer/react/pull/7622) [`4d8d5e6`](https://github.com/primer/react/commit/4d8d5e6b9b0b1d394d19154369f9c37eabe7cb87) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Refactors `UnderlineNav` overflow handling to use CSS-based overflow detection instead of JavaScript width measurements, eliminating layout shift (CLS) issues and improving performance. The overflow menu is now implemented with `ActionMenu`, and item registration uses a descendant registry instead of the `React.Children` API. Consumer-facing changes: items can now be wrapped in fragments or wrapper components; the current item may appear in the overflow menu when the viewport is narrow; and the overflow menu button is right-aligned.
+
+### Patch Changes
 
 - Fake entry to force publishing
 

package/dist/ConfirmationDialog/useConfirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/useConfirm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAqB,KAAK,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AAErF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAuBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
+{"version":3,"file":"useConfirm.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/useConfirm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAqB,KAAK,uBAAuB,EAAC,MAAM,sBAAsB,CAAA;AAIrF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AA0BlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}

package/dist/ConfirmationDialog/useConfirm.js

@@ -3,19 +3,23 @@ import { createRoot } from 'react-dom/client';
 import BaseStyles from '../BaseStyles.js';
 import { ConfirmationDialog } from './ConfirmationDialog.js';
 
+let hostElement = null;
 async function confirm(options) {
   const {
     content,
     ...confirmationDialogProps
   } = options;
   return new Promise(resolve => {
-    const hostElement = document.createElement('div');
-    document.body.append(hostElement);
+    hostElement ||= document.createElement('div');
+    if (!hostElement.isConnected) document.body.append(hostElement);
     const root = createRoot(hostElement);
     const onClose = gesture => {
       root.unmount();
-      hostElement.remove();
-      resolve(gesture === 'confirm');
+      if (gesture === 'confirm') {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
     };
     root.render(/*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
       ...confirmationDialogProps,

package/dist/UnderlineNav/UnderlineNav-263b4e8f.css

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

package/dist/UnderlineNav/UnderlineNav-263b4e8f.css.map

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

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type UnderlineNavProps = {
     children: React.ReactNode;
     'aria-label'?: React.AriaAttributes['aria-label'];
@@ -15,6 +15,5 @@ export type UnderlineNavProps = {
      */
     variant?: 'inset' | 'flush';
 };
-export declare const MORE_BTN_WIDTH = 86;
 export declare const UnderlineNav: React.ForwardRefExoticComponent<UnderlineNavProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=UnderlineNav.d.ts.map

package/dist/UnderlineNav/UnderlineNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAqBtE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,cAAc,KAAK,CAAA;AAsGhC,eAAO,MAAM,YAAY,mFA0SxB,CAAA"}
+{"version":3,"file":"UnderlineNav.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNav.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,YAAY,mFAiIxB,CAAA"}

package/dist/UnderlineNav/UnderlineNav.js

@@ -1,117 +1,19 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
-import { UnderlineNavContext } from './UnderlineNavContext.js';
-import { useResizeObserver } from '../hooks/useResizeObserver.js';
+import { forwardRef, useRef, useState, useMemo } from 'react';
 import VisuallyHidden from '../_VisuallyHidden.js';
-import { dividerStyles, baseMenuMinWidth, menuItemStyles } from './styles.js';
-import { UnderlineWrapper, UnderlineItemList, LoadingCounter, GAP } from '../internal/components/UnderlineTabbedInterface.js';
-import { TriangleDownIcon } from '@primer/octicons-react';
-import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
-import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
-import { useId } from '../hooks/useId.js';
 import { ActionList } from '../ActionList/index.js';
+import { UnderlineWrapper, UnderlineItemList, LoadingCounter } from '../internal/components/UnderlineTabbedInterface.js';
 import { invariant } from '../utils/invariant.js';
 import classes from './UnderlineNav.module.css.js';
-import { getAnchoredPosition } from '@primer/behaviors';
-import { getValidChildren } from './utils.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ButtonComponent } from '../Button/Button.js';
+import { UnderlineNavContext } from './UnderlineNavContext.js';
+import { UnderlineNavItemsRegistry } from './UnderlineNavItem.js';
+import { clsx } from 'clsx';
+import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
+import { isCurrent, getValidChildren } from './utils.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SkeletonText } from '../SkeletonText/SkeletonText.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
+import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
-// When page is loaded, we don't have ref for the more button as it is not on the DOM yet.
-// However, we need to calculate number of possible items when the more button present as well. So using the width of the more button as a constant.
-const MORE_BTN_WIDTH = 86;
-// The height is needed to make sure we don't have a layout shift when the more button is the only item in the nav.
-const MORE_BTN_HEIGHT = 45;
-const overflowEffect = (navWidth, moreMenuWidth, childArray, childWidthArray, noIconChildWidthArray, updateListAndMenu) => {
-  let iconsVisible = true;
-  if (childWidthArray.length === 0) {
-    updateListAndMenu({
-      items: childArray,
-      menuItems: []
-    }, iconsVisible, false);
-    return;
-  }
-  const numberOfItemsPossible = calculatePossibleItems(childWidthArray, navWidth);
-  const numberOfItemsWithoutIconPossible = calculatePossibleItems(noIconChildWidthArray, navWidth);
-  // We need to take more menu width into account when calculating the number of items possible
-  const numberOfItemsPossibleWithMoreMenu = calculatePossibleItems(noIconChildWidthArray, navWidth, moreMenuWidth || MORE_BTN_WIDTH);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const items = [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const menuItems = [];
-
-  // First, we check if we can fit all the items with their icons
-  if (childArray.length <= numberOfItemsPossible) {
-    items.push(...childArray);
-  } else if (childArray.length <= numberOfItemsWithoutIconPossible) {
-    // if we can't fit all the items with their icons, we check if we can fit all the items without their icons
-    iconsVisible = false;
-    items.push(...childArray);
-  } else {
-    // if we can't fit all the items without their icons, we keep the icons hidden and show the ones that doesn't fit into the list in the overflow menu
-    iconsVisible = false;
-
-    /* Below is an accessibility requirement. Never show only one item in the overflow menu.
-     * If there is only one item left to display in the overflow menu according to the calculation,
-     * we need to pull another item from the list into the overflow menu.
-     */
-    const numberOfItemsInMenu = childArray.length - numberOfItemsPossibleWithMoreMenu;
-    const numberOfListItems = numberOfItemsInMenu === 1 ? numberOfItemsPossibleWithMoreMenu - 1 : numberOfItemsPossibleWithMoreMenu;
-    for (const [index, child] of childArray.entries()) {
-      if (index < numberOfListItems) {
-        items.push(child);
-      } else {
-        const ariaCurrent = child.props['aria-current'];
-        const isCurrent = Boolean(ariaCurrent) && ariaCurrent !== 'false';
-        // We need to make sure to keep the selected item always visible.
-        // To do that, we swap the selected item with the last item in the list to make it visible. (When there is at least 1 item in the list to swap.)
-        if (isCurrent && numberOfListItems > 0) {
-          // If selected item couldn't make in to the list, we swap it with the last item in the list.
-          const indexToReplaceAt = numberOfListItems - 1; // because we are replacing the last item in the list
-          // splice method modifies the array by removing 1 item here at the given index and replace it with the "child" element then returns the removed item.
-          const propsectiveAction = items.splice(indexToReplaceAt, 1, child)[0];
-          menuItems.push(propsectiveAction);
-        } else {
-          menuItems.push(child);
-        }
-      }
-    }
-  }
-  updateListAndMenu({
-    items,
-    menuItems
-  }, iconsVisible, true);
-};
-const calculatePossibleItems = (childWidthArray, navWidth, moreMenuWidth = 0) => {
-  const widthToFit = navWidth - moreMenuWidth;
-  let breakpoint = childWidthArray.length; // assume all items will fit
-  let sumsOfChildWidth = 0;
-  for (const [index, childWidth] of childWidthArray.entries()) {
-    sumsOfChildWidth = sumsOfChildWidth + childWidth.width + GAP;
-    if (sumsOfChildWidth > widthToFit) {
-      breakpoint = index;
-      break;
-    } else {
-      continue;
-    }
-  }
-  return breakpoint;
-};
-
-// Inline styles converted from baseMenuStyles for use as CSSProperties
-const baseMenuInlineStyles = {
-  position: 'absolute',
-  zIndex: 1,
-  top: '90%',
-  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-  borderRadius: 12,
-  background: 'var(--overlay-bgColor)',
-  listStyle: 'none',
-  minWidth: `${baseMenuMinWidth}px`,
-  maxWidth: '640px',
-  right: 0
-};
 const UnderlineNav = /*#__PURE__*/forwardRef(({
   as = 'nav',
   'aria-label': ariaLabel,
@@ -120,259 +22,111 @@ const UnderlineNav = /*#__PURE__*/forwardRef(({
   className,
   children
 }, forwardedRef) => {
-  var _listRef$current2;
+  var _registeredItems$entr;
   const backupRef = useRef(null);
   const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
   const listRef = useRef(null);
-  const moreMenuRef = useRef(null);
-  const moreMenuBtnRef = useRef(null);
-  const containerRef = React.useRef(null);
-  const disclosureWidgetId = useId();
-  const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  const [iconsVisible, setIconsVisible] = useState(true);
-  const [childWidthArray, setChildWidthArray] = useState([]);
-  const [noIconChildWidthArray, setNoIconChildWidthArray] = useState([]);
-  // Track whether the initial overflow calculation is complete to prevent CLS
-  const [isOverflowMeasured, setIsOverflowMeasured] = useState(false);
-  const validChildren = getValidChildren(children);
 
-  // Responsive props object manages which items are in the list and which items are in the menu.
-  const [responsiveProps, setResponsiveProps] = useState({
-    items: validChildren,
-    menuItems: []
-  });
+  /** Tracks whether any item has ever overflowed for the lifecycle of this component. Used to prevent flickering. */
+  const [hasEverOverflowed, setHasOverflowed] = useState(false);
+  const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
+  const overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(entry => entry[1] !== null);
+  const isOverflowing = overflowMenuItems.length > 0;
+  if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
 
-  // Make sure to have the fresh props data for list items when children are changed (keeping aria-current up-to-date)
-  const listItems = responsiveProps.items.map(item => {
-    var _validChildren$find;
-    return (_validChildren$find = validChildren.find(child => child.key === item.key)) !== null && _validChildren$find !== void 0 ? _validChildren$find : item;
-  });
-
-  // Make sure to have the fresh props data for menu items when children are changed (keeping aria-current up-to-date)
-  const menuItems = responsiveProps.menuItems.map(menuItem => {
-    var _validChildren$find2;
-    return (_validChildren$find2 = validChildren.find(child => child.key === menuItem.key)) !== null && _validChildren$find2 !== void 0 ? _validChildren$find2 : menuItem;
-  });
-  // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
-  const onlyMenuVisible = responsiveProps.items.length === 0;
+  // Find the current item if it has overflowed into the menu, so we can reflect
+  // its "current" state on the overflow menu anchor.
+  const overflowingCurrentItem = overflowMenuItems.some(([, itemProps]) => isCurrent(itemProps));
+  const validChildren = getValidChildren(children);
   useDevOnlyEffect(() => {
     // Address illegal state where there are multiple items that have `aria-current='page'` attribute
-    const activeElements = validChildren.filter(child => {
-      return child.props['aria-current'] !== undefined;
-    });
+    const activeElements = validChildren.filter(child => isCurrent(child.props));
     !(activeElements.length <= 1) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Only one current element is allowed') : invariant(false) : void 0;
     !ariaLabel ? process.env.NODE_ENV !== "production" ? invariant(false, 'Use the `aria-label` prop to provide an accessible label for assistive technology') : invariant(false) : void 0;
   }, [validChildren, ariaLabel]);
-  function getItemsWidth(itemText) {
-    var _noIconChildWidthArra, _noIconChildWidthArra2;
-    return (_noIconChildWidthArra = (_noIconChildWidthArra2 = noIconChildWidthArray.find(item => item.text === itemText)) === null || _noIconChildWidthArra2 === void 0 ? void 0 : _noIconChildWidthArra2.width) !== null && _noIconChildWidthArra !== void 0 ? _noIconChildWidthArra : 0;
-  }
-  const swapMenuItemWithListItem = (prospectiveListItem, indexOfProspectiveListItem, event, callback) => {
-    var _navRef$current$getBo, _navRef$current, _listRef$current$getB, _listRef$current;
-    // get the selected menu item's width
-    const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children);
-    // Check if there is any empty space on the right side of the list
-    const availableSpace = ((_navRef$current$getBo = (_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.getBoundingClientRect().width) !== null && _navRef$current$getBo !== void 0 ? _navRef$current$getBo : 0) - ((_listRef$current$getB = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.getBoundingClientRect().width) !== null && _listRef$current$getB !== void 0 ? _listRef$current$getB : 0);
-
-    // Calculate how many items need to be pulled in to the menu to make room for the selected menu item
-    // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1.
-    const index = getBreakpointForItemSwapping(widthToFitIntoList, availableSpace);
-    const indexToSliceAt = responsiveProps.items.length - 1 - index;
-    // Form the new list of items
-    const itemsLeftInList = [...responsiveProps.items].slice(0, indexToSliceAt);
-    const updatedItemList = [...itemsLeftInList, prospectiveListItem];
-    // Form the new menu items
-    const itemsToAddToMenu = [...responsiveProps.items].slice(indexToSliceAt);
-    const updatedMenuItems = [...menuItems];
-    // Add itemsToAddToMenu array's items to the menu at the index of the prospectiveListItem and remove 1 count of items (prospectiveListItem)
-    updatedMenuItems.splice(indexOfProspectiveListItem, 1, ...itemsToAddToMenu);
-    callback({
-      items: updatedItemList,
-      menuItems: updatedMenuItems
-    }, false, true);
-  };
-  // How many items do we need to pull in to the menu to make room for the selected menu item.
-  function getBreakpointForItemSwapping(widthToFitIntoList, availableSpace) {
-    let widthToSwap = 0;
-    let breakpoint = 0;
-    for (const [index, item] of [...responsiveProps.items].reverse().entries()) {
-      widthToSwap += getItemsWidth(item.props.children);
-      if (widthToFitIntoList < widthToSwap + availableSpace) {
-        breakpoint = index;
-        break;
-      }
-    }
-    return breakpoint;
-  }
-  const updateListAndMenu = useCallback((props, displayIcons, overflowMeasured) => {
-    setResponsiveProps(props);
-    setIconsVisible(displayIcons);
-    if (overflowMeasured) {
-      setIsOverflowMeasured(true);
-    }
-  }, []);
-  const setChildrenWidth = useCallback(size => {
-    setChildWidthArray(arr => {
-      const newArr = [...arr, size];
-      return newArr;
-    });
-  }, []);
-  const setNoIconChildrenWidth = useCallback(size => {
-    setNoIconChildWidthArray(arr => {
-      const newArr = [...arr, size];
-      return newArr;
-    });
-  }, []);
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false);
-  }, [setIsWidgetOpen]);
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    var _moreMenuBtnRef$curre;
-    (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-  }, []);
-  const onAnchorClick = useCallback(event => {
-    if (event.defaultPrevented || event.button !== 0) {
-      return;
-    }
-    setIsWidgetOpen(isWidgetOpen => !isWidgetOpen);
-  }, []);
-  useOnEscapePress(event => {
-    if (isWidgetOpen) {
-      event.preventDefault();
-      closeOverlay();
-      focusOnMoreMenuBtn();
-    }
-  }, [isWidgetOpen]);
-  useOnOutsideClick({
-    onClickOutside: closeOverlay,
-    containerRef,
-    ignoreClickRefs: [moreMenuBtnRef]
-  });
-  useResizeObserver(resizeObserverEntries => {
-    var _moreMenuRef$current$, _moreMenuRef$current;
-    const navWidth = resizeObserverEntries[0].contentRect.width;
-    const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
-    navWidth !== 0 && overflowEffect(navWidth, moreMenuWidth, validChildren, childWidthArray, noIconChildWidthArray, updateListAndMenu);
-  }, navRef);
-
-  // Compute menuInlineStyles if needed
-  let menuInlineStyles = {
-    ...baseMenuInlineStyles
-  };
-  if (containerRef.current && listRef.current) {
-    const {
-      left
-    } = getAnchoredPosition(containerRef.current, listRef.current, {
-      align: 'start',
-      side: 'outside-bottom'
-    });
-    menuInlineStyles = {
-      ...baseMenuInlineStyles,
-      right: undefined,
-      left
-    };
-  }
+  const contextValue = useMemo(() => ({
+    loadingCounters
+  }), [loadingCounters]);
   return /*#__PURE__*/jsxs(UnderlineNavContext.Provider, {
-    value: {
-      setChildrenWidth,
-      setNoIconChildrenWidth,
-      loadingCounters,
-      iconsVisible
-    },
+    value: contextValue,
     children: [ariaLabel && /*#__PURE__*/jsx(VisuallyHidden, {
       as: "h2",
       children: `${ariaLabel} navigation`
-    }), /*#__PURE__*/jsx(UnderlineWrapper, {
+    }), /*#__PURE__*/jsxs(UnderlineWrapper, {
       as: as,
       "aria-label": ariaLabel,
-      className: className,
+      className: clsx(classes.UnderlineWrapper, className),
       ref: navRef,
       "data-variant": variant,
-      "data-overflow-measured": isOverflowMeasured ? 'true' : 'false',
-      children: /*#__PURE__*/jsxs(UnderlineItemList, {
+      "data-overflow-mode": "wrap"
+      // Force icons to stay hidden, avoiding flickering as icons create/remove overflow
+      ,
+      "data-hide-icons": hasEverOverflowed ? 'true' : undefined
+      // Ensure button is shown (after initial render) on browsers that don't support scroll-driven animations
+      ,
+      "data-has-overflow": isOverflowing ? 'true' : undefined,
+      children: [/*#__PURE__*/jsx(UnderlineItemList, {
         ref: listRef,
         role: "list",
-        children: [listItems, menuItems.length > 0 && /*#__PURE__*/jsxs("li", {
-          ref: moreMenuRef,
-          style: {
-            display: 'flex',
-            alignItems: 'center',
-            height: `${MORE_BTN_HEIGHT}px`
-          },
-          children: [!onlyMenuVisible && /*#__PURE__*/jsx("div", {
-            style: dividerStyles
-          }), /*#__PURE__*/jsx(ButtonComponent, {
-            ref: moreMenuBtnRef,
+        className: classes.ItemsList,
+        children: /*#__PURE__*/jsx(UnderlineNavItemsRegistry.Provider, {
+          setRegistry: setRegisteredItems,
+          children: children
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: classes.MoreButtonContainer,
+        children: [/*#__PURE__*/jsx("div", {
+          className: classes.MoreButtonDivider
+        }), /*#__PURE__*/jsxs(ActionMenu, {
+          children: [/*#__PURE__*/jsx(ActionMenu.Button, {
             className: classes.MoreButton,
-            "aria-controls": disclosureWidgetId,
-            "aria-expanded": isWidgetOpen,
-            onClick: onAnchorClick,
-            trailingAction: TriangleDownIcon,
-            children: /*#__PURE__*/jsx("span", {
-              children: onlyMenuVisible ? /*#__PURE__*/jsxs(Fragment, {
-                children: [/*#__PURE__*/jsxs(VisuallyHidden, {
-                  as: "span",
-                  children: [`${ariaLabel}`, "\xA0"]
-                }), "Menu"]
-              }) : /*#__PURE__*/jsxs(Fragment, {
-                children: ["More", /*#__PURE__*/jsxs(VisuallyHidden, {
-                  as: "span",
-                  children: ["\xA0", `${ariaLabel} items`]
-                })]
-              })
+            variant: "invisible",
+            "data-component": "overflow-menu-button",
+            "data-current": overflowingCurrentItem ? 'true' : undefined,
+            "aria-label": overflowingCurrentItem ? `More items, including current item` : undefined,
+            children: /*#__PURE__*/jsxs("span", {
+              children: ["More", /*#__PURE__*/jsx(VisuallyHidden, {
+                as: "span",
+                children: " items"
+              })]
             })
-          }), /*#__PURE__*/jsx(ActionList, {
-            selectionVariant: "single",
-            ref: containerRef,
-            id: disclosureWidgetId,
-            style: {
-              ...((_listRef$current2 = listRef.current) !== null && _listRef$current2 !== void 0 && _listRef$current2.clientWidth && listRef.current.clientWidth >= baseMenuMinWidth ? baseMenuInlineStyles : menuInlineStyles),
-              display: isWidgetOpen ? 'block' : 'none'
-            },
-            children: menuItems.map((menuItem, index) => {
-              const {
-                children: menuItemChildren,
-                counter,
-                'aria-current': ariaCurrent,
-                onSelect,
-                ...menuItemProps
-              } = menuItem.props;
-
-              // This logic is used to pop the selected item out of the menu and into the list when the navigation is control externally
-              if (Boolean(ariaCurrent) && ariaCurrent !== 'false') {
-                const event = new MouseEvent('click');
-                !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index,
-                // @ts-ignore - not a big deal because it is internally creating an event but ask help
-                event, updateListAndMenu);
-              }
-              return /*#__PURE__*/jsx(ActionList.LinkItem, {
-                style: menuItemStyles,
-                onClick: event => {
-                  // When there are no items in the list, do not run the swap function as we want to keep everything in the menu.
-                  !onlyMenuVisible && swapMenuItemWithListItem(menuItem, index, event, updateListAndMenu);
-                  closeOverlay();
-                  focusOnMoreMenuBtn();
-                  // fire onSelect event that comes from the UnderlineNav.Item (if it is defined)
-                  typeof onSelect === 'function' && onSelect(event);
-                },
-                ...menuItemProps,
-                children: /*#__PURE__*/jsxs("span", {
-                  className: classes.MenuItemContent,
-                  children: [menuItemChildren, loadingCounters ? /*#__PURE__*/jsx(LoadingCounter, {}) : counter !== undefined && /*#__PURE__*/jsx("span", {
-                    "data-component": "counter",
-                    children: /*#__PURE__*/jsx(CounterLabel, {
-                      children: counter
+          }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+            children: /*#__PURE__*/jsx(ActionList, {
+              children: registeredItems === undefined ? /*#__PURE__*/jsx(ActionList.Item, {
+                children: /*#__PURE__*/jsx(SkeletonText, {})
+              }) : overflowMenuItems.map(([key, allProps]) => {
+                const {
+                  children: menuItemChildren,
+                  counter,
+                  onSelect,
+                  ...menuItemProps
+                } = allProps;
+                return /*#__PURE__*/jsxs(ActionList.LinkItem, {
+                  className: classes.OverflowMenuItem,
+                  onClick: event => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
+                  ...menuItemProps,
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: classes.OverflowMenuItemLabel,
+                    children: menuItemChildren
+                  }), loadingCounters ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+                    children: /*#__PURE__*/jsx(LoadingCounter, {})
+                  }) : counter !== undefined && /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+                    children: /*#__PURE__*/jsx("span", {
+                      "data-component": "counter",
+                      children: /*#__PURE__*/jsx(CounterLabel, {
+                        children: counter
+                      })
                     })
                   })]
-                })
-              }, menuItemChildren);
+                }, key);
+              })
             })
           })]
         })]
-      })
+      })]
     })]
   });
 });
 UnderlineNav.displayName = 'UnderlineNav';
 
-export { MORE_BTN_WIDTH, UnderlineNav };
+export { UnderlineNav };

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

@@ -1,5 +1,5 @@
-import './UnderlineNav-4344d9b0.css';
+import './UnderlineNav-263b4e8f.css';
 
-var classes = {"MenuItemContent":"prc-UnderlineNav-MenuItemContent-3J7gB","MoreButton":"prc-UnderlineNav-MoreButton-Y8soj"};
+var classes = {"UnderlineWrapper":"prc-UnderlineNav-UnderlineWrapper-GWONT","detect-overflow":"prc-UnderlineNav-detect-overflow-6HuSH","ItemsList":"prc-UnderlineNav-ItemsList-oj8gN","MoreButtonContainer":"prc-UnderlineNav-MoreButtonContainer-Dnrq6","OverflowMenuItem":"prc-UnderlineNav-OverflowMenuItem-7SG7M","OverflowMenuItemLabel":"prc-UnderlineNav-OverflowMenuItemLabel-F80v6","MoreButtonDivider":"prc-UnderlineNav-MoreButtonDivider-dN0a-","MoreButton":"prc-UnderlineNav-MoreButton-Y8soj"};
 
 export { classes as default };

package/dist/UnderlineNav/UnderlineNavContext.d.ts

@@ -1,14 +1,4 @@
-import type React from 'react';
-export declare const UnderlineNavContext: React.Context<{
-    setChildrenWidth: React.Dispatch<{
-        text: string;
-        width: number;
-    }>;
-    setNoIconChildrenWidth: React.Dispatch<{
-        text: string;
-        width: number;
-    }>;
+export declare const UnderlineNavContext: import("react").Context<{
     loadingCounters: boolean;
-    iconsVisible: boolean;
 }>;
 //# sourceMappingURL=UnderlineNavContext.d.ts.map

package/dist/UnderlineNav/UnderlineNavContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,eAAO,MAAM,mBAAmB;sBACZ,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;4BACvC,KAAK,CAAC,QAAQ,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;qBACpD,OAAO;kBACV,OAAO;EAMrB,CAAA"}
+{"version":3,"file":"UnderlineNavContext.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavContext.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;qBACb,OAAO;EAGxB,CAAA"}

package/dist/UnderlineNav/UnderlineNavContext.js

@@ -1,10 +1,7 @@
 import { createContext } from 'react';
 
 const UnderlineNavContext = /*#__PURE__*/createContext({
-  setChildrenWidth: () => null,
-  setNoIconChildrenWidth: () => null,
-  loadingCounters: false,
-  iconsVisible: true
+  loadingCounters: false
 });
 
 export { UnderlineNavContext };

package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineNavItem-syRjR{align-items:center;display:flex;flex-direction:column;overflow:hidden}.prc-UnderlineNav-UnderlineNavItem-syRjR[aria-hidden]{visibility:hidden}
+/*# sourceMappingURL=UnderlineNavItem-402cd41c.css.map */

package/dist/UnderlineNav/UnderlineNavItem-402cd41c.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAAsB,CAEtB,eAOF,CALE,sDAGE,iBACF","file":"UnderlineNavItem-402cd41c.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow: hidden;\n\n  &[aria-hidden] {\n    /* Overflowing items will already be clipped out of view, but might as well\n    also hide them for performance and to ensure they can't accidentally appear */\n    visibility: hidden;\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNavItem.d.ts

@@ -43,5 +43,11 @@ export type UnderlineNavItemProps = {
      */
     counter?: number | string;
 } & LinkProps;
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+export declare const UnderlineNavItemsRegistry: {
+    Provider: ({ children, setRegistry }: import("../utils/descendant-registry").ProviderProps<UnderlineNavItemProps | null>) => React.JSX.Element;
+    useRegistryState: () => [ReadonlyMap<string, UnderlineNavItemProps | null> | undefined, React.Dispatch<React.SetStateAction<ReadonlyMap<string, UnderlineNavItemProps | null> | undefined>>];
+    useRegisterDescendant: (value: UnderlineNavItemProps | null) => string;
+};
 export declare const UnderlineNavItem: PolymorphicForwardRefComponent<"a", UnderlineNavItemProps>;
 //# sourceMappingURL=UnderlineNavItem.d.ts.map

package/dist/UnderlineNav/UnderlineNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAExG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAE5F;;;OAGG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAEnE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAElC;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,eAAO,MAAM,gBAAgB,EAgFxB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}
+{"version":3,"file":"UnderlineNavItem.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/UnderlineNavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAA;AAC9F,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AACrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAA;CACjF,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAExG;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAE5F;;;OAGG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAEnE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAElC;;QAEI;IACJ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,GAAG,CAAA;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B,GAAG,SAAS,CAAA;AAEb,kHAAkH;AAClH,eAAO,MAAM,yBAAyB;;;;CAA2D,CAAA;AAEjG,eAAO,MAAM,gBAAgB,EA0EvB,8BAA8B,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAA"}

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -1,46 +1,41 @@
-import React, { forwardRef, useRef, useContext } from 'react';
+import React, { forwardRef, useRef, useContext, useSyncExternalStore, useCallback } from 'react';
 import { UnderlineNavContext } from './UnderlineNavContext.js';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { UnderlineItem } from '../internal/components/UnderlineTabbedInterface.js';
 import classes from './UnderlineNavItem.module.css.js';
+import { createDescendantRegistry } from '../utils/descendant-registry.js';
 import { jsx } from 'react/jsx-runtime';
 
-const UnderlineNavItem = /*#__PURE__*/forwardRef(({
-  as: Component = 'a',
-  href = '#',
-  children,
-  counter,
-  onSelect,
-  'aria-current': ariaCurrent,
-  icon: Icon,
-  leadingVisual,
-  ...props
-}, forwardedRef) => {
-  const backupRef = useRef(null);
-  const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
+/** Registry of currently-overflowing underline items. If an item is not overflowing, its value will be `null`. */
+const UnderlineNavItemsRegistry = createDescendantRegistry();
+const UnderlineNavItem = /*#__PURE__*/forwardRef((allProps, forwardedRef) => {
   const {
-    setChildrenWidth,
-    setNoIconChildrenWidth,
-    loadingCounters,
-    iconsVisible
+    as: Component = 'a',
+    href = '#',
+    children,
+    counter,
+    onSelect,
+    'aria-current': ariaCurrent,
+    icon: Icon,
+    leadingVisual,
+    ...props
+  } = allProps;
+  const ref = useRef(null);
+  const {
+    loadingCounters
   } = useContext(UnderlineNavContext);
-  useIsomorphicLayoutEffect(() => {
-    if (ref.current) {
-      const domRect = ref.current.getBoundingClientRect();
-      const icon = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'icon');
-      const content = Array.from(ref.current.children).find(child => child.getAttribute('data-component') === 'text');
-      const text = content.textContent;
-      const iconWidthWithMargin = icon ? icon.getBoundingClientRect().width + Number(getComputedStyle(icon).marginRight.slice(0, -2)) + Number(getComputedStyle(icon).marginLeft.slice(0, -2)) : 0;
-      setChildrenWidth({
-        text,
-        width: domRect.width
-      });
-      setNoIconChildrenWidth({
-        text,
-        width: domRect.width - iconWidthWithMargin
-      });
-    }
-  }, [ref, setChildrenWidth, setNoIconChildrenWidth]);
+  const isOverflowing = useSyncExternalStore(useCallback(onChange => {
+    const observer = new IntersectionObserver(() => onChange(), {
+      threshold: 1
+    });
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [ref]),
+  // Note: the IntersectionObserver is just being used as a trigger to re-check
+  // `offsetTop > 0`; this is fast and simpler than checking visibility from
+  // the observed entry. When an item wraps, it will move to the next row which
+  // increases its `offsetTop`
+  () => ref.current ? ref.current.offsetTop > 0 : false, () => false);
+  UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
   const keyDownHandler = React.useCallback(event => {
     if ((event.key === ' ' || event.key === 'Enter') && !event.defaultPrevented && typeof onSelect === 'function') {
       onSelect(event);
@@ -53,8 +48,10 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
   }, [onSelect]);
   return /*#__PURE__*/jsx("li", {
     className: classes.UnderlineNavItem,
+    ref: ref,
+    "aria-hidden": isOverflowing ? true : allProps['aria-hidden'],
     children: /*#__PURE__*/jsx(UnderlineItem, {
-      ref: ref,
+      ref: forwardedRef,
       as: Component,
       href: href,
       "aria-current": ariaCurrent,
@@ -63,12 +60,12 @@ const UnderlineNavItem = /*#__PURE__*/forwardRef(({
       counter: counter,
       icon: leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : Icon,
       loadingCounters: loadingCounters,
-      iconsVisible: iconsVisible,
       ...props,
+      tabIndex: isOverflowing ? -1 : allProps.tabIndex,
       children: children
     })
   });
 });
 UnderlineNavItem.displayName = 'UnderlineNavItem';
 
-export { UnderlineNavItem };
+export { UnderlineNavItem, UnderlineNavItemsRegistry };

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

@@ -1,4 +1,4 @@
-import './UnderlineNavItem-b65e8fd3.css';
+import './UnderlineNavItem-402cd41c.css';
 
 var classes = {"UnderlineNavItem":"prc-UnderlineNav-UnderlineNavItem-syRjR"};
 

package/dist/UnderlineNav/utils.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
+import type { UnderlineNavItemProps } from './UnderlineNavItem';
 export declare const getValidChildren: (children: React.ReactNode) => React.ReactElement<any>[];
+export declare const isCurrent: (props: UnderlineNavItemProps) => boolean;
 //# sourceMappingURL=utils.d.ts.map

package/dist/UnderlineNav/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAE7D,eAAO,MAAM,gBAAgB,GAAI,UAAU,KAAK,CAAC,SAAS,KAEgC,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAChH,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,qBAAqB,YACuD,CAAA"}

package/dist/UnderlineNav/utils.js

@@ -4,5 +4,6 @@ const getValidChildren = children => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
 };
+const isCurrent = props => props['aria-current'] !== undefined && props['aria-current'] !== false && props['aria-current'] !== 'false';
 
-export { getValidChildren };
+export { getValidChildren, isCurrent };

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css

@@ -0,0 +1,2 @@
+.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}
+/*# sourceMappingURL=UnderlinePanels-162f9aed.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-162f9aed.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF","file":"UnderlinePanels-162f9aed.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n"]}

package/dist/experimental/UnderlinePanels/UnderlinePanels.module.css.js

@@ -1,4 +1,4 @@
-import './UnderlinePanels-e4b325b9.css';
+import './UnderlinePanels-162f9aed.css';
 
 var classes = {"StyledUnderlineWrapper":"prc-UnderlinePanels-StyledUnderlineWrapper-aiLna"};
 

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

package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css.map

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

package/dist/internal/components/UnderlineTabbedInterface.d.ts

@@ -15,7 +15,6 @@ export declare const LoadingCounter: () => React.JSX.Element;
 export type UnderlineItemProps<As extends React.ElementType> = {
     as?: As | 'a' | 'button';
     className?: string;
-    iconsVisible?: boolean;
     loadingCounters?: boolean;
     counter?: number | string;
     icon?: FC<IconProps> | React.ReactElement<any>;

package/dist/internal/components/UnderlineTabbedInterface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAA0B,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAEtG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAWvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}
+{"version":3,"file":"UnderlineTabbedInterface.d.ts","sourceRoot":"","sources":["../../../src/internal/components/UnderlineTabbedInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAgC,KAAK,EAAE,EAAE,KAAK,WAAW,EAAC,MAAM,OAAO,CAAA;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,yBAAyB,CAAA;AAMlG,eAAO,MAAM,GAAG,IAAI,CAAA;AAgBpB,KAAK,qBAAqB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAYvB,8BAA8B,CAAC,WAAW,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,EAMxB,8BAA8B,CAAC,IAAI,CAAC,CAAA;AAE1C,eAAO,MAAM,cAAc,yBAE1B,CAAA;AAED,MAAM,MAAM,kBAAkB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC7D,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,QAAQ,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEzB,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CACzB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,EAAE,SAAS,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAC,CAAA;AAE9F,eAAO,MAAM,aAAa,EAwBpB,8BAA8B,CAAC,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAA"}

package/dist/internal/components/UnderlineTabbedInterface.js

@@ -6,8 +6,6 @@ import { clsx } from 'clsx';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import CounterLabel from '../../CounterLabel/CounterLabel.js';
 
-const GAP = 8;
-
 // Helper to extract direct text content from children for the data-content attribute.
 // This is used by CSS to reserve space for bold text (preventing layout shift).
 // Only extracts strings/numbers, not text from nested React elements (e.g., Popovers).
@@ -75,37 +73,50 @@ const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   return t3;
 });
 const UnderlineItemList = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(7);
+  const $ = c(11);
   let children;
+  let className;
   let rest;
   if ($[0] !== t0) {
     ({
       children,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
-    $[2] = rest;
+    $[2] = className;
+    $[3] = rest;
   } else {
     children = $[1];
-    rest = $[2];
+    className = $[2];
+    rest = $[3];
   }
   let t1;
-  if ($[3] !== children || $[4] !== forwardedRef || $[5] !== rest) {
-    t1 = /*#__PURE__*/jsx("ul", {
-      className: classes.UnderlineItemList,
+  if ($[4] !== className) {
+    t1 = clsx(className, classes.UnderlineItemList);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== children || $[7] !== forwardedRef || $[8] !== rest || $[9] !== t1) {
+    t2 = /*#__PURE__*/jsx("ul", {
+      className: t1,
       ref: forwardedRef,
       ...rest,
       children: children
     });
-    $[3] = children;
-    $[4] = forwardedRef;
-    $[5] = rest;
-    $[6] = t1;
+    $[6] = children;
+    $[7] = forwardedRef;
+    $[8] = rest;
+    $[9] = t1;
+    $[10] = t2;
   } else {
-    t1 = $[6];
+    t2 = $[10];
   }
-  return t1;
+  return t2;
 });
 const LoadingCounter = () => {
   const $ = c(1);
@@ -121,12 +132,11 @@ const LoadingCounter = () => {
   return t0;
 };
 const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const $ = c(30);
+  const $ = c(28);
   let Icon;
   let children;
   let className;
   let counter;
-  let iconsVisible;
   let loadingCounters;
   let rest;
   let t0;
@@ -136,7 +146,6 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       children,
       counter,
       icon: Icon,
-      iconsVisible,
       loadingCounters,
       className,
       ...rest
@@ -146,65 +155,62 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     $[2] = children;
     $[3] = className;
     $[4] = counter;
-    $[5] = iconsVisible;
-    $[6] = loadingCounters;
-    $[7] = rest;
-    $[8] = t0;
+    $[5] = loadingCounters;
+    $[6] = rest;
+    $[7] = t0;
   } else {
     Icon = $[1];
     children = $[2];
     className = $[3];
     counter = $[4];
-    iconsVisible = $[5];
-    loadingCounters = $[6];
-    rest = $[7];
-    t0 = $[8];
+    loadingCounters = $[5];
+    rest = $[6];
+    t0 = $[7];
   }
   const Component = t0 === undefined ? "a" : t0;
   let t1;
-  if ($[9] !== children) {
+  if ($[8] !== children) {
     t1 = getTextContent(children);
-    $[9] = children;
-    $[10] = t1;
+    $[8] = children;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   const textContent = t1;
   let t2;
-  if ($[11] !== className) {
+  if ($[10] !== className) {
     t2 = clsx(classes.UnderlineItem, className);
-    $[11] = className;
-    $[12] = t2;
+    $[10] = className;
+    $[11] = t2;
   } else {
-    t2 = $[12];
+    t2 = $[11];
   }
   let t3;
-  if ($[13] !== Icon || $[14] !== iconsVisible) {
-    t3 = iconsVisible && Icon && /*#__PURE__*/jsx("span", {
+  if ($[12] !== Icon) {
+    t3 = Icon && /*#__PURE__*/jsx("span", {
       "data-component": "icon",
       children: isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {})
     });
-    $[13] = Icon;
-    $[14] = iconsVisible;
-    $[15] = t3;
+    $[12] = Icon;
+    $[13] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[13];
   }
   let t4;
-  if ($[16] !== children || $[17] !== textContent) {
+  if ($[14] !== children || $[15] !== textContent) {
     t4 = children && /*#__PURE__*/jsx("span", {
       "data-component": "text",
       "data-content": textContent || undefined,
       children: children
     });
-    $[16] = children;
-    $[17] = textContent;
-    $[18] = t4;
+    $[14] = children;
+    $[15] = textContent;
+    $[16] = t4;
   } else {
-    t4 = $[18];
+    t4 = $[16];
   }
   let t5;
-  if ($[19] !== counter || $[20] !== loadingCounters) {
+  if ($[17] !== counter || $[18] !== loadingCounters) {
     t5 = counter !== undefined ? loadingCounters ? /*#__PURE__*/jsx("span", {
       "data-component": "counter",
       children: /*#__PURE__*/jsx(LoadingCounter, {})
@@ -214,32 +220,32 @@ const UnderlineItem = /*#__PURE__*/React.forwardRef((props, ref) => {
         children: counter
       })
     }) : null;
-    $[19] = counter;
-    $[20] = loadingCounters;
-    $[21] = t5;
+    $[17] = counter;
+    $[18] = loadingCounters;
+    $[19] = t5;
   } else {
-    t5 = $[21];
+    t5 = $[19];
   }
   let t6;
-  if ($[22] !== Component || $[23] !== ref || $[24] !== rest || $[25] !== t2 || $[26] !== t3 || $[27] !== t4 || $[28] !== t5) {
+  if ($[20] !== Component || $[21] !== ref || $[22] !== rest || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5) {
     t6 = /*#__PURE__*/jsxs(Component, {
       ...rest,
       ref: ref,
       className: t2,
       children: [t3, t4, t5]
     });
-    $[22] = Component;
-    $[23] = ref;
-    $[24] = rest;
-    $[25] = t2;
-    $[26] = t3;
-    $[27] = t4;
-    $[28] = t5;
-    $[29] = t6;
+    $[20] = Component;
+    $[21] = ref;
+    $[22] = rest;
+    $[23] = t2;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
   } else {
-    t6 = $[29];
+    t6 = $[27];
   }
   return t6;
 });
 
-export { GAP, LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };
+export { LoadingCounter, UnderlineItem, UnderlineItemList, UnderlineWrapper };

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

@@ -1,4 +1,4 @@
-import './UnderlineTabbedInterface-4197ee28.css';
+import './UnderlineTabbedInterface-1745a3d6.css';
 
 var classes = {"UnderlineWrapper":"prc-components-UnderlineWrapper-eT-Yj","UnderlineItemList":"prc-components-UnderlineItemList-xKlKC","UnderlineItem":"prc-components-UnderlineItem-7fP-n","LoadingCounter":"prc-components-LoadingCounter-dBuLy","loadingCounterKeyFrames":"prc-components-loadingCounterKeyFrames-8tMlf"};
 

package/generated/components.json

@@ -8956,11 +8956,11 @@
         },
         {
           "id": "components-underlinenav-features--overflow-template",
-          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav\n      aria-label=\"Repository\"\n      // @ts-ignore UnderlineNav does not take selectionVariant prop, but we need to pass it to the underlying ActionList so it doesn't show Selections.\n      selectionVariant={undefined}\n    >\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
+          "code": "({ initialSelectedIndex = 1 }: { initialSelectedIndex?: number }) => {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(\n    initialSelectedIndex,\n  )\n  return (\n    <UnderlineNav aria-label=\"Repository\">\n      {items.map((item, index) => (\n        <UnderlineNav.Item\n          key={item.navigation}\n          leadingVisual={item.icon}\n          aria-current={index === selectedIndex ? 'page' : undefined}\n          // Set so that navigation in interaction tests does not cause the\n          // page to load the storybook iframe URL and instead keeps the test in\n          // the local preview\n          target=\"_self\"\n          onSelect={(event) => {\n            event.preventDefault()\n            setSelectedIndex(index)\n          }}\n          counter={item.counter}\n          href={item.href}\n        >\n          {item.navigation}\n        </UnderlineNav.Item>\n      ))}\n    </UnderlineNav>\n  )\n}"
         },
         {
           "id": "components-underlinenav-features--overflow-on-narrow-screen",
-          "code": "() => {\n  return <OverflowTemplate initialSelectedIndex={1} />\n}"
+          "code": "() => {\n  return <OverflowTemplate initialSelectedIndex={items.length - 1} />\n}"
         },
         {
           "id": "components-underlinenav-features--counters-loading-state",

package/package.json

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

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css

@@ -1,2 +0,0 @@
-.prc-UnderlineNav-MenuItemContent-3J7gB{align-items:center;display:flex;justify-content:space-between}.prc-UnderlineNav-MoreButton-Y8soj{background:transparent;border:0;box-shadow:none;font-weight:var(--base-text-weight-normal,400);margin:0;padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}
-/*# sourceMappingURL=UnderlineNav-4344d9b0.css.map */

package/dist/UnderlineNav/UnderlineNav-4344d9b0.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,wCAEE,kBAAmB,CADnB,YAAa,CAEb,6BACF,CAGA,mCAGE,sBAAuB,CADvB,QAAS,CAGT,eAAgB,CADhB,8CAA2C,CAH3C,QAAS,CAQT,0DAKF,CAHE,mEACE,aACF","file":"UnderlineNav-4344d9b0.css","sourcesContent":[".MenuItemContent {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* More button styles migrated from styles.ts (was moreBtnStyles) */\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  border: 0;\n  background: transparent;\n  font-weight: var(--base-text-weight-normal);\n  box-shadow: none;\n  padding-top: var(--base-size-4);\n  padding-bottom: var(--base-size-4);\n  padding-left: var(--base-size-8);\n  padding-right: var(--base-size-8);\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css

@@ -1,2 +0,0 @@
-.prc-UnderlineNav-UnderlineNavItem-syRjR{align-items:center;display:flex;flex-direction:column}
-/*# sourceMappingURL=UnderlineNavItem-b65e8fd3.css.map */

package/dist/UnderlineNav/UnderlineNavItem-b65e8fd3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/UnderlineNav/UnderlineNavItem.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,kBAAmB,CAFnB,YAAa,CACb,qBAEF","file":"UnderlineNavItem-b65e8fd3.css","sourcesContent":[".UnderlineNavItem {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n"]}

package/dist/UnderlineNav/styles.d.ts

@@ -1,16 +0,0 @@
-export declare const dividerStyles: {
-    display: string;
-    borderLeft: string;
-    width: string;
-    borderLeftColor: string;
-    marginRight: string;
-    height: string;
-};
-export declare const menuItemStyles: {
-    '& > span': {
-        display: string;
-    };
-    textDecoration: string;
-};
-export declare const baseMenuMinWidth = 192;
-//# sourceMappingURL=styles.d.ts.map

package/dist/UnderlineNav/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/UnderlineNav/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;CAO1B,CAAA;AAED,eAAO,MAAM,gBAAgB,MAAM,CAAA"}

package/dist/UnderlineNav/styles.js

@@ -1,19 +0,0 @@
-const dividerStyles = {
-  display: 'inline-block',
-  borderLeft: '1px solid',
-  width: '1px',
-  borderLeftColor: 'var(--borderColor-muted)',
-  marginRight: 'var(--base-size-4)',
-  height: '24px' // The height of the divider - reference from Figma
-};
-const menuItemStyles = {
-  // This is needed to hide the selected check icon on the menu item. https://github.com/primer/react/tree/main/packages/react/src/ActionList/Selection.tsx#L32
-  '& > span': {
-    display: 'none'
-  },
-  // To reset the style when the menu items are rendered as react router links
-  textDecoration: 'none'
-};
-const baseMenuMinWidth = 192;
-
-export { baseMenuMinWidth, dividerStyles, menuItemStyles };

package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css

@@ -1,2 +0,0 @@
-.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna{overflow-x:auto;overflow-y:hidden;width:100%;-webkit-overflow-scrolling:auto}.prc-UnderlinePanels-StyledUnderlineWrapper-aiLna[data-icons-visible=false] [data-component=icon]{display:none}
-/*# sourceMappingURL=UnderlinePanels-e4b325b9.css.map */

package/dist/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/experimental/UnderlinePanels/UnderlinePanels.module.css.js"],"names":[],"mappings":"AAAA,kDAEE,eAAgB,CAChB,iBAAkB,CAFlB,UAAW,CAGX,+BACF,CAEA,kGACE,YACF","file":"UnderlinePanels-e4b325b9.css","sourcesContent":[".StyledUnderlineWrapper {\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: auto;\n}\n\n.StyledUnderlineWrapper[data-icons-visible='false'] [data-component='icon'] {\n  display: none;\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:center;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,48px);overflow:visible;padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=false]{overflow:hidden}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-measured=true]{overflow:visible}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineItemList-xKlKC{display:flex;gap:8px;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,var(--borderRadius-small,.1875rem));color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);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=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;border-radius:0;bottom:calc(50% - var(--control-xlarge-size, var(--base-size-48,3rem))/2 - 1px);content:"";height:2px;pointer-events:none;position:absolute;right:50%;transform:translate(50%,-50%);width:100%}.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-4197ee28.css.map */

package/dist/internal/components/UnderlineTabbedInterface-4197ee28.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAKE,kBAAmB,CAOnB,0DAAiD,CAXjD,YAAa,CAGb,0BAA2B,CAI3B,0CAA4C,CAO5C,gBAAiB,CAZjB,+CA0BF,CAZE,qEACE,eACF,CAEA,oEACE,gBACF,CAEA,2DAEE,oBACF,CAGF,wCAEE,YAAa,CAMb,OAAQ,CAFR,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBAIF,CAEA,4EAJE,kBAAmB,CANnB,iBAsCF,CA5BA,oCAgBE,eAAgB,CALhB,4BAA6B,CAC7B,QAAS,CACT,2EAAoE,CANpE,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CACvC,qDAAuD,CAYvD,wCAAiC,CADjC,uCAAkC,CATlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAmBF,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,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAaE,4BAA6B,CAC7B,eAAgB,CANhB,+EAAmF,CAInF,UAAW,CAFX,UAAW,CACX,mBAAoB,CAVpB,iBAAkB,CAClB,SAAU,CAaV,6BAA+B,CAN/B,UAOF,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-4197ee28.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: center;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size, 48px);\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  /* Hide overflow until calculation is complete to prevent CLS */\n  overflow: visible;\n\n  &[data-overflow-measured='false'] {\n    overflow: hidden;\n  }\n\n  &[data-overflow-measured='true'] {\n    overflow: visible;\n  }\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\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: 8px;\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, var(--borderRadius-small));\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.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  right: 50%;\n\n  /* TODO: see if we can simplify this positioning */\n\n  /* 48px total height / 2 (24px) + 1px */\n  /* stylelint-disable-next-line primer/spacing */\n  bottom: calc(50% - calc(var(--control-xlarge-size, var(--base-size-48)) / 2 + 1px));\n  width: 100%;\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n  border-radius: 0;\n  transform: translate(50%, -50%);\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"]}