@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/ios/Sources/IonicNativeUIShellPlugin/IonicNativeUIShellPlugin.swift

@@ -8,13 +8,16 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     public let jsName = "IonicNativeUIShell"
     public let pluginMethods: [CAPPluginMethod] = [
         CAPPluginMethod(name: "configure", returnType: CAPPluginReturnPromise),
-        CAPPluginMethod(name: "getWebViewMetrics", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getDeviceLayout", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "startDeviceLayoutMonitoring", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "stopDeviceLayoutMonitoring", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "update", returnType: CAPPluginReturnPromise),
         CAPPluginMethod(name: "clear", returnType: CAPPluginReturnPromise)
     ]
     private var host: ShellHost?
+    private var verticalBars: ShellVerticalBarsControlling?
     private var controls: [String: UIView] = [:]
-    private var searchControllers: [String: UIViewController] = [:]
+    private var searchControllers: [String: ShellSearchControlling] = [:]
     private var fingerprints: [String: ShellControl] = [:]
     private let rendering = ShellRendering()
     private var revision = 0
@@ -24,6 +27,16 @@ 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?
 
     public override func load() {
         for name in [UIApplication.didEnterBackgroundNotification, UIResponder.keyboardWillChangeFrameNotification, UIResponder.keyboardWillHideNotification,
@@ -40,14 +53,14 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                         self.keyboardVisible = !overlap.isNull && overlap.width > 0 && overlap.height > 0
                     }
                 }
-                if !keyboard { self.host?.isHidden = true }
+                if !keyboard {
+                    self.host?.isHidden = true
+                    self.verticalBars?.view.isHidden = true
+                }
                 var searchOwnsKeyboard = false
-                if #available(iOS 26.0, *) {
-                    self.searchControllers.values.forEach {
-                        guard let controller = $0 as? ShellSearchController else { return }
-                        if controller.ownsKeyboardChrome { searchOwnsKeyboard = true }
-                        if !keyboard { controller.surface.isHidden = true }
-                    }
+                self.searchControllers.values.forEach { controller in
+                    if controller.ownsKeyboardChrome { searchOwnsKeyboard = true }
+                    if !keyboard { controller.surface.isHidden = true }
                 }
                 if keyboard {
                     if !searchOwnsKeyboard {
@@ -55,6 +68,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                     }
                 } else if name == UIDevice.orientationDidChangeNotification {
                     self.notifyWebViewMetricsChange()
+                    self.notifyVerticalBarPlacementChange()
                 }
             })
         }
@@ -64,6 +78,8 @@ 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() }
             })
         }
     }
@@ -72,6 +88,17 @@ 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()
@@ -79,35 +106,168 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     }
 
     private func notifyWebViewMetricsChange() {
-        guard let metrics = webViewMetrics() else { return }
-        notifyListeners("webViewMetricsChange", data: metrics)
+        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)
     }
 
-    @objc func getWebViewMetrics(_ call: CAPPluginCall) {
+    @objc func getDeviceLayout(_ call: CAPPluginCall) {
         DispatchQueue.main.async { [weak self] in
-            guard #available(iOS 26.0, *) else {
-                call.resolve(["radius": 0])
-                return
+            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() }
             }
-            guard let metrics = self?.webViewMetrics() else {
-                call.reject("WebView unavailable")
-                return
+        }
+    }
+
+    @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
             }
-            call.resolve(metrics)
         }
+        #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) }
+        }
+        #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
             self?.removeControls()
             self?.revision = 0
             if #available(iOS 26.0, *) {
+                self?.bridge?.webView?.layoutIfNeeded()
                 // Ionic already paints the header edge; a second native effect can
                 // add a dark scrim when the OS and Web themes differ.
