@primer/react 38.37.1-rc.f1c7ced7b → 38.38.0-rc.1d4172bf2

package/dist/index.js

@@ -1,5 +1,7 @@
 "use client";
 import theme from "./theme.js";
+import { AriaAlert } from "./live-region/AriaAlert.js";
+import { AriaStatus } from "./live-region/AriaStatus.js";
 import BaseStyles from "./BaseStyles.js";
 import { useSyncedState } from "./hooks/useSyncedState.js";
 import { useColorSchemeVar, useTheme } from "./useTheme.js";
@@ -94,4 +96,4 @@ import { TreeView } from "./TreeView/TreeView.js";
 import { UnderlineNav } from "./UnderlineNav/index.js";
 import { ActionBar } from "./ActionBar/index.js";
 import { PageHeader } from "./PageHeader/PageHeader.js";
-export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, DragHandle, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
+export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, AriaAlert, AriaStatus, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, DragHandle, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };

package/dist/internal/components/ButtonReset.js

@@ -1,7 +1,7 @@
 import ButtonReset_module_css_default from "./ButtonReset.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/ButtonReset.tsx
 /**
 * Provides an unstyled button that can be styled as-needed for components

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js

@@ -8,9 +8,9 @@ import CheckboxOrRadioGroupCaption from "./CheckboxOrRadioGroupCaption.js";
 import CheckboxOrRadioGroupLabel from "./CheckboxOrRadioGroupLabel.js";
 import CheckboxOrRadioGroupValidation from "./CheckboxOrRadioGroupValidation.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
 const CheckboxOrRadioGroup = (t0) => {
 	const $ = c(51);
@@ -84,7 +84,7 @@ const CheckboxOrRadioGroup = (t0) => {
 				slots.caption,
 				/*#__PURE__*/ React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/ jsx(VisuallyHidden, { children: slots.validation.props.children })
 			]
