@primer/react 38.37.0-rc.7ab3f8b3e → 38.37.1-rc.166760c53

package/CHANGELOG.md

@@ -1,11 +1,27 @@
 # @primer/react
 
+## 38.37.1
+
+### Patch Changes
+
+- [#8339](https://github.com/primer/react/pull/8339) [`1f5b99e`](https://github.com/primer/react/commit/1f5b99edc63e3989eb470d258c4d7b8703540f6b) Thanks [@ShiyunXu](https://github.com/ShiyunXu)! - Pin `box-sizing` with `!important` on the underline tabbed interface wrapper in wrap mode so external overrides can no longer offset its height budget and incorrectly trigger the overflow "more" menu
+
 ## 38.37.0
 
 ### Minor Changes
 
+- [#8311](https://github.com/primer/react/pull/8311) [`b111781`](https://github.com/primer/react/commit/b1117811cebfb9463f20fe76f77cdf13917ae6b2) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Button: Add configurable notification indicators to Button and IconButton
+
+- [#8306](https://github.com/primer/react/pull/8306) [`a3afd7b`](https://github.com/primer/react/commit/a3afd7baf05ea6c4a272a40ccb636f20a48f87dc) Thanks [@llastflowers](https://github.com/llastflowers)! - Deprecate the `Flash` component and move to `@primer/react/deprecated`
+
 - [#8295](https://github.com/primer/react/pull/8295) [`bfebb8a`](https://github.com/primer/react/commit/bfebb8a538e6f068a457722b154799876bda3ab4) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Textarea: Add an `autoSize` option that allows the field to grow with its content
 
+- [#8233](https://github.com/primer/react/pull/8233) [`80a68cf`](https://github.com/primer/react/commit/80a68cf05226323ad8cbc0531f244d60ea6747e3) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - UnderlinePanels: add controlled `value`/`defaultValue`/`onChange` and `activationMode` props, keyed to a per-`Tab`/`Panel` `value`, for data-driven tabs. Behind the `primer_react_underline_panels_controlled` feature flag; the existing `aria-selected`/`onSelect` API is unchanged.
+
+### Patch Changes
+
+- [#8304](https://github.com/primer/react/pull/8304) [`88feb65`](https://github.com/primer/react/commit/88feb658c13fec154da1a8aa199250514f4fdba3) Thanks [@iansan5653](https://github.com/iansan5653)! - Animate `SegmentedControl` when switching between items
+
 ## 38.36.0
 
 ### Minor Changes

package/dist/ActionBar/index.d.ts

@@ -14,6 +14,7 @@ declare const ActionBar: import("react").FC<import("react").PropsWithChildren<Ac
     trailingAction?: React.ElementType | null;
     children?: React.ReactNode;
     count?: number | string;
+    notificationIndicator?: "button" | "leadingVisual";
   } & {
     variant?: VariantType;
     size?: Size;
@@ -39,6 +40,7 @@ declare const ActionBar: import("react").FC<import("react").PropsWithChildren<Ac
     'aria-labelledby'?: undefined;
   } & {
     icon: React.ElementType;
+    notificationIndicator?: "button" | "icon";
     unsafeDisableTooltip?: boolean;
     description?: string;
     tooltipDirection?: TooltipDirection;

package/dist/Button/ButtonBase-b44e29d1.css

@@ -0,0 +1,2 @@
+.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]):hover:not(:disabled,[data-inactive]){-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]):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]):hover{-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]){background-image:linear-gradient(90deg,currentColor,currentColor);background-position:0 calc(100% - 2px);background-repeat:no-repeat;background-size:100% 1.5px}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):hover{-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:where([data-variant=link]):not([data-no-visuals]){background-image:none}.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-b44e29d1.css.map */

package/dist/Button/ButtonBase-b44e29d1.css.map

@@ -0,0 +1 @@
+{"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":"AACA,6BAqBE,kBAAmB,CADnB,eAAgB,CANhB,4BAA6B,CAC7B,6CAAqC,CACrC,2DAAoD,CACpD,gDAAyC,CARzC,gDAAyC,CAGzC,cAAe,CAXf,YAAa,CAKb,mBAAoB,CACpB,8CAAuC,CACvC,8CAA2C,CAe3C,4BAAuB,CApBvB,sCAAkC,CAmBlC,6BAA8B,CApB9B,qBAAsB,CAGtB,2DAAqD,CAKrD,iBAAkB,CAClB,4BAAqB,CAArB,oBAAqB,CAOrB,yCAA+C,CAC/C,4DAAgE,CANhE,wBAAiB,CAAjB,gBAwqBF,CA3pBE,mDACE,6CACF,CAEA,mCACE,wBACF,CAEA,2CChCA,eAAgB,CAFhB,8EAAgC,CAChC,mBDmCA,CAEA,oCACE,eACF,CAEA,wIACE,iBACF,CAEA,gHACE,iBACF,CAEA,iTASE,8CAAuC,CACvC,kDAAuC,CAEvC,+EAAmE,CALnE,UAAW,CAHX,aAAc,CAEd,+BAA0B,CAH1B,iBAAkB,CAElB,8BAQF,CAEA,gFAEE,wCAAoC,CADpC,sCAEF,CAEA,0GAEE,4CAAsC,CADtC,0CAEF,CAEA,uHAEE,wCAAoC,CADpC,sCAEF,CAEA,gHAGE,eAAgB,CADhB,kBAOF,CAJE,4ZAEE,aACF,CAGF,8BACE,mCACE,6BACF,CACF,CAGA,8DAEE,kCAA2B,CAD3B,YAAa,CAEb,mBACF,CAGA,kEACE,YAAa,CACb,mBACF,CAIA,iEACE,mBAAoB,CAMpB,aAAc,CAJd,eAAgB,CAEhB,aAAc,CACd,oBAAqB,CAJrB,qCAcF,CAPE,0FACE,uCACF,CAEA,0FACE,sCACF,CAKF,2CACE,mBAKF,CAHE,iDACE,4BAAqB,CAArB,oBACF,CAKF,qEAME,oBAAqB,CADrB,kBAAmB,CAHnB,YAAa,CADb,aAAc,CAEd,uDAAwD,CACxD,4DAiBF,CAbE,uFACE,qCACF,CAIA,gGACE,sBACF,CAEA,+FACE,0BACF,CAGF,oEACE,uBACF,CAEA,6DAGE,cAAe,CAFf,kDAA+C,CAC/C,kBAEF,CAEA,qEACE,wBACF,CAEA,qEACE,+CACF,CAIA,sDAKE,4CAAsC,CADtC,mCAA6B,CAH7B,wCAAiC,CAEjC,4DAYF,CARE,wGAEE,4CACF,CAEA,8EACE,mDACF,CAGF,sDAIE,kCAA6B,CAH7B,uCAAiC,CAEjC,0DAYF,CATE,wGAEE,2CACF,CAGA,4EACE,2CACF,CAKF,uDACE,UACF,CAIA,2DAEE,YAAa,CACb,0CAAsC,CAFtC,0BAAsB,CAAtB,qBAsCF,CAlCE,2FAEE,kBAAmB,CADnB,aAAc,CAGd,2FACF,CAEA,mFAGE,iBAAkB,CADlB,qBAEF,CAEA,oFACE,YAAa,CACb,4CAMF,CAJE,oHAEE,yFACF,CAGF,oFACE,YAAa,CACb,2CAAqC,CAErC,+DAMF,CAJE,oHAEE,0FACF,CAWF,6LAME,cAAe,CACf,wBAA0B,CAC1B,iBAKF,CAHE,qNACE,iBACF,CAMJ,8DAEE,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAIA,2DAEE,2DAAoD,CACpD,mEAAgD,CAFhD,gDA8CF,CA1CE,+EACE,6DAAsD,CACtD,6DACF,CAEA,iEACE,4DAAqD,CACrD,4DACF,CAEA,kEACE,6DAAsD,CACtD,6DACF,CAEA,4KAGE,+DAAwD,CACxD,iEAAwD,CACxD,eAAgB,CAHhB,6CAUF,CALE,2HACE,uEAAgE,CAEhE,+EAAsE,CADtE,kEAEF,CAJA,yHACE,uEAAgE,CAEhE,+EAAsE,CADtE,kEAEF,CAGF,0FACE,8EACF,CAEA,4EACE,mEAA4D,CAE5D,2EAAkE,CADlE,8DAEF,CAEA,+FACE,kCACF,CAKF,2DAEE,2DAAoD,CACpD,6DAAoD,CACpD,kFAAuC,CAHvC,6CAqDF,CAhDE,+EACE,6DAAsD,CACtD,0EACF,CAEA,iEACE,4DAAqD,CACrD,8DACF,CAEA,yEE3WF,yDAAqD,CAHrD,8EAAgC,CAChC,mBF+WE,CAEA,kEACE,6DAAsD,CACtD,0EACF,CAEA,4KAGE,+DAAwD,CACxD,+DAAwD,CACxD,eAAgB,CAHhB,sDAUF,CALE,2HACE,yEAAgE,CAEhE,+EAAsE,CADtE,oEAEF,CAJA,yHACE,yEAAgE,CAEhE,+EAAsE,CADtE,oEAEF,CAGF,0FAEE,8EAAsE,CADtE,uDAEF,CAEA,4EACE,qEAA4D,CAE5D,2EAAkE,CADlE,2DAEF,CAGA,oFACE,6CACF,CAKF,0DAEE,0DAAmD,CACnD,mEAAgD,CAFhD,+CA8FF,CA1FE,8EAEE,4DAAqD,CACrD,8DAAqD,CACrD,yEAAgD,CAHhD,8CAQF,CAHE,uGACE,+CACF,CAGF,gEAEE,2DAAoD,CACpD,6DAAoD,CACpD,kFAAuC,CAHvC,6CAoBF,CAfE,+FAEE,8EAAsE,CADtE,8DAEF,CAEA,iFACE,qEAA4D,CAE5D,2EAAkE,CADlE,2DAAuD,CAEvD,wBACF,CAEA,yFACE,+CACF,CAGF,iEAEE,4DAAqD,CACrD,8DAAqD,CACrD,yEAAgD,CAHhD,8CAoBF,CAfE,gGAEE,8EAAsE,CADtE,8DAEF,CAEA,kFACE,sEAA6D,CAE7D,4EAAmE,CADnE,4DAAwD,CAExD,wBACF,CAEA,0FACE,+CACF,CAGF,0KAGE,8DAAuD,CACvD,iEAAwD,CACxD,eAAgB,CAHhB,qDAeF,CAVE,wIAEE,iFAAyE,CADzE,sEAEF,CAHA,sIAEE,iFAAyE,CADzE,sEAEF,CAEA,0HACE,sEAA+D,CAE/D,8EAAqE,CADrE,iEAEF,CAJA,wHACE,sEAA+D,CAE/D,8EAAqE,CADrE,iEAEF,CAGF,yFAEE,6EAAqE,CADrE,gEAEF,CAEA,2EACE,kEAA2D,CAE3D,0EAAiE,CADjE,6DAEF,CAEA,mFACE,iDACF,CAKF,6DAEE,+DAAsD,CACtD,eAAgB,CAFhB,gDAkEF,CA9DE,iFACE,iEACF,CAEA,mEACE,gEAAuD,CACvD,gEAUF,CARE,4FACE,qDACF,CAEA,oFACE,wEAA+D,CAC/D,wBACF,CAGF,oEACE,iEAUF,CARE,6FACE,qDACF,CAEA,qFACE,yEAAgE,CAChE,wBACF,CAGF,gLAGE,mEAA0D,CAC1D,mEAA0D,CAC1D,eAAgB,CAHhB,sDAUF,CALE,6HACE,2EAAkE,CAElE,iFAAwE,CADxE,oEAEF,CAJA,2HACE,2EAAkE,CAElE,iFAAwE,CADxE,oEAEF,CAGF,sFACE,oDACF,CAEA,4FACE,gFACF,CAEA,8EACE,qEAA8D,CAE9D,6EAAoE,CADpE,gEAEF,CAEA,iGACE,oDACF,CAKF,wDAQE,YAAa,CACb,eAAgB,CAHhB,iCAA0B,CAL1B,mBAAoB,CAIpB,iBAAkB,CAFlB,YAAa,CADb,0BAAsB,CAAtB,qBAAsB,CAEtB,SAAU,CAGV,eAgCF,CA5BE,6FACE,iCAA0B,CAA1B,yBACF,CAEA,oIAEE,kBACF,CAEA,sKAGE,4BAA6B,CAC7B,wBAAyB,CAFzB,6CAGF,CAEA,gFACE,iBACF,CAEA,+EAEE,gCAAkC,CADlC,4CAEF,CAEA,iFACE,iCACF,CAIA,0GACE,iCAA0B,CAA1B,yBAKF,CAHE,gHACE,4BAAqB,CAArB,oBACF,CAGF,gHACE,iEAAuE,CAEvE,sCAAuC,CACvC,2BAA4B,CAF5B,0BAOF,CAHE,sHACE,4BAAqB,CAArB,oBACF,CAKF,2GAEE,qBAAsB,CADtB,4BAAqB,CAArB,oBAEF,CAEA,iHACE,qBACF,CAKF,yKAKE,uDAAgD,CAEhD,mDAA4C,CAC5C,eAAgB,CALhB,4CAAqC,CACrC,WAgBF,CAVE,mHAEE,uBACF,CAHA,mFAEE,uBACF,CAHA,oFAEE,uBACF,CAHA,yHAEE,uBACF,CAHA,yFAEE,uBACF,CAHA,0FAEE,uBACF,CAEA,2GACE,+DAAwD,CAExD,uEAA8D,CAD9D,0DAEF,CAJA,2EACE,+DAAwD,CAExD,uEAA8D,CAD9D,0DAEF,CAJA,4EACE,+DAAwD,CAExD,uEAA8D,CAD9D,0DAEF,CAKF,6DAEE,kEAWF,CATE,sFAEE,mEACF,CAEA,sFAEE,+DACF,CAIJ,qCACE,aACF,CAEA,yCACE,mBACF,CAEA,iBACE,uBAAwB,CACxB,uDACF","file":"ButtonBase-b44e29d1.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    &:hover:not(:disabled, [data-inactive]) {\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    &: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      &:hover {\n        text-decoration: none;\n      }\n    }\n\n    &:not([data-no-visuals]) {\n      background-image: linear-gradient(to right, currentColor, currentColor);\n      background-size: 100% 1.5px;\n      background-position: 0 calc(100% - 2px);\n      background-repeat: no-repeat;\n\n      &:hover {\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\n    &:not([data-no-visuals]) {\n      background-image: none;\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"]}