-                if let effect = self?.bridge?.webView?.scrollView.topEdgeEffect {
+                if call.getBool("verticalBarsOnly") != true, let effect = self?.bridge?.webView?.scrollView.topEdgeEffect {
                     let hidden = effect.isHidden
                     effect.isHidden = true
                     self?.restoreTopEdge = { [weak effect] in effect?.isHidden = hidden }
@@ -133,9 +293,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
     }
 
     private func removeControl(_ id: String, duration: TimeInterval = 0) {
-        if #available(iOS 26.0, *) {
-            (searchControllers.removeValue(forKey: id) as? ShellSearchController)?.detach()
-        }
+        searchControllers.removeValue(forKey: id)?.detach()
         if let control = controls.removeValue(forKey: id) { ShellCrossfade.retire(control, duration: duration) }
         fingerprints.removeValue(forKey: id)
         pendingTabSelections.removeValue(forKey: id)
@@ -146,6 +304,8 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
         Array(controls.keys).forEach { removeControl($0, duration: duration) }
         host?.removeFromSuperview()
         host = nil
+        verticalBars?.detach()
+        verticalBars = nil
         rendering.clear()
         pendingTabSelections.removeAll()
         pendingTabExpiryWorks.values.forEach { $0.cancel() }
@@ -194,19 +354,14 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
             }
             let duration = ShellCrossfade.duration(snapshot.transitionDuration)
             let existing = Set(self.controls.keys)
-            let snapshots = snapshot.controls
+            let verticalBars = snapshot.controls.filter { $0.placement == .verticalBars }
+            let snapshots = snapshot.controls.filter { $0.placement != .verticalBars }
             let width = snapshot.viewportWidth
             self.revision = next
