fix(segment): remove duplicate ripple effect on pointerup (#27448)

Issue number: resolves #27338

---------

## What is the current behavior?
Segment button on `md` mode shows two ripple effects: once on
pointerdown and again on pointerup

## What is the new behavior?
Segment button on `md` mode only shows a ripple effect on pointerdown

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>

core/src/components/segment/segment.tsx

@@ -1,11 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
 
-import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, StyleEventDetail } from '../../interface';
 import type { Gesture, GestureDetail } from '../../utils/gesture';
-import { pointerCoord } from '../../utils/helpers';
 import { isRTL } from '../../utils/rtl';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -194,14 +192,10 @@ export class Segment implements ComponentInterface {
   onEnd(detail: GestureDetail) {
     this.setActivated(false);
 
-    const checkedValidButton = this.setNextIndex(detail, true);
+    this.setNextIndex(detail, true);
 
     detail.event.stopImmediatePropagation();
 
-    if (checkedValidButton) {
-      this.addRipple(detail);
-    }
-
     const value = this.value;
     if (value !== undefined) {
       if (this.valueBeforeGesture !== value) {
@@ -230,32 +224,6 @@ export class Segment implements ComponentInterface {
     return this.getButtons().find((button) => button.value === this.value);
   }
 
-  /**
-   * The gesture blocks the segment button ripple. This
-   * function adds the ripple based on the checked segment
-   * and where the cursor ended.
-   */
-  private addRipple(detail: GestureDetail) {
-    const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
-    if (!useRippleEffect) {
-      return;
-    }
-
-    const buttons = this.getButtons();
-    const checked = buttons.find((button) => button.value === this.value)!;
-
-    const root = checked.shadowRoot || checked;
-    const ripple = root.querySelector('ion-ripple-effect');
-
-    if (!ripple) {
-      return;
-    }
-
-    const { x, y } = pointerCoord(detail.event);
-
-    ripple.addRipple(x, y).then((remove) => remove());
-  }
-
   /*
    * Activate both the segment and the buttons
    * due to a bug with ::slotted in Safari