package/dist/Button/ButtonBase.d.ts

@@ -1,7 +1,10 @@
 import { ForwardRefComponent } from "../utils/polymorphic.js";
-import { ButtonProps } from "./types.js";
+import { ButtonProps, NotificationIndicatorPlacement } from "./types.js";
 
 //#region src/Button/ButtonBase.d.ts
-declare const ButtonBase: ForwardRefComponent<"button" | "a", ButtonProps>;
+type ButtonBaseComponentProps = Omit<ButtonProps, 'notificationIndicator'> & {
+  notificationIndicator?: NotificationIndicatorPlacement;
+};
+declare const ButtonBase: ForwardRefComponent<"button" | "a", ButtonBaseComponentProps>;
 //#endregion
 export { ButtonBase };

package/dist/Button/ButtonBase.js

@@ -13,18 +13,19 @@ import { isElement } from "react-is";
 //#region src/Button/ButtonBase.tsx
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/ jsx("span", {
 	"data-component": visualName,
-	className: clsx(!counterLabel && ButtonBase_module_css_default.Visual, loading ? ButtonBase_module_css_default.LoadingSpinner : ButtonBase_module_css_default.VisualWrap),
+	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),
 	children: loading ? /*#__PURE__*/ jsx(Spinner, { size: "small" }) : isElement(Visual) ? Visual : /*#__PURE__*/ jsx(Visual, {})
 });
 renderModuleVisual.displayName = "renderModuleVisual";
 const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button", ...props }, forwardedRef) => {
