@rdlabo/ionic-theme-ios27 1.0.3 → 1.0.4-beta.pr183.shaedc618dbeda8

package/src/segment/index.ts

@@ -119,6 +119,17 @@ export const registerSegmentEffect = (targetElement: HTMLElement): registeredEff
     animation?.cancel();
     handoff.forEach((effect) => effect.cancel());
     handoff = [];
+    // WebKit can paint the newly unhidden element once at its underlying
+    // top-left position before the replacement WAAPI effect is sampled.
+    // Prime that underlying style so interrupted/reversed selections always
+    // hand off from the first frame instead of briefly flashing at (0, 0).
+    const first = frames[0];
+    if (first) {
+      lens.style.transform = String(first['transform']);
+      lens.style.width = String(first['width']);
+      lens.style.height = String(first['height']);
+      lens.style.backgroundColor = String(first['backgroundColor']);
+    }
     segment.classList.add('ios27-animated');
     lens.hidden = false;
     const running = lens.animate(frames, { duration, easing: 'linear', fill: 'forwards' });

package/src/styles/components/ion-segment.scss

@@ -82,8 +82,12 @@ ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) {
     }
   }
 
-  ion-segment-button:is(.in-toolbar-color, .in-segment-color)::part(indicator-background) {
-    // Ionic sets a direct background for color contexts, bypassing --indicator-color.
+  ion-segment-button.in-segment-color::part(indicator-background) {
+    // Ionic sets a direct background for segment color contexts, bypassing --indicator-color.
+    background: var(--indicator-color);
+  }
+
+  ion-segment-button.in-toolbar-color:not(.in-segment-color)::part(indicator-background) {
     background: var(--indicator-color);
   }
 
@@ -195,3 +199,8 @@ ion-segment-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
 :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
   --indicator-color: var(--ion-background-color, #fff);
 }
+:where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button.in-toolbar-color:not(.in-segment-color)) {
+  // Match Ionic's colored-toolbar contract while preserving its public
+  // toolbar and segment-button customization properties.
+  --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-contrast));
+}

package/src/styles/utils/dark/ion-segment.scss

@@ -35,4 +35,7 @@
   :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button) {
     --indicator-color: color-mix(in srgb, rgb(var(--ion-color-medium-rgb, 152, 154, 162)) 59%, var(--ion-background-color, #000));
   }
+  :where(ion-segment.ios:not(.ios-theme-disabled, .ios26-disabled) ion-segment-button.in-toolbar-color:not(.in-segment-color)) {
+    --indicator-color: var(--ion-toolbar-segment-indicator-color, var(--ion-color-contrast));
+  }
 }