@primer/react 38.30.0-rc.dc0369509 → 38.30.0

package/dist/NavList/NavList.js

@@ -12,65 +12,210 @@ import navListClasses from './NavList.module.css.js';
 import { flushSync } from 'react-dom';
 import { useSlots } from '../hooks/useSlots.js';
 import { fixedForwardRef } from '../utils/modern-polymorphic.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import visuallyHiddenClasses from '../_VisuallyHidden.module.css.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Heading$1 from '../Heading/Heading.js';
+
+// Publishes the resolved numeric level of a NavList.Heading (e.g. 2 for an h2) so
+// NavList.Group/NavList.GroupHeading can default to one level deeper. `null` when
+// there is no NavList.Heading, in which case groups keep their historical h3 default.
+const NavListHeadingLevelContext = /*#__PURE__*/React.createContext(null);
+function headingTagToLevel(as) {
+  return Number.parseInt(as.slice(1), 10);
+}
+function levelToHeadingTag(level) {
+  // Clamp to h4 so group headings never go deeper than the supported hierarchy.
+  const clamped = Math.min(Math.max(level, 1), 4);
+  return `h${clamped}`;
+}
+
+// ----------------------------------------------------------------------------
+// NavList
 
 const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(10);
+  var _heading$props$id, _ariaLabelledby;
+  const $ = c(24);
+  let ariaLabel;
+  let ariaLabelledby;
   let children;
   let props;
   if ($[0] !== t0) {
     ({
       children,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
       ...props
     } = t0);
     $[0] = t0;
-    $[1] = children;
-    $[2] = props;
+    $[1] = ariaLabel;
+    $[2] = ariaLabelledby;
+    $[3] = children;
+    $[4] = props;
   } else {
-    children = $[1];
-    props = $[2];
+    ariaLabel = $[1];
+    ariaLabelledby = $[2];
+    children = $[3];
+    props = $[4];
   }
   let t1;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = {
-      container: "NavList"
+      heading: Heading
     };
-    $[3] = t1;
+    $[5] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[5];
   }
+  const [slots, childrenWithoutHeading] = useSlots(children, t1);
+  const fallbackHeadingId = useId();
+  const heading = slots.heading;
+  const headingId = heading ? (_heading$props$id = heading.props.id) !== null && _heading$props$id !== void 0 ? _heading$props$id : fallbackHeadingId : undefined;
   let t2;
-  if ($[4] !== children) {
-    t2 = /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
-      value: t1,
+  if ($[6] !== heading) {
+    var _heading$props$as;
+    t2 = heading ? headingTagToLevel((_heading$props$as = heading.props.as) !== null && _heading$props$as !== void 0 ? _heading$props$as : "h2") : null;
+    $[6] = heading;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const headingLevel = t2;
+  const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? undefined : headingId;
+  let t3;
+  if ($[8] !== heading || $[9] !== headingId) {
+    t3 = heading ? /*#__PURE__*/React.cloneElement(heading, {
+      id: headingId
+    }) : null;
+    $[8] = heading;
+    $[9] = headingId;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      container: "NavList"
+    };
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== childrenWithoutHeading) {
+    t5 = /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
+      value: t4,
       children: /*#__PURE__*/jsx(ActionList, {
-        children: children
+        children: childrenWithoutHeading
       })
     });
-    $[4] = children;
-    $[5] = t2;
+    $[12] = childrenWithoutHeading;
+    $[13] = t5;
   } else {
-    t2 = $[5];
+    t5 = $[13];
   }