-	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, className, ...rest } = props;
+	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 uuid = useId$1(id);
 	const loadingAnnouncementID = `${uuid}-loading-announcement`;
 	const ariaDescribedByIds = loading ? [loadingAnnouncementID, ariaDescribedBy] : [ariaDescribedBy];
 	{
+		if (notificationIndicator === "leadingVisual" && !LeadingVisual) console.warn("Button: `notificationIndicator=\"leadingVisual\"` requires a `leadingVisual` prop.");
 		const el = innerRef.current;
 		if (el && !(el instanceof HTMLButtonElement) && !(el instanceof HTMLAnchorElement) && !(el.tagName === "SUMMARY")) console.warn("This component should be an instanceof a semantic button or anchor");
 	}
@@ -45,6 +46,7 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
 			"data-size": size,
 			"data-variant": variant,
 			"data-label-wrap": labelWrap,
+			"data-notification-indicator": notificationIndicator,
 			"data-has-count": count !== void 0 ? true : void 0,
 			"data-icon-only-counter": count !== void 0 && LeadingVisual && !children ? true : void 0,
 			"aria-describedby": ariaDescribedByIds.filter((descriptionID) => Boolean(descriptionID)).join(" ") || void 0,

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

@@ -1,12 +1,13 @@
-import "./ButtonBase-311501b9.css";
+import "./ButtonBase-b44e29d1.css";
 //#region src/Button/ButtonBase.module.css.js
 var ButtonBase_module_css_default = {
 	"ButtonBase": "prc-Button-ButtonBase-9n-Xk",
+	"IconButton": "prc-Button-IconButton-fyge7",
+	"LeadingVisual": "prc-Button-LeadingVisual-UySKu",
 	"does-not-exist": "prc-Button-does-not-exist-3ns8K",
 	"CounterLabel": "prc-Button-CounterLabel-5hAs4",
 	"Visual": "prc-Button-Visual-YNt2F",
 	"VisualWrap": "prc-Button-VisualWrap-E4cnq",
-	"IconButton": "prc-Button-IconButton-fyge7",
 	"ButtonContent": "prc-Button-ButtonContent-Iohp5",
 	"Label": "prc-Button-Label-FWkx3",
 	"LoadingSpinner": "prc-Button-LoadingSpinner-6KfaT",

package/dist/Button/types.d.ts

@@ -6,6 +6,9 @@ import { IconProps } from "@primer/octicons-react";
 type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'link';
 type Size = 'small' | 'medium' | 'large';
 type AlignContent = 'start' | 'center';
+type NotificationIndicatorPlacement = 'button' | 'leadingVisual' | 'icon';
+type ButtonNotificationIndicatorPlacement = Exclude<NotificationIndicatorPlacement, 'icon'>;
+type IconButtonNotificationIndicatorPlacement = Exclude<NotificationIndicatorPlacement, 'leadingVisual'>;
 type ButtonA11yProps = {
   'aria-label': string;
   'aria-labelledby'?: undefined;
@@ -69,9 +72,20 @@ type ButtonProps = {
   trailingAction?: React.ElementType | null;
   children?: React.ReactNode;
   count?: number | string;
+  /**
+   * Displays a visual indicator for new activity on the button boundary or leading visual.
+   * The `leadingVisual` placement requires the `leadingVisual` prop. Consumers are responsible
+   * for communicating the indicator's meaning through an accessible label or description.
+   */
+  notificationIndicator?: ButtonNotificationIndicatorPlacement;
 } & ButtonBaseProps;
 type IconButtonProps = ButtonA11yProps & {
   icon: React.ElementType;
+  /**
+   * Displays a visual indicator for new activity on the button boundary or icon. Consumers are
+   * responsible for communicating the indicator's meaning through an accessible label or description.
+   */
+  notificationIndicator?: IconButtonNotificationIndicatorPlacement;
   unsafeDisableTooltip?: boolean;
   description?: string;
   tooltipDirection?: TooltipDirection; /** @deprecated Use `keybindingHint` instead. */
@@ -90,4 +104,4 @@ type LinkButtonProps = {
   referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
 };
 //#endregion
-export { AlignContent, ButtonBaseProps, ButtonProps, IconButtonProps, LinkButtonProps, Size, VariantType };
+export { AlignContent, ButtonBaseProps, ButtonProps, IconButtonProps, LinkButtonProps, NotificationIndicatorPlacement, Size, VariantType };

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_underline_panels_controlled: false
 });
 //#endregion
 export { DefaultFeatureFlags };

package/dist/Flash/Flash.d.ts

@@ -2,11 +2,17 @@ import { ForwardRefComponent } from "../utils/polymorphic.js";
 import React from "react";
 
 //#region src/Flash/Flash.d.ts
+/**
+ * @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
+ */
 type FlashProps = React.ComponentPropsWithoutRef<'div'> & {
   className?: string;
   variant?: 'default' | 'warning' | 'success' | 'danger';
   full?: boolean;
 };
+/**
+ * @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
+ */
 declare const Flash: ForwardRefComponent<"div", FlashProps>;
 //#endregion
 export { FlashProps, Flash as default };

package/dist/Flash/Flash.js

@@ -4,6 +4,12 @@ import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 //#region src/Flash/Flash.tsx
+/**
+* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
+*/
+/**
+* @deprecated Use `Banner` instead. If migration is not yet possible, import `Flash` from `@primer/react/deprecated`.
+*/
 const Flash = /*#__PURE__*/ React.forwardRef(function Flash(t0, ref) {
 	const $ = c(15);
 	let className;

package/dist/SegmentedControl/SegmentedControl-4ef72733.css

@@ -0,0 +1,2 @@
+.prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=SegmentedControl-4ef72733.css.map */

package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-4ef72733.css","sourcesContent":[".SegmentedControl {\n  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  --segmented-control-icon-width: 32px;\n  --segmented-control-outer-radius: var(--borderRadius-medium);\n\n  display: inline-flex;\n\n  /* TODO: use primitive `control.{small|medium}.size` when it is available */\n  height: 32px;\n  padding: 0;\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n  border-radius: var(--borderRadius-medium);\n  position: relative;\n\n  @supports (anchor-name: --value) {\n    &::before {\n      position-anchor: --segmented-control-current-item;\n      content: '';\n      position: absolute;\n      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n      background-color: var(--controlKnob-bgColor-rest);\n      border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: var(--segmented-control-outer-radius);\n\n      @media (prefers-reduced-motion: no-preference) {\n        transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n      }\n    }\n  }\n\n  /* Responsive full-width */\n  &[data-full-width='true'] {\n    display: flex;\n    width: 100%;\n\n    --segmented-control-icon-width: 100%;\n  }\n\n  &[data-full-width='false'] {\n    display: inline-flex;\n    width: auto;\n\n    --segmented-control-icon-width: 32px;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-full-width-narrow='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-narrow='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-full-width-regular='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-regular='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-full-width-wide='true'] {\n      display: flex;\n      width: 100%;\n\n      --segmented-control-icon-width: 100%;\n    }\n\n    &[data-full-width-wide='false'] {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n\n    &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n      display: inline-flex;\n      width: auto;\n\n      --segmented-control-icon-width: 32px;\n    }\n  }\n\n  /* Hide when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: none;\n  }\n\n  /* Handle hideLabels variant - hide button text */\n  &[data-variant='hideLabels'] .Text {\n    display: none;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-narrow='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-regular='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: none;\n    }\n\n    &[data-variant-wide='hideLabels'] .Text {\n      display: none;\n    }\n  }\n\n  &:where([data-size='small']) {\n    /* TODO: use primitive `control.{small|medium}.size` when it is available */\n    height: 28px;\n    font-size: var(--text-body-size-small);\n  }\n}\n\n.DropdownContainer {\n  display: none;\n\n  /* Show when dropdown variant is active */\n  &[data-variant='dropdown'] {\n    display: block;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: block;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: block;\n    }\n  }\n}\n\n.Item {\n  position: relative;\n  display: block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-top: -1px;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  flex-grow: 1;\n\n  &:not(:last-child) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: 1px;\n\n    &::after {\n      position: absolute;\n      top: var(--base-size-8);\n      right: calc(-1 * var(--base-size-2));\n      bottom: var(--base-size-8);\n      width: 1px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--borderColor-default);\n    }\n\n    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:first-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-left: -1px;\n  }\n\n  &:last-child {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: -1px;\n  }\n\n  .Counter {\n    margin-inline-start: var(--base-size-8);\n    display: flex;\n    align-items: center;\n  }\n}\n\n.Button {\n  /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n  --segmented-control-button-inner-padding: 12px;\n  --segmented-control-button-bg-inset: 4px;\n\n  width: 100%;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--segmented-control-button-bg-inset);\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--base-text-weight-normal);\n  color: currentColor;\n  cursor: pointer;\n  background-color: transparent;\n  border-color: transparent;\n  border-width: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: var(--segmented-control-outer-radius);\n\n  & svg {\n    fill: var(--fgColor-muted);\n    color: var(--fgColor-muted);\n  }\n\n  /* fallback :focus state */\n  &:focus:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible:not(:disabled) {\n    outline: var(--base-size-2) solid var(--fgColor-accent);\n    outline-offset: -1px;\n    box-shadow: none;\n  }\n\n  /* stylelint-disable-next-line selector-max-specificity */\n  &:focus:focus-visible:not(:last-child)::after {\n    /* fixes an issue where the focus outline shows over the pseudo-element */\n    width: 0;\n  }\n\n  &[aria-disabled='true']:not([aria-pressed='true']) {\n    cursor: not-allowed;\n    color: var(--fgColor-disabled);\n    background-color: transparent;\n\n    & svg {\n      fill: var(--fgColor-disabled);\n      color: var(--fgColor-disabled);\n    }\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      position: absolute;\n      top: 50%;\n      right: 0;\n      left: 0;\n      min-height: 44px;\n      content: '';\n      transform: translateY(-50%);\n    }\n  }\n}\n\n.IconButton {\n  width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n  display: flex;\n  height: 100%;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  /* stylelint-disable-next-line primer/spacing */\n  padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n  border-color: transparent;\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  background-color: transparent;\n  transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n  /*\n    innerRadius = outerRadius - distance/2\n    https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n  */\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n  align-items: center;\n  justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n  padding: 0;\n  font-weight: var(--base-text-weight-semibold);\n\n  .Content {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-right: var(--segmented-control-button-inner-padding);\n    /* stylelint-disable-next-line primer/spacing */\n    padding-left: var(--segmented-control-button-inner-padding);\n    anchor-name: --segmented-control-current-item;\n\n    @supports not (anchor-name: --value) {\n      background-color: var(--controlKnob-bgColor-rest);\n      border-color: var(--controlKnob-borderColor-rest);\n      /* stylelint-disable-next-line primer/borders */\n      border-radius: var(--segmented-control-outer-radius);\n    }\n  }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n  &:hover .Content {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n\n  &:active .Content {\n    background-color: var(--controlTrack-bgColor-active);\n  }\n}\n\n.Text::after {\n  display: block;\n  height: 0;\n  overflow: hidden;\n  font-weight: var(--base-text-weight-semibold);\n  pointer-events: none;\n  visibility: hidden;\n  content: attr(data-text);\n  user-select: none;\n}\n\n.LeadingIcon {\n  margin-right: var(--base-size-4);\n}\n"]}

package/dist/SegmentedControl/SegmentedControl.module.css.js

@@ -1,4 +1,4 @@
-import "./SegmentedControl-de65527b.css";
+import "./SegmentedControl-4ef72733.css";
 //#region src/SegmentedControl/SegmentedControl.module.css.js
 var SegmentedControl_module_css_default = {
 	"SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",

package/dist/SelectPanel/SelectPanel.d.ts

@@ -118,6 +118,7 @@ declare const SelectPanel: typeof Panel & {
     trailingAction?: React.ElementType | null;
     children?: React.ReactNode;
     count?: number | string;
+    notificationIndicator?: "button" | "leadingVisual";
   } & {
     variant?: VariantType;
     size?: Size;

package/dist/deprecated/index.d.ts

@@ -3,6 +3,7 @@ import { ItemProps } from "./ActionList/Item.js";
 import { GroupedListProps, ItemInput, ListProps } from "./ActionList/List.js";
 import { ActionList } from "./ActionList/index.js";
 import Octicon, { OcticonProps } from "../Octicon/Octicon.js";
+import Flash, { FlashProps } from "../Flash/Flash.js";
 import { ActionMenu, ActionMenuProps } from "./ActionMenu.js";
 import FilteredSearch, { FilteredSearchProps } from "./FilteredSearch/FilteredSearch.js";
 import _default$2, { UnderlineNavLinkProps, UnderlineNavProps } from "./UnderlineNav/UnderlineNav.js";
@@ -10,4 +11,4 @@ import _default, { DialogHeaderProps, DialogProps } from "./DialogV1/Dialog.js";
 import Pagehead, { PageheadProps } from "../Pagehead/Pagehead.js";
 import _default$1, { TabNavLinkProps, TabNavProps } from "../TabNav/TabNav.js";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip.js";
-export { ActionList, type GroupProps as ActionListGroupProps, type GroupedListProps as ActionListGroupedListProps, type ItemInput as ActionListItemInput, type ItemProps as ActionListItemProps, type ListProps as ActionListProps, ActionMenu, type ActionMenuProps, _default as Dialog, type DialogHeaderProps, type DialogProps, FilteredSearch, type FilteredSearchProps, Octicon, type OcticonProps, Pagehead, type PageheadProps, _default$1 as TabNav, type TabNavLinkProps, type TabNavProps, Tooltip, type TooltipProps, _default$2 as UnderlineNav, type UnderlineNavLinkProps, type UnderlineNavProps };
+export { ActionList, type GroupProps as ActionListGroupProps, type GroupedListProps as ActionListGroupedListProps, type ItemInput as ActionListItemInput, type ItemProps as ActionListItemProps, type ListProps as ActionListProps, ActionMenu, type ActionMenuProps, _default as Dialog, type DialogHeaderProps, type DialogProps, FilteredSearch, type FilteredSearchProps, Flash, type FlashProps, Octicon, type OcticonProps, Pagehead, type PageheadProps, _default$1 as TabNav, type TabNavLinkProps, type TabNavProps, Tooltip, type TooltipProps, _default$2 as UnderlineNav, type UnderlineNavLinkProps, type UnderlineNavProps };

package/dist/deprecated/index.js

@@ -1,5 +1,6 @@
 "use client";
 import Octicon from "../Octicon/Octicon.js";
+import Flash from "../Flash/Flash.js";
 import { ActionList } from "./ActionList/index.js";
 import { ActionMenu } from "./ActionMenu.js";
 import FilteredSearch from "./FilteredSearch/FilteredSearch.js";
@@ -17,4 +18,4 @@ import Tooltip from "../Tooltip/Tooltip.js";
 *  example: import {FormGroup} from '@primer/react/deprecated
 */
 //#endregion
-export { ActionList, ActionMenu, Dialog_default as Dialog, FilteredSearch, Octicon, Pagehead, TabNav_default as TabNav, Tooltip, UnderlineNav_default as UnderlineNav };
+export { ActionList, ActionMenu, Dialog_default as Dialog, FilteredSearch, Flash, Octicon, Pagehead, TabNav_default as TabNav, Tooltip, UnderlineNav_default as UnderlineNav };

package/dist/experimental/SelectPanel2/SelectPanel.d.ts

@@ -58,6 +58,7 @@ declare const SelectPanel: React.FC<SelectPanelProps> & {
     trailingAction?: React.ElementType | null;
     children?: React.ReactNode;
     count?: number | string;
+    notificationIndicator?: "button" | "leadingVisual";
   } & {
     variant?: VariantType;
     size?: Size;

package/dist/experimental/Tabs/Tabs.js

@@ -1,4 +1,5 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
+import { useFeatureFlag } from "../../FeatureFlags/useFeatureFlag.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { TabsContext } from "./TabsContext.js";
 import { c } from "react-compiler-runtime";
@@ -13,11 +14,13 @@ import React, { useId } from "react";
 * The `Tab`, `TabList`, and `TabPanel` components are provided for convenience to showcase the API & implementation.
 */
 function Tabs(props) {
-	var _props$id, _props$defaultValue;
-	const $ = c(13);
+	var _props$id, _props$activationMode, _props$defaultValue;
+	const $ = c(16);
 	const { children, onValueChange } = props;
 	const generatedId = useId();
 	const groupId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
+	const activationMode = controlledApiEnabled ? (_props$activationMode = props.activationMode) !== null && _props$activationMode !== void 0 ? _props$activationMode : "automatic" : "automatic";
 	const t0 = (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : props.value;
 	let t1;
 	if ($[0] !== props.value || $[1] !== t0) {
@@ -31,49 +34,60 @@ function Tabs(props) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const [selectedValue, setSelectedValue] = useControllableState(t1);
+	const [focusedValue, setFocusedValue] = React.useState();
 	const savedOnValueChange = React.useRef(onValueChange);
 	let t2;
-	if ($[3] !== groupId || $[4] !== selectedValue || $[5] !== setSelectedValue) {
+	if ($[3] !== activationMode || $[4] !== controlledApiEnabled || $[5] !== focusedValue || $[6] !== groupId || $[7] !== selectedValue || $[8] !== setSelectedValue) {
 		t2 = {
 			groupId,
 			selectedValue,
+			activationMode,
+			focusedValue,
 			selectTab(value) {
 				var _savedOnValueChange$c;
+				setFocusedValue(void 0);
+				if (controlledApiEnabled && value === selectedValue) return;
 				setSelectedValue(value);
 				(_savedOnValueChange$c = savedOnValueChange.current) === null || _savedOnValueChange$c === void 0 || _savedOnValueChange$c.call(savedOnValueChange, { value });
+			},
+			focusTab(value_0) {
+				setFocusedValue(value_0);
 			}
 		};
-		$[3] = groupId;
-		$[4] = selectedValue;
-		$[5] = setSelectedValue;
-		$[6] = t2;
-	} else t2 = $[6];
+		$[3] = activationMode;
+		$[4] = controlledApiEnabled;
+		$[5] = focusedValue;
+		$[6] = groupId;
+		$[7] = selectedValue;
+		$[8] = setSelectedValue;
+		$[9] = t2;
+	} else t2 = $[9];
 	const contextValue = t2;
 	let t3;
 	let t4;
-	if ($[7] !== onValueChange) {
+	if ($[10] !== onValueChange) {
 		t3 = () => {
 			savedOnValueChange.current = onValueChange;
 		};
 		t4 = [onValueChange];
-		$[7] = onValueChange;
-		$[8] = t3;
-		$[9] = t4;
+		$[10] = onValueChange;
+		$[11] = t3;
+		$[12] = t4;
 	} else {
-		t3 = $[8];
-		t4 = $[9];
+		t3 = $[11];
+		t4 = $[12];
 	}
 	useIsomorphicLayoutEffect(t3, t4);
 	let t5;
-	if ($[10] !== children || $[11] !== contextValue) {
+	if ($[13] !== children || $[14] !== contextValue) {
 		t5 = /*#__PURE__*/ jsx(TabsContext.Provider, {
 			value: contextValue,
 			children
 		});
-		$[10] = children;
-		$[11] = contextValue;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[13] = children;
+		$[14] = contextValue;
+		$[15] = t5;
+	} else t5 = $[15];
 	return t5;
 }
 //#endregion

package/dist/experimental/Tabs/types.d.ts

@@ -51,6 +51,12 @@ type CommonTabsProps = {
    * unique id is generated automatically.
    */
   id?: string;
+  /**
+   * `'automatic'` (default) selects on focus, so Arrow/Home/End keys select immediately. `'manual'`
+   * only moves focus; selection commits on Enter/Space/click. Prefer `'manual'` when displaying a
+   * panel is not instant (e.g. it triggers a network request).
+   */
+  activationMode?: 'automatic' | 'manual';
 };
 type TabsProps = PropsWithChildren<(ControlledTabsProps | UncontrolledTabsProps) & CommonTabsProps>;
 type Label = {

package/dist/experimental/Tabs/useTab.js

@@ -12,6 +12,7 @@ function useTab(props) {
 	const selected = tabs.selectedValue === value;
 	const id = `${tabs.groupId}-tab-${value}`;
 	const panelId = `${tabs.groupId}-panel-${value}`;
+	const isTabStop = tabs.activationMode === "manual" && tabs.focusedValue !== void 0 ? tabs.focusedValue === value : selected;
 	let t0;
 	if ($[0] !== tabs || $[1] !== value) {
 		t0 = function onKeyDown(event) {
@@ -37,6 +38,10 @@ function useTab(props) {
 	let t2;
 	if ($[7] !== disabled || $[8] !== selected || $[9] !== tabs || $[10] !== value) {
 		t2 = function onFocus() {
+			if (tabs.activationMode === "manual") {
+				if (!disabled) tabs.focusTab(value);
+				return;
+			}
 			if (!selected && !disabled) tabs.selectTab(value);
 		};
 		$[7] = disabled;
@@ -47,7 +52,7 @@ function useTab(props) {
 	} else t2 = $[11];
 	const onFocus = t2;
 	const t3 = disabled ? true : void 0;
-	const t4 = selected ? 0 : -1;
+	const t4 = isTabStop ? 0 : -1;
 	let t5;
 	if ($[12] !== id || $[13] !== onFocus || $[14] !== onKeyDown || $[15] !== onMouseDown || $[16] !== panelId || $[17] !== selected || $[18] !== t3 || $[19] !== t4) {
 		t5 = { tabProps: {