@primer/react 38.40.1-rc.e1840f86c → 38.40.2-rc.11844809c

package/dist/Button/ButtonBase.js

@@ -6,11 +6,13 @@ import Spinner from "../Spinner/Spinner.js";
 import CounterLabel from "../CounterLabel/CounterLabel.js";
 import { ConditionalWrapper } from "../internal/components/ConditionalWrapper.js";
 import ButtonBase_module_css_default from "./ButtonBase.module.css.js";
+import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import React, { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isElement } from "react-is";
 //#region src/Button/ButtonBase.tsx
+const BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG = "primer_react_button_loading_disabled_styles";
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/ jsx("span", {
 	"data-component": visualName,
 	className: clsx(!counterLabel && ButtonBase_module_css_default.Visual, visualName === "leadingVisual" && ButtonBase_module_css_default.LeadingVisual, loading ? ButtonBase_module_css_default.LoadingSpinner : ButtonBase_module_css_default.VisualWrap),
@@ -21,6 +23,7 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
 	const { leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction: TrailingAction, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, count, icon: Icon, id, variant = "default", size = "medium", alignContent = "center", block = false, loading, loadingAnnouncement = "Loading", inactive, onClick, labelWrap, notificationIndicator, className, ...rest } = props;
 	const innerRef = React.useRef(null);
 	const mergedRef = useMergedRefs(forwardedRef, innerRef);
+	const loadingDisabledStylesEnabled = useFeatureFlag(BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG);
 	const uuid = useId$1(id);
 	const loadingAnnouncementID = `${uuid}-loading-announcement`;
 	const ariaDescribedByIds = loading ? [loadingAnnouncementID, ariaDescribedBy] : [ariaDescribedBy];
@@ -42,6 +45,7 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
 			"data-block": block ? "block" : null,
 			"data-inactive": inactive ? true : void 0,
 			"data-loading": Boolean(loading),
+			"data-loading-disabled-styles": loadingDisabledStylesEnabled ? true : void 0,
 			"data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : void 0,
 			"data-size": size,
 			"data-variant": variant,

package/dist/Button/ButtonBase.module.css.js

@@ -1,4 +1,4 @@
-import "./ButtonBase-014fae23.css";
+import "./ButtonBase-c8dab214.css";
 //#region src/Button/ButtonBase.module.css.js
 var ButtonBase_module_css_default = {
 	"ButtonBase": "prc-Button-ButtonBase-9n-Xk",

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -8,7 +8,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
 	primer_react_action_list_group_heading_trailing_action: false,
 	primer_react_action_list_item_gap: false,
 	primer_react_timeline_list_semantics: false,
-	primer_react_merged_forwarded_refs: false
+	primer_react_merged_forwarded_refs: false,
+	primer_react_button_loading_disabled_styles: false
 });
 //#endregion
 export { DefaultFeatureFlags };

package/dist/FormControl/FormControl.js

@@ -8,7 +8,6 @@ import TextInput_default from "../TextInput/TextInput.js";
 import Autocomplete_default from "../Autocomplete/Autocomplete.js";
 import ValidationAnimationContainer from "../internal/components/ValidationAnimationContainer.js";
 import CheckboxOrRadioGroupContext from "../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js";
-import { FormControlContextProvider } from "./_FormControlContext.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import Select_default from "../Select/Select.js";
 import { SelectPanel } from "../SelectPanel/SelectPanel.js";
@@ -18,6 +17,7 @@ import { FormControlCaption } from "./FormControlCaption.js";
 import FormControlLabel from "./FormControlLabel.js";
 import FormControlLeadingVisual from "./FormControlLeadingVisual.js";
 import FormControlValidation from "./_FormControlValidation.js";
+import { FormControlContextProvider } from "./_FormControlContextProvider.js";
 import FormControl_module_css_default from "./FormControl.module.css.js";
 import React, { useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/FormControl/_FormControlContext.js

@@ -2,7 +2,6 @@ import { c } from "../utils/react-compiler-runtime.js";
 import { createContext, useContext } from "react";
 //#region src/FormControl/_FormControlContext.tsx
 const FormControlContext = /*#__PURE__*/ createContext(null);
-const FormControlContextProvider = FormControlContext.Provider;
 /** This is the private/internal interface for subcomponents of `FormControl`. */
 function useFormControlContext() {
 	var _useContext;
@@ -46,4 +45,4 @@ function useFormControlForwardedProps(externalProps) {
 	return t1;
 }
 //#endregion
-export { FormControlContextProvider, useFormControlContext, useFormControlForwardedProps };
+export { FormControlContext, useFormControlContext, useFormControlForwardedProps };

package/dist/FormControl/_FormControlContextProvider.js

@@ -0,0 +1,5 @@
+import { FormControlContext } from "./_FormControlContext.js";
+//#region src/FormControl/_FormControlContextProvider.tsx
+const FormControlContextProvider = FormControlContext.Provider;
+//#endregion
+export { FormControlContextProvider };

package/dist/TreeView/useRovingTabIndex.js

@@ -57,6 +57,7 @@ function _temp(direction, from, event) {
 	try {
 		if (from.closest("dialog:modal")) return;
 	} catch {}
+	if (from.getAttribute("role") !== "treeitem") return from;
 	return (_getNextFocusableElem = getNextFocusableElement(from, event)) !== null && _getNextFocusableElem !== void 0 ? _getNextFocusableElem : from;
 }
 function getNextFocusableElement(activeElement, event) {

package/dist/Truncate/Truncate.d.ts

@@ -1,13 +1,18 @@
-import { ForwardRefComponent } from "../utils/polymorphic.js";
+import { DistributiveOmit, PolymorphicProps } from "../utils/modern-polymorphic.js";
 import React from "react";
 
 //#region src/Truncate/Truncate.d.ts
-type TruncateProps = React.HTMLAttributes<HTMLElement> & {
+type TruncateOwnProps = {
   title: string;
   inline?: boolean;
   expandable?: boolean;
   maxWidth?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
 };
-declare const Truncate: ForwardRefComponent<"div", TruncateProps>;
+type TruncateProps<As extends React.ElementType = 'div'> = PolymorphicProps<As, 'div', TruncateOwnProps>;
+declare const _default: <As extends React.ElementType = "div">(props: DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & TruncateOwnProps, "as"> & {
+  as?: As | undefined;
+} & React.RefAttributes<any>) => React.ReactNode;
 //#endregion
-export { type TruncateProps, Truncate as default };
+export { TruncateProps, _default as default };

package/dist/Truncate/Truncate.js

@@ -1,10 +1,12 @@
+import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import Truncate_module_css_default from "./Truncate.module.css.js";
-import React from "react";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/Truncate/Truncate.tsx
-const Truncate = /*#__PURE__*/ React.forwardRef(function Truncate({ as: Component = "div", children, className, title, inline, expandable, maxWidth = 125, style, ...rest }, ref) {
+function Truncate(props, ref) {
+	const { as: Component = "div", children, className, title, inline, expandable, maxWidth = 125, style, ...rest } = props;
 	return /*#__PURE__*/ jsx(Component, {
+		...typeof Component === "string" ? {} : { inline },
 		...rest,
 		ref,
 		className: clsx(className, Truncate_module_css_default.Truncate),
@@ -17,7 +19,9 @@ const Truncate = /*#__PURE__*/ React.forwardRef(function Truncate({ as: Componen
 		},
 		children
 	});
-});
+}
 Truncate.displayName = "Truncate";
+Truncate.displayName = "Truncate";
+var Truncate_default = fixedForwardRef(Truncate);
 //#endregion
-export { Truncate as default };
+export { Truncate_default as default };

package/dist/Truncate/index.d.ts

@@ -1,2 +1,2 @@
-import Truncate, { TruncateProps } from "./Truncate.js";
-export { type TruncateProps, Truncate as default };
+import _default, { TruncateProps } from "./Truncate.js";
+export { type TruncateProps, _default as default };

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -9,72 +9,80 @@ import { jsx } from "react/jsx-runtime";
 //#region src/UnderlineNav/UnderlineNavItem.tsx
 const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 	var _leadingVisual;
-	const $ = c(30);
+	const $ = c(33);
 	let Icon;
 	let ariaCurrent;
 	let children;
 	let counter;
+	let href;
 	let leadingVisual;
 	let onSelect;
 	let props;
 	let t0;
-	let t1;
 	if ($[0] !== allProps) {
-		({as: t0, href: t1, children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props} = allProps);
+		({as: t0, href, children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props} = allProps);
 		$[0] = allProps;
 		$[1] = Icon;
 		$[2] = ariaCurrent;
 		$[3] = children;
 		$[4] = counter;
-		$[5] = leadingVisual;
-		$[6] = onSelect;
-		$[7] = props;
-		$[8] = t0;
-		$[9] = t1;
+		$[5] = href;
+		$[6] = leadingVisual;
+		$[7] = onSelect;
+		$[8] = props;
+		$[9] = t0;
 	} else {
 		Icon = $[1];
 		ariaCurrent = $[2];
 		children = $[3];
 		counter = $[4];
-		leadingVisual = $[5];
-		onSelect = $[6];
-		props = $[7];
-		t0 = $[8];
-		t1 = $[9];
+		href = $[5];
+		leadingVisual = $[6];
+		onSelect = $[7];
+		props = $[8];
+		t0 = $[9];
 	}
 	const Component = t0 === void 0 ? "a" : t0;
-	const href = t1 === void 0 ? "#" : t1;
+	let t1;
+	if ($[10] !== Component || $[11] !== href) {
+		var _href;
+		t1 = Component === "a" ? { href: (_href = href) !== null && _href !== void 0 ? _href : "#" } : href === void 0 ? {} : { href };
+		$[10] = Component;
+		$[11] = href;
+		$[12] = t1;
+	} else t1 = $[12];
+	const hrefProps = t1;
 	const ref = useRef(null);
 	const { loadingCounters } = useContext(UnderlineNavContext);
 	const isOverflowing = useIsClipped(ref);
 	UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
 	let t2;
-	if ($[10] !== onSelect) {
+	if ($[13] !== onSelect) {
 		t2 = (event) => {
 			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
 		};
-		$[10] = onSelect;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[13] = onSelect;
+		$[14] = t2;
+	} else t2 = $[14];
 	const keyDownHandler = t2;
 	let t3;
-	if ($[12] !== onSelect) {
+	if ($[15] !== onSelect) {
 		t3 = (event_0) => {
 			if (!event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
 		};
-		$[12] = onSelect;
-		$[13] = t3;
-	} else t3 = $[13];
+		$[15] = onSelect;
+		$[16] = t3;
+	} else t3 = $[16];
 	const clickHandler = t3;
 	const t4 = isOverflowing ? true : allProps["aria-hidden"];
 	const t5 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
 	const t6 = isOverflowing ? -1 : allProps.tabIndex;
 	let t7;
-	if ($[14] !== Component || $[15] !== ariaCurrent || $[16] !== children || $[17] !== clickHandler || $[18] !== counter || $[19] !== forwardedRef || $[20] !== href || $[21] !== keyDownHandler || $[22] !== loadingCounters || $[23] !== props || $[24] !== t5 || $[25] !== t6) {
+	if ($[17] !== Component || $[18] !== ariaCurrent || $[19] !== children || $[20] !== clickHandler || $[21] !== counter || $[22] !== forwardedRef || $[23] !== hrefProps || $[24] !== keyDownHandler || $[25] !== loadingCounters || $[26] !== props || $[27] !== t5 || $[28] !== t6) {
 		t7 = /*#__PURE__*/ jsx(UnderlineItem, {
 			ref: forwardedRef,
 			as: Component,
-			href,
+			...hrefProps,
 			"aria-current": ariaCurrent,
 			onKeyDown: keyDownHandler,
 			onClick: clickHandler,
@@ -85,32 +93,32 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 			tabIndex: t6,
 			children
 		});
-		$[14] = Component;
-		$[15] = ariaCurrent;
-		$[16] = children;
-		$[17] = clickHandler;
-		$[18] = counter;
-		$[19] = forwardedRef;
-		$[20] = href;
-		$[21] = keyDownHandler;
-		$[22] = loadingCounters;
-		$[23] = props;
-		$[24] = t5;
-		$[25] = t6;
-		$[26] = t7;
-	} else t7 = $[26];
+		$[17] = Component;
+		$[18] = ariaCurrent;
+		$[19] = children;
+		$[20] = clickHandler;
+		$[21] = counter;
+		$[22] = forwardedRef;
+		$[23] = hrefProps;
+		$[24] = keyDownHandler;
+		$[25] = loadingCounters;
+		$[26] = props;
+		$[27] = t5;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
 	let t8;
-	if ($[27] !== t4 || $[28] !== t7) {
+	if ($[30] !== t4 || $[31] !== t7) {
 		t8 = /*#__PURE__*/ jsx("li", {
 			className: UnderlineNavItem_module_css_default.UnderlineNavItem,
 			ref,
 			"aria-hidden": t4,
 			children: t7
 		});
-		$[27] = t4;
-		$[28] = t7;
-		$[29] = t8;
-	} else t8 = $[29];
+		$[30] = t4;
+		$[31] = t7;
+		$[32] = t8;
+	} else t8 = $[32];
 	return t8;
 });
 UnderlineNavItem.displayName = "UnderlineNavItem";

package/dist/deprecated/ActionList/Item.js

@@ -1,6 +1,6 @@
 import { c } from "../../utils/react-compiler-runtime.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
-import Truncate from "../../Truncate/Truncate.js";
+import Truncate_default from "../../Truncate/Truncate.js";
 import Item_module_css_default from "./Item.module.css.js";
 import React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -205,7 +205,7 @@ const Item = /*#__PURE__*/ React.forwardRef((itemProps, ref) => {
 				"--description-container-flex-basis": descriptionVariant === "inline" ? 0 : "auto"
 			},
 			className: Item_module_css_default.DescriptionContainer,
-			children: descriptionVariant === "block" ? description : /*#__PURE__*/ jsx(Truncate, {
+			children: descriptionVariant === "block" ? description : /*#__PURE__*/ jsx(Truncate_default, {
 				title: description,
 				inline: true,
 				maxWidth: "100%",

package/dist/experimental/index.js

@@ -3,10 +3,10 @@ import { Announce } from "../live-region/Announce.js";
 import { AriaAlert } from "../live-region/AriaAlert.js";
 import { AriaStatus } from "../live-region/AriaStatus.js";
 import { useSlots } from "../hooks/useSlots.js";
-import { ButtonBase } from "../Button/ButtonBase.js";
 import { DefaultFeatureFlags } from "../FeatureFlags/DefaultFeatureFlags.js";
 import { FeatureFlags } from "../FeatureFlags/FeatureFlags.js";
 import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
+import { ButtonBase } from "../Button/ButtonBase.js";
 import { KeybindingHint } from "../KeybindingHint/KeybindingHint.js";
 import { getAccessibleKeybindingHintString } from "../KeybindingHint/utils.js";
 import { Tooltip } from "../TooltipV2/Tooltip.js";

package/dist/index.d.ts

@@ -106,7 +106,7 @@ import _default$16, { TextInputWithTokensProps } from "./TextInputWithTokens/Tex
 import _default$14, { TextProps } from "./Text/Text.js";
 import _default$18, { TimelineActionsProps, TimelineAvatarProps, TimelineBadgeProps, TimelineBadgeVariant, TimelineBodyProps, TimelineBreakProps, TimelineItemProps, TimelineItemsProps, TimelineProps } from "./Timeline/Timeline.js";
 import IssueLabelToken, { IssueLabelTokenProps } from "./Token/IssueLabelToken.js";
-import Truncate, { TruncateProps } from "./Truncate/Truncate.js";
+import _default$19, { TruncateProps } from "./Truncate/Truncate.js";
 import _default$3, { CheckboxProps } from "./Checkbox/Checkbox.js";
 import _default$17, { TextareaProps } from "./Textarea/Textarea.js";
 import { TreeView, TreeViewErrorDialogProps, TreeViewItemProps, TreeViewProps, TreeViewSubTreeProps, TreeViewVisualProps } from "./TreeView/TreeView.js";
@@ -123,4 +123,4 @@ import { ActionsProps, ChildrenPropTypes, PageHeader, PageHeaderProps, TitleArea
 import { SkeletonBox, SkeletonBoxProps } from "./Skeleton/SkeletonBox.js";
 import { ActionMenu, ActionMenuAnchorProps, ActionMenuButtonProps, ActionMenuProps } from "./ActionMenu/ActionMenu.js";
 import Overlay, { OverlayProps } from "./Overlay/Overlay.js";
-export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, 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, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, _default$19 as Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, 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/index.js

@@ -47,7 +47,7 @@ import { createComponent } from "./utils/create-component.js";
 import { asSlot } from "./utils/as-slot.js";
 import Radio from "./Radio/Radio.js";
 import Heading from "./Heading/Heading.js";
-import Truncate from "./Truncate/Truncate.js";
+import Truncate_default from "./Truncate/Truncate.js";
 import Link from "./Link/Link.js";
 import { ActionList } from "./ActionList/index.js";
 import Overlay from "./Overlay/Overlay.js";
@@ -96,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, 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 };
+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_default as 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/generated/components.json

@@ -1835,7 +1835,7 @@
         },
         {
           "id": "components-button-features--loading",
-          "code": "() => <Button loading>Default</Button>"
+          "code": "() => (\n  <div\n    style={{\n      display: 'flex',\n      flexDirection: 'row',\n      gap: '1rem',\n    }}\n  >\n    <Button loading>Default</Button>\n    <Button variant=\"primary\" loading>\n      Primary\n    </Button>\n    <Button variant=\"danger\" loading>\n      Danger\n    </Button>\n    <Button variant=\"invisible\" loading>\n      Invisible\n    </Button>\n  </div>\n)"
         },
         {
           "id": "components-button-features--loading-custom-announcement",
@@ -9115,6 +9115,10 @@
         {
           "id": "components-truncate-features--max-width",
           "code": "() => (\n  <Truncate title=\"Some example text with a max width\" maxWidth={200}>\n    Some example text with a max width\n  </Truncate>\n)"
+        },
+        {
+          "id": "components-truncate-features--as-link",
+          "code": "() => {\n  const url =\n    'https://github.com/primer/react/blob/main/packages/react/src/Truncate/Truncate.tsx'\n  return (\n    <p>\n      Mirror:{' '}\n      <Truncate as={Link} href={url} title={url} maxWidth={300} inline>\n        {url}\n      </Truncate>{' '}\n      (inline link inside text)\n    </p>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -9235,7 +9239,7 @@
               "name": "href",
               "type": "string",
               "defaultValue": "",
-              "description": "The URL that the item navigates to. `href` is passed to the underlying `<a>` element. If 'as' is specified, the component may need different props and 'href' is ignored. (Required prop for the react router is 'to' for example)"
+              "description": "The URL that the item navigates to. Native anchor items default to `href=\"#\"`. When a custom component is supplied with `as`, no default `href` is added; provide the navigation props required by that component, such as `to` for React Router."
             },
             {
               "name": "icon",

package/generated/hooks.json

@@ -176,7 +176,7 @@
               "name": "containerRef",
               "type": "React.RefObject<HTMLElement>",
               "required": true,
-              "description": "Ref to the container element (e.g. a tree) whose treeitem children will participate in roving tabindex focus management."
+              "description": "Ref to the container element (e.g. a tree) whose treeitem children will participate in roving tabindex focus management. Tree navigation keeps focus on nested controls that are not treeitems."
             },
             {
               "name": "mouseDownRef",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.40.1-rc.e1840f86c",
+  "version": "38.40.2-rc.11844809c",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -78,7 +78,7 @@
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.3",
-    "@primer/live-region-element": "^0.8.0",
+    "@primer/live-region-element": "^0.8.1",
     "@primer/octicons-react": "^19.28.1",
     "@primer/primitives": "10.x || 11.x",
     "@tanstack/react-virtual": "^3.13.18",
@@ -106,7 +106,7 @@
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
-    "@rolldown/plugin-babel": "^0.2.3",
+    "@rolldown/plugin-babel": "^0.2.4",
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-docs": "10.5.10",
     "@storybook/addon-links": "10.5.10",
@@ -166,7 +166,7 @@
     "react-is": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
-    "rolldown": "^1.2.6",
+    "rolldown": "^1.2.11",
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",

package/dist/Button/ButtonBase-014fae23.css

@@ -1,2 +0,0 @@
-.prc-Button-ButtonBase-9n-Xk{align-items:center;appearance:none;background-color:transparent;border:var(--borderWidth-thin,.0625rem) solid;border-color:var(--button-default-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,#25292e);cursor:pointer;display:flex;font-family:inherit;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-8,.5rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:80ms cubic-bezier(.65,0,.35,1);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}.prc-Button-ButtonBase-9n-Xk:has([data-kbd-chord]){padding-inline-end:var(--base-size-6,.375rem)}.prc-Button-ButtonBase-9n-Xk:hover{transition-duration:80ms}.prc-Button-ButtonBase-9n-Xk:focus-visible{box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:active{transition:none}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button],[data-notification-indicator=icon].prc-Button-IconButton-fyge7){position:relative}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu{position:relative}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button]):before,.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=icon].prc-Button-IconButton-fyge7):before,.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu:before{background-color:var(--fgColor-accent,#0969da);border-radius:var(--borderRadius-full,624.9375rem);box-shadow:0 0 0 calc(var(--base-size-4,.25rem)/2) var(--bgColor-inset,#f6f8fa);content:"";display:block;height:var(--base-size-8,.5rem);position:absolute;width:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=button]):before{right:calc(var(--base-size-4,.25rem)/-2);top:calc(var(--base-size-4,.25rem)/-2)}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=icon].prc-Button-IconButton-fyge7):before{right:calc(50% - var(--base-size-12,.75rem));top:calc(50% - var(--base-size-12,.75rem))}.prc-Button-ButtonBase-9n-Xk:where([data-notification-indicator=leadingVisual]) .prc-Button-LeadingVisual-UySKu:before{right:calc(var(--base-size-4,.25rem)*-1);top:calc(var(--base-size-4,.25rem)*-1)}.prc-Button-ButtonBase-9n-Xk:disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]){box-shadow:none;cursor:not-allowed}.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-Visual-YNt2F{color:inherit}@media (forced-colors:active){.prc-Button-ButtonBase-9n-Xk:focus{outline:1px solid transparent}}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Visual-YNt2F){color:var(--fgColor-muted,#59636e);display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-VisualWrap-E4cnq){display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7){display:inline-grid;flex-shrink:0;min-width:unset;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=small]){width:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=large]){width:var(--control-large-size,2.5rem)}.prc-Button-ButtonBase-9n-Xk:where([href]){display:inline-flex}.prc-Button-ButtonBase-9n-Xk:where([href]):hover{-webkit-text-decoration:none;text-decoration:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5){align-content:center;align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5)>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=center]){justify-content:center}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=start]){justify-content:flex-start}.prc-Button-ButtonBase-9n-Xk :where([data-component=leadingVisual]){grid-area:leadingVisual}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Label-FWkx3){grid-area:text;line-height:var(--text-body-lineHeight-medium,1.5);white-space:nowrap}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingVisual]){grid-area:trailingVisual}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingAction]){margin-right:calc(var(--base-size-4,.25rem)*-1)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-Label-FWkx3{line-height:var(--text-body-lineHeight-small,1.625)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]){gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]):has([data-kbd-chord]){padding-inline-end:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-block=block]){width:100%}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]){height:unset;min-height:var(--control-medium-size,2rem);min-width:-moz-fit-content;min-width:fit-content}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-ButtonContent-Iohp5{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock,.375rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-Label-FWkx3{white-space:unset;word-break:break-word}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]){height:unset;min-height:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-small-paddingBlock,.25rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]){height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-large-paddingBlock,.625rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction]){grid-area:text;margin-right:0!important;place-self:center}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction])+.prc-Button-Label-FWkx3{visibility:hidden}.prc-Button-ButtonBase-9n-Xk .prc-Button-LoadingSpinner-6KfaT{align-items:center;display:flex;justify-content:center}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]){background-color:var(--button-default-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=default]){background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):hover{background-color:var(--button-default-bgColor-hover,#eff2f5);border-color:var(--button-default-borderColor-hover,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):active{background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]){background-color:var(--button-default-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-default-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-default-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):where(.prc-Button-IconButton-fyge7){color:var(--fgColor-muted,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]){background-color:var(--button-primary-bgColor-rest,#1f883d);border-color:var(--button-primary-borderColor-rest,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=primary]){background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):hover{background-color:var(--button-primary-bgColor-hover,#1c8139);border-color:var(--button-primary-borderColor-hover,#1f232826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,#fff);outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):active{background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]){background-color:var(--button-primary-bgColor-disabled,#95d8a6);border-color:var(--button-primary-borderColor-disabled,#95d8a6);box-shadow:none;color:var(--button-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-primary-bgColor-rest,#002d1133)!important;color:var(--button-primary-fgColor-rest,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-rest,#002d1133);border-color:var(--buttonKeybindingHint-primary-borderColor-rest,#1f232826);color:var(--buttonKeybindingHint-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-Visual-YNt2F{color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]){background-color:var(--button-danger-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-danger-fgColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]){background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover{background-color:var(--button-danger-bgColor-hover,#cf222e);border-color:var(--button-danger-borderColor-hover,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-danger-fgColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-hover,#1f232833);border-color:var(--buttonKeybindingHint-danger-borderColor-hover,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-hover,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active{background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-active,#1f232866);border-color:var(--buttonKeybindingHint-danger-borderColor-active,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-active,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]){background-color:var(--button-danger-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--button-danger-fgColor-disabled,#d1242f80)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-rest,#cf222e1a)!important;color:var(--buttonCounter-danger-fgColor-rest,#c21c2c)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-danger-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]){border-color:var(--button-invisible-borderColor-rest,#ffffff00);box-shadow:none;color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=invisible]){background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover{background-color:var(--button-invisible-bgColor-hover,#818b981a);border-color:var(--button-invisible-borderColor-hover,#ffffff00)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-hover,#818b981a);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active{background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-active,#818b9826);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]){background-color:var(--button-invisible-bgColor-disabled,#ffffff00);border-color:var(--button-invisible-borderColor-disabled,#ffffff00);box-shadow:none;color:var(--button-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-invisible-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-invisible-borderColor-rest,#ffffff00);color:var(--buttonKeybindingHint-invisible-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):where(.prc-Button-IconButton-fyge7){color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]){border:unset;border-radius:0;color:var(--fgColor-link,#0969da);display:inline-flex;font-size:inherit;height:unset;min-width:-moz-fit-content;min-width:fit-content;padding:0;text-align:left}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where([data-no-visuals]:hover:not(:disabled,[aria-disabled=true],[data-inactive])){-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where(:not([data-no-visuals]):hover:not(:disabled,[aria-disabled=true],[data-inactive])) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus,.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus-visible{outline-offset:2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=link]):not([data-loading=true]){background-color:transparent;border-color:transparent;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Label-FWkx3{white-space:unset}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{text-underline-offset:.125rem}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where([data-inactive]){background:transparent!important;color:var(--button-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Visual-YNt2F{color:var(--fgColor-link,#0969da)}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)){-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)) .prc-Button-Label-FWkx3{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){background-image:none;-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)){-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]){background-image:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]) .prc-Button-Label-FWkx3{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):where(:hover:not([aria-disabled=true],[data-inactive],:disabled)) .prc-Button-Label-FWkx3{-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]),.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active,.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover{background-color:var(--button-inactive-bgColor,#e6eaef);border-color:var(--button-inactive-bgColor,#e6eaef);box-shadow:none;color:var(--button-inactive-fgColor,#59636e);cursor:auto}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]){padding-inline:var(--control-medium-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=small]){padding-inline:var(--control-xsmall-paddingInline-condensed,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=large]){padding-inline:var(--control-large-paddingInline-normal,.75rem)}.prc-Button-ConditionalWrapper-Rvbgb{display:block}.prc-Button-ConditionalWrapperLink-d0qv7{display:inline-flex}[data-kbd-chord]{transition:80ms ease-in;transition-property:color,background-color,border-color}
-/*# sourceMappingURL=ButtonBase-014fae23.css.map */

package/dist/Button/ButtonBase-014fae23.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Button/ButtonBase.module.css.js","../../postcss-preset-primer/src/mixins/focusOutline.css","../../postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css"],"names":[],"mappings":"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","file":"ButtonBase-014fae23.css","sourcesContent":["/* Base styles */\n.ButtonBase {\n  display: flex;\n  min-width: max-content;\n  height: var(--control-medium-size);\n  /* stylelint-disable-next-line primer/spacing */\n  padding: 0 var(--control-medium-paddingInline-normal);\n  font-family: inherit;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  color: var(--button-default-fgColor-rest);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: var(--button-default-borderColor-rest);\n  border-radius: var(--borderRadius-medium);\n  transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);\n  transition-property: color, fill, background-color, border-color;\n  appearance: none;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-8);\n\n  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has([data-kbd-chord]) {\n    padding-inline-end: var(--base-size-6);\n  }\n\n  &:hover {\n    transition-duration: 80ms;\n  }\n\n  &:focus-visible {\n    @mixin focusOutline;\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:where([data-notification-indicator='button'], [data-notification-indicator='icon'].IconButton) {\n    position: relative;\n  }\n\n  &:where([data-notification-indicator='leadingVisual']) .LeadingVisual {\n    position: relative;\n  }\n\n  &:where([data-notification-indicator='button'])::before,\n  &:where([data-notification-indicator='icon'].IconButton)::before,\n  &:where([data-notification-indicator='leadingVisual']) .LeadingVisual::before {\n    position: absolute;\n    display: block;\n    width: var(--base-size-8);\n    height: var(--base-size-8);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--fgColor-accent);\n    border-radius: var(--borderRadius-full);\n    /* stylelint-disable-next-line primer/box-shadow */\n    box-shadow: 0 0 0 calc(var(--base-size-4) / 2) var(--bgColor-inset);\n  }\n\n  &:where([data-notification-indicator='button'])::before {\n    top: calc(var(--base-size-4) / -2);\n    right: calc(var(--base-size-4) / -2);\n  }\n\n  &:where([data-notification-indicator='icon'].IconButton)::before {\n    top: calc(50% - var(--base-size-12));\n    right: calc(50% - var(--base-size-12));\n  }\n\n  &:where([data-notification-indicator='leadingVisual']) .LeadingVisual::before {\n    top: calc(var(--base-size-4) * -1);\n    right: calc(var(--base-size-4) * -1);\n  }\n\n  &:disabled,\n  &[aria-disabled='true']:not([data-loading='true']) {\n    cursor: not-allowed;\n    box-shadow: none;\n\n    & .Visual,\n    & .CounterLabel {\n      color: inherit;\n    }\n  }\n\n  @media (forced-colors: active) {\n    &:focus {\n      outline: solid 1px transparent;\n    }\n  }\n\n  /* Visuals */\n  & :where(.Visual) {\n    display: flex;\n    color: var(--fgColor-muted);\n    pointer-events: none;\n  }\n\n  /* mostly for CounterLabel */\n  & :where(.VisualWrap) {\n    display: flex;\n    pointer-events: none;\n  }\n\n  /* IconButton */\n\n  &:where(.IconButton) {\n    display: inline-grid;\n    width: var(--control-medium-size);\n    min-width: unset;\n    /* stylelint-disable-next-line primer/spacing */\n    padding: unset;\n    place-content: center;\n    flex-shrink: 0;\n\n    &:where([data-size='small']) {\n      width: var(--control-small-size);\n    }\n\n    &:where([data-size='large']) {\n      width: var(--control-large-size);\n    }\n  }\n\n  /* LinkButton */\n\n  &:where([href]) {\n    display: inline-flex;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  /* Button layout */\n\n  & :where(.ButtonContent) {\n    flex: 1 0 auto;\n    display: grid;\n    grid-template-areas: 'leadingVisual text trailingVisual';\n    grid-template-columns: min-content minmax(0, auto) min-content;\n    align-items: center;\n    align-content: center;\n\n    & > :not(:last-child) {\n      margin-right: var(--base-size-8);\n    }\n\n    /* Content alignment */\n\n    &:where([data-align='center']) {\n      justify-content: center;\n    }\n\n    &:where([data-align='start']) {\n      justify-content: flex-start;\n    }\n  }\n\n  & :where([data-component='leadingVisual']) {\n    grid-area: leadingVisual;\n  }\n\n  & :where(.Label) {\n    line-height: var(--text-body-lineHeight-medium);\n    white-space: nowrap;\n    grid-area: text;\n  }\n\n  & :where([data-component='trailingVisual']) {\n    grid-area: trailingVisual;\n  }\n\n  & :where([data-component='trailingAction']) {\n    margin-right: calc(var(--base-size-4) * -1);\n  }\n\n  /* Size */\n\n  &:where([data-size='small']) {\n    height: var(--control-small-size);\n    /* stylelint-disable-next-line primer/spacing */\n    padding: 0 var(--control-small-paddingInline-condensed);\n    gap: var(--control-small-gap);\n    font-size: var(--text-body-size-small);\n\n    & .ButtonContent > :not(:last-child) {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: var(--control-small-gap);\n    }\n\n    & .Label {\n      line-height: var(--text-body-lineHeight-small);\n    }\n  }\n\n  &:where([data-size='large']) {\n    height: var(--control-large-size);\n    /* stylelint-disable-next-line primer/spacing */\n    padding: 0 var(--control-large-paddingInline-spacious);\n    gap: var(--control-large-gap);\n\n    & .ButtonContent > :not(:last-child) {\n      /* stylelint-disable-next-line primer/spacing */\n      margin-right: var(--control-large-gap);\n    }\n\n    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n    &:has([data-kbd-chord]) {\n      padding-inline-end: var(--base-size-8);\n    }\n  }\n\n  /* Full width */\n\n  &:where([data-block='block']) {\n    width: 100%;\n  }\n\n  /* Wrap label text */\n\n  &:where([data-label-wrap='true']) {\n    min-width: fit-content;\n    height: unset;\n    min-height: var(--control-medium-size);\n\n    & .ButtonContent {\n      flex: 1 1 auto;\n      align-self: stretch;\n      /* stylelint-disable-next-line primer/spacing */\n      padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));\n    }\n\n    & .Label {\n      /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n      word-break: break-word;\n      white-space: unset;\n    }\n\n    &:where([data-size='small']) {\n      height: unset;\n      min-height: var(--control-small-size);\n\n      & .ButtonContent {\n        /* stylelint-disable-next-line primer/spacing */\n        padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));\n      }\n    }\n\n    &:where([data-size='large']) {\n      height: unset;\n      min-height: var(--control-large-size);\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: var(--control-large-paddingInline-spacious);\n\n      & .ButtonContent {\n        /* stylelint-disable-next-line primer/spacing */\n        padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));\n      }\n    }\n  }\n\n  /* Loading */\n\n  /* only hide label if there's no leading/trailing visuals\n  * move spinner to label spot if not leading/trailing visuals\n  */\n\n  &:where([data-loading='true']) {\n    &\n      .LoadingSpinner:not(\n        [data-component='leadingVisual'],\n        [data-component='trailingVisual'],\n        [data-component='trailingAction']\n      ) {\n      grid-area: text;\n      margin-right: 0 !important;\n      place-self: center;\n\n      & + .Label {\n        visibility: hidden;\n      }\n    }\n  }\n\n  /* Styles for the spinner element displayed when the Button is in a loading state.\n   * Ensures the spinner is centered within its container. */\n  .LoadingSpinner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Default Variant */\n\n  &:where([data-variant='default']) {\n    color: var(--button-default-fgColor-rest);\n    background-color: var(--button-default-bgColor-rest);\n    box-shadow: var(--button-default-shadow-resting);\n\n    &[aria-expanded='true'] {\n      background-color: var(--button-default-bgColor-active);\n      border-color: var(--button-default-borderColor-active);\n    }\n\n    &:hover {\n      background-color: var(--button-default-bgColor-hover);\n      border-color: var(--button-default-borderColor-hover);\n    }\n\n    &:active {\n      background-color: var(--button-default-bgColor-active);\n      border-color: var(--button-default-borderColor-active);\n    }\n\n    &:disabled,\n    &[aria-disabled='true']:not([data-loading='true']) {\n      color: var(--control-fgColor-disabled);\n      background-color: var(--button-default-bgColor-disabled);\n      border-color: var(--button-default-borderColor-disabled);\n      box-shadow: none;\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-default-bgColor-disabled);\n        color: var(--buttonKeybindingHint-default-fgColor-disabled);\n        border-color: var(--buttonKeybindingHint-default-borderColor-disabled);\n      }\n    }\n\n    & .CounterLabel {\n      background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */\n    }\n\n    & [data-kbd-chord] {\n      background: var(--buttonKeybindingHint-default-bgColor-rest);\n      color: var(--buttonKeybindingHint-default-fgColor-rest);\n      border-color: var(--buttonKeybindingHint-default-borderColor-rest);\n    }\n\n    &:where(.IconButton) {\n      color: var(--fgColor-muted);\n    }\n  }\n\n  /* Primary variant */\n\n  &:where([data-variant='primary']) {\n    color: var(--button-primary-fgColor-rest);\n    background-color: var(--button-primary-bgColor-rest);\n    border-color: var(--button-primary-borderColor-rest);\n    box-shadow: var(--shadow-resting-small);\n\n    &[aria-expanded='true'] {\n      background-color: var(--button-primary-bgColor-active);\n      box-shadow: var(--button-primary-shadow-selected);\n    }\n\n    &:hover {\n      background-color: var(--button-primary-bgColor-hover);\n      border-color: var(--button-primary-borderColor-hover);\n    }\n\n    &:focus-visible {\n      @mixin focusOutlineOnEmphasis;\n    }\n\n    &:active {\n      background-color: var(--button-primary-bgColor-active);\n      box-shadow: var(--button-primary-shadow-selected);\n    }\n\n    &:disabled,\n    &[aria-disabled='true']:not([data-loading='true']) {\n      color: var(--button-primary-fgColor-disabled);\n      background-color: var(--button-primary-bgColor-disabled);\n      border-color: var(--button-primary-borderColor-disabled);\n      box-shadow: none;\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-primary-bgColor-disabled);\n        color: var(--buttonKeybindingHint-primary-fgColor-disabled);\n        border-color: var(--buttonKeybindingHint-primary-borderColor-disabled);\n      }\n    }\n\n    & .CounterLabel {\n      color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */\n      background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */\n    }\n\n    & [data-kbd-chord] {\n      background: var(--buttonKeybindingHint-primary-bgColor-rest);\n      color: var(--buttonKeybindingHint-primary-fgColor-rest);\n      border-color: var(--buttonKeybindingHint-primary-borderColor-rest);\n    }\n\n    /* temporarily using the fgColor to match legacy and reduce visual changes- will eventually be iconColor */\n    & .Visual {\n      color: var(--button-primary-fgColor-rest);\n    }\n  }\n\n  /* Danger variant */\n\n  &:where([data-variant='danger']) {\n    color: var(--button-danger-fgColor-rest);\n    background-color: var(--button-danger-bgColor-rest);\n    box-shadow: var(--button-default-shadow-resting);\n\n    &[aria-expanded='true'] {\n      color: var(--button-danger-fgColor-active);\n      background-color: var(--button-danger-bgColor-active);\n      border-color: var(--button-danger-borderColor-active);\n      box-shadow: var(--button-danger-shadow-selected);\n\n      & .Visual {\n        color: var(--button-danger-iconColor-hover);\n      }\n    }\n\n    &:hover {\n      color: var(--button-danger-fgColor-hover);\n      background-color: var(--button-danger-bgColor-hover);\n      border-color: var(--button-danger-borderColor-hover);\n      box-shadow: var(--shadow-resting-small);\n\n      & .CounterLabel {\n        color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */\n        background-color: var(--buttonCounter-danger-bgColor-hover) !important;\n      }\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-danger-bgColor-hover);\n        color: var(--buttonKeybindingHint-danger-fgColor-hover);\n        border-color: var(--buttonKeybindingHint-danger-borderColor-hover);\n        transition: 80ms ease-out;\n      }\n\n      & .Visual {\n        color: var(--button-danger-iconColor-hover);\n      }\n    }\n\n    &:active {\n      color: var(--button-danger-fgColor-active);\n      background-color: var(--button-danger-bgColor-active);\n      border-color: var(--button-danger-borderColor-active);\n      box-shadow: var(--button-danger-shadow-selected);\n\n      & .CounterLabel {\n        color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */\n        background-color: var(--buttonCounter-danger-bgColor-hover) !important;\n      }\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-danger-bgColor-active);\n        color: var(--buttonKeybindingHint-danger-fgColor-active);\n        border-color: var(--buttonKeybindingHint-danger-borderColor-active);\n        transition: 80ms ease-out;\n      }\n\n      & .Visual {\n        color: var(--button-danger-iconColor-hover);\n      }\n    }\n\n    &:disabled,\n    &[aria-disabled='true']:not([data-loading='true']) {\n      color: var(--button-danger-fgColor-disabled);\n      background-color: var(--button-danger-bgColor-disabled);\n      border-color: var(--button-default-borderColor-disabled);\n      box-shadow: none;\n\n      & .CounterLabel {\n        color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */\n        background-color: var(--buttonCounter-danger-bgColor-disabled) !important;\n      }\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-danger-bgColor-disabled);\n        color: var(--buttonKeybindingHint-danger-fgColor-disabled);\n        border-color: var(--buttonKeybindingHint-danger-borderColor-disabled);\n      }\n    }\n\n    & .CounterLabel {\n      color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */\n      background-color: var(--buttonCounter-danger-bgColor-rest) !important;\n    }\n\n    & [data-kbd-chord] {\n      background: var(--buttonKeybindingHint-danger-bgColor-rest);\n      color: var(--buttonKeybindingHint-danger-fgColor-rest);\n      border-color: var(--buttonKeybindingHint-danger-borderColor-rest);\n    }\n\n    & .Visual {\n      color: var(--button-danger-iconColor-rest);\n    }\n  }\n\n  /* Invisible variant */\n\n  &:where([data-variant='invisible']) {\n    color: var(--button-default-fgColor-rest);\n    border-color: var(--button-invisible-borderColor-rest);\n    box-shadow: none;\n\n    &[aria-expanded='true'] {\n      background-color: var(--button-invisible-bgColor-active);\n    }\n\n    &:hover {\n      background-color: var(--button-invisible-bgColor-hover);\n      border-color: var(--button-invisible-borderColor-hover);\n\n      & .Visual {\n        color: var(--button-invisible-iconColor-hover);\n      }\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-invisible-bgColor-hover);\n        transition: 80ms ease-out;\n      }\n    }\n\n    &:active {\n      background-color: var(--button-invisible-bgColor-active);\n\n      & .Visual {\n        color: var(--button-invisible-iconColor-hover);\n      }\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-invisible-bgColor-active);\n        transition: 80ms ease-out;\n      }\n    }\n\n    &:disabled,\n    &[aria-disabled='true']:not([data-loading='true']) {\n      color: var(--button-invisible-fgColor-disabled);\n      background-color: var(--button-invisible-bgColor-disabled);\n      border-color: var(--button-invisible-borderColor-disabled);\n      box-shadow: none;\n\n      & [data-kbd-chord] {\n        background: var(--buttonKeybindingHint-invisible-bgColor-disabled);\n        color: var(--buttonKeybindingHint-invisible-fgColor-disabled);\n        border-color: var(--buttonKeybindingHint-invisible-borderColor-disabled);\n      }\n    }\n\n    & .Visual {\n      color: var(--button-invisible-iconColor-rest);\n    }\n\n    & .CounterLabel {\n      background-color: var(--buttonCounter-invisible-bgColor-rest) !important;\n    }\n\n    & [data-kbd-chord] {\n      background: var(--buttonKeybindingHint-invisible-bgColor-rest);\n      color: var(--buttonKeybindingHint-invisible-fgColor-rest);\n      border-color: var(--buttonKeybindingHint-invisible-borderColor-rest);\n    }\n\n    &:where(.IconButton) {\n      color: var(--button-invisible-iconColor-rest);\n    }\n  }\n\n  /* Link variant */\n\n  &:where([data-variant='link']) {\n    display: inline-flex;\n    min-width: fit-content;\n    height: unset;\n    padding: 0;\n    font-size: inherit;\n    color: var(--fgColor-link);\n    text-align: left;\n    border: unset;\n    border-radius: 0;\n\n    &:where([data-no-visuals]:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n      text-decoration: underline;\n    }\n\n    &:where(:not([data-no-visuals]):hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n      text-decoration: underline;\n    }\n\n    &:focus-visible,\n    &:focus {\n      outline-offset: 2px;\n    }\n\n    &:disabled,\n    &[aria-disabled='true']:not([data-loading='true']) {\n      color: var(--control-fgColor-disabled);\n      background-color: transparent;\n      border-color: transparent;\n    }\n\n    & .Label {\n      white-space: unset;\n    }\n\n    &:not([data-no-visuals]) .Label {\n      text-underline-offset: 0.125rem;\n    }\n\n    &:where([data-inactive]) {\n      color: var(--button-inactive-fgColor);\n      background: transparent !important;\n    }\n\n    & .Visual {\n      color: var(--fgColor-link);\n    }\n  }\n\n  [data-a11y-link-underlines='true'] &:where([data-variant='link']) {\n    &[data-no-visuals] {\n      text-decoration: underline;\n\n      &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n        text-decoration: none;\n      }\n    }\n\n    &:not([data-no-visuals]) {\n      & .Label {\n        text-decoration: underline;\n      }\n\n      &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n        text-decoration: none;\n      }\n    }\n  }\n\n  [data-a11y-link-underlines='false'] &:where([data-variant='link']) {\n    &[data-no-visuals] {\n      text-decoration: none;\n      background-image: none;\n\n      &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) {\n        text-decoration: underline;\n      }\n    }\n\n    &:not([data-no-visuals]) {\n      background-image: none;\n\n      & .Label {\n        text-decoration: none;\n      }\n\n      &:where(:hover:not(:disabled, [aria-disabled='true'], [data-inactive])) .Label {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  /* Inactive */\n\n  &:where([data-inactive]),\n  &:where([data-inactive]):hover,\n  &:where([data-inactive]):active {\n    color: var(--button-inactive-fgColor);\n    cursor: auto;\n    background-color: var(--button-inactive-bgColor);\n    /* stylelint-disable-next-line primer/colors */\n    border-color: var(--button-inactive-bgColor);\n    box-shadow: none;\n\n    & .Visual,\n    & .CounterLabel {\n      color: inherit !important;\n    }\n\n    & [data-kbd-chord] {\n      background: var(--buttonKeybindingHint-inactive-bgColor);\n      color: var(--buttonKeybindingHint-inactive-fgColor);\n      border-color: var(--buttonKeybindingHint-inactive-borderColor);\n    }\n  }\n\n  /* Icon-only + Counter */\n\n  &:where([data-icon-only-counter]) {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: var(--control-medium-paddingInline-condensed);\n\n    &:where([data-size='small']) {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: var(--control-xsmall-paddingInline-condensed);\n    }\n\n    &:where([data-size='large']) {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: var(--control-large-paddingInline-normal);\n    }\n  }\n}\n\n.ConditionalWrapper {\n  display: block;\n}\n\n.ConditionalWrapperLink {\n  display: inline-flex;\n}\n\n[data-kbd-chord] {\n  transition: 80ms ease-in;\n  transition-property: color, background-color, border-color;\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n","/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,\n  $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}