@rdlabo/ionic-theme-ios27 1.2.0-1 → 1.2.0-3

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellVerticalBars.swift

@@ -5,7 +5,8 @@ import UIKit
 protocol ShellVerticalBarsControlling: AnyObject {
     var view: UIView { get }
     func attach(to owner: UIViewController, in parent: UIView)
-    func apply(_ controls: [ShellControl], rendering: ShellRendering, edge: String)
+    @MainActor func apply(_ controls: [ShellControl], rendering: ShellRendering, edge: String)
+    var ownsKeyboardChrome: Bool { get }
     func detach()
 }
 
@@ -16,6 +17,9 @@ final class ShellVerticalBarsModel: ObservableObject {
         let label: String
         let accessibilityLabel: String
         let image: UIImage?
+        let background: Color?
+        let borderColor: Color?
+        let borderWidth: CGFloat
         let badge: ShellBadge?
         let disabled: Bool
         var selected: Bool
@@ -27,6 +31,7 @@ final class ShellVerticalBarsModel: ObservableObject {
         let slot: ShellControl.ToolbarSlot?
     }
 
+    @Published var search: ShellVerticalSearchModel?
     @Published var back: Item?
     @Published var groups: [Group] = []
     @Published var tabs: [Item] = []
@@ -41,7 +46,11 @@ final class ShellVerticalBarsModel: ObservableObject {
         func item(_ source: ShellItem) -> Item {
             Item(id: source.id, label: source.content.label,
                  accessibilityLabel: source.content.accessibilityLabel,
-                 image: rendering.image(source.content), badge: source.content.badge, disabled: source.content.disabled,
+                 image: rendering.image(source.content),
+                 background: source.content.backgroundColor.map { Color(uiColor: rendering.color($0)) },
+                 borderColor: source.content.borderColor.map { Color(uiColor: rendering.color($0)) },
+                 borderWidth: source.content.borderWidth ?? 0,
+                 badge: source.content.badge, disabled: source.content.disabled,
                  selected: source.content.selected)
         }
         withAnimation(.smooth(duration: 0.3)) {
@@ -99,11 +108,21 @@ private struct ShellVerticalBarsLabel: View {
 }
 
 @available(iOS 26.0, *)
+@ViewBuilder
 private func verticalBarsButton(_ item: ShellVerticalBarsModel.Item, model: ShellVerticalBarsModel) -> some View {
-    Button { model.activate(item.id) } label: { ShellVerticalBarsLabel(item: item) }
+    let button = Button { model.activate(item.id) } label: { ShellVerticalBarsLabel(item: item) }
         .disabled(item.disabled)
         .accessibilityLabel(item.accessibilityLabel)
         .accessibilityIdentifier(item.id)
+    if let background = item.background {
+        button.buttonStyle(.glassProminent).tint(background)
+    } else {
+        button.overlay {
+            if let borderColor = item.borderColor {
+                Capsule().strokeBorder(borderColor, lineWidth: item.borderWidth).allowsHitTesting(false)
+            }
+        }
+    }
 }
 
 @available(iOS 26.0, *)
@@ -146,6 +165,7 @@ private struct ShellVerticalBarsView: View {
                 }
             }
         }
+        .modifier(ShellVerticalBarsSearch(model: model))
         .modifier(ShellVerticalBarsCompression())
         .background(Color.clear)
     }
@@ -162,6 +182,16 @@ private struct ShellVerticalBarsPage: View {
     }
 }
 
