fix(segment): add activated class directly to segment button (#20400)

this gets around a bug with Safari where the ::slotted css selector was not working properly

core/src/components/segment-button/segment-button.ios.scss

@@ -140,6 +140,10 @@
 // Segment: States
 // --------------------------------------------------
 
+:host(.segment-button-activated) {
+  --indicator-transform: scale(0.95);
+}
+
 :host(.ion-focused) .button-native {
   opacity: $segment-button-ios-opacity-focused;
 }

core/src/components/segment-button/segment-button.tsx

@@ -23,9 +23,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   @Element() el!: HTMLElement;
 
-  /**
-   * If `true`, the segment button is selected.
-   */
   @State() checked = false;
 
   /**

core/src/components/segment/segment.ios.scss

@@ -23,14 +23,6 @@
 }
 
 
-// Segment: Activated
-// --------------------------------------------------
-
-:host(.segment-activated) ::slotted(ion-segment-button) {
-  --indicator-transform: scale(0.95);
-}
-
-
 // Segment: Default Toolbar
 // --------------------------------------------------
 

core/src/components/segment/segment.tsx

@@ -123,7 +123,7 @@ export class Segment implements ComponentInterface {
   }
 
   onEnd(detail: GestureDetail) {
-    this.activated = false;
+    this.setActivated(false);
 
     const checkedValidButton = this.setNextIndex(detail, true);
 
@@ -157,6 +157,23 @@ export class Segment implements ComponentInterface {
     ripple.addRipple(x, y).then(remove => remove());
   }
 
+  /*
+   * Activate both the segment and the buttons
+   * due to a bug with ::slotted in Safari
+   */
+  private setActivated(activated: boolean) {
+    const buttons = this.getButtons();
+
+    buttons.forEach(button => {
+      if (activated) {
+        button.classList.add('segment-button-activated');
+      } else {
+        button.classList.remove('segment-button-activated');
+      }
+    });
+    this.activated = activated;
+  }
+
   private activate(detail: GestureDetail) {
     const clicked = detail.event.target as HTMLIonSegmentButtonElement;
     const buttons = this.getButtons();
@@ -176,7 +193,7 @@ export class Segment implements ComponentInterface {
     // If the gesture began on the clicked button with the indicator
     // then we should activate the indicator
     if (this.value === clicked.value) {
-      this.activated = true;
+      this.setActivated(true);
     }
   }