@momo-kits/native-kits 0.167.1-duo.8 → 0.167.1-duo.9-debug

package/ios/Popup/PopupPromotion.swift

@@ -2,13 +2,13 @@ import SwiftUI
 import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
-    @Environment(\.appTheme) private var theme
     @Environment(\.screenLayout) private var layout
 
     var imageUrl: String
     var onIconClose: (() -> Void)?
     var onAction: (() -> Void)?
 
+    @State private var imageFailed = false
 
     public init(
         imageUrl: String,
@@ -21,66 +21,38 @@ public struct PopupPromotion: View {
     }
 
     private static let aspectRatio: CGFloat = 0.72
-    // close button row under the image: stack spacing + padded 40pt button
-    private static let closeRowHeight: CGFloat = 8 + 40 + Spacing.S * 2
+    private static let closeTapSize: CGFloat = 40
+    // close button row under the image: top padding + 40pt tap target
+    private static let closeRowHeight: CGFloat = Spacing.S + closeTapSize
 
     // fit the portrait image by height when iPhone Duo leaves too little room
     private var imageWidth: CGFloat {
-        let width = min(layout.width - Spacing.XL * 2, layout.popupMaxWidth)
+        let width = min(layout.width - Spacing.M * 2, layout.popupMaxWidth)
         guard let maxHeight = layout.popupMaxHeight else { return width }
         return min(width, (maxHeight - Self.closeRowHeight) * Self.aspectRatio)
     }
 
     public var body: some View {
-        VStack(spacing: 8) {
-            if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: imageWidth)
-            }
-            else {
-                WebImage(url: URL(string: imageUrl))
-                    .resizable()
-                    .placeholder {
-                        Color.gray
-                            .aspectRatio(Self.aspectRatio, contentMode: .fit)
-                            .frame(maxWidth: imageWidth)
-                            .clipped()
-                    }
-                    .aspectRatio(Self.aspectRatio, contentMode: .fit)
-                    .frame(maxWidth: imageWidth, alignment: .center)
-                    .clipped()
-                    .onTapGesture {
-                        onAction?()
-                    }
-            }
-            buildCloseIcon()
-                .accessibility(identifier: "ic_popup_close")
-        }
-        .accessibilityElement(children: .ignore)
-        .accessibility(identifier: "popup_promotion")
-    }
+        VStack(spacing: 0) {
+            // stretched like Compose's ContentScale.FillBounds; an empty url shows the error state, as in Compose
+            WebImage(url: URL(string: imageUrl))
+                .onSuccess { _, _, _ in imageFailed = false }
+                .onFailure { _ in imageFailed = true }
+                .resizable()
+                .placeholder { PopupImagePlaceholder(failed: imageFailed || URL(string: imageUrl) == nil) }
+                .aspectRatio(Self.aspectRatio, contentMode: .fit)
+                .frame(maxWidth: imageWidth)
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    onAction?()
+                }
 
-    @ViewBuilder
-    private func buildCloseIcon() -> some View {
-        HStack(alignment: .center, spacing: 0) {
-            SwiftUI.Button(action: {
+            PopupCloseButton(tapSize: Self.closeTapSize) {
                 onIconClose?()
-            }) {
-                ZStack {
-                    Circle()
-                        .strokeBorder(theme.colors.background.surface, lineWidth: 2)
-                        .background(Circle().fill(theme.colors.text.default))
-                        .frame(width: 22, height: 22)
-
-                    Icon(source: "navigation_close", size: 16, color: theme.colors.background.surface)
-                }
-                .frame(width: 40, height: 40)
-                .padding(8)
-                .zIndex(1)
             }
+            .padding(.top, Spacing.S)
         }
+        .accessibilityElement(children: .contain)
+        .accessibilityIdentifier("popup_promotion")
     }
-
 }
-
-
-

package/ios/PopupView/FullscreenPopup.swift

@@ -51,12 +51,9 @@ public struct FullscreenPopup<Item: Equatable, PopupContent: View>: ViewModifier
     @State private var opacity = 0.0
 
     // MARK: - Autohide
-    /// Class reference for capturing a weak reference later in dispatch work holder.
-    private var isPresentedRef: ClassReference<Binding<Bool>>?
-    private var itemRef: ClassReference<Binding<Item?>>?
-
-    /// holder for autohiding dispatch work (to be able to cancel it when needed)
-    private var dispatchWorkHolder = DispatchWorkHolder()
+    /// holder for autohiding dispatch work (to be able to cancel it when needed);
+    /// state so it outlives re-renders, which would otherwise orphan the pending work
+    @State private var dispatchWorkHolder = DispatchWorkHolder()
 
     // MARK: - Internal
     /// Set dismiss souce to pass to dismiss callback
@@ -85,9 +82,6 @@ public struct FullscreenPopup<Item: Equatable, PopupContent: View>: ViewModifier
         self.backgroundColor = backgroundColor
         self.dismissCallback = dismissCallback
         self.view = view
-
-        self.isPresentedRef = ClassReference(self.$isPresented)
-        self.itemRef = ClassReference(self.$item)
     }
 
     init(item: Binding<Item?>,
@@ -113,9 +107,6 @@ public struct FullscreenPopup<Item: Equatable, PopupContent: View>: ViewModifier
         self.backgroundColor = backgroundColor
         self.dismissCallback = dismissCallback
         self.view = view
-
-        self.isPresentedRef = ClassReference(self.$isPresented)
-        self.itemRef = ClassReference(self.$item)
     }
 
     public func body(content: Content) -> some View {
@@ -214,7 +205,8 @@ public struct FullscreenPopup<Item: Equatable, PopupContent: View>: ViewModifier
     }
 
     func onAnimationCompleted() -> () {
-        if shouldShowContent { // return if this was called on showing animation, only proceed if called on hiding
+        // only proceed on hiding, once: both the offset animation and the fallback timer land here
+        if shouldShowContent || !showContent {
             return
         }
         showContent = false // unload popup body after hiding animation is done
@@ -229,12 +221,14 @@ public struct FullscreenPopup<Item: Equatable, PopupContent: View>: ViewModifier
         if let autohideIn = autohideIn {
             dispatchWorkHolder.work?.cancel()
 
-            // Weak reference to avoid the work item capturing the struct,
-            // which would create a retain cycle with the work holder itself.
-            dispatchWorkHolder.work = DispatchWorkItem(block: { [weak isPresentedRef, weak itemRef] in
-                isPresentedRef?.value.wrappedValue = false
-                itemRef?.value.wrappedValue = nil
-                dismissSource = .autohide
+            // bindings only: capturing the struct would retain the work holder in a cycle
+            let isPresented = $isPresented
+            let item = $item
+            let dismissSource = $dismissSource
+            dispatchWorkHolder.work = DispatchWorkItem(block: {
+                dismissSource.wrappedValue = .autohide
+                isPresented.wrappedValue = false
+                item.wrappedValue = nil
             })
             if sheetPresented, let work = dispatchWorkHolder.work {
                 DispatchQueue.main.asyncAfter(deadline: .now() + autohideIn, execute: work)

package/ios/PopupView/PopupView.swift

@@ -239,7 +239,7 @@ public struct Popup<Item: Equatable, PopupContent: View>: ViewModifier {
                 .onAnimationCompleted(for: currentOffset) {
                     animationCompletedCallback()
                 }
-                .animation(animation)
+                .animation(animation, value: currentOffset)
         }
 
         #if !os(tvOS)

package/ios/PopupView/Utils++.swift

@@ -5,14 +5,6 @@ final class DispatchWorkHolder {
     var work: DispatchWorkItem?
 }
 
-final class ClassReference<T> {
-    var value: T
-
-    init(_ value: T) {
-        self.value = value
-    }
-}
-
 public extension View {
     
     @ViewBuilder

package/ios/ProgressInfo/ProgressInfo.swift

@@ -112,7 +112,9 @@ private struct ProgressInfoHorizontal: View {
 
     var body: some View {
         HStack(alignment: .top, spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+            // Keyed by position: `ProgressInfoItem.id` is a fresh UUID per init, so it churns
+            // identity whenever the caller rebuilds `steps`.
+            ForEach(Array(steps.enumerated()), id: \.offset) { index, item in
                 let isFirst = index == 0
                 let isLast = index == steps.count - 1
 
@@ -207,7 +209,7 @@ private struct ProgressInfoVertical: View {
 
     var body: some View {
         VStack(alignment: .leading, spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+            ForEach(Array(steps.enumerated()), id: \.offset) { index, item in
                 let isLast = index == steps.count - 1
 
                 HStack(alignment: .top, spacing: 0) {

package/ios/Radio/Radio.swift

@@ -36,8 +36,9 @@ public struct Radio: View {
     public var body: some View {
         SwiftUI.Button(action: onTap) {
             HStack(spacing: 0) {
+                // strokeBorder keeps the ring inside 20pt, like Compose `border`.
                 RoundedRectangle(cornerRadius: Radius.M)
-                    .stroke(borderColor, lineWidth: borderWidth)
+                    .strokeBorder(borderColor, lineWidth: borderWidth)
                     .frame(width: 20, height: 20)
                     .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
 

package/ios/Rating/Rating.swift

@@ -35,7 +35,7 @@ public struct Rating: View {
 
     public var body: some View {
         HStack(spacing: 2) {
-            ForEach(0..<numOfStars, id: \.self) { index in
+            ForEach(0..<max(numOfStars, 0), id: \.self) { index in
                 star(at: index)
             }
         }
@@ -59,7 +59,14 @@ public struct Rating: View {
         }
     }
 
+    // Kotlin's toInt() maps NaN to 0 and saturates; Swift's Int(_:) traps on both.
+    private var safeRating: Float {
+        guard rating.isFinite else { return 0 }
+        return min(max(rating, -Float(Int32.max)), Float(Int32.max))
+    }
+
     private func starIcon(at index: Int) -> String {
+        let rating = safeRating
         let intRating = Int(rating)
         if index < intRating {
             return "reaction_star_full"
@@ -71,6 +78,7 @@ public struct Rating: View {
     }
 
     private func starColor(at index: Int) -> Color {
+        let rating = safeRating
         let intRating = Int(rating)
         if index < intRating {
             return Colors.yellow03

package/ios/ScrollIndicator/ScrollIndicator.swift

@@ -58,19 +58,20 @@ public struct ScrollViewWithScrollBar<Content: View>: View {
             }
             }
             .onPreferenceChange(ViewOffsetKey.self) { offset in
-            let newPosition =
-                (offset * ((indicatorContainerWidth - indicatorWidth) / (contentSize - scrollViewWidth)))
-                + indicatorWidth / 2
-
-            if !newPosition.isNaN {
-                self.position = CGPoint(x: newPosition, y: INDICATOR_HEIGHT / 2)
-            }
+            // Clamped: content narrower than the viewport, or bounce past either end,
+            // would otherwise push the indicator out of its track (or to inf/NaN).
+            let maxOffset = contentSize - scrollViewWidth
+            let progress = maxOffset > 0 ? min(max(offset / maxOffset, 0), 1) : 0
+            self.position = CGPoint(
+                x: progress * (indicatorContainerWidth - indicatorWidth) + indicatorWidth / 2,
+                y: INDICATOR_HEIGHT / 2
+            )
             }
         }.background(
             GeometryReader { proxy in
-            Color.clear.onAppear {
-                self.scrollViewWidth = proxy.size.width
-            }
+            Color.clear
+                .onAppear { self.scrollViewWidth = proxy.size.width }
+                .onChange(of: proxy.size.width) { self.scrollViewWidth = $0 }
             }
         ).coordinateSpace(name: "scroll")
 

package/ios/Skeleton/Skeleton.swift

@@ -44,8 +44,6 @@ private struct ShimmerLoading: View {
     let durationMillis: Int
     let angleOfAxisY: CGFloat
 
-    @State private var phase: CGFloat = 0
-
     // Matches Compose `SHADOW_BRUSH_PERCENTAGE = 0.6f`.
     private static let shadowBrushPercentage: CGFloat = 0.6
 
@@ -67,33 +65,30 @@ private struct ShimmerLoading: View {
         size.width + widthOfShadowBrush
     }
 
+    // Clock-driven rather than an onAppear animation: gradient points aren't reliably animatable,
+    // and a view first laid out at zero width (or resized later) would never (re)start.
     var body: some View {
-        let startX = phase - widthOfShadowBrush
-        let endX = phase
+        TimelineView(.animation) { timeline in
+            Rectangle().fill(gradient(at: timeline.date))
+        }
+    }
+
+    private func gradient(at date: Date) -> LinearGradient {
+        let duration = Double(max(durationMillis, 1)) / 1000
+        let progress = date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: duration) / duration
+        let endX = CGFloat(progress) * animationTarget
+        let startX = endX - widthOfShadowBrush
 
-        Rectangle()
-            .fill(
-                LinearGradient(
-                    gradient: Gradient(colors: Self.shimmerColors),
-                    startPoint: .init(
-                        x: size.width > 0 ? startX / size.width : 0,
-                        y: 0
-                    ),
-                    endPoint: .init(
-                        x: size.width > 0 ? endX / size.width : 0,
-                        y: size.height > 0 ? angleOfAxisY / size.height : 0
-                    )
-                )
+        return LinearGradient(
+            gradient: Gradient(colors: Self.shimmerColors),
+            startPoint: .init(
+                x: size.width > 0 ? startX / size.width : 0,
+                y: 0
+            ),
+            endPoint: .init(
+                x: size.width > 0 ? endX / size.width : 0,
+                y: size.height > 0 ? angleOfAxisY / size.height : 0
             )
-            .onAppear {
-                guard size.width > 0 else { return }
-                phase = 0
-                withAnimation(
-                    .linear(duration: Double(durationMillis) / 1000.0)
-                        .repeatForever(autoreverses: false)
-                ) {
-                    phase = animationTarget
-                }
-            }
+        )
     }
 }

package/ios/Slider/Slider.swift

@@ -24,12 +24,14 @@ private func getValueForPosition(
     step: CGFloat
 ) -> CGFloat {
     let availableSpace = containerWidth - thumbWidth
-    if availableSpace <= 0 { return minV }
-    let relStepUnit = step / (maxV - minV)
+    if availableSpace <= 0 || maxV <= minV { return minV }
     var relPosition = (positionInView - thumbWidth / 2) / availableSpace
+    // A zero step would make the snap math NaN, which later traps in `Int(_:)`.
+    if step <= 0 { return clampF(minV + relPosition * (maxV - minV), minV, maxV) }
+    let relStepUnit = step / (maxV - minV)
     let relOffset = relPosition.truncatingRemainder(dividingBy: relStepUnit)
     relPosition -= relOffset
-    if relStepUnit != 0, relOffset / relStepUnit >= 0.5 { relPosition += relStepUnit }
+    if relOffset / relStepUnit >= 0.5 { relPosition += relStepUnit }
     let steps = (relPosition / relStepUnit).rounded()
     return clampF(minV + steps * step, minV, maxV)
 }
@@ -49,7 +51,8 @@ private func formatLabel(_ value: CGFloat) -> String {
     if value == value.rounded() {
         return String(Int(value))
     }
-    return String(format: "%.1f", value)
+    // Truncates to one decimal like Compose's `(value * 10).toLong() / 10.0`.
+    return String(Double((value * 10).rounded(.towardZero)) / 10)
 }
 
 // ── Component ─────────────────────────────────────────────────────────────────
@@ -64,8 +67,6 @@ public struct MomoSlider: View {
     private let minV: CGFloat
     private let maxV: CGFloat
     private let step: CGFloat
-    private let initLow: CGFloat
-    private let initHigh: CGFloat
     private let minRange: CGFloat
     private let disableRange: Bool
     private let floatingLabel: Bool
@@ -74,11 +75,10 @@ public struct MomoSlider: View {
     private let onSliderTouchStart: (CGFloat, CGFloat) -> Void
     private let onSliderTouchEnd: (CGFloat, CGFloat) -> Void
 
-    @State private var lowValue: CGFloat = 0
-    @State private var highValue: CGFloat = 0
+    @State private var lowValue: CGFloat
+    @State private var highValue: CGFloat
     @State private var draggingLow: Bool = true
     @State private var isDragging: Bool = false
-    @State private var didInit: Bool = false
 
     public init(
         min: CGFloat,
@@ -105,8 +105,10 @@ public struct MomoSlider: View {
         self.onSliderTouchStart = onSliderTouchStart
         self.onSliderTouchEnd = onSliderTouchEnd
 
-        self.initLow = clampF(low ?? min, min, max)
-        self.initHigh = disableRange ? max : clampF(high ?? max, min, max)
+        let startLow = clampF(low ?? min, min, max)
+        let startHigh = disableRange ? max : clampF(high ?? max, min, max)
+        _lowValue = State(initialValue: startLow)
+        _highValue = State(initialValue: startHigh)
     }
 
     private var thumbColor: Color { disabled ? theme.colors.text.disable : theme.colors.primary }
@@ -165,17 +167,13 @@ public struct MomoSlider: View {
                 }
             }
             .frame(width: trackWidth, height: topPad + THUMB_SIZE, alignment: .topLeading)
+            // Compose's spring(stiffness = 1200) is critically damped.
+            .animation(.interpolatingSpring(stiffness: 1200, damping: 2 * sqrt(1200)), value: lowValue)
+            .animation(.interpolatingSpring(stiffness: 1200, damping: 2 * sqrt(1200)), value: highValue)
             .contentShape(Rectangle())
             .gesture(dragGesture(trackWidth: trackWidth))
         }
         .frame(height: (floatingLabel ? (THUMB_SIZE + LABEL_GAP) : 0) + THUMB_SIZE)
-        .onAppear {
-            if !didInit {
-                lowValue = initLow
-                highValue = initHigh
-                didInit = true
-            }
-        }
     }
 
     private var thumb: some View {

package/ios/Stepper/Stepper.swift

@@ -109,9 +109,10 @@ private struct StepperNumberView: View {
         .font(.system(size: fontScale(12)))
         .ignoreBoldTextSetting()
         .foregroundColor(textColor)
+        // Compose's min width includes the horizontal padding.
+        .padding(.horizontal, Spacing.XS)
         .frame(minWidth: specs.numberMinWidth)
         .frame(height: specs.numberHeight)
-        .padding(.horizontal, Spacing.XS)
         .overlay(
             RoundedRectangle(cornerRadius: Radius.S)
                 .stroke(borderColor, lineWidth: 1)
@@ -217,5 +218,9 @@ public struct MomoStepper: View {
             if clamped != value { value = clamped }
             editingText = String(clamped)
         }
+        // Keeps the editable field in step with values set by the owner of the binding.
+        .onChange(of: value) { newValue in
+            editingText = String(newValue)
+        }
     }
 }

package/ios/Steps/Steps.swift

@@ -162,8 +162,9 @@ private struct StepsHorizontal: View {
 
     var body: some View {
         HStack(alignment: .top, spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
-                column(index: index, item: item)
+            // Keyed by position like Compose: `StepItem.id` is a fresh UUID per instance.
+            ForEach(steps.indices, id: \.self) { index in
+                column(index: index, item: steps[index])
                     .frame(maxWidth: .infinity)
             }
         }
@@ -234,7 +235,7 @@ private struct StepsHorizontal: View {
                         .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topLeft, .bottomLeft]))
                 }
             }
-            .frame(maxWidth: .infinity)
+            .frame(maxWidth: .infinity, alignment: .leading)
 
             if !item.title.isEmpty {
                 MomoText(item.title, typography: titleStyle, color: titleColor)
@@ -316,8 +317,8 @@ private struct StepsVertical: View {
 
     var body: some View {
         VStack(spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
-                row(index: index, item: item)
+            ForEach(steps.indices, id: \.self) { index in
+                row(index: index, item: steps[index])
             }
         }
         .frame(maxWidth: .infinity)
@@ -358,8 +359,9 @@ private struct StepsVertical: View {
                     customIcon: customIcon
                 )
                 if !isLast {
+                    // Compose pads inside the fixed height, so the drawn line is 8pt shorter.
                     lineColor
-                        .frame(width: 2, height: connectorHeight)
+                        .frame(width: 2, height: connectorHeight - Spacing.XS * 2)
                         .padding(.vertical, Spacing.XS)
                 }
             }

package/ios/SuggestAction/SuggestAction.swift

@@ -65,6 +65,11 @@ public struct SuggestAction: View {
 
                     Text(annotatedMessage)
                         .foregroundColor(theme.colors.text.default)
+                        .lineSpacing(
+                            fontScale(TypographyStyle.bodyDefaultRegular.lineHeight)
+                                - fontScale(TypographyStyle.bodyDefaultRegular.fontSize)
+                        )
+                        .ignoreBoldTextSetting()
                         .frame(maxWidth: .infinity, alignment: .leading)
                         .padding(.trailing, Spacing.M)
 

package/ios/Swipeable/SwipeCell.swift

@@ -20,6 +20,7 @@ public struct Swipe<Content: View>: View {
 
     @State private var offsetX: CGFloat = 0
     @State private var dragStartOffsetX: CGFloat?
+    @GestureState private var isDragging = false
 
     public init(
         leftActions: [SwipeAction] = [],
@@ -87,14 +88,17 @@ public struct Swipe<Content: View>: View {
             .offset(x: offsetX)
             .gesture(
                 DragGesture(minimumDistance: 8, coordinateSpace: .local)
+                    .updating($isDragging) { _, dragging, _ in dragging = true }
                     .onChanged { value in
                         dragOnChanged(value: value, leftWidth: leftWidth, rightWidth: rightWidth)
                     }
-                    .onEnded { _ in
-                        dragStartOffsetX = nil
-                        snapToClosest(leftWidth: leftWidth, rightWidth: rightWidth)
-                    }
             )
+            // Gesture state also resets on cancel, so a stolen drag still snaps (Compose `onDragCancel`).
+            .onChange(of: isDragging) { dragging in
+                guard !dragging else { return }
+                dragStartOffsetX = nil
+                snapToClosest(leftWidth: leftWidth, rightWidth: rightWidth)
+            }
         }
         .frame(maxWidth: .infinity)
         .frame(height: height)
@@ -166,7 +170,7 @@ private struct SwipeActionButton: View {
 
     var body: some View {
         SwiftUI.Button(action: action.onPress) {
-            VStack(spacing: Spacing.XXS) {
+            VStack(spacing: 0) {
                 if !action.icon.isEmpty {
                     Icon(source: action.icon, size: 20, color: Colors.black01)
                 }
@@ -184,7 +188,7 @@ private struct SwipeActionButton: View {
             .background(action.backgroundColor ?? defaultBackgroundColor)
             .clipShape(RoundedRectangle(cornerRadius: itemRadius))
         }
-        .buttonStyle(.plain)
+        .buttonStyle(ActiveOpacityButtonStyle())
     }
 }
 

package/ios/Switch/Switch.swift

@@ -41,29 +41,31 @@ public struct Switch: View {
         accessibilityId?.isEmpty == false ? accessibilityId! : "toggle_\(title?.isEmpty == false ? title! : "unknown")_\(value)"
     }
 
+    private func toggle() {
+        // Not re-read from the binding: a `.constant` / one-way binding would report the stale value.
+        let newValue = !value
+        value = newValue
+        onChange?(newValue)
+    }
+
     public var body: some View {
-        SwiftUI.Button(action: {
-            withAnimation {
-                value.toggle()
-                onChange?(value)
-            }
-        }) {
-            HStack {
-                HStack {}
-                    .frame(width: 6, height: 6)
-                    .background(backgroundColor)
-                    .clipShape(Circle())
-            }
-            .frame(width: 14, height: 14)
-            .background(circleColor)
-            .clipShape(Circle())
-            .padding(.leading, Spacing.XS)
-            .padding(.trailing, Spacing.XS)
+        // The whole track is the label so all of it is tappable, as in Compose.
+        SwiftUI.Button(action: toggle) {
+            Circle()
+                .fill(backgroundColor)
+                .frame(width: 6, height: 6)
+                .frame(width: 14, height: 14)
+                .background(Circle().fill(circleColor))
+                .padding(.horizontal, Spacing.XS)
+                .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
+                .background(backgroundColor)
+                .clipShape(Capsule())
+                .contentShape(Capsule())
+                .animation(.default, value: value)
         }
+        // Custom style so `.disabled` doesn't add a system dim on top of the disabled colors.
+        .buttonStyle(ActiveOpacityButtonStyle())
         .disabled(disabled)
-        .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
-        .background(backgroundColor)
-        .clipShape(Capsule())
         .accessibilityIdentifier(automationId)
     }
 }