fix: avoid selected item text color lagging behind thumb motion (#37192)

Split the text color of the selected item into a dedicated
`item-selected-text` class that follows the value immediately, instead of
being gated by `thumbShow` like the background. This prevents the text
color from lagging behind the thumb animation when a custom dark
background + light text is used.

ant-design/ant-design#37192

Co-Authored-By: Claude <noreply@anthropic.com>

Author: lh01217311

assets/index.less

@@ -47,6 +47,10 @@
       color: @text-color;
     }
 
+    &-selected-text {
+      color: @text-color;
+    }
+
     &:hover,
     &:focus {
       color: @text-color;

src/index.tsx

@@ -288,6 +288,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
             {
               [`${prefixCls}-item-selected`]:
                 optionValue === rawValue && !thumbShow,
+              [`${prefixCls}-item-selected-text`]: optionValue === rawValue,
               [`${prefixCls}-item-focused`]:
                 isFocused && isKeyboard && optionValue === rawValue,
             },

tests/__snapshots__/index.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`rc-segmented render label with ReactNode 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -91,7 +91,7 @@ exports[`rc-segmented render segmented ok 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -154,7 +154,7 @@ exports[`rc-segmented render segmented with CSSMotion basic 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -217,7 +217,7 @@ exports[`rc-segmented render segmented with options 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -279,7 +279,7 @@ exports[`rc-segmented render segmented with options null/undefined 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text rc-segmented-item-disabled"
     >
       <input
         checked=""
@@ -337,7 +337,7 @@ exports[`rc-segmented render segmented with options: 1 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -432,7 +432,7 @@ exports[`rc-segmented render segmented with options: 2 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -495,7 +495,7 @@ exports[`rc-segmented render segmented with options: disabled 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -559,7 +559,7 @@ exports[`rc-segmented render segmented with title 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -654,7 +654,7 @@ exports[`rc-segmented render segmented: disabled 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-disabled"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text rc-segmented-item-disabled"
     >
       <input
         checked=""
@@ -720,7 +720,7 @@ exports[`rc-segmented should render vertical segmented 1`] = `
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""
@@ -783,7 +783,7 @@ exports[`rc-segmented should render vertical segmented and handle thumb animatio
     class="rc-segmented-group"
   >
     <label
-      class="rc-segmented-item rc-segmented-item-selected"
+      class="rc-segmented-item rc-segmented-item-selected rc-segmented-item-selected-text"
     >
       <input
         checked=""

tests/index.test.tsx

@@ -323,10 +323,19 @@ describe('rc-segmented', () => {
       );
       expect(handleValueChange).toBeCalledWith('Web3');
       expectMatchChecked(container, [false, false, true]);
+      expect(container.querySelectorAll('.rc-segmented-item')[2]).toHaveClass(
+        'rc-segmented-item-selected-text',
+      );
 
       expect(container.querySelectorAll('.rc-segmented-thumb')[0]).toHaveClass(
         'rc-segmented-thumb-motion',
       );
+      expect(
+        container.querySelectorAll('.rc-segmented-item')[2],
+      ).not.toHaveClass('rc-segmented-item-selected');
+      expect(container.querySelectorAll('.rc-segmented-item')[2]).toHaveClass(
+        'rc-segmented-item-selected-text',
+      );
 
       // thumb appeared at `iOS`
       exceptThumbHaveStyle(container, {