-  let t3;
-  if ($[6] !== props || $[7] !== ref || $[8] !== t2) {
-    t3 = /*#__PURE__*/jsx("nav", {
+  let t6;
+  if ($[14] !== headingLevel || $[15] !== t3 || $[16] !== t5) {
+    t6 = /*#__PURE__*/jsxs(NavListHeadingLevelContext.Provider, {
+      value: headingLevel,
+      children: [t3, t5]
+    });
+    $[14] = headingLevel;
+    $[15] = t3;
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== ariaLabel || $[19] !== navLabelledby || $[20] !== props || $[21] !== ref || $[22] !== t6) {
+    t7 = /*#__PURE__*/jsx("nav", {
       ...props,
+      "aria-label": ariaLabel,
+      "aria-labelledby": navLabelledby,
       ref: ref,
       "data-component": "NavList",
-      children: t2
+      children: t6
     });
-    $[6] = props;
-    $[7] = ref;
-    $[8] = t2;
-    $[9] = t3;
+    $[18] = ariaLabel;
+    $[19] = navLabelledby;
+    $[20] = props;
+    $[21] = ref;
+    $[22] = t6;
+    $[23] = t7;
   } else {
-    t3 = $[9];
+    t7 = $[23];
   }
-  return t3;
+  return t7;
 });
 Root.displayName = 'NavList';
 
+// ----------------------------------------------------------------------------
+// NavList.Heading
+
+const Heading = t0 => {
+  const $ = c(14);
+  let children;
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      visuallyHidden: t2,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const as = t1 === undefined ? "h2" : t1;
+  const visuallyHidden = t2 === undefined ? false : t2;
+  const t3 = visuallyHidden ? visuallyHiddenClasses.InternalVisuallyHidden : navListClasses.Heading;
+  let t4;
+  if ($[6] !== className || $[7] !== t3) {
+    t4 = clsx(t3, className);
+    $[6] = className;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== as || $[10] !== children || $[11] !== props || $[12] !== t4) {
+    t5 = /*#__PURE__*/jsx(Heading$1, {
+      as: as,
+      variant: "small",
+      className: t4,
+      "data-component": "NavList.Heading",
+      ...props,
+      children: children
+    });
+    $[9] = as;
+    $[10] = children;
+    $[11] = props;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+};
+Heading.displayName = 'NavList.Heading';
+Heading.__SLOT__ = Symbol('NavList.Heading');
+
 // ----------------------------------------------------------------------------
 // NavList.Item
 
@@ -398,7 +543,7 @@ TrailingAction.displayName = 'NavList.TrailingAction';
 // NavList.Group
 
 const Group = t0 => {
-  const $ = c(11);
+  const $ = c(14);
   let children;
   let props;
   let title;
@@ -417,41 +562,52 @@ const Group = t0 => {
     props = $[2];
     title = $[3];
   }
+  const headingLevel = React.useContext(NavListHeadingLevelContext);
   let t1;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = /*#__PURE__*/jsx(ActionList.Divider, {});
-    $[4] = t1;
+  if ($[4] !== headingLevel) {
+    t1 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+    $[4] = headingLevel;
+    $[5] = t1;
   } else {
-    t1 = $[4];
+    t1 = $[5];
   }
+  const groupHeadingAs = t1;
   let t2;
-  if ($[5] !== title) {
-    t2 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
-      as: "h3",
-      "data-component": "ActionList.GroupHeading",
-      children: title
-    }) : null;
-    $[5] = title;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/jsx(ActionList.Divider, {});
     $[6] = t2;
   } else {
     t2 = $[6];
   }
   let t3;
-  if ($[7] !== children || $[8] !== props || $[9] !== t2) {
-    t3 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t1, /*#__PURE__*/jsxs(ActionList.Group, {
+  if ($[7] !== groupHeadingAs || $[8] !== title) {
+    t3 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
+      as: groupHeadingAs,
+      "data-component": "ActionList.GroupHeading",
+      children: title
+    }) : null;
+    $[7] = groupHeadingAs;
+    $[8] = title;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== children || $[11] !== props || $[12] !== t3) {
+    t4 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t2, /*#__PURE__*/jsxs(ActionList.Group, {
         ...props,
-        children: [t2, children]
+        children: [t3, children]
       })]
     });
-    $[7] = children;
-    $[8] = props;
-    $[9] = t2;
-    $[10] = t3;
+    $[10] = children;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
   } else {
-    t3 = $[10];
+    t4 = $[13];
   }
-  return t3;
+  return t4;
 };
 // ----------------------------------------------------------------------------
 // NavList.GroupExpand
@@ -593,49 +749,60 @@ const GroupExpand = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
  * It was primarily added to allow links in group headings.
  */
 const GroupHeading = t0 => {
-  const $ = c(10);
+  const $ = c(13);
+  let as;
   let className;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
-      as: t1,
+      as,
       className,
       ...rest
     } = t0);
     $[0] = t0;
-    $[1] = className;
-    $[2] = rest;
-    $[3] = t1;
+    $[1] = as;
+    $[2] = className;
+    $[3] = rest;
+  } else {
+    as = $[1];
+    className = $[2];
+    rest = $[3];
+  }
+  const headingLevel = React.useContext(NavListHeadingLevelContext);
+  let t1;
+  if ($[4] !== as || $[5] !== headingLevel) {
+    var _as;
+    t1 = (_as = as) !== null && _as !== void 0 ? _as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+    $[4] = as;
+    $[5] = headingLevel;
+    $[6] = t1;
   } else {
-    className = $[1];
-    rest = $[2];
-    t1 = $[3];
+    t1 = $[6];
   }
-  const as = t1 === undefined ? "h3" : t1;
+  const resolvedAs = t1;
   let t2;
