@primer/react 38.38.0-rc.8cc0fbde1 → 38.38.0-rc.f9fd3e03f

package/CHANGELOG.md

@@ -6,10 +6,14 @@
 
 - [#8300](https://github.com/primer/react/pull/8300) [`3a32d6f`](https://github.com/primer/react/commit/3a32d6ff015b11dd2ac9bf299f8f558bb1e46ef5) Thanks [@joshblack](https://github.com/joshblack)! - Promote AriaStatus and AriaAlert from experimental to stable
 
+- [#8325](https://github.com/primer/react/pull/8325) [`4266cab`](https://github.com/primer/react/commit/4266cab4cb9e744f70cc13a8904c3b29a6499284) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SegmentedControl: Add a subtle visual variant with group dividers and an optional trailing action child.
+
 ### Patch Changes
 
 - [#8343](https://github.com/primer/react/pull/8343) [`7034e1f`](https://github.com/primer/react/commit/7034e1fbb754883b29a05fdf75eea8704359e7bb) Thanks [@llastflowers](https://github.com/llastflowers)! - Don't focus Autocomplete menu items while menu is closed: fix SR announcement bug and menu item skipping bug
 
+- [#8330](https://github.com/primer/react/pull/8330) [`f7329dc`](https://github.com/primer/react/commit/f7329dc8224166fad2698ae7d6c518dc97d89754) Thanks [@mattcosta7](https://github.com/mattcosta7)! - RelativeTime: Prevent hydration errors when the server and client use different time zones
+
 - [#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
 
 - [#8340](https://github.com/primer/react/pull/8340) [`a79d6c6`](https://github.com/primer/react/commit/a79d6c60ca23abce6f85502e1db78458f5fc3e90) Thanks [@ShiyunXu](https://github.com/ShiyunXu)! - UnderlineNav: Prevent external borders from incorrectly triggering the overflow menu

package/dist/RelativeTime/RelativeTime.js

@@ -7,7 +7,8 @@ const RelativeTimeComponent = createComponent(RelativeTimeElement, "relative-tim
 const localeOptions = {
 	month: "short",
 	day: "numeric",
-	year: "numeric"
+	year: "numeric",
+	timeZone: "UTC"
 };
 function RelativeTime(t0) {
 	const $ = c(16);

package/dist/SegmentedControl/SegmentedControl-e68d4197.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-disable-knob-transition]:before{transition:none}}.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}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@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]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.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}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@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}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@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-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.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(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.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{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.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-e68d4197.css.map */

package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-e68d4197.css","sourcesContent":["@define-mixin subtleVariant {\n  --segmented-control-outer-radius: var(--borderRadius-large);\n  --segmented-control-button-bg-inset: 0px;\n\n  background-color: transparent;\n  border: 0;\n\n  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n  &::before {\n    display: none;\n  }\n\n  .Item:not(:last-child)::after {\n    background-color: transparent;\n  }\n\n  > [data-component='SegmentedControl.Divider'] {\n    display: block;\n  }\n\n  .Button {\n    padding: 0;\n    color: var(--fgColor-muted);\n    border: 0;\n    border-radius: var(--borderRadius-large);\n\n    .Content {\n      padding-inline: var(--base-size-12);\n      border: 0;\n    }\n  }\n\n  .Button[aria-pressed='true'] {\n    color: var(--fgColor-default);\n\n    .Content {\n      background-color: var(--bgColor-muted);\n    }\n  }\n\n  .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n    background-color: var(--bgColor-muted);\n    background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n  }\n}\n\n@define-mixin defaultVariant {\n  --segmented-control-outer-radius: var(--borderRadius-medium);\n  --segmented-control-button-bg-inset: 4px;\n\n  background-color: var(--controlTrack-bgColor-rest);\n  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n  &::before {\n    display: block;\n  }\n\n  .Item:not(:last-child)::after {\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-default);\n  }\n\n  > [data-component='SegmentedControl.Divider'] {\n    display: none;\n  }\n\n  .Button {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--segmented-control-button-bg-inset);\n    color: currentColor;\n    /* stylelint-disable-next-line primer/borders */\n    border-radius: var(--segmented-control-outer-radius);\n\n    .Content {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n      border: var(--borderWidth-thin) solid transparent;\n    }\n  }\n\n  .Button[aria-pressed='true'] {\n    padding: 0;\n    color: currentColor;\n\n    .Content {\n      /* stylelint-disable-next-line primer/spacing */\n      padding-inline: var(--segmented-control-button-inner-padding);\n      background-color: transparent;\n    }\n  }\n\n  .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n    background-color: var(--controlTrack-bgColor-hover);\n  }\n}\n\n.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    &[data-disable-knob-transition]::before {\n      transition: none;\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  > [data-component='SegmentedControl.Divider'] {\n    display: none;\n    align-self: stretch;\n    width: 1px;\n    margin-block: var(--base-size-8);\n    margin-inline-start: var(--base-size-8);\n    /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n    margin-inline-end: calc(var(--base-size-8) - 1px);\n    list-style: none;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-default);\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  &:where([data-variant='subtle']) {\n    @mixin subtleVariant;\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    &:where([data-variant-narrow='subtle']) {\n      @mixin subtleVariant;\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    &:where([data-variant-regular='subtle']) {\n      @mixin subtleVariant;\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    &:where([data-variant-wide='subtle']) {\n      @mixin subtleVariant;\n    }\n\n    &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n      @mixin defaultVariant;\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.DropdownGroup {\n  --segmented-control-action-size: 32px;\n  --segmented-control-list-flex: 0 1 auto;\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--base-size-4);\n\n  &[data-full-width='true'] {\n    width: 100%;\n\n    --segmented-control-list-flex: 1 1 auto;\n  }\n\n  &[data-full-width='false'] {\n    width: auto;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-full-width-narrow='true'] {\n      width: 100%;\n\n      --segmented-control-list-flex: 1 1 auto;\n    }\n\n    &[data-full-width-narrow='false'] {\n      width: auto;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-full-width-regular='true'] {\n      width: 100%;\n\n      --segmented-control-list-flex: 1 1 auto;\n    }\n\n    &[data-full-width-regular='false'] {\n      width: auto;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-full-width-wide='true'] {\n      width: 100%;\n\n      --segmented-control-list-flex: 1 1 auto;\n    }\n\n    &[data-full-width-wide='false'] {\n      width: auto;\n    }\n\n    &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n      width: auto;\n\n      --segmented-control-list-flex: 0 1 auto;\n    }\n  }\n\n  &[data-size='small'] {\n    --segmented-control-action-size: 28px;\n  }\n\n  > .SegmentedControl {\n    min-width: 0;\n    flex: var(--segmented-control-list-flex);\n  }\n}\n\n.InlineAction {\n  display: flex;\n\n  &[data-variant='dropdown'] {\n    display: none;\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-variant-narrow='dropdown'] {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-variant-regular='dropdown'] {\n      display: none;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-variant-wide='dropdown'] {\n      display: none;\n    }\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    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n    &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([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.ActionItem {\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0;\n}\n\n.ActionButton {\n  width: var(--segmented-control-action-size);\n  height: var(--segmented-control-action-size);\n  padding: 0;\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.d.ts

@@ -1,5 +1,7 @@
 import { FCWithSlotMarker } from "../utils/types/Slots.js";
 import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
+import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
+import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
 import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
 import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
 import { WidthOnlyViewportRangeKeys } from "../utils/types/ViewportRangeKeys.js";
@@ -13,12 +15,14 @@ type SegmentedControlProps = {
   fullWidth?: boolean | ResponsiveValue<boolean>; /** The handler that gets called when a segment is selected */
   onChange?: (selectedIndex: number) => void; /** The size of the buttons */
   size?: 'small' | 'medium'; /** Configure alternative ways to render the control when it gets rendered in tight spaces */
-  variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
+  variant?: 'default' | 'subtle' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default' | 'subtle'>>;
   className?: string;
 };
 declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
   Button: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
   IconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
+  Divider: FCWithSlotMarker<SegmentedControlDividerProps>;
+  Action: FCWithSlotMarker<SegmentedControlActionProps>;
 };
 //#endregion
 export { SegmentedControl, SegmentedControlProps };

package/dist/SegmentedControl/SegmentedControl.js

@@ -1,18 +1,23 @@
+import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { isSlot } from "../utils/is-slot.js";
+import { useSlots } from "../hooks/useSlots.js";
 import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
 import { ActionList } from "../ActionList/index.js";
 import { ActionMenu } from "../ActionMenu/ActionMenu.js";
 import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
 import SegmentedControlButton from "./SegmentedControlButton.js";
 import { SegmentedControlIconButton } from "./SegmentedControlIconButton.js";
+import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
+import SegmentedControlAction from "./SegmentedControlAction.js";
+import SegmentedControlDivider from "./SegmentedControlDivider.js";
 import { c } from "react-compiler-runtime";
 import React, { useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isElement } from "react-is";
 //#region src/SegmentedControl/SegmentedControl.tsx
 const Root = (t0) => {
-	const $ = c(54);
+	const $ = c(39);
 	let ariaLabel;
 	let ariaLabelledby;
 	let children;
@@ -48,207 +53,239 @@ const Root = (t0) => {
 	const variant = t1 === void 0 ? "default" : t1;
 	const segmentedControlContainerRef = useRef(null);
 	let t2;
-	if ($[10] !== children || $[11] !== onChange) {
-		t2 = onChange === void 0 || React.Children.toArray(children).some(_temp);
-		$[10] = children;
-		$[11] = onChange;
-		$[12] = t2;
-	} else t2 = $[12];
-	const isUncontrolled = t2;
-	let t3;
-	if ($[13] !== children) {
-		const selectedSegments = React.Children.toArray(children).map(_temp2);
-		t3 = selectedSegments.some(_temp3) ? selectedSegments.indexOf(true) : 0;
-		$[13] = children;
-		$[14] = t3;
-	} else t3 = $[14];
-	const selectedIndexExternal = t3;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { action: SegmentedControlAction };
+		$[10] = t2;
+	} else t2 = $[10];
+	const [slots, segmentChildren] = useSlots(children, t2);
+	const actionChild = slots.action;
+	const segments = segmentChildren.filter(_temp);
+	const segmentIndices = new Map(segments.map(_temp2));
+	const segmentCount = segments.length;
+	const previousSegmentCount = useRef(segmentCount);
+	useIsomorphicLayoutEffect(() => {
+		if (previousSegmentCount.current === segmentCount) return;
+		const segmentedControl = segmentedControlContainerRef.current;
+		segmentedControl === null || segmentedControl === void 0 || segmentedControl.setAttribute("data-disable-knob-transition", "");
+		previousSegmentCount.current = segmentCount;
+		const animationFrame = requestAnimationFrame(() => {
+			segmentedControl === null || segmentedControl === void 0 || segmentedControl.removeAttribute("data-disable-knob-transition");
+		});
+		return () => cancelAnimationFrame(animationFrame);
+	}, [segmentCount]);
+	const isUncontrolled = onChange === void 0 || segments.some(_temp3);
+	const selectedSegments = segments.map(_temp4);
+	const selectedIndexExternal = selectedSegments.some(_temp5) ? selectedSegments.indexOf(true) : 0;
 	const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
 	const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
-	let hasDropdownVariant;
+	const selectedChild = /*#__PURE__*/ React.isValidElement(segments[selectedIndex]) ? segments[selectedIndex] : void 0;
+	const getChildIcon = _temp6;
+	const getChildText = _temp7;
+	if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
+	const responsiveVariant = typeof variant === "object" ? variant : void 0;
+	let t3;
+	if ($[11] !== responsiveVariant) {
+		t3 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
+		$[11] = responsiveVariant;
+		$[12] = t3;
+	} else t3 = $[12];
+	const hasDropdownVariant = t3;
+	const dropdownContent = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
+		className: SegmentedControl_module_css_default.DropdownContainer,
+		...getResponsiveAttributes("variant", variant),
+		children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
+			"aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
+			leadingVisual: getChildIcon(selectedChild),
+			children: getChildText(selectedChild)
+		}), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
+			"aria-labelledby": ariaLabelledby,
+			children: /*#__PURE__*/ jsxs(ActionList, {
+				selectionVariant: "single",
+				children: [segmentChildren.map((child_2, index_0) => {
+					var _segmentIndices$get;
+					if (/*#__PURE__*/ React.isValidElement(child_2) && isSlot(child_2, SegmentedControlDivider)) {
+						var _child_2$key;
+						return /*#__PURE__*/ jsx(ActionList.Divider, {
+							className: child_2.props.className,
+							style: child_2.props.style
+						}, (_child_2$key = child_2.key) !== null && _child_2$key !== void 0 ? _child_2$key : `segmented-control-divider-${index_0}`);
+					}
+					const ChildIcon = getChildIcon(child_2);
+					if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
+					const segmentIndex = (_segmentIndices$get = segmentIndices.get(child_2)) !== null && _segmentIndices$get !== void 0 ? _segmentIndices$get : -1;
+					return /*#__PURE__*/ jsxs(ActionList.Item, {
+						selected: segmentIndex === selectedIndex,
+						onSelect: (event) => {
+							isUncontrolled && setSelectedIndexInternalState(segmentIndex);
+							onChange && onChange(segmentIndex);
+							child_2.props.onClick && child_2.props.onClick(event);
+						},
+						children: [
+							ChildIcon,
+							" ",
+							getChildText(child_2)
+						]
+					}, `segmented-control-action-btn-${index_0}`);
+				}), actionChild && /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
+					value: "menu",
+					children: actionChild
+				})]
+			})
+		})] })
+	});
 	let t4;
-	if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== isUncontrolled || $[19] !== onChange || $[20] !== selectedIndex || $[21] !== variant) {
-		const selectedChild = /*#__PURE__*/ React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : void 0;
-		const getChildIcon = _temp4;
-		const getChildText = _temp5;
-		if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
-		const responsiveVariant = typeof variant === "object" ? variant : void 0;
-		let t5;
-		if ($[24] !== responsiveVariant) {
-			t5 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
-			$[24] = responsiveVariant;
-			$[25] = t5;
-		} else t5 = $[25];
-		hasDropdownVariant = t5;
-		t4 = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
-			className: SegmentedControl_module_css_default.DropdownContainer,
-			...getResponsiveAttributes("variant", variant),
-			children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
-				"aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
-				leadingVisual: getChildIcon(selectedChild),
-				children: getChildText(selectedChild)
-			}), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
-				"aria-labelledby": ariaLabelledby,
-				children: /*#__PURE__*/ jsx(ActionList, {
-					selectionVariant: "single",
-					children: React.Children.map(children, (child_1, index) => {
-						const ChildIcon = getChildIcon(child_1);
-						if (!/*#__PURE__*/ React.isValidElement(child_1)) return null;
-						return /*#__PURE__*/ jsxs(ActionList.Item, {
-							selected: index === selectedIndex,
-							onSelect: (event) => {
-								isUncontrolled && setSelectedIndexInternalState(index);
-								onChange && onChange(index);
-								child_1.props.onClick && child_1.props.onClick(event);
-							},
-							children: [
-								ChildIcon,
-								" ",
-								getChildText(child_1)
-							]
-						}, `segmented-control-action-btn-${index}`);
-					})
-				})
-			})] })
-		});
-		$[15] = ariaLabel;
-		$[16] = ariaLabelledby;
-		$[17] = children;
-		$[18] = isUncontrolled;
-		$[19] = onChange;
-		$[20] = selectedIndex;
-		$[21] = variant;
-		$[22] = hasDropdownVariant;
-		$[23] = t4;
-	} else {
-		hasDropdownVariant = $[22];
-		t4 = $[23];
-	}
-	const dropdownContent = t4;
+	if ($[13] !== className) {
+		t4 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
+		$[13] = className;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[26] !== className) {
-		t5 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
-		$[26] = className;
-		$[27] = t5;
-	} else t5 = $[27];
+	if ($[15] !== fullWidth) {
+		t5 = getResponsiveAttributes("full-width", fullWidth);
+		$[15] = fullWidth;
+		$[16] = t5;
+	} else t5 = $[16];
 	let t6;
-	if ($[28] !== fullWidth) {
-		t6 = getResponsiveAttributes("full-width", fullWidth);
-		$[28] = fullWidth;
-		$[29] = t6;
-	} else t6 = $[29];
-	let t7;
-	if ($[30] !== variant) {
-		t7 = getResponsiveAttributes("variant", variant);
-		$[30] = variant;
-		$[31] = t7;
-	} else t7 = $[31];
-	let t8;
-	if ($[32] !== children || $[33] !== isUncontrolled || $[34] !== onChange || $[35] !== selectedIndex) {
-		let t9;
-		if ($[37] !== isUncontrolled || $[38] !== onChange || $[39] !== selectedIndex) {
-			t9 = (child_2, index_0) => {
-				if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
-				const sharedChildProps = {
-					onClick: onChange ? (event_0) => {
-						if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
-							onChange(index_0);
-							isUncontrolled && setSelectedIndexInternalState(index_0);
-							child_2.props.onClick && child_2.props.onClick(event_0);
-						}
-					} : (event_1) => {
-						if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
-							child_2.props.onClick && child_2.props.onClick(event_1);
-							isUncontrolled && setSelectedIndexInternalState(index_0);
-						}
-					},
-					selected: index_0 === selectedIndex,
-					style: {
-						"--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
-						...child_2.props.style
-					}
-				};
-				return /*#__PURE__*/ React.cloneElement(child_2, sharedChildProps);
-			};
-			$[37] = isUncontrolled;
-			$[38] = onChange;
-			$[39] = selectedIndex;
-			$[40] = t9;
-		} else t9 = $[40];
-		t8 = React.Children.map(children, t9);
-		$[32] = children;
-		$[33] = isUncontrolled;
-		$[34] = onChange;
-		$[35] = selectedIndex;
-		$[36] = t8;
-	} else t8 = $[36];
+	if ($[17] !== variant) {
+		t6 = getResponsiveAttributes("variant", variant);
+		$[17] = variant;
+		$[18] = t6;
+	} else t6 = $[18];
+	const t7 = "SegmentedControl";
+	const t8 = segmentChildren.map((child_3, index_1) => {
+		var _segmentIndices$get2, _child_3$key2;
+		if (/*#__PURE__*/ React.isValidElement(child_3) && isSlot(child_3, SegmentedControlDivider)) {
+			var _child_3$key;
+			return /*#__PURE__*/ React.cloneElement(child_3, { key: (_child_3$key = child_3.key) !== null && _child_3$key !== void 0 ? _child_3$key : `segmented-control-divider-${index_1}` });
+		}
+		if (!/*#__PURE__*/ React.isValidElement(child_3)) return null;
+		const segmentIndex_0 = (_segmentIndices$get2 = segmentIndices.get(child_3)) !== null && _segmentIndices$get2 !== void 0 ? _segmentIndices$get2 : -1;
+		const sharedChildProps = {
+			onClick: onChange ? (event_0) => {
+				if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
+					onChange(segmentIndex_0);
+					isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
+					child_3.props.onClick && child_3.props.onClick(event_0);
+				}
+			} : (event_1) => {
+				if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
+					child_3.props.onClick && child_3.props.onClick(event_1);
+					isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
+				}
+			},
+			selected: segmentIndex_0 === selectedIndex,
+			style: {
+				"--separator-color": segmentIndex_0 === selectedIndex || segmentIndex_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
+				...child_3.props.style
+			}
+		};
+		return /*#__PURE__*/ React.cloneElement(child_3, {
+			key: (_child_3$key2 = child_3.key) !== null && _child_3$key2 !== void 0 ? _child_3$key2 : `segmented-control-item-${index_1}`,
+			...sharedChildProps
+		});
+	});
 	let t9;
-	if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== rest || $[44] !== size || $[45] !== t5 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
+	if ($[19] !== ariaLabel || $[20] !== ariaLabelledby || $[21] !== rest || $[22] !== size || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t8) {
 		t9 = /*#__PURE__*/ jsx("ul", {
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			ref: segmentedControlContainerRef,
-			className: t5,
+			className: t4,
+			...t5,
 			...t6,
-			...t7,
 			"data-size": size,
 			...rest,
-			"data-component": "SegmentedControl",
+			"data-component": t7,
 			children: t8
 		});
-		$[41] = ariaLabel;
-		$[42] = ariaLabelledby;
-		$[43] = rest;
-		$[44] = size;
-		$[45] = t5;
-		$[46] = t6;
-		$[47] = t7;
-		$[48] = t8;
-		$[49] = t9;
-	} else t9 = $[49];
+		$[19] = ariaLabel;
+		$[20] = ariaLabelledby;
+		$[21] = rest;
+		$[22] = size;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
 	const segmentedControlContent = t9;
 	let t10;
-	if ($[50] !== dropdownContent || $[51] !== hasDropdownVariant || $[52] !== segmentedControlContent) {
-		t10 = hasDropdownVariant ? /*#__PURE__*/ jsxs(Fragment$1, { children: [dropdownContent, segmentedControlContent] }) : segmentedControlContent;
-		$[50] = dropdownContent;
-		$[51] = hasDropdownVariant;
-		$[52] = segmentedControlContent;
-		$[53] = t10;
-	} else t10 = $[53];
-	return t10;
+	if ($[28] !== actionChild || $[29] !== variant) {
+		t10 = actionChild && /*#__PURE__*/ jsx("div", {
+			className: SegmentedControl_module_css_default.InlineAction,
+			...getResponsiveAttributes("variant", variant),
+			children: /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
+				value: "inline",
+				children: actionChild
+			})
+		});
+		$[28] = actionChild;
+		$[29] = variant;
+		$[30] = t10;
+	} else t10 = $[30];
+	const inlineActionContent = t10;
+	let t11;
+	if ($[31] !== actionChild || $[32] !== dropdownContent || $[33] !== fullWidth || $[34] !== hasDropdownVariant || $[35] !== inlineActionContent || $[36] !== segmentedControlContent || $[37] !== size) {
+		t11 = hasDropdownVariant || actionChild ? /*#__PURE__*/ jsxs("div", {
+			className: SegmentedControl_module_css_default.DropdownGroup,
+			"data-size": size,
+			...getResponsiveAttributes("full-width", fullWidth),
+			children: [
+				dropdownContent,
+				segmentedControlContent,
+				inlineActionContent
+			]
+		}) : segmentedControlContent;
+		$[31] = actionChild;
+		$[32] = dropdownContent;
+		$[33] = fullWidth;
+		$[34] = hasDropdownVariant;
+		$[35] = inlineActionContent;
+		$[36] = segmentedControlContent;
+		$[37] = size;
+		$[38] = t11;
+	} else t11 = $[38];
+	return t11;
 };
 Root.displayName = "SegmentedControl";
 const SegmentedControl = Object.assign(Root, {
 	Button: SegmentedControlButton,
-	IconButton: SegmentedControlIconButton
+	IconButton: SegmentedControlIconButton,
+	Divider: SegmentedControlDivider,
+	Action: SegmentedControlAction
 });
 function _temp(child) {
-	return /*#__PURE__*/ React.isValidElement(child) && child.props.defaultSelected !== void 0;
+	return /*#__PURE__*/ React.isValidElement(child) && !isSlot(child, SegmentedControlDivider);
+}
+function _temp2(segment, index) {
+	return [segment, index];
 }
-function _temp2(child_0) {
-	return /*#__PURE__*/ React.isValidElement(child_0) && (child_0.props.defaultSelected || child_0.props.selected);
+function _temp3(child_0) {
+	return /*#__PURE__*/ React.isValidElement(child_0) && child_0.props.defaultSelected !== void 0;
 }
-function _temp3(isSelected) {
+function _temp4(child_1) {
+	return /*#__PURE__*/ React.isValidElement(child_1) && (child_1.props.defaultSelected || child_1.props.selected);
+}
+function _temp5(isSelected) {
 	return isSelected;
 }
-function _temp4(childArg) {
+function _temp6(childArg) {
 	if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
 		var _childArg$props$leadi;
 		const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
 		if (leadingVisual) {
 			if (isElement(leadingVisual)) return leadingVisual;
-			else return /*#__PURE__*/ jsx(leadingVisual, {});
+			return /*#__PURE__*/ jsx(leadingVisual, {});
 		}
 	}
 	if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) {
-		if (isElement(childArg.props.icon)) {} else {
-			const Icon = childArg.props.icon;
-			return /*#__PURE__*/ jsx(Icon, {});
-		}
+		if (isElement(childArg.props.icon)) return childArg.props.icon;
+		const Icon = childArg.props.icon;
+		return /*#__PURE__*/ jsx(Icon, {});
 	}
 	return null;
 }
-function _temp5(childArg_0) {
+function _temp7(childArg_0) {
 	if (/*#__PURE__*/ React.isValidElement(childArg_0) && (childArg_0.type === SegmentedControlButton || isSlot(childArg_0, SegmentedControlButton))) return childArg_0.props.children;
 	return /*#__PURE__*/ React.isValidElement(childArg_0) ? childArg_0.props["aria-label"] : null;
 }

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

@@ -1,14 +1,18 @@
-import "./SegmentedControl-4ef72733.css";
+import "./SegmentedControl-e68d4197.css";
 //#region src/SegmentedControl/SegmentedControl.module.css.js
 var SegmentedControl_module_css_default = {
 	"SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",
+	"Item": "prc-SegmentedControl-Item-tSCQh",
+	"Button": "prc-SegmentedControl-Button-E48xz",
+	"Content": "prc-SegmentedControl-Content-1COlk",
 	"Text": "prc-SegmentedControl-Text-7S2y2",
+	"DropdownGroup": "prc-SegmentedControl-DropdownGroup-9SmpX",
+	"InlineAction": "prc-SegmentedControl-InlineAction-4qmw0",
 	"DropdownContainer": "prc-SegmentedControl-DropdownContainer-ZaPMn",
-	"Item": "prc-SegmentedControl-Item-tSCQh",
 	"Counter": "prc-SegmentedControl-Counter-GmZOI",
-	"Button": "prc-SegmentedControl-Button-E48xz",
+	"ActionItem": "prc-SegmentedControl-ActionItem-2V1ou",
+	"ActionButton": "prc-SegmentedControl-ActionButton-Q5fnw",
 	"IconButton": "prc-SegmentedControl-IconButton-tlzDE",
-	"Content": "prc-SegmentedControl-Content-1COlk",
 	"LeadingIcon": "prc-SegmentedControl-LeadingIcon-74n5s"
 };
 //#endregion

package/dist/SegmentedControl/SegmentedControlAction.d.ts

@@ -0,0 +1,12 @@
+import { ElementType } from "react";
+
+//#region src/SegmentedControl/SegmentedControlAction.d.ts
+interface SegmentedControlActionProps {
+  label: string;
+  icon: ElementType;
+  onClick?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+//#endregion
+export { SegmentedControlActionProps };

package/dist/SegmentedControl/SegmentedControlAction.js

@@ -0,0 +1,111 @@
+import { IconButton } from "../Button/IconButton.js";
+import { ActionList } from "../ActionList/index.js";
+import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
+import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
+import { c } from "react-compiler-runtime";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/SegmentedControl/SegmentedControlAction.tsx
+const SegmentedControlMenuAction = (t0) => {
+	const $ = c(6);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== props) {
+		t1 = /*#__PURE__*/ jsx("div", {
+			...props,
+			"data-component": "SegmentedControl.Action",
+			children
+		});
+		$[3] = children;
+		$[4] = props;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+};
+const SegmentedControlAction = (props) => {
+	const $ = c(19);
+	const { disabled, icon: Icon, label, loading, onClick } = props;
+	if (useContext(SegmentedControlActionContext) === "menu") {
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = /*#__PURE__*/ jsx(ActionList.Divider, {});
+			$[0] = t0;
+		} else t0 = $[0];
+		let t1;
+		if ($[1] !== onClick) {
+			t1 = (event) => {
+				event.preventDefault();
+				onClick === null || onClick === void 0 || onClick();
+			};
+			$[1] = onClick;
+			$[2] = t1;
+		} else t1 = $[2];
+		let t2;
+		if ($[3] !== Icon) {
+			t2 = /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) });
+			$[3] = Icon;
+			$[4] = t2;
+		} else t2 = $[4];
+		let t3;
+		if ($[5] !== disabled || $[6] !== label || $[7] !== loading || $[8] !== t1 || $[9] !== t2) {
+			t3 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t0, /*#__PURE__*/ jsxs(ActionList.Item, {
+				role: "menuitem",
+				disabled,
+				loading,
+				_PrivateItemWrapper: SegmentedControlMenuAction,
+				onSelect: t1,
+				children: [t2, label]
+			})] });
+			$[5] = disabled;
+			$[6] = label;
+			$[7] = loading;
+			$[8] = t1;
+			$[9] = t2;
+			$[10] = t3;
+		} else t3 = $[10];
+		return t3;
+	}
+	let t0;
+	if ($[11] !== onClick) {
+		t0 = () => onClick === null || onClick === void 0 ? void 0 : onClick();
+		$[11] = onClick;
+		$[12] = t0;
+	} else t0 = $[12];
+	let t1;
+	if ($[13] !== Icon || $[14] !== disabled || $[15] !== label || $[16] !== loading || $[17] !== t0) {
+		t1 = /*#__PURE__*/ jsx("div", {
+			className: SegmentedControl_module_css_default.ActionItem,
+			"data-component": "SegmentedControl.Action",
+			children: /*#__PURE__*/ jsx(IconButton, {
+				"aria-label": label,
+				className: SegmentedControl_module_css_default.ActionButton,
+				disabled,
+				icon: Icon,
+				loading,
+				onClick: t0,
+				variant: "invisible"
+			})
+		});
+		$[13] = Icon;
+		$[14] = disabled;
+		$[15] = label;
+		$[16] = loading;
+		$[17] = t0;
+		$[18] = t1;
+	} else t1 = $[18];
+	return t1;
+};
+SegmentedControlAction.displayName = "SegmentedControl.Action";
+SegmentedControlAction.__SLOT__ = Symbol("SegmentedControl.Action");
+//#endregion
+export { SegmentedControlAction as default };

package/dist/SegmentedControl/SegmentedControlActionContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/SegmentedControl/SegmentedControlActionContext.ts
+const SegmentedControlActionContext = /*#__PURE__*/ createContext("inline");
+//#endregion
+export { SegmentedControlActionContext };

package/dist/SegmentedControl/SegmentedControlDivider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+//#region src/SegmentedControl/SegmentedControlDivider.d.ts
+type SegmentedControlDividerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+};
+//#endregion
+export { SegmentedControlDividerProps };

package/dist/SegmentedControl/SegmentedControlDivider.js

@@ -0,0 +1,24 @@
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/SegmentedControl/SegmentedControlDivider.tsx
+const SegmentedControlDivider = (t0) => {
+	const $ = c(3);
+	const { className, style } = t0;
+	let t1;
+	if ($[0] !== className || $[1] !== style) {
+		t1 = /*#__PURE__*/ jsx("li", {
+			"aria-hidden": "true",
+			className,
+			"data-component": "SegmentedControl.Divider",
+			style
+		});
+		$[0] = className;
+		$[1] = style;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+SegmentedControlDivider.displayName = "SegmentedControl.Divider";
+SegmentedControlDivider.__SLOT__ = Symbol("SegmentedControl.Divider");
+//#endregion
+export { SegmentedControlDivider as default };

package/dist/SegmentedControl/index.d.ts

@@ -1,4 +1,6 @@
+import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
+import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
 import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
 import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
 import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl.js";
-export { SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, SegmentedControlProps };
+export { SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, SegmentedControlProps };

package/dist/index.d.ts

@@ -88,6 +88,8 @@ import { ProgressBarItemProps, ProgressBarProps } from "./ProgressBar/ProgressBa
 import { ProgressBar } from "./ProgressBar/index.js";
 import _default$10, { RadioGroupProps } from "./RadioGroup/RadioGroup.js";
 import RelativeTime, { RelativeTimeProps } from "./RelativeTime/RelativeTime.js";
+import { SegmentedControlDividerProps } from "./SegmentedControl/SegmentedControlDivider.js";
+import { SegmentedControlActionProps } from "./SegmentedControl/SegmentedControlAction.js";
 import { SegmentedControlButtonProps } from "./SegmentedControl/SegmentedControlButton.js";
 import { SegmentedControlIconButtonProps } from "./SegmentedControl/SegmentedControlIconButton.js";
 import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl/SegmentedControl.js";
@@ -121,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 SegmentedControlButtonProps, 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, 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/generated/components.json

@@ -6198,6 +6198,10 @@
           "id": "components-segmentedcontrol-features--variant-narrow-action-menu",
           "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    variant={{\n      narrow: 'dropdown',\n      regular: 'default',\n      wide: 'default',\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
         },
+        {
+          "id": "components-segmentedcontrol-features--variant-narrow-action-menu-with-action",
+          "code": "() => {\n  const initialViews = [\n    {\n      id: 'all',\n      label: 'All',\n    },\n    {\n      id: 'active',\n      label: 'Active',\n    },\n    {\n      id: 'review-requests',\n      label: 'Review requests',\n    },\n    {\n      id: 'done',\n      label: 'Done',\n    },\n  ]\n  const [views, setViews] = useState(initialViews)\n  const [selectedViewId, setSelectedViewId] = useState(initialViews[0].id)\n  const handleAddView = () => {\n    setViews((currentViews) => {\n      const viewNumber = currentViews.length - 3\n      return [\n        ...currentViews,\n        {\n          id: `new-view-${viewNumber}`,\n          label: `New view ${viewNumber}`,\n        },\n      ]\n    })\n  }\n  const handleChange = (index: number) => {\n    const nextSelectedViewId = views.at(index)?.id\n    if (nextSelectedViewId) setSelectedViewId(nextSelectedViewId)\n  }\n  const handleReset = () => {\n    setViews(initialViews)\n    setSelectedViewId(initialViews[0].id)\n  }\n  return (\n    <>\n      <SegmentedControl\n        aria-label=\"View\"\n        onChange={handleChange}\n        variant={{\n          narrow: 'dropdown',\n          regular: 'subtle',\n          wide: 'subtle',\n        }}\n      >\n        {views.flatMap((view) => [\n          ...(view.label === 'Active'\n            ? [<SegmentedControl.Divider key={`${view.label}-divider`} />]\n            : []),\n          <SegmentedControl.Button\n            key={view.id}\n            selected={view.id === selectedViewId}\n          >\n            {view.label}\n          </SegmentedControl.Button>,\n        ])}\n        <SegmentedControl.Action\n          label=\"Add view\"\n          icon={PlusIcon}\n          onClick={handleAddView}\n        />\n      </SegmentedControl>\n      <Button\n        className={classes.ResetButton}\n        size=\"small\"\n        onClick={handleReset}\n      >\n        Reset views\n      </Button>\n    </>\n  )\n}"
+        },
         {
           "id": "components-segmentedcontrol-features--fullwidth-narrow",
           "code": "() => (\n  <SegmentedControl\n    aria-label=\"File view\"\n    fullWidth={{\n      narrow: true,\n      regular: false,\n      wide: false,\n    }}\n  >\n    <SegmentedControl.Button\n      defaultSelected\n      aria-label={'Preview'}\n      leadingVisual={EyeIcon}\n    >\n      Preview\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n      Raw\n    </SegmentedControl.Button>\n    <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n      Blame\n    </SegmentedControl.Button>\n  </SegmentedControl>\n)"
@@ -6217,6 +6221,10 @@
         {
           "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
           "code": "() => (\n  <div className={classes.LabelAndCaptionContainer}>\n    <div className={classes.LabelAndCaption}>\n      <Text\n        className={classes.TextLargeBold}\n        id=\"scLabel-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        File view\n      </Text>\n      <Text\n        className={classes.TextMediumSubtle}\n        id=\"scCaption-vert\"\n        style={{\n          display: 'block',\n        }}\n      >\n        Change the way the file is viewed\n      </Text>\n    </div>\n    <SegmentedControl\n      aria-labelledby=\"scLabel-vert\"\n      aria-describedby=\"scCaption-vert\"\n    >\n      <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n      <SegmentedControl.Button>Raw</SegmentedControl.Button>\n      <SegmentedControl.Button>Blame</SegmentedControl.Button>\n    </SegmentedControl>\n  </div>\n)"
+        },
+        {
+          "id": "components-segmentedcontrol-features--variant-subtle",
+          "code": "() => (\n  <SegmentedControl aria-label=\"View\" variant=\"subtle\">\n    <SegmentedControl.Button defaultSelected count={5}>\n      All\n    </SegmentedControl.Button>\n    <SegmentedControl.Divider />\n    <SegmentedControl.Button count={3}>Active</SegmentedControl.Button>\n    <SegmentedControl.Button count={10}>\n      Review requests\n    </SegmentedControl.Button>\n    <SegmentedControl.Divider />\n    <SegmentedControl.Button count={2}>Done</SegmentedControl.Button>\n  </SegmentedControl>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -6253,9 +6261,9 @@
         },
         {
           "name": "variant",
-          "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }",
+          "type": "| 'default' | 'subtle' | { narrow?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' regular?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' wide?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' }",
           "defaultValue": "'default'",
-          "description": "Configure alternative ways to render the control when it gets rendered in tight spaces"
+          "description": "Configure the control's visual treatment or responsive behavior in tight spaces."
         },
         {
           "name": "size",
@@ -6361,6 +6369,53 @@
               "defaultValue": ""
             }
           ]
+        },
+        {
+          "name": "SegmentedControl.Divider",
+          "props": [
+            {
+              "name": "className",
+              "type": "string",
+              "required": false
+            },
+            {
+              "name": "style",
+              "type": "React.CSSProperties",
+              "required": false
+            }
+          ]
+        },
+        {
+          "name": "SegmentedControl.Action",
+          "props": [
+            {
+              "name": "label",
+              "type": "string",
+              "required": true,
+              "description": "Accessible label for the action icon button."
+            },
+            {
+              "name": "icon",
+              "type": "Component",
+              "required": true,
+              "description": "The icon rendered by the action button."
+            },
+            {
+              "name": "onClick",
+              "type": "() => void",
+              "description": "The handler that gets called when the action button is clicked."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "description": "Whether the action is disabled."
+            },
+            {
+              "name": "loading",
+              "type": "boolean",
+              "description": "Whether the action is in a loading state."
+            }
+          ]
         }
       ]
     },

package/package.json

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

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

@@ -1,2 +0,0 @@
-.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

@@ -1 +0,0 @@
-{"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"]}