+@available(iOS 26.0, *)
+private struct ShellVerticalBarsSearch: ViewModifier {
+    @ObservedObject var model: ShellVerticalBarsModel
+    @ViewBuilder func body(content: Content) -> some View {
+        if let search = model.search {
+            content.modifier(ShellVerticalSearchModifier(model: search))
+        } else { content }
+    }
+}
+
 @available(iOS 26.0, *)
 private struct ShellVerticalBarsCompression: ViewModifier {
     @ViewBuilder func body(content: Content) -> some View {
@@ -254,9 +284,11 @@ private struct ShellVerticalBarsLegacyToolbar: ViewModifier {
 final class ShellVerticalBarsController: ShellVerticalBarsControlling {
     private final class TransparentHostingController<Content: View>: UIHostingController<Content> {
         var railEdge = "right"
+        var layoutSearch: (() -> Void)?
         override func viewDidLayoutSubviews() {
             super.viewDidLayoutSubviews()
             makeFullSizeSurfacesTransparent(in: view)
+            layoutSearch?()
         }
 
         private func makeFullSizeSurfacesTransparent(in surface: UIView) {
@@ -306,7 +338,7 @@ final class ShellVerticalBarsController: ShellVerticalBarsControlling {
         private func containsBarSurface(in view: UIView, at point: CGPoint) -> Bool {
             guard !view.isHidden, view.alpha > 0.05 else { return false }
             let name = NSStringFromClass(type(of: view))
-            if (name.contains("TabBar") || name.contains("Platter") || name.contains("Pocket") || name.contains("Sidebar")),
+            if (name.contains("TabBar") || name.contains("Platter") || name.contains("Pocket") || name.contains("Sidebar") || view is UISearchBar || view is UINavigationBar),
                convert(view.bounds, from: view).contains(point) { return true }
             return view.subviews.contains { containsBarSurface(in: $0, at: point) }
         }
@@ -316,14 +348,20 @@ final class ShellVerticalBarsController: ShellVerticalBarsControlling {
     private lazy var controller = TransparentHostingController(rootView: ShellVerticalBarsView(model: model))
     private let container = RailContainer()
     private weak var owner: UIViewController?
+    private let changed: (String, ShellSearchPhase, String, Bool, Int) -> Int
 
     var view: UIView { container }
 
-    init(activate: @escaping (String) -> Void) {
+    var ownsKeyboardChrome: Bool { model.search?.ownsKeyboardChrome == true }
+
+    init(activate: @escaping (String) -> Void,
+         changed: @escaping (String, ShellSearchPhase, String, Bool, Int) -> Int) {
+        self.changed = changed
         model.activate = activate
         container.backgroundColor = .clear
         controller.view.backgroundColor = .clear
         controller.view.isOpaque = false
+        controller.layoutSearch = { [weak self] in self?.model.search?.configureField() }
     }
 
     func attach(to owner: UIViewController, in parent: UIView) {
@@ -340,10 +378,16 @@ final class ShellVerticalBarsController: ShellVerticalBarsControlling {
         controller.didMove(toParent: owner)
     }
 
-    func apply(_ controls: [ShellControl], rendering: ShellRendering, edge: String) {
+    @MainActor func apply(_ controls: [ShellControl], rendering: ShellRendering, edge: String) {
         container.railEdge = edge
         controller.railEdge = edge
+        let tabsAppear = model.tabs.isEmpty && controls.contains { $0.kind == .tabBar && !$0.items.isEmpty }
+        if let search = controls.first(where: { $0.search != nil })?.search {
+            if model.search?.configuration.id == search.id { model.search?.apply(search) }
+            else { model.search = ShellVerticalSearchModel(search, in: container, activate: model.activate, changed: changed) }
+        } else { model.search = nil }
         model.apply(controls, rendering: rendering)
+        if tabsAppear { ShellCrossfade.enter(container, duration: ShellCrossfade.duration(180)) }
         controller.overrideUserInterfaceStyle = controls.contains(where: \.dark) ? .dark : .light
     }
 

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellVerticalSearch.swift

@@ -0,0 +1,118 @@
+import Combine
+import SwiftUI
+import UIKit
+
+@available(iOS 26.0, *)
+final class ShellVerticalSearchModel: ObservableObject {
+    @Published private(set) var configuration: ShellSearch
+    @Published var text: String
+    @Published var presented: Bool
+    @Published var focused: Bool
+    private weak var railView: UIView?
+    private let activate: (String) -> Void
+    private let changed: (String, ShellSearchPhase, String, Bool, Int) -> Int
+    private let inputDelegate = ShellSearchInputDelegate()
+    private var editingSequence = 0
+    private var valueVersion: Int
+
+    init(_ configuration: ShellSearch, in railView: UIView,
+         activate: @escaping (String) -> Void,
+         changed: @escaping (String, ShellSearchPhase, String, Bool, Int) -> Int) {
+        self.configuration = configuration
+        self.railView = railView
+        self.activate = activate
+        self.changed = changed
+        text = configuration.value
+        presented = configuration.available && configuration.active
+        focused = configuration.focused
+        valueVersion = configuration.valueVersion
+        inputDelegate.clear = { [weak self] in self?.emit(.clear) }
+    }
+
+    var ownsKeyboardChrome: Bool { presented && (focused || textField?.isFirstResponder == true) }
+
+    private var textField: UISearchTextField? {
+        func find(_ view: UIView) -> UISearchTextField? {
+            guard !view.isHidden, view.alpha > 0.01 else { return nil }
+            if let field = view as? UISearchTextField { return field }
+            for child in view.subviews {
+                if let field = find(child) { return field }
+            }
+            return nil
+        }
+        return railView.flatMap(find)
+    }
+
+    func apply(_ next: ShellSearch) {
+        let previous = configuration
+        configuration = next
+        if next.valueVersion != valueVersion || next.editSequence >= editingSequence {
+            valueVersion = next.valueVersion
+            text = next.value
+        }
+        presented = next.available && next.active
+        // The first Web acknowledgement still carries the old focus state.
+        if !next.active { focused = false }
+        else if previous.focused != next.focused { focused = next.focused }
+    }
+
+    func input(_ value: String) {
+        text = value
+        emit(.input)
+    }
+
+    func present(_ value: Bool) {
+        presented = value
+        if value != configuration.active {
+            activate(value ? configuration.trigger.id : configuration.closeId)
+        }
+    }
+
+    func focus(_ value: Bool) {
+        focused = value
+        emit(value ? .focus : .blur)
+    }
+
+    func commit() { emit(.commit) }
+
+    func configureField() {
+        guard let field = textField else { return }
+        field.accessibilityIdentifier = configuration.id
+        field.accessibilityLabel = configuration.field.accessibilityLabel
+        field.isEnabled = !configuration.disabled
+        field.autocapitalizationType = .none
+        field.autocorrectionType = .no
+        field.spellCheckingType = .no
+        field.clearButtonMode = .always
+        if field.delegate !== inputDelegate {
+            inputDelegate.original = field.delegate
+            field.delegate = inputDelegate
+        }
+    }
+
+    private func emit(_ phase: ShellSearchPhase) {
+        editingSequence = changed(configuration.id, phase, text,
+                                  textField?.markedTextRange != nil, valueVersion)
+    }
+}
+
+@available(iOS 26.0, *)
+struct ShellVerticalSearchModifier: ViewModifier {
+    @ObservedObject var model: ShellVerticalSearchModel
+    @FocusState private var focused: Bool
+
+    @ViewBuilder func body(content: Content) -> some View {
+        if model.configuration.available {
+            content
+                .searchable(text: Binding(get: { model.text }, set: model.input),
+                            isPresented: Binding(get: { model.presented }, set: model.present),
+                            placement: .toolbar, prompt: Text(model.configuration.placeholder))
+                .searchToolbarBehavior(.minimize)
+                .searchPresentationToolbarBehavior(.avoidHidingContent)
+                .searchFocused($focused)
+                .onSubmit(of: .search, model.commit)
+                .onChange(of: focused) { _, value in model.focus(value) }
+                .onChange(of: model.focused) { _, value in focused = value }
+        } else { content }
+    }
+}

package/ios/Sources/IonicNativeUIShellPlugin/IonicNativeUIShellPlugin.swift

@@ -8,9 +8,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     public let jsName = "IonicNativeUIShell"
     public let pluginMethods: [CAPPluginMethod] = [
         CAPPluginMethod(name: "configure", returnType: CAPPluginReturnPromise),
-        CAPPluginMethod(name: "getDeviceLayout", returnType: CAPPluginReturnPromise),
-        CAPPluginMethod(name: "startDeviceLayoutMonitoring", returnType: CAPPluginReturnPromise),
-        CAPPluginMethod(name: "stopDeviceLayoutMonitoring", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getWebViewMetrics", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "update", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "clear", returnType: CAPPluginReturnPromise)
     ]
@@ -27,16 +25,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     private var pendingTabExpiryWorks: [String: DispatchWorkItem] = [:]
     private var restoreTopEdge: (() -> Void)?
     private var observers: [NSObjectProtocol] = []
-    private var lastVerticalBarEdge: String?
-    private var lastVerticalBarInset: CGFloat = 0
-    private var verticalBarPlacementObserved = false
-    private weak var observedVerticalBarView: UIView?
-    private var unregisterVerticalBarObservation: (() -> Void)?
-    private weak var observedHingeView: UIView?
-    private var hingeInteraction: UIInteraction?
-    private var hingeStatus: String?
-    private var deviceLayoutMonitoring = 0
-    private var lastDeviceLayout: String?
+    private var lastWebViewRadius: Double?
 
     public override func load() {
         for name in [UIApplication.didEnterBackgroundNotification, UIResponder.keyboardWillChangeFrameNotification, UIResponder.keyboardWillHideNotification,
@@ -57,7 +46,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                     self.host?.isHidden = true
                     self.verticalBars?.view.isHidden = true
                 }
-                var searchOwnsKeyboard = false
+                var searchOwnsKeyboard = self.verticalBars?.ownsKeyboardChrome == true
                 self.searchControllers.values.forEach { controller in
                     if controller.ownsKeyboardChrome { searchOwnsKeyboard = true }
                     if !keyboard { controller.surface.isHidden = true }
@@ -68,7 +57,6 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                     }
                 } else if name == UIDevice.orientationDidChangeNotification {
                     self.notifyWebViewMetricsChange()
-                    self.notifyVerticalBarPlacementChange()
                 }
             })
         }
@@ -78,8 +66,6 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                 if name == UIResponder.keyboardDidHideNotification { self?.keyboardVisible = false }
                 self?.bridge?.triggerWindowJSEvent(eventName: "nativeUIShellRefresh", data: name == UIApplication.didBecomeActiveNotification ? "{\"retireSearch\":true}" : "{}")
                 if name == UIApplication.didBecomeActiveNotification { self?.notifyWebViewMetricsChange() }
-                if name == UIApplication.didBecomeActiveNotification { self?.notifyVerticalBarPlacementChange() }
-                if name == UIApplication.didBecomeActiveNotification { self?.refreshHingeStatus() }
             })
         }
     }
@@ -88,17 +74,6 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
         observers.forEach(NotificationCenter.default.removeObserver)
     }
 
-    private func stopDeviceLayoutObservation() {
-        unregisterVerticalBarObservation?()
-        unregisterVerticalBarObservation = nil
-        observedVerticalBarView = nil
-        if let interaction = hingeInteraction {
-            observedHingeView?.removeInteraction(interaction)
-        }
-        hingeInteraction = nil
-        observedHingeView = nil
-    }
-
     private func webViewMetrics() -> JSObject? {
         guard #available(iOS 26.0, *), let webView = bridge?.webView else { return nil }
         webView.layoutIfNeeded()
@@ -106,158 +81,21 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     }
 
     private func notifyWebViewMetricsChange() {
-        notifyDeviceLayoutChange()
-    }
-
-    private func deviceLayout() -> JSObject {
-        var layout: JSObject = ["placement": verticalBarPlacement(),
-                                "webViewMetrics": webViewMetrics() ?? ["radius": 0]]
-        layout["hingeStatus"] = hingeStatus ?? NSNull()
-        return layout
-    }
-
-    private func notifyDeviceLayoutChange() {
-        guard deviceLayoutMonitoring > 0 else { return }
-        let layout = deviceLayout()
-        let fingerprint = "\(verticalBarEdge() ?? "none"):\(verticalBarInset(for: verticalBarEdge())):\(hingeStatus ?? "none"):\(webViewMetrics()?["radius"] ?? 0)"
-        guard fingerprint != lastDeviceLayout else { return }
-        lastDeviceLayout = fingerprint
-        notifyListeners("deviceLayoutChange", data: layout)
+        let metrics = webViewMetrics() ?? ["radius": 0]
+        let radius = metrics["radius"] as? Double ?? 0
+        guard radius != lastWebViewRadius else { return }
+        lastWebViewRadius = radius
+        notifyListeners("webViewMetricsChange", data: metrics)
     }
 
-    @objc func getDeviceLayout(_ call: CAPPluginCall) {
+    @objc func getWebViewMetrics(_ call: CAPPluginCall) {
         DispatchQueue.main.async { [weak self] in
-            self?.observeVerticalBarPlacement()
-            self?.observeHingeStatus()
-            self?.refreshHingeStatus()
-            DispatchQueue.main.async {
-                call.resolve(self?.deviceLayout() ?? ["placement": ["edge": NSNull(), "inset": 0], "hingeStatus": NSNull(), "webViewMetrics": ["radius": 0]])
-                if self?.deviceLayoutMonitoring == 0 { self?.stopDeviceLayoutObservation() }
-            }
-        }
-    }
-
-    @objc func startDeviceLayoutMonitoring(_ call: CAPPluginCall) {
-        DispatchQueue.main.async { [weak self] in
-            self?.deviceLayoutMonitoring += 1
-            self?.lastDeviceLayout = nil
-            self?.observeVerticalBarPlacement()
-            self?.observeHingeStatus()
-            self?.refreshHingeStatus()
-            call.resolve()
-        }
-    }
-
-    @objc func stopDeviceLayoutMonitoring(_ call: CAPPluginCall) {
-        DispatchQueue.main.async { [weak self] in
-            if let self, self.deviceLayoutMonitoring > 0 {
-                self.deviceLayoutMonitoring -= 1
-                if self.deviceLayoutMonitoring == 0 {
-                    self.lastDeviceLayout = nil
-                    self.stopDeviceLayoutObservation()
-                }
-            }
-            call.resolve()
-        }
-    }
-
-    // Logical edge in the reading direction, matching UIVerticalBarEdge.
-    private func verticalBarEdge() -> String? {
-        #if canImport(UIKit, _underlyingVersion: 9127.0.85) && !targetEnvironment(macCatalyst)
-        if #available(iOS 27.1, *), let webView = bridge?.webView {
-            switch webView.traitCollection.verticalBarEdge {
-            case .leading: return "leading"
-            case .trailing: return "trailing"
-            default: break
-            }
-        }
-        #endif
-        // Toolchains older than the verticalBarEdge trait still expose the rail
-        // as a deep safe-area inset on the physical edge (iPhone Duo reserves
-        // ~80pt; ordinary iPhones stay below 70pt even in landscape).
-        guard let webView = bridge?.webView else { return nil }
-        webView.layoutIfNeeded()
-        let rtl = webView.effectiveUserInterfaceLayoutDirection == .rightToLeft
-        if webView.safeAreaInsets.right >= 70 { return rtl ? "leading" : "trailing" }
-        if webView.safeAreaInsets.left >= 70 { return rtl ? "trailing" : "leading" }
-        return nil
-    }
-
-    private func verticalBarInset(for edge: String?) -> CGFloat {
-        guard let edge, let webView = bridge?.webView else { return 0 }
-        webView.layoutIfNeeded()
-        let rtl = webView.effectiveUserInterfaceLayoutDirection == .rightToLeft
-        let physicalRight = (edge == "trailing") != rtl
-        return physicalRight ? webView.safeAreaInsets.right : webView.safeAreaInsets.left
-    }
-
-    private func verticalBarPlacement() -> JSObject {
-        if let edge = verticalBarEdge() { return ["edge": edge, "inset": Double(verticalBarInset(for: edge))] }
-        return ["edge": NSNull(), "inset": 0]
-    }
-
-    private func notifyVerticalBarPlacementChange() {
-        let edge = verticalBarEdge()
-        let inset = verticalBarInset(for: edge)
-        guard !verticalBarPlacementObserved || edge != lastVerticalBarEdge || abs(inset - lastVerticalBarInset) > 0.5 else { return }
-        verticalBarPlacementObserved = true
-        lastVerticalBarEdge = edge
-        lastVerticalBarInset = inset
-        notifyDeviceLayoutChange()
-    }
-
-    private func observeVerticalBarPlacement() {
-        #if canImport(UIKit, _underlyingVersion: 9127.0.85) && !targetEnvironment(macCatalyst)
-        if #available(iOS 27.1, *), let webView = bridge?.webView, observedVerticalBarView !== webView {
-            unregisterVerticalBarObservation?()
-            observedVerticalBarView = webView
-            let traits: [UITrait] = [UITraitLayoutDirection.self] + UITraitCollection.systemTraitsAffectingVerticalBarEdge
-            let registration = webView.registerForTraitChanges(traits) { [weak self] (_: UIView, _: UITraitCollection) in
-                self?.notifyVerticalBarPlacementChange()
-            }
-            unregisterVerticalBarObservation = { [weak webView] in webView?.unregisterForTraitChanges(registration) }
+            call.resolve(self?.webViewMetrics() ?? ["radius": 0])
         }
-        #endif
-        notifyVerticalBarPlacementChange()
-    }
-
-    private func observeHingeStatus() {
-        #if canImport(UIKit, _underlyingVersion: 9127.0.85) && !targetEnvironment(macCatalyst)
-        if #available(iOS 27.1, *), let webView = bridge?.webView, observedHingeView !== webView {
-            if let interaction = hingeInteraction {
-                observedHingeView?.removeInteraction(interaction)
-            }
-            observedHingeView = webView
-            let interaction = UIHingeInteraction { [weak self] _, update in
-                let status: String?
-                switch update.hinge?.status {
-                case .closed: status = "closed"
-                case .partiallyOpen: status = "partiallyOpen"
-                case .fullyOpen: status = "fullyOpen"
-                default: status = nil
-                }
-                guard status != self?.hingeStatus else { return }
-                self?.hingeStatus = status
-                self?.notifyDeviceLayoutChange()
-            }
-            hingeInteraction = interaction
-            webView.addInteraction(interaction)
-        }
-        #endif
-    }
-
-    private func refreshHingeStatus() {
-        #if canImport(UIKit, _underlyingVersion: 9127.0.85) && !targetEnvironment(macCatalyst)
-        if #available(iOS 27.1, *), let interaction = hingeInteraction as? UIHingeInteraction {
-            interaction.isEnabled = false
-            interaction.isEnabled = true
-        }
-        #endif
     }
 
     @objc func configure(_ call: CAPPluginCall) {
         DispatchQueue.main.async { [weak self] in
-            self?.observeVerticalBarPlacement()
             // A new JS context starts revision numbering again (live reload / navigation).
             self?.restoreTopEdge?()
             self?.restoreTopEdge = nil
@@ -352,10 +190,12 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
             guard let snapshot = try? call.decode(ShellSnapshot.self), snapshot.isValid else {
                 call.reject("Invalid control snapshot"); return
             }
+            self.notifyWebViewMetricsChange()
             let duration = ShellCrossfade.duration(snapshot.transitionDuration)
             let existing = Set(self.controls.keys)
             let verticalBars = snapshot.controls.filter { $0.placement == .verticalBars }
             let snapshots = snapshot.controls.filter { $0.placement != .verticalBars }
+            let verticalSearchActive = verticalBars.contains { $0.search.map { $0.available && $0.active } ?? false }
             let width = snapshot.viewportWidth
             self.revision = next
             if snapshots.isEmpty && verticalBars.isEmpty {
@@ -371,14 +211,23 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
             var fabs: [(ShellFab, ShellControl)] = []
             var searches: [(ShellSearchControlling, ShellControl, CGRect, CGRect, UIView?, Bool)] = []
             var rejectedSearches: [String] = []
-            if verticalBars.isEmpty || self.keyboardVisible {
+            if verticalBars.isEmpty || (self.keyboardVisible && !verticalSearchActive) {
                 self.verticalBars?.detach()
                 self.verticalBars = nil
                 if self.keyboardVisible { rejectedControls.append(contentsOf: verticalBars.map(\.id)) }
             } else if let owner = self.bridge?.viewController {
-                let rail = self.verticalBars ?? ShellVerticalBarsController(activate: { [weak self] id in self?.activate(id) })
+                let rail = self.verticalBars ?? ShellVerticalBarsController(
+                    activate: { [weak self] id in self?.activate(id) },
+                    changed: { [weak self] id, phase, value, composing, valueVersion in
+                        self?.searchChanged(id, phase: phase, value: value, composing: composing, valueVersion: valueVersion) ?? 0
+                    })
                 self.verticalBars = rail
                 rail.attach(to: owner, in: owner.view)
+                if let frame = snapshot.verticalBarFrame {
+                    rail.view.frame = webView.convert(frame.rect.applying(CGAffineTransform(scaleX: scale, y: scale)), to: owner.view)
+                } else {
+                    rail.view.frame = owner.view.bounds
+                }
                 rail.apply(verticalBars, rendering: self.rendering, edge: snapshot.verticalBarEdge ?? "right")
                 rail.view.isHidden = false
             } else {
@@ -430,11 +279,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                             controller = ShellSearchController()
                             controller.activate = { [weak self] id in self?.activate(id) }
                             controller.changed = { [weak self] id, phase, value, composing, valueVersion in
-                                guard let self else { return 0 }
-                                self.sequence += 1
-                                self.notifyListeners("search", data: ["id": id, "phase": phase.rawValue, "value": value,
-                                    "composing": composing, "valueVersion": valueVersion, "sequence": self.sequence, "revision": self.revision])
-                                return self.sequence
+                                self?.searchChanged(id, phase: phase, value: value, composing: composing, valueVersion: valueVersion) ?? 0
                             }
                             controller.attach(to: owner, in: owner.view)
                             self.searchControllers[id] = controller
@@ -535,6 +380,14 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
         activate(itemId)
     }
 
+    private func searchChanged(_ id: String, phase: ShellSearchPhase, value: String,
+                               composing: Bool, valueVersion: Int) -> Int {
+        sequence += 1
+        notifyListeners("search", data: ["id": id, "phase": phase.rawValue, "value": value,
+            "composing": composing, "valueVersion": valueVersion, "sequence": sequence, "revision": revision])
+        return sequence
+    }
+
     private func activate(_ id: String) {
         sequence += 1
         notifyListeners("activate", data: ["id": id, "revision": revision, "sequence": sequence])

package/ios/Sources/IonicNativeUIShellPlugin/Shared/ShellSnapshot.swift

@@ -11,11 +11,13 @@ struct ShellSnapshot: Decodable {
     let revision: Int
     let transitionDuration: Double?
     let viewportWidth: Double
+    let verticalBarFrame: ShellFrame?
     let verticalBarEdge: String?
     let controls: [ShellControl]
 
     var isValid: Bool {
         revision >= 0 && (transitionDuration.map { $0.isFinite && $0 >= 0 && $0 <= 500 } ?? true) && viewportWidth.isFinite && viewportWidth > 0 && controls.count <= 100 &&
+        (verticalBarFrame.map { $0.isValid } ?? true) &&
         (verticalBarEdge == nil || verticalBarEdge == "left" || verticalBarEdge == "right") &&
         Set(controls.map(\.id)).count == controls.count && controls.allSatisfy(\.isValid)
     }
@@ -105,6 +107,9 @@ struct ShellItemContent: Decodable, Equatable {
     let fontSize: Double
     let fontWeight: Double
     let color: String
+    let backgroundColor: String?
+    let borderColor: String?
+    let borderWidth: CGFloat?
     let badge: ShellBadge?
     var icon: String?
     var iconWidth: Double?