-		}) : /*#__PURE__*/ jsxs(Fragment, { children: [slots.caption, required && requiredMessageId && /*#__PURE__*/ jsx(VisuallyHidden, {
+		}) : /*#__PURE__*/ jsxs(Fragment$1, { children: [slots.caption, required && requiredMessageId && /*#__PURE__*/ jsx(VisuallyHidden, {
 			id: requiredMessageId,
 			children: "Required"
 		})] });

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js

@@ -2,9 +2,9 @@ import Text_default from "../../../Text/Text.js";
 import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
 import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx
 const CheckboxOrRadioGroupCaption = (t0) => {
 	const $ = c(7);

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js

@@ -3,9 +3,9 @@ import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
 import CheckboxOrRadioGroup_module_css_default from "./CheckboxOrRadioGroup.module.css.js";
 import { Stack } from "../../../Stack/index.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
 const CheckboxOrRadioGroupLabel = (t0) => {
 	const $ = c(12);

package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js

@@ -1,8 +1,8 @@
 import CheckboxOrRadioGroupContext from "./CheckboxOrRadioGroupContext.js";
 import InputValidation from "../InputValidation.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
 const CheckboxOrRadioGroupValidation = (t0) => {
 	const $ = c(5);

package/dist/internal/components/InputLabel.js

@@ -1,7 +1,7 @@
 import InputLabel_module_css_default from "./InputLabel.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/InputLabel.tsx
 function InputLabel(t0) {
 	const $ = c(28);

package/dist/internal/components/InputValidation.js

@@ -1,8 +1,8 @@
 import Text_default from "../../Text/Text.js";
 import InputValidation_module_css_default from "./InputValidation.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { AlertFillIcon, CheckCircleFillIcon } from "@primer/octicons-react";
 //#region src/internal/components/InputValidation.tsx
 const validationIconMap = {

package/dist/internal/components/OverflowObserverProvider.js

@@ -1,8 +1,8 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { OverflowObserverContext } from "../hooks/useOverflowObserver.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/internal/components/OverflowObserverProvider.tsx
 /**
 * Owns a single `IntersectionObserver` shared by every descendant that calls `useIsClipped`, instead of each item

package/dist/internal/components/TextInputInnerAction.js

@@ -3,9 +3,9 @@ import { IconButton } from "../../Button/IconButton.js";
 import { ButtonComponent } from "../../Button/Button.js";
 import TextInputInnerAction_module_css_default from "./TextInputInnerAction.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/TextInputInnerAction.tsx
 const ConditionalTooltip = (t0) => {
 	const $ = c(6);
@@ -25,7 +25,7 @@ const ConditionalTooltip = (t0) => {
 	} else t1 = $[3];
 	let t2;
 	if ($[4] !== t1) {
-		t2 = /*#__PURE__*/ jsx(Fragment, { children: t1 });
+		t2 = /*#__PURE__*/ jsx(Fragment$1, { children: t1 });
 		$[4] = t1;
 		$[5] = t2;
 	} else t2 = $[5];

package/dist/internal/components/TextInputInnerVisualSlot.js

@@ -1,8 +1,8 @@
 import Spinner from "../../Spinner/Spinner.js";
 import TextInputInnerVisualSlot_module_css_default from "./TextInputInnerVisualSlot.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/TextInputInnerVisualSlot.tsx
 const TextInputInnerVisualSlot = (t0) => {
 	const $ = c(21);

package/dist/internal/components/TextInputWrapper.js

@@ -1,8 +1,8 @@
 import TextInputWrapper_module_css_default from "./TextInputWrapper.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/TextInputWrapper.tsx
 const TextInputBaseWrapper = /*#__PURE__*/ React.forwardRef(function TextInputBaseWrapper(t0, forwardRef) {
 	const $ = c(44);

package/dist/internal/components/UnderlineTabbedInterface-a5cd75c0.css

@@ -0,0 +1,2 @@
+.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border:0!important;box-sizing:border-box!important;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{contain:layout;display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:var(--base-size-32,2rem);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-a5cd75c0.css.map */

package/dist/internal/components/UnderlineTabbedInterface-a5cd75c0.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,kBAAoB,CADpB,+BAAiC,CAHjC,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAaE,cAAe,CAXf,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBASF,CAEA,4EATE,kBAAmB,CANnB,iBA8CF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,+BAA2B,CAV3B,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-a5cd75c0.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external box-sizing/border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box !important;\n    border: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n\n  /* Isolate the ResizeObserver-driven item swapping (UnderlineNav overflow menu / UnderlinePanels)\n  so it can't invalidate ancestor layout. Safe because UnderlineNav's overflow menu is rendered via ActionMenu.Overlay\n  (portal by default), and layout containment does not clip. */\n  contain: layout;\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: var(--base-size-32);\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.js

@@ -1,9 +1,9 @@
 import CounterLabel from "../../CounterLabel/CounterLabel.js";
 import UnderlineTabbedInterface_module_css_default from "./UnderlineTabbedInterface.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { isElement } from "react-is";
 //#region src/internal/components/UnderlineTabbedInterface.tsx
 function getTextContent(children) {

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

@@ -1,4 +1,4 @@
-import "./UnderlineTabbedInterface-8a52007f.css";
+import "./UnderlineTabbedInterface-a5cd75c0.css";
 //#region src/internal/components/UnderlineTabbedInterface.module.css.js
 var UnderlineTabbedInterface_module_css_default = {
 	"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",

package/dist/internal/components/UnstyledTextInput.js

@@ -1,8 +1,8 @@
 import UnstyledTextInput_module_css_default from "./UnstyledTextInput.module.css.js";
 import { c } from "react-compiler-runtime";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
 import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 //#region src/internal/components/UnstyledTextInput.tsx
 const UnstyledTextInput = /*#__PURE__*/ React.forwardRef(function UnstyledTextInput(t0, forwardRef) {
 	const $ = c(9);

package/dist/internal/components/ValidationAnimationContainer.js

@@ -1,7 +1,7 @@
 import ValidationAnimationContainer_module_css_default from "./ValidationAnimationContainer.module.css.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/internal/components/ValidationAnimationContainer.tsx
 const ValidationAnimationContainer = (t0) => {
 	const $ = c(14);

package/dist/live-region/Announce.js

@@ -1,9 +1,9 @@
 import { useEffectOnce } from "../internal/hooks/useEffectOnce.js";
 import { useEffectCallback } from "../internal/hooks/useEffectCallback.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
 import { announceFromElement } from "@primer/live-region-element";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/live-region/Announce.tsx
 /**
 * `Announce` is a component that will announce the text content of the

package/dist/live-region/AriaAlert.d.ts

@@ -2,7 +2,7 @@ import { PolymorphicProps } from "../utils/modern-polymorphic.js";
 import React, { ElementType } from "react";
 
 //#region src/live-region/AriaAlert.d.ts
-type AriaAlertProps<As extends ElementType> = PolymorphicProps<As, 'div', {
+type AriaAlertProps<As extends ElementType = 'div'> = PolymorphicProps<As, 'div', {
   /**
    * Specify if the content of the element should be announced when this
    * component is rendered and is not hidden

package/dist/utils/descendant-registry.js

@@ -1,7 +1,7 @@
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
 import { c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useReducer, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/utils/descendant-registry.tsx
 /**
 * Create a "descendant registry" for a component. This allows a parent to store and track an ordered registry of

package/generated/components.json

@@ -9151,6 +9151,79 @@
         }
       ]
     },
+    "aria-alert": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/live-region",
+      "id": "aria-alert",
+      "name": "AriaAlert",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "importPath": "@primer/react",
+      "stories": [
+        {
+          "id": "components-ariaalert--default",
+          "code": "() => {\n  const [message, setMessage] = useState('Default message')\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setMessage(`Last updated at ${new Date().toLocaleTimeString()}`)\n    }, 5000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n  return <AriaAlert>{message}</AriaAlert>\n}"
+        },
+        {
+          "id": "components-ariaalert-features--visually-hidden-story",
+          "code": "() => {\n  return (\n    <>\n      <p>This is an example</p>\n      <VisuallyHidden>\n        <AriaAlert>A visually hidden message</AriaAlert>\n      </VisuallyHidden>\n    </>\n  )\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "announceOnShow",
+          "type": "boolean",
+          "description": "Specify if the content of the element should be announced when this component is rendered and is not hidden",
+          "defaultValue": "true"
+        },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "description": "Specify if the element is hidden",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    "aria-status": {
+      "source": "https://github.com/primer/react/tree/main/packages/react/src/live-region",
+      "id": "aria-status",
+      "name": "AriaStatus",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "importPath": "@primer/react",
+      "stories": [
+        {
+          "id": "components-ariastatus--default",
+          "code": "() => {\n  const [message, setMessage] = useState('Default message')\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setMessage(`Last updated at ${new Date().toLocaleTimeString()}`)\n    }, 5000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n  return <AriaStatus>{message}</AriaStatus>\n}"
+        },
+        {
+          "id": "components-ariastatus-features--visually-hidden-story",
+          "code": "() => {\n  return (\n    <>\n      <p>This is an example</p>\n      <VisuallyHidden>\n        <AriaStatus>A visually hidden message</AriaStatus>\n      </VisuallyHidden>\n    </>\n  )\n}"
+        },
+        {
+          "id": "components-ariastatus-features--with-delay",
+          "code": "() => {\n  const [message, setMessage] = useState('Default message')\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setMessage(`Last updated at ${new Date().toLocaleTimeString()}`)\n    }, 5000)\n    return () => {\n      clearInterval(interval)\n    }\n  }, [])\n  return <AriaStatus delayMs={1000}>{message}</AriaStatus>\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "announceOnShow",
+          "type": "boolean",
+          "description": "Specify if the content of the element should be announced when this component is rendered and is not hidden",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "description": "Specify if the element is hidden",
+          "defaultValue": "false"
+        },
+        {
+          "name": "delayMs",
+          "type": "number",
+          "description": "Provide a delay in milliseconds before the announcement is made"
+        }
+      ]
+    },
     "dialog": {
       "source": "https://github.com/primer/react/tree/main/packages/react/src/deprecated/DialogV1",
       "id": "dialog",

package/package.json

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

package/dist/internal/components/UnderlineTabbedInterface-8a52007f.css

@@ -1,2 +0,0 @@
-.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box!important;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{contain:layout;display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:var(--base-size-32,2rem);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-8a52007f.css.map */

package/dist/internal/components/UnderlineTabbedInterface-8a52007f.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,+BAAiC,CAHjC,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAaE,cAAe,CAXf,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBASF,CAEA,4EATE,kBAAmB,CANnB,iBA8CF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,+BAA2B,CAV3B,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-8a52007f.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external box-sizing/border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box !important;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n\n  /* Isolate the ResizeObserver-driven item swapping (UnderlineNav overflow menu / UnderlinePanels)\n  so it can't invalidate ancestor layout. Safe because UnderlineNav's overflow menu is rendered via ActionMenu.Overlay\n  (portal by default), and layout containment does not clip. */\n  contain: layout;\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: var(--base-size-32);\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"]}