-            if snapshots.isEmpty {
+            if snapshots.isEmpty && verticalBars.isEmpty {
                 self.removeControls(duration: duration)
                 call.resolve(["revision": next]); return
             }
-            let host = self.host ?? ShellHost()
-            self.host = host
-            host.frame = parent.bounds
-            host.autoresizingMask = [.flexibleWidth, .flexibleHeight]
-            host.backgroundColor = .clear
-            host.isAccessibilityElement = false
             let scale = webView.bounds.width / width
             let retained = Set(snapshots.map(\.id))
             for id in Array(self.controls.keys) where !retained.contains(id) {
@@ -214,8 +369,33 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
             }
             var rejectedControls: [String] = []
             var fabs: [(ShellFab, ShellControl)] = []
-            var searches: [(ShellSearchController, ShellControl, CGRect, CGRect, UIView?, Bool)] = []
+            var searches: [(ShellSearchControlling, ShellControl, CGRect, CGRect, UIView?, Bool)] = []
             var rejectedSearches: [String] = []
+            if verticalBars.isEmpty || self.keyboardVisible {
+                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) })
+                self.verticalBars = rail
+                rail.attach(to: owner, in: owner.view)
+                rail.apply(verticalBars, rendering: self.rendering, edge: snapshot.verticalBarEdge ?? "right")
+                rail.view.isHidden = false
+            } else {
+                rejectedControls.append(contentsOf: verticalBars.map(\.id))
+            }
+            if snapshots.isEmpty {
+                self.host?.removeFromSuperview()
+                self.host = nil
+                call.resolve(["revision": next, "rejectedControls": rejectedControls])
+                return
+            }
+            let host = self.host ?? ShellHost()
+            self.host = host
+            host.frame = parent.bounds
+            host.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+            host.backgroundColor = .clear
+            host.isAccessibilityElement = false
             UIView.performWithoutAnimation {
                 if host.superview !== parent { parent.addSubview(host) }
                 for node in snapshots {
@@ -233,7 +413,7 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                         rejectedControls.append(id)
                     }
                     // Only native search owns its keyboard; other controls return to Web.
-                    if self.keyboardVisible && (self.searchControllers[id] as? ShellSearchController)?.ownsKeyboard != true {
+                    if self.keyboardVisible && self.searchControllers[id]?.ownsKeyboard != true {
                         reject(); continue
                     }
                     let local = node.frame.rect
@@ -241,9 +421,9 @@ public class IonicNativeUIShellPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarDele
                                                        width: local.width * scale, height: local.height * scale), to: parent)
                     if let search = node.search {
                         guard let owner = self.bridge?.viewController else { rejectedSearches.append(id); continue }
-                        let controller: ShellSearchController
+                        let controller: ShellSearchControlling
                         let previousCover = self.controls[id]
-                        let replacing = self.searchControllers[id] as? ShellSearchController
+                        let replacing = self.searchControllers[id]
                         if let existing = replacing { controller = existing }
                         else {
                             // Keep the ordinary UITabBar cover until the search controller applies.

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

@@ -11,10 +11,12 @@ struct ShellSnapshot: Decodable {
     let revision: Int
     let transitionDuration: Double?
     let viewportWidth: Double
+    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 &&
+        (verticalBarEdge == nil || verticalBarEdge == "left" || verticalBarEdge == "right") &&
         Set(controls.map(\.id)).count == controls.count && controls.allSatisfy(\.isValid)
     }
 }
@@ -31,8 +33,12 @@ struct ShellFrame: Decodable, Equatable {
 }
 
 struct ShellControl: Decodable, Equatable {
+    enum Placement: String, Decodable { case verticalBars = "vertical-bars" }
+    enum ToolbarSlot: String, Decodable { case start, end }
     let id: String
     let kind: ShellComponent
+    let placement: Placement?
+    let toolbarSlot: ToolbarSlot?
     let frame: ShellFrame
     let items: [ShellItem]
     let dark: Bool
@@ -40,12 +46,14 @@ struct ShellControl: Decodable, Equatable {
     let tabBarAnchor: ShellTabBar.Anchor?
     let search: ShellSearch?
 
-    private enum CodingKeys: String, CodingKey { case id, kind, items, dark, rtl, tabBarAnchor, search }
+    private enum CodingKeys: String, CodingKey { case id, kind, placement, toolbarSlot, items, dark, rtl, tabBarAnchor, search }
 
     init(from decoder: Decoder) throws {
         let values = try decoder.container(keyedBy: CodingKeys.self)
         id = try values.decode(String.self, forKey: .id)
         kind = try values.decode(ShellComponent.self, forKey: .kind)
+        placement = try values.decodeIfPresent(Placement.self, forKey: .placement)
+        toolbarSlot = try values.decodeIfPresent(ToolbarSlot.self, forKey: .toolbarSlot)
         frame = try ShellFrame(from: decoder)
         items = try values.decode([ShellItem].self, forKey: .items)
         dark = try values.decode(Bool.self, forKey: .dark)
@@ -57,6 +65,7 @@ struct ShellControl: Decodable, Equatable {
     var isValid: Bool {
         ShellComponents.supported.contains(kind) && !id.isEmpty && frame.isValid && !items.isEmpty && items.count <= 30 &&
         (!ShellButton.kinds.contains(kind) || items.count == 1) &&
+        (toolbarSlot == nil || (placement == .verticalBars && [.button, .buttons, .menuButton].contains(kind))) &&
         Set(items.map(\.id)).count == items.count && items.allSatisfy(\.isValid) &&
         (tabBarAnchor.map { kind == .tabBar && $0.isValid } ?? true) &&
         (search.map { kind == .tabBar && $0.isValid } ?? true)

package/ios/Tests/IonicNativeUIShellPluginTests/ShellSnapshotTests.swift

@@ -37,6 +37,35 @@ final class ShellSnapshotTests: XCTestCase {
         }
     }
 
+    @MainActor func testVerticalBarsTabOptimismWaitsForWebAndRollsBackWhenStale() throws {
+        guard #available(iOS 26.0, *) else { throw XCTSkip("Requires SwiftUI adaptive tabs") }
+        func tabs(_ selected: String, includeRight: Bool = true) throws -> [ShellControl] {
+            var items = [item(["id": "left", "selected": selected == "left"])]
+            if includeRight {
+                items.append(item(["id": "right", "selected": selected == "right",
+                    "badge": ["value": "3", "color": "rgb(255, 0, 0)", "textColor": "rgb(255, 255, 255)"]]))
+            }
+            return try decode([control(["kind": "ion-tab-bar", "items": items])]).controls
+        }
+        let model = ShellVerticalBarsModel()
+        let rendering = ShellRendering()
+        model.apply(try tabs("left"), rendering: rendering, now: 100)
+        XCTAssertEqual(model.tabs.last?.badge?.value, "3")
+        model.select("right", now: 100, ttl: 10)
+        model.apply(try tabs("left"), rendering: rendering, now: 101)
+        XCTAssertEqual(model.selection, "right", "a stale Web echo must not undo the optimistic selection")
+        model.apply(try tabs("right"), rendering: rendering, now: 102)
+        XCTAssertEqual(model.selection, "right", "the matching Web echo confirms the selection")
+
+        model.apply(try tabs("left"), rendering: rendering, now: 200)
+        model.select("right", now: 200, ttl: 10)
+        model.apply(try tabs("left"), rendering: rendering, now: 211)
+        XCTAssertEqual(model.selection, "left", "an expired selection rolls back to Web state")
+        model.select("right", now: 220, ttl: 10)
+        model.apply(try tabs("left", includeRight: false), rendering: rendering, now: 221)
+        XCTAssertEqual(model.selection, "left", "a removed target rolls back immediately")
+    }
+
     @MainActor func testSegmentSelectionEchoPreservesNativeViewsAndActionsUseUpdatedItems() throws {
         guard #available(iOS 26.0, *) else { return }
         func node(_ items: [JSObject]) throws -> ShellControl {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.2.0-0",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -16,6 +16,10 @@
     "./native": {
       "types": "./dist/native/index.d.ts",
       "import": "./dist/native/index.js"
+    },
+    "./vertical-bars": {
+      "types": "./dist/vertical-bars.d.ts",
+      "import": "./dist/vertical-bars.js"
     }
   },
   "files": [
@@ -31,7 +35,7 @@
     "prebuild:css": "rdlabo-copy-structured-list src/styles/utils/structured-list.scss",
     "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
     "build:ts": "tsc",
-    "docgen": "docgen --project tsconfig.docgen.json --api NativeUIShellHandle --output-readme docs/native-ui-shell.md",
+    "docgen": "docgen --project tsconfig.docgen.json --api NativeUIShellHandle --output-readme docs/native-ui-shell.md && docgen --project tsconfig.docgen.json --api VerticalControlAreaHandle --output-readme docs/iphone-duo.md",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
     "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",

package/src/index.ts

@@ -14,23 +14,30 @@ export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffe
   const win = targetElement.ownerDocument.defaultView;
   if (!targetElement.classList.contains('ios') || !win) return undefined;
   const reducedMotion = win.matchMedia('(prefers-reduced-motion: reduce)');
+  const verticalBarsRoot = targetElement.closest('ion-app');
   let effect: registeredEffect | undefined;
   const update = () => {
     effect?.destroy();
-    effect = reducedMotion.matches
-      ? undefined
-      : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
-          small: 'scale(1.1, 1)',
-          medium: 'scale(1.2)',
-          large: 'scale(1.15, 1.4)',
-          xlarge: 'scale(1.3)',
-        });
+    const isVertical =
+      !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') && !targetElement.closest('ion-menu, ion-modal, ion-popover');
+    effect =
+      reducedMotion.matches || isVertical
+        ? undefined
+        : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+            small: 'scale(1.1, 1)',
+            medium: 'scale(1.2)',
+            large: 'scale(1.15, 1.4)',
+            xlarge: 'scale(1.3)',
+          });
   };
   update();
   reducedMotion.addEventListener('change', update);
+  const placementObserver = new win.MutationObserver(update);
+  if (verticalBarsRoot) placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'] });
   return {
     destroy: () => {
       reducedMotion.removeEventListener('change', update);
+      placementObserver.disconnect();
       effect?.destroy();
       effect = undefined;
     },

package/src/native/components/index.ts

@@ -5,7 +5,7 @@ import * as menuButton from './ion-menu-button';
 import * as tabBar from './ion-tab-bar';
 import * as segment from './ion-segment';
 import * as fab from './ion-fab';
-import { visible } from '../shared/dom';
+import { isDisabledButtonGroupChild, isVerticalBarsSource, visible } from '../shared/dom';
 import type { Candidate, Identify } from '../shared/candidate';
 
 // Static composition only. Each component declares its own tag, discovery and reader.
@@ -27,10 +27,19 @@ export const motionSelector = [
   ...components.filter((component) => 'tracksMotion' in component && component.tracksMotion).map((component) => component.tag),
 ].join(', ');
 
+export const isVerticalBarsCandidate = isVerticalBarsSource;
+
 export const readCandidate = (element: HTMLElement, id: Identify): Candidate | undefined => {
-  if (!element.classList.contains('ios') || !visible(element) || element.closest('ion-modal, ion-popover')) return;
+  const verticalBars = isVerticalBarsCandidate(element);
+  if ((!element.classList.contains('ios') && !verticalBars) || !visible(element, verticalBars) || element.closest('ion-modal, ion-popover'))
+    return;
   const style = getComputedStyle(element);
-  if (!style.getPropertyValue('--ios-theme-glass-background-rgb').trim() && !style.getPropertyValue('--ios26-glass-background-rgb').trim())
+  if (
+    !isDisabledButtonGroupChild(element) &&
+    !style.getPropertyValue('--ios-theme-glass-background-rgb').trim() &&
+    !style.getPropertyValue('--ios26-glass-background-rgb').trim() &&
+    !verticalBars
+  )
     return;
   if (element.contains(element.ownerDocument.activeElement)) return;
   return components.find((component) => component.tag === element.localName)?.read(element, id);

package/src/native/components/ion-back-button.ts

@@ -1,12 +1,18 @@
 import { createCandidate, appendItem } from '../shared/candidate';
 import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { inFixedToolbar, isVerticalBarsSource } from '../shared/dom';
 
 export const tag = 'ion-back-button';
 
 export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
   const button = element as HTMLIonBackButtonElement;
-  if (!inFixedToolbar(element) || button.icon !== undefined || button.color !== undefined || !button.shadowRoot) return;
+  if (
+    !button.shadowRoot ||
+    button.icon !== undefined ||
+    button.color !== undefined ||
+    (!isVerticalBarsSource(element) && !inFixedToolbar(element))
+  )
+    return;
   const candidate = createCandidate(element, tag, id);
   const label = button.shadowRoot.querySelector('[part="text"]')?.textContent?.trim() ?? '';
   return appendItem(candidate, element, id, button.shadowRoot, label) ? candidate : undefined;

package/src/native/components/ion-button.ts

@@ -1,12 +1,22 @@
 import { createCandidate, appendItem } from '../shared/candidate';
 import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
 
 export const tag = 'ion-button';
 
 export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
   const button = element as HTMLIonButtonElement;
-  if (!inFixedToolbar(element) || button.fill !== 'default' || button.classList.contains('ion-color')) return;
+  const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+  if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement)) return;
+  const fill = button.fill ?? 'default';
+  if (
+    !inFixedToolbar(element) ||
+    (verticalBars && !isVerticalBarsToolbarAction(element)) ||
+    (!verticalBars && fill !== 'default') ||
+    (verticalBars && !['default', 'clear'].includes(fill)) ||
+    button.classList.contains('ion-color')
+  )
+    return;
   const candidate = createCandidate(element, tag, id);
   return appendItem(candidate, element, id) ? candidate : undefined;
 };

package/src/native/components/ion-buttons.ts

@@ -1,6 +1,6 @@
 import { createCandidate, appendItem } from '../shared/candidate';
 import type { Candidate, Identify } from '../shared/candidate';
-import { inFixedToolbar } from '../shared/dom';
+import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom';
 import * as menuButton from './ion-menu-button';
 
 export const tag = 'ion-buttons';
@@ -8,18 +8,23 @@ export const tracksMotion = true;
 
 export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
   if (!inFixedToolbar(element)) return;
-  const children = Array.from(element.children) as HTMLElement[];
+  let children = childElements(element);
   if (children.length === 1) return menuButton.read(element, id);
+  const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+  if (verticalBars && !isVerticalBarsToolbarGroup(element)) return;
+  if (verticalBars) children = verticalBarsToolbarActions(element);
   if (
     !children.length ||
     children.some(
       (child) =>
-        !child.matches(`${menuButton.tag}.ios`) &&
-        (!child.matches('ion-button.ios.button-clear') || (child as HTMLIonButtonElement).fill !== 'clear'),
+        !child.matches(`${menuButton.tag}${verticalBars ? '' : '.ios'}`) &&
+        (!child.matches(`ion-button${verticalBars ? '' : '.ios.button-clear'}`) ||
+          !(verticalBars ? ['default', 'clear'] : ['clear']).includes((child as HTMLIonButtonElement).fill ?? 'default')),
     )
   )
     return;
   const candidate = createCandidate(element, tag, id);
+  if (verticalBars && children.length !== childElements(element).length) candidate.sources = children;
   for (const child of children) {
     const supported = child.matches(menuButton.tag)
       ? menuButton.append(candidate, child as HTMLIonMenuButtonElement, id)