fix(search-bar): style the typed text and drive Cancel from focus

Sources/DashUIKit/Components/SearchBar.swift

@@ -34,7 +34,6 @@ public struct SearchBar: View {
     private let placeholder: String
 
     @FocusState private var isFocused: Bool
-    @State private var isEditing: Bool = false
 
     public init(
         text: Binding<String>,
@@ -58,20 +57,12 @@ public struct SearchBar: View {
             .background(Color.dash.searchBackground)
             .clipShape(RoundedRectangle(cornerRadius: Layout.fieldCornerRadius, style: .continuous))
 
-            if isEditing {
+            if isFocused {
                 cancelButton
                     .transition(.move(edge: .trailing).combined(with: .opacity))
             }
         }
-        .animation(.easeInOut(duration: Layout.animationDuration), value: isEditing)
-        .onAppear {
-            isEditing = isFocused
-        }
-        .onChange(of: isFocused) { _, focused in
-            withAnimation(.easeInOut(duration: Layout.animationDuration)) {
-                isEditing = focused
-            }
-        }
+        .animation(.easeInOut(duration: Layout.animationDuration), value: isFocused)
     }
 
     private var magnifyingGlass: some View {
@@ -103,9 +94,6 @@ public struct SearchBar: View {
         Button(
             action: {
                 text = ""
-                withAnimation(.easeInOut(duration: Layout.animationDuration)) {
-                    isEditing = false
-                }
                 isFocused = false
             },
             label: {
@@ -130,6 +118,8 @@ public struct SearchBar: View {
             EmptyView()
         }
         .focused($isFocused)
+        .dashFont(.subhead)
+        .foregroundStyle(Color.dash.primaryText)
         .tint(Color.dash.primaryText)
     }
 }
@@ -138,11 +128,25 @@ public struct SearchBar: View {
 
 #if DEBUG
 
-#Preview {
+#Preview("Empty") {
     @Previewable @State var text = ""
     SearchBar(text: $text)
         .padding()
 }
 
+#Preview("Typed") {
+    @Previewable @State var text = "Dash"
+    SearchBar(text: $text)
+        .padding()
+}
+
+#Preview("Typed, dark") {
+    @Previewable @State var text = "Dash"
+    SearchBar(text: $text)
+        .padding()
+        .background(Color.dash.primaryBackground)
+        .preferredColorScheme(.dark)
+}
+
 #endif // DEBUG
 #endif // canImport(UIKit)

docs/buttons-and-inputs.md

@@ -72,8 +72,10 @@ SearchBar(text: $query, placeholder: "Search coins")   // placeholder optional
 
 Behavior:
 
-- Uses `@FocusState`; an animated **Cancel** button
-  slides in while editing (clears text + resigns focus on tap).
+- An animated **Cancel** button slides in while the field has focus (clears text + resigns
+  focus on tap).
+- Typed text is `.subhead` in `Color.dash.primaryText`, the same size as the placeholder.
+  Like every `Font.dash` token it is a fixed size and does not scale with Dynamic Type.
 
 Default placeholder is the localized "Search". Background uses `Color.dash.searchBackground`.