-  if ($[4] !== className) {
+  if ($[7] !== className) {
     t2 = clsx(navListClasses.GroupHeading, className);
-    $[4] = className;
-    $[5] = t2;
+    $[7] = className;
+    $[8] = t2;
   } else {
-    t2 = $[5];
+    t2 = $[8];
   }
   let t3;
-  if ($[6] !== as || $[7] !== rest || $[8] !== t2) {
+  if ($[9] !== resolvedAs || $[10] !== rest || $[11] !== t2) {
     t3 = /*#__PURE__*/jsx(ActionList.GroupHeading, {
-      as: as,
+      as: resolvedAs,
       className: t2,
       "data-component": "NavList.GroupHeading",
       headingWrapElement: "li",
       ...rest
     });
-    $[6] = as;
-    $[7] = rest;
-    $[8] = t2;
-    $[9] = t3;
+    $[9] = resolvedAs;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[12];
   }
   return t3;
 };
@@ -645,6 +812,7 @@ const GroupHeading = t0 => {
 
 const NavList = Object.assign(Root, {
   Description: ActionList.Description,
+  Heading,
   Item,
   SubNav,
   LeadingVisual,

package/dist/NavList/NavList.module.css.js

@@ -1,5 +1,5 @@
-import './NavList-5dc067e3.css';
+import './NavList-b50d982b.css';
 
-var navListClasses = {"GroupHeading":"prc-NavList-GroupHeading-mN50z"};
+var navListClasses = {"Heading":"prc-NavList-Heading--JQMj","GroupHeading":"prc-NavList-GroupHeading-mN50z"};
 
 export { navListClasses as default };

package/dist/SelectPanel/SelectPanel.d.ts

@@ -63,8 +63,8 @@ type SelectPanelVariantProps = {
     variant: 'modal';
     onCancel: () => void;
 };
-export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
-declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, focusPrependedElements, virtualized, displayInViewport, ...listProps }: SelectPanelProps): JSX.Element;
+export type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant' | 'variant' | 'message'> & Pick<AnchoredOverlayProps, 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps;
+declare function Panel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText, inputLabel, selected, title, subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType, className, height, width, id, message, notice, onCancel, variant, secondaryAction, showSelectedOptionsFirst, disableFullscreenOnNarrow, align, showSelectAll, focusPrependedElements, virtualized, displayInViewport, cssAnchorPositioningSettings, ...listProps }: SelectPanelProps): JSX.Element;
 declare const SecondaryButton: React.FC<ButtonProps>;
 declare const SecondaryLink: React.FC<LinkButtonProps & ButtonProps>;
 export declare const SelectPanel: typeof Panel & {

package/dist/SelectPanel/SelectPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../src/SelectPanel/SelectPanel.tsx"],"names":[],"mappings":"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"}

package/dist/SelectPanel/SelectPanel.js

@@ -115,6 +115,7 @@ function Panel({
   focusPrependedElements,
   virtualized,
   displayInViewport,
+  cssAnchorPositioningSettings,
   ...listProps
 }) {
   var _listProps$groupMetad;
@@ -708,9 +709,11 @@ function Panel({
       closeButtonProps: closeButtonProps,
       displayInViewport: displayInViewport
       // Modal variant is positioned manually so native CSS anchor positioning must not be used
+      // Other cssAnchorPositioningSettings (e.g. fallbackStrategy) may be passed in and are forwarded here
       ,
       cssAnchorPositioningSettings: {
-        disable: variant === 'modal'
+        ...cssAnchorPositioningSettings,
+        disable: variant === 'modal' || (cssAnchorPositioningSettings === null || cssAnchorPositioningSettings === void 0 ? void 0 : cssAnchorPositioningSettings.disable)
       },
       children: /*#__PURE__*/jsxs("div", {
         className: classes.Wrapper,

package/dist/UnderlineNav/UnderlineNav-47547980.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) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
+/*# sourceMappingURL=UnderlineNav-47547980.css.map */

package/dist/UnderlineNav/UnderlineNav-47547980.css.map

@@ -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,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-47547980.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n\n  --UnderlineNav_moreButton-visibility: hidden;\n  --UnderlineNav_icons-display: inline;\n\n  &[data-hide-icons='true'] {\n    --UnderlineNav_icons-display: none;\n  }\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-visibility: visible;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-visibility: visible;\n    --UnderlineNav_icons-display: none;\n  }\n}\n\n.ItemsList [data-component='icon'] {\n  display: var(--UnderlineNav_icons-display);\n}\n\n.MoreButtonContainer {\n  display: flex;\n  visibility: var(--UnderlineNav_moreButton-visibility);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      /* Pull down same amount as the item-level decoration, plus the border width of the button */\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n      height: 2px;\n      pointer-events: none;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n      @media (forced-colors: active) {\n        /* Support for Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/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,mFAsIxB,CAAA"}