Liquid Glass Search Field Patterns

 import SwiftUI
 
 struct Message: Identifiable {
     let id = UUID()
     let sender: String
     let subject: String
     let mailbox: String
 }
 
 enum MailboxScope: String, CaseIterable, Identifiable {
     case all = "All Mailboxes"
     case inbox = "Inbox"
     case sent = "Sent"
     var id: String { rawValue }
 }
 
−// Pre-iOS 27: searchable placed in the navigation bar (top).
−// No Liquid Glass material; field stays at top when keyboard appears.
−// No bottom-toolbar animation or ergonomic keyboard-adjacent layout.
−struct MailSearchDemoViewLegacy: View {
+struct MailSearchDemoView: View {
     @State private var searchText = ""
     @State private var selectedScope: MailboxScope = .all
 
     let messages: [Message] = [
         Message(sender: "Apple", subject: "Your receipt", mailbox: "Inbox"),
         Message(sender: "Team", subject: "Sprint review", mailbox: "Inbox"),
         Message(sender: "Me", subject: "Follow-up notes", mailbox: "Sent"),
         Message(sender: "GitHub", subject: "PR merged", mailbox: "Inbox"),
         Message(sender: "Me", subject: "Design feedback", mailbox: "Sent"),
     ]
 
     var filteredMessages: [Message] {
         messages.filter { message in
             let matchesScope = selectedScope == .all || message.mailbox == selectedScope.rawValue
             let matchesSearch = searchText.isEmpty ||
                 message.sender.localizedCaseInsensitiveContains(searchText) ||
                 message.subject.localizedCaseInsensitiveContains(searchText)
             return matchesScope && matchesSearch
         }
     }
 
     var body: some View {
         NavigationStack {
             List(filteredMessages) { message in
                 VStack(alignment: .leading, spacing: 4) {
                     Text(message.sender)
                         .font(.headline)
                     Text(message.subject)
                         .font(.subheadline)
                         .foregroundStyle(.secondary)
                 }
             }
             .navigationTitle("Mail")
−            // Pre-iOS 27 default placement: navigation bar (top).
−            // Field does not animate over keyboard; no glass material.
+            // searchable with placement: .toolbaritem(.bottomBar) produces
+            // the iOS 27 bottom-toolbar Liquid Glass search field that
+            // animates upward over the keyboard when activated.
             .searchable(
                 text: $searchText,
−                placement: .navigationBarDrawer(displayMode: .always),
+                placement: .toolbarItem(.bottomBar),
                 prompt: "Search Mail"
             )
−            .searchScopes($selectedScope) {
+            .searchScopes($selectedScope, activation: .onSearchPresentation) {
                 ForEach(MailboxScope.allCases) { scope in
                     Text(scope.rawValue).tag(scope)
                 }
             }
+            .toolbar {
+                ToolbarItem(placement: .bottomBar) {
+                    Button(action: {}) {
+                        Label("Compose", systemImage: "square.and.pencil")
+                    }
+                }
+            }
         }
     }
 }
 
 #Preview {
−    MailSearchDemoViewLegacy()
+    MailSearchDemoView()
 }