@primer/react 38.3.0 → 38.4.0-rc.aa568eba1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @primer/react
 
+## 38.4.0
+
+### Minor Changes
+
+- [#7047](https://github.com/primer/react/pull/7047) [`c07dd71`](https://github.com/primer/react/commit/c07dd71e990323a1c73ec99c44752df43d153090) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tooltip by default behavior.
+  - Ensure that when `disabled` is applied, the tooltip is still triggered.
+
 ## 38.3.0
 
 ### Minor Changes

package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}
+{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAO9B,CAAA"}

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -4,7 +4,6 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_action_list_item_as_button: false,
   primer_react_breadcrumbs_overflow_menu: false,
   primer_react_overlay_overflow: false,
-  primer_react_segmented_control_tooltip: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
   primer_react_select_panel_remove_active_descendant: false

package/dist/SegmentedControl/{SegmentedControl-5cfe12ab.css → SegmentedControl-6389d0da.css}

@@ -1,2 +1,2 @@
-.prc-SegmentedControl-SegmentedControl-e7570{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));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}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-e7570[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}.prc-SegmentedControl-SegmentedControl-e7570:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-QSnSd{display:none}.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-7Aq6h{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-7Aq6h:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):after{background-color:var(--borderColor-default,var(--color-border-default));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-7Aq6h:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-7Aq6h:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:focus-within:has(:focus-visible){background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:first-child{margin-left:-1px}.prc-SegmentedControl-Item-7Aq6h:last-child{margin-right:-1px}.prc-SegmentedControl-Item-7Aq6h .prc-SegmentedControl-Counter--H-pM{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-ojWXD{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);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-ojWXD svg{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-ojWXD:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:focus-visible:not(:last-child):after{width:0}@media (pointer:coarse){.prc-SegmentedControl-Button-ojWXD:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-O80Eh{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-gnQ4n{align-items:center;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))}.prc-SegmentedControl-Button-ojWXD[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-ojWXD[aria-current=true] .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):hover .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):active .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.prc-SegmentedControl-Text-c5gSh: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-dAHA8{margin-right:var(--base-size-4,.25rem)}
-/*# sourceMappingURL=SegmentedControl-5cfe12ab.css.map */
+.prc-SegmentedControl-SegmentedControl-e7570{--segmented-control-icon-width:32px;background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));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}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-e7570[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-e7570[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-e7570[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-c5gSh{display:none}}.prc-SegmentedControl-SegmentedControl-e7570:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-QSnSd{display:none}.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-QSnSd[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-7Aq6h{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-7Aq6h:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):after{background-color:var(--borderColor-default,var(--color-border-default));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-7Aq6h:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-7Aq6h:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:focus-within:has(:focus-visible){background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:first-child{margin-left:-1px}.prc-SegmentedControl-Item-7Aq6h:last-child{margin-right:-1px}.prc-SegmentedControl-Item-7Aq6h .prc-SegmentedControl-Counter--H-pM{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-ojWXD{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);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-ojWXD svg{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-ojWXD:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-ojWXD[aria-disabled=true]:not([aria-current=true]){background-color:transparent;color:var(--fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}.prc-SegmentedControl-Button-ojWXD[aria-disabled=true]:not([aria-current=true]) svg{fill:var(--fgColor-disabled,var(--color-primer-fg-disabled));color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}@media (pointer:coarse){.prc-SegmentedControl-Button-ojWXD:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-O80Eh{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-gnQ4n{align-items:center;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))}.prc-SegmentedControl-Button-ojWXD[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-ojWXD[aria-current=true] .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.prc-SegmentedControl-Text-c5gSh: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-dAHA8{margin-right:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=SegmentedControl-6389d0da.css.map */

package/dist/SegmentedControl/SegmentedControl-6389d0da.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAmEF,CApDE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,gFAGE,4BAA6B,CAD7B,6DAA8B,CAD9B,kBAQF,CAJE,oFACE,4DAA6B,CAC7B,6DACF,CAGF,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,2HACE,qFACF,CAEA,4HACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-6389d0da.css","sourcesContent":[".SegmentedControl {\n  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  --segmented-control-icon-width: 32px;\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\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    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:focus-within:has(:focus-visible) {\n    background-color: transparent;\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  --segmented-control-outer-radius: var(--borderRadius-medium);\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-current='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\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-current='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    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.Button:not([aria-current='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.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA0LD,eAAO,MAAM,gBAAgB;;;;CAI3B,CAAA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAsMD,eAAO,MAAM,gBAAgB;;;;CAI3B,CAAA"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -178,12 +178,18 @@ const Root = t0 => {
         }
         const sharedChildProps = {
           onClick: onChange ? event_0 => {
-            onChange(index_0);
-            isUncontrolled && setSelectedIndexInternalState(index_0);
-            child_2.props.onClick && child_2.props.onClick(event_0);
+            const isDisabled = child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true;
+            if (!isDisabled) {
+              onChange(index_0);
+              isUncontrolled && setSelectedIndexInternalState(index_0);
+              child_2.props.onClick && child_2.props.onClick(event_0);
+            }
           } : event_1 => {
-            child_2.props.onClick && child_2.props.onClick(event_1);
-            isUncontrolled && setSelectedIndexInternalState(index_0);
+            const isDisabled_0 = child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true;
+            if (!isDisabled_0) {
+              child_2.props.onClick && child_2.props.onClick(event_1);
+              isUncontrolled && setSelectedIndexInternalState(index_0);
+            }
           },
           selected: index_0 === selectedIndex,
           style: {

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

@@ -1,4 +1,4 @@
-import './SegmentedControl-5cfe12ab.css';
+import './SegmentedControl-6389d0da.css';
 
 var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-e7570","Text":"prc-SegmentedControl-Text-c5gSh","DropdownContainer":"prc-SegmentedControl-DropdownContainer-QSnSd","Item":"prc-SegmentedControl-Item-7Aq6h","Counter":"prc-SegmentedControl-Counter--H-pM","Button":"prc-SegmentedControl-Button-ojWXD","IconButton":"prc-SegmentedControl-IconButton-O80Eh","Content":"prc-SegmentedControl-Content-gnQ4n","LeadingIcon":"prc-SegmentedControl-LeadingIcon-dAHA8"};
 

package/dist/SegmentedControl/SegmentedControlButton.d.ts

@@ -13,6 +13,8 @@ export type SegmentedControlButtonProps = {
     leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
     /** @deprecated Use `leadingVisual` instead. The leading icon comes before item label */
     leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement<any>;
+    /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */
+    disabled?: boolean;
     /** Optional counter to display on the right side of the button */
     count?: number | string;
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;

package/dist/SegmentedControl/SegmentedControlButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,2BAA2B,GAAG;IACxC,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAA;IAChB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sKAAsK;IACtK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IAEjD,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACrG,wFAAwF;IAExF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACnG,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,QAAA,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CAiClG,CAAA;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,2BAA2B,GAAG;IACxC,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAA;IAChB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sKAAsK;IACtK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IAEjD,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACrG,wFAAwF;IAExF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IACnG,gHAAgH;IAChH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,QAAA,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CAyClG,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/SegmentedControl/SegmentedControlButton.js

@@ -7,13 +7,14 @@ import CounterLabel from '../CounterLabel/CounterLabel.js';
 
 const SegmentedControlButton = t0 => {
   var _leadingVisual;
-  const $ = c(31);
+  const $ = c(36);
   let children;
   let className;
   let count;
+  let disabled;
   let leadingIcon;
   let leadingVisual;
-  let rest;
+  let props;
   let selected;
   if ($[0] !== t0) {
     const {
@@ -22,145 +23,166 @@ const SegmentedControlButton = t0 => {
       leadingIcon: t3,
       selected: t4,
       className: t5,
+      disabled: t6,
       defaultSelected: _defaultSelected,
-      count: t6,
-      ...t7
+      count: t7,
+      ...t8
     } = t0;
     children = t1;
     leadingVisual = t2;
     leadingIcon = t3;
     selected = t4;
     className = t5;
-    count = t6;
-    rest = t7;
+    disabled = t6;
+    count = t7;
+    props = t8;
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = count;
-    $[4] = leadingIcon;
-    $[5] = leadingVisual;
-    $[6] = rest;
-    $[7] = selected;
+    $[4] = disabled;
+    $[5] = leadingIcon;
+    $[6] = leadingVisual;
+    $[7] = props;
+    $[8] = selected;
   } else {
     children = $[1];
     className = $[2];
     count = $[3];
-    leadingIcon = $[4];
-    leadingVisual = $[5];
-    rest = $[6];
-    selected = $[7];
+    disabled = $[4];
+    leadingIcon = $[5];
+    leadingVisual = $[6];
+    props = $[7];
+    selected = $[8];
+  }
+  let ariaDisabled;
+  let rest;
+  if ($[9] !== props) {
+    ({
+      "aria-disabled": ariaDisabled,
+      ...rest
+    } = props);
+    $[9] = props;
+    $[10] = ariaDisabled;
+    $[11] = rest;
+  } else {
+    ariaDisabled = $[10];
+    rest = $[11];
   }
   const LeadingVisual = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : leadingIcon;
   let t1;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = clsx(classes.Item);
-    $[8] = t1;
+    $[12] = t1;
   } else {
-    t1 = $[8];
+    t1 = $[12];
   }
   const t2 = selected ? "" : undefined;
-  let t3;
-  if ($[9] !== className) {
-    t3 = clsx(classes.Button, className);
-    $[9] = className;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
+  const t3 = disabled || ariaDisabled || undefined;
   let t4;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = clsx(classes.Content, "segmentedControl-content");
-    $[11] = t4;
+  if ($[13] !== className) {
+    t4 = clsx(classes.Button, className);
+    $[13] = className;
+    $[14] = t4;
   } else {
-    t4 = $[11];
+    t4 = $[14];
   }
   let t5;
-  if ($[12] !== LeadingVisual) {
-    t5 = LeadingVisual && /*#__PURE__*/jsx("div", {
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = clsx(classes.Content, "segmentedControl-content");
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== LeadingVisual) {
+    t6 = LeadingVisual && /*#__PURE__*/jsx("div", {
       className: classes.LeadingIcon,
       children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsx(LeadingVisual, {})
     });
-    $[12] = LeadingVisual;
-    $[13] = t5;
+    $[16] = LeadingVisual;
+    $[17] = t6;
   } else {
-    t5 = $[13];
+    t6 = $[17];
   }
-  let t6;
-  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = clsx(classes.Text, "segmentedControl-text");
-    $[14] = t6;
+  let t7;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = clsx(classes.Text, "segmentedControl-text");
+    $[18] = t7;
   } else {
-    t6 = $[14];
+    t7 = $[18];
   }
-  let t7;
-  if ($[15] !== children) {
-    t7 = /*#__PURE__*/jsx("div", {
-      className: t6,
+  let t8;
+  if ($[19] !== children) {
+    t8 = /*#__PURE__*/jsx("div", {
+      className: t7,
       "data-text": children,
       children: children
     });
-    $[15] = children;
-    $[16] = t7;
+    $[19] = children;
+    $[20] = t8;
   } else {
-    t7 = $[16];
+    t8 = $[20];
   }
-  let t8;
-  if ($[17] !== count) {
-    t8 = count !== undefined && /*#__PURE__*/jsx("span", {
+  let t9;
+  if ($[21] !== count) {
+    t9 = count !== undefined && /*#__PURE__*/jsx("span", {
       className: classes.Counter,
       children: /*#__PURE__*/jsx(CounterLabel, {
         children: count
       })
     });
-    $[17] = count;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
-  let t9;
-  if ($[19] !== t5 || $[20] !== t7 || $[21] !== t8) {
-    t9 = /*#__PURE__*/jsxs("span", {
-      className: t4,
-      children: [t5, t7, t8]
-    });
-    $[19] = t5;
-    $[20] = t7;
-    $[21] = t8;
+    $[21] = count;
     $[22] = t9;
   } else {
     t9 = $[22];
   }
   let t10;
-  if ($[23] !== rest || $[24] !== selected || $[25] !== t3 || $[26] !== t9) {
-    t10 = /*#__PURE__*/jsx("button", {
+  if ($[23] !== t6 || $[24] !== t8 || $[25] !== t9) {
+    t10 = /*#__PURE__*/jsxs("span", {
+      className: t5,
+      children: [t6, t8, t9]
+    });
+    $[23] = t6;
+    $[24] = t8;
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== rest || $[28] !== selected || $[29] !== t10 || $[30] !== t3 || $[31] !== t4) {
+    t11 = /*#__PURE__*/jsx("button", {
       "aria-current": selected,
-      className: t3,
+      "aria-disabled": t3,
+      className: t4,
       type: "button",
       ...rest,
-      children: t9
+      children: t10
     });
-    $[23] = rest;
-    $[24] = selected;
-    $[25] = t3;
-    $[26] = t9;
-    $[27] = t10;
+    $[27] = rest;
+    $[28] = selected;
+    $[29] = t10;
+    $[30] = t3;
+    $[31] = t4;
+    $[32] = t11;
   } else {
-    t10 = $[27];
+    t11 = $[32];
   }
-  let t11;
-  if ($[28] !== t10 || $[29] !== t2) {
-    t11 = /*#__PURE__*/jsx("li", {
+  let t12;
+  if ($[33] !== t11 || $[34] !== t2) {
+    t12 = /*#__PURE__*/jsx("li", {
       className: t1,
       "data-selected": t2,
-      children: t10
+      children: t11
     });
-    $[28] = t10;
-    $[29] = t2;
-    $[30] = t11;
+    $[33] = t11;
+    $[34] = t2;
+    $[35] = t12;
   } else {
-    t11 = $[30];
+    t12 = $[35];
   }
-  return t11;
+  return t12;
 };
 SegmentedControlButton.__SLOT__ = Symbol('SegmentedControl.Button');
 

package/dist/SegmentedControl/SegmentedControlIconButton.d.ts

@@ -15,6 +15,8 @@ export type SegmentedControlIconButtonProps = {
     description?: string;
     /** The direction for the tooltip.*/
     tooltipDirection?: TooltipDirection;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;
 export declare const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
 export default SegmentedControlIconButton;

package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIconButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAGrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAE1D,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC3F,8JAA8J;IAC9J,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kKAAkK;IAClK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiDjH,CAAA;AAID,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"SegmentedControlIconButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAE1D,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAC3F,8JAA8J;IAC9J,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kKAAkK;IAClK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiCjH,CAAA;AAID,eAAe,0BAA0B,CAAA"}

package/dist/SegmentedControl/SegmentedControlIconButton.js

@@ -3,16 +3,16 @@ import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
-import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import { Tooltip } from '../TooltipV2/Tooltip.js';
 
 const SegmentedControlIconButton = t0 => {
-  const $ = c(47);
+  const $ = c(35);
   let Icon;
   let ariaLabel;
   let className;
   let description;
-  let rest;
+  let disabled;
+  let props;
   let selected;
   let tooltipDirection;
   if ($[0] !== t0) {
@@ -23,198 +23,139 @@ const SegmentedControlIconButton = t0 => {
       className,
       description,
       tooltipDirection,
-      ...rest
+      disabled,
+      ...props
     } = t0);
     $[0] = t0;
     $[1] = Icon;
     $[2] = ariaLabel;
     $[3] = className;
     $[4] = description;
-    $[5] = rest;
-    $[6] = selected;
-    $[7] = tooltipDirection;
+    $[5] = disabled;
+    $[6] = props;
+    $[7] = selected;
+    $[8] = tooltipDirection;
   } else {
     Icon = $[1];
     ariaLabel = $[2];
     className = $[3];
     description = $[4];
-    rest = $[5];
-    selected = $[6];
-    tooltipDirection = $[7];
+    disabled = $[5];
+    props = $[6];
+    selected = $[7];
+    tooltipDirection = $[8];
+  }
+  let ariaDisabled;
+  let rest;
+  if ($[9] !== props) {
+    ({
+      "aria-disabled": ariaDisabled,
+      ...rest
+    } = props);
+    $[9] = props;
+    $[10] = ariaDisabled;
+    $[11] = rest;
+  } else {
+    ariaDisabled = $[10];
+    rest = $[11];
+  }
+  let t1;
+  if ($[12] !== className) {
+    t1 = clsx(classes.Item, className);
+    $[12] = className;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  const t2 = selected || undefined;
+  const t3 = description ? undefined : "label";
+  const t4 = description ? description : ariaLabel;
+  const t5 = description ? ariaLabel : undefined;
+  const t6 = disabled || ariaDisabled || undefined;
+  let t7;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = clsx(classes.Button, classes.IconButton);
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = clsx(classes.Content, "segmentedControl-content");
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== Icon) {
+    t9 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
+    $[16] = Icon;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== t9) {
+    t10 = /*#__PURE__*/jsx("span", {
+      className: t8,
+      children: t9
+    });
+    $[18] = t9;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  let t11;
+  if ($[20] !== rest || $[21] !== selected || $[22] !== t10 || $[23] !== t5 || $[24] !== t6) {
+    t11 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      "aria-current": selected,
+      "aria-label": t5,
+      "aria-disabled": t6,
+      className: t7,
+      ...rest,
+      children: t10
+    });
+    $[20] = rest;
+    $[21] = selected;
+    $[22] = t10;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== t11 || $[27] !== t3 || $[28] !== t4 || $[29] !== tooltipDirection) {
+    t12 = /*#__PURE__*/jsx(Tooltip, {
+      type: t3,
+      text: t4,
+      direction: tooltipDirection,
+      children: t11
+    });
+    $[26] = t11;
+    $[27] = t3;
+    $[28] = t4;
+    $[29] = tooltipDirection;
+    $[30] = t12;
+  } else {
+    t12 = $[30];
   }
-  const tooltipFlagEnabled = useFeatureFlag("primer_react_segmented_control_tooltip");
-  if (tooltipFlagEnabled) {
-    let t1;
-    if ($[8] !== className) {
-      t1 = clsx(classes.Item, className);
-      $[8] = className;
-      $[9] = t1;
-    } else {
-      t1 = $[9];
-    }
-    const t2 = selected || undefined;
-    const t3 = description ? undefined : "label";
-    const t4 = description ? description : ariaLabel;
-    const t5 = description ? ariaLabel : undefined;
-    let t6;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = clsx(classes.Button, classes.IconButton);
-      $[10] = t6;
-    } else {
-      t6 = $[10];
-    }
-    let t7;
-    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-      t7 = clsx(classes.Content, "segmentedControl-content");
-      $[11] = t7;
-    } else {
-      t7 = $[11];
-    }
-    let t8;
-    if ($[12] !== Icon) {
-      t8 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
-      $[12] = Icon;
-      $[13] = t8;
-    } else {
-      t8 = $[13];
-    }
-    let t9;
-    if ($[14] !== t8) {
-      t9 = /*#__PURE__*/jsx("span", {
-        className: t7,
-        children: t8
-      });
-      $[14] = t8;
-      $[15] = t9;
-    } else {
-      t9 = $[15];
-    }
-    let t10;
-    if ($[16] !== rest || $[17] !== selected || $[18] !== t5 || $[19] !== t9) {
-      t10 = /*#__PURE__*/jsx("button", {
-        type: "button",
-        "aria-current": selected,
-        "aria-label": t5,
-        className: t6,
-        ...rest,
-        children: t9
-      });
-      $[16] = rest;
-      $[17] = selected;
-      $[18] = t5;
-      $[19] = t9;
-      $[20] = t10;
-    } else {
-      t10 = $[20];
-    }
-    let t11;
-    if ($[21] !== t10 || $[22] !== t3 || $[23] !== t4 || $[24] !== tooltipDirection) {
-      t11 = /*#__PURE__*/jsx(Tooltip, {
-        type: t3,
-        text: t4,
-        direction: tooltipDirection,
-        children: t10
-      });
-      $[21] = t10;
-      $[22] = t3;
-      $[23] = t4;
-      $[24] = tooltipDirection;
-      $[25] = t11;
-    } else {
-      t11 = $[25];
-    }
-    let t12;
-    if ($[26] !== t1 || $[27] !== t11 || $[28] !== t2) {
-      t12 = /*#__PURE__*/jsx("li", {
-        className: t1,
-        "data-selected": t2,
-        children: t11
-      });
-      $[26] = t1;
-      $[27] = t11;
-      $[28] = t2;
-      $[29] = t12;
-    } else {
-      t12 = $[29];
-    }
-    return t12;
+  let t13;
+  if ($[31] !== t1 || $[32] !== t12 || $[33] !== t2) {
+    t13 = /*#__PURE__*/jsx("li", {
+      className: t1,
+      "data-selected": t2,
+      children: t12
+    });
+    $[31] = t1;
+    $[32] = t12;
+    $[33] = t2;
+    $[34] = t13;
   } else {
-    let t1;
-    if ($[30] !== className) {
-      t1 = clsx(classes.Item, className);
-      $[30] = className;
-      $[31] = t1;
-    } else {
-      t1 = $[31];
-    }
-    const t2 = selected || undefined;
-    let t3;
-    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = clsx(classes.Button, classes.IconButton);
-      $[32] = t3;
-    } else {
-      t3 = $[32];
-    }
-    let t4;
-    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = clsx(classes.Content, "segmentedControl-content");
-      $[33] = t4;
-    } else {
-      t4 = $[33];
-    }
-    let t5;
-    if ($[34] !== Icon) {
-      t5 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
-      $[34] = Icon;
-      $[35] = t5;
-    } else {
-      t5 = $[35];
-    }
-    let t6;
-    if ($[36] !== t5) {
-      t6 = /*#__PURE__*/jsx("span", {
-        className: t4,
-        children: t5
-      });
-      $[36] = t5;
-      $[37] = t6;
-    } else {
-      t6 = $[37];
-    }
-    let t7;
-    if ($[38] !== ariaLabel || $[39] !== rest || $[40] !== selected || $[41] !== t6) {
-      t7 = /*#__PURE__*/jsx("button", {
-        type: "button",
-        "aria-label": ariaLabel,
-        "aria-current": selected,
-        className: t3,
-        ...rest,
-        children: t6
-      });
-      $[38] = ariaLabel;
-      $[39] = rest;
-      $[40] = selected;
-      $[41] = t6;
-      $[42] = t7;
-    } else {
-      t7 = $[42];
-    }
-    let t8;
-    if ($[43] !== t1 || $[44] !== t2 || $[45] !== t7) {
-      t8 = /*#__PURE__*/jsx("li", {
-        className: t1,
-        "data-selected": t2,
-        children: t7
-      });
-      $[43] = t1;
-      $[44] = t2;
-      $[45] = t7;
-      $[46] = t8;
-    } else {
-      t8 = $[46];
-    }
-    return t8;
+    t13 = $[34];
   }
+  return t13;
 };
 SegmentedControlIconButton.__SLOT__ = Symbol('SegmentedControl.IconButton');
 

package/package.json

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

package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAwDF,CAzCE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,sGACE,qFACF,CAEA,uGACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-5cfe12ab.css","sourcesContent":[".SegmentedControl {\n  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  --segmented-control-icon-width: 32px;\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\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    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:focus-within:has(:focus-visible) {\n    background-color: transparent;\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  --segmented-control-outer-radius: var(--borderRadius-medium);\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  @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\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-current='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    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.Button:not([aria-current='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"]}