@capgo/capacitor-native-navigation 8.2.9 → 8.3.0

package/README.md

@@ -791,34 +791,35 @@ Native tabbar state.
 
 A native tab item.
 
-| Prop               | Type                                                                  | Description                                                                                                                                               |
-| ------------------ | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`id`**           | <code>string</code>                                                   | Stable tab id returned in `tabSelect`.                                                                                                                    |
-| **`title`**        | <code>string</code>                                                   | Visible tab label.                                                                                                                                        |
-| **`icon`**         | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Native icon descriptor.                                                                                                                                   |
-| **`selectedIcon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code> | Optional selected-state icon.                                                                                                                             |
-| **`badge`**        | <code>string \| number</code>                                         | Optional badge. Numeric badges are supported on both platforms; text badge support depends on platform capabilities.                                      |
-| **`enabled`**      | <code>boolean</code>                                                  | Whether the tab is enabled. Defaults to `true`.                                                                                                           |
-| **`hidden`**       | <code>boolean</code>                                                  | Hide the tab item from the native tabbar. When the hidden tab is selected, native platform constraints may keep it visible until another tab is selected. |
+| Prop               | Type                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **`id`**           | <code>string</code>                                                         | Stable tab id returned in `tabSelect`.                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| **`title`**        | <code>string</code>                                                         | Visible tab label.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| **`icon`**         | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code>       | Native icon descriptor.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| **`selectedIcon`** | <code><a href="#nativenavigationicon">NativeNavigationIcon</a></code>       | Optional selected-state icon.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **`badge`**        | <code>string \| number</code>                                               | Optional badge. Numeric badges are supported on both platforms; text badge support depends on platform capabilities.                                                                                                                                                                                                                                                                                                                                                           |
+| **`enabled`**      | <code>boolean</code>                                                        | Whether the tab is enabled. Defaults to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| **`hidden`**       | <code>boolean</code>                                                        | Hide the tab item from the native tabbar. When the hidden tab is selected, native platform constraints may keep it visible until another tab is selected.                                                                                                                                                                                                                                                                                                                      |
+| **`role`**         | <code><a href="#nativenavigationtabrole">NativeNavigationTabRole</a></code> | Optional tab role. On floating tabbars, `search` (or `prominent` when available) becomes a detached trailing circular action beside the capsule — including the iOS 26+ system Liquid Glass tab bar, Android floating layout, and the custom floating capsule path. Only one detached trailing role is used; if multiple tabs set `search` or `prominent`, the last one wins. Curve-shaped bars ignore `role` and keep using the included center action. Defaults to `normal`. |
 
 
 #### NativeNavigationTabbarStyle
 
 Native tabbar layout and background shape options.
 
-| Prop                        | Type                                                                                | Description                                                                                                                            |
-| --------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| **`shape`**                 | <code><a href="#nativenavigationtabbarshape">NativeNavigationTabbarShape</a></code> | `floating` keeps the existing capsule tabbar. `curve` draws a full-width bar with an included center action.                           |
-| **`height`**                | <code>number</code>                                                                 | Bar height in native points/dp. Defaults to `64` for `floating` and `76` for `curve`.                                                  |
-| **`horizontalMargin`**      | <code>number</code>                                                                 | Horizontal margin in native points/dp. Defaults to `24` for `floating` and `0` for `curve`.                                            |
-| **`maxWidth`**              | <code>number</code>                                                                 | Maximum tabbar width in native points/dp. Defaults to `430` for `floating`; `curve` uses the available width unless this is set.       |
-| **`bottomGap`**             | <code>number</code>                                                                 | Bottom gap above the platform safe area in native points/dp. Defaults to `10` for `floating` and `0` for `curve`.                      |
-| **`cornerRadius`**          | <code>number</code>                                                                 | Background corner radius in native points/dp. Defaults to a capsule radius for `floating` and `0` for `curve`.                         |
-| **`centerItemId`**          | <code>string</code>                                                                 | Tab id promoted into the included center button for `curve`. Defaults to the middle tab.                                               |
-| **`centerButtonDiameter`**  | <code>number</code>                                                                 | Included center button diameter in native points/dp. Defaults to `56`.                                                                 |
-| **`centerButtonLift`**      | <code>number</code>                                                                 | Distance from the top of the center button to the top edge of the bar in native points/dp. Defaults to half of `centerButtonDiameter`. |
-| **`centerButtonColor`**     | <code>string</code>                                                                 | Included center button color. Defaults to the active tint color.                                                                       |
-| **`centerButtonIconColor`** | <code>string</code>                                                                 | Included center button icon color. Defaults to white.                                                                                  |
+| Prop                        | Type                                                                                | Description                                                                                                                                                                                                                                                                                                                      |
+| --------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`shape`**                 | <code><a href="#nativenavigationtabbarshape">NativeNavigationTabbarShape</a></code> | `floating` keeps the capsule tabbar. On iOS 26+ this uses the system-owned Liquid Glass `UITabBarController` unless a custom capsule path is required; earlier iOS and the custom capsule path use `UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve` draws a full-width bar with an included center action. |
+| **`height`**                | <code>number</code>                                                                 | Bar height in native points/dp. Defaults to `64` for `floating` and `76` for `curve`.                                                                                                                                                                                                                                            |
+| **`horizontalMargin`**      | <code>number</code>                                                                 | Horizontal margin in native points/dp. Defaults to `24` for `floating` and `0` for `curve`.                                                                                                                                                                                                                                      |
+| **`maxWidth`**              | <code>number</code>                                                                 | Maximum tabbar width in native points/dp. Defaults to `430` for `floating`; `curve` uses the available width unless this is set.                                                                                                                                                                                                 |
+| **`bottomGap`**             | <code>number</code>                                                                 | Bottom gap above the platform safe area in native points/dp. Defaults to `10` for `floating` and `0` for `curve`.                                                                                                                                                                                                                |
+| **`cornerRadius`**          | <code>number</code>                                                                 | Background corner radius in native points/dp. Defaults to a capsule radius for `floating` and `0` for `curve`.                                                                                                                                                                                                                   |
+| **`centerItemId`**          | <code>string</code>                                                                 | Tab id promoted into the included center button for `curve`. Defaults to the middle tab.                                                                                                                                                                                                                                         |
+| **`centerButtonDiameter`**  | <code>number</code>                                                                 | Included center button diameter in native points/dp. Defaults to `56`.                                                                                                                                                                                                                                                           |
+| **`centerButtonLift`**      | <code>number</code>                                                                 | Distance from the top of the center button to the top edge of the bar in native points/dp. Defaults to half of `centerButtonDiameter`.                                                                                                                                                                                           |
+| **`centerButtonColor`**     | <code>string</code>                                                                 | Included center button color. Defaults to the active tint color.                                                                                                                                                                                                                                                                 |
+| **`centerButtonIconColor`** | <code>string</code>                                                                 | Included center button icon color. Defaults to white.                                                                                                                                                                                                                                                                            |
 
 
 #### NativeNavigationTransitionResult
@@ -960,6 +961,19 @@ Native material/blur effect preference.
 <code>'none' | 'systemDefault' | 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark'</code>
 
 
+#### NativeNavigationTabRole
+
+Native tab role for Liquid Glass tab bars.
+
+`search` (and `prominent` when the OS supports it) renders as a detached
+trailing circular action beside the floating tab capsule — the Apple News /
+Photos pattern. Only one detached trailing role is used; if multiple tabs
+set `search` or `prominent`, the last one wins. Curve-shaped bars ignore
+`role` and keep using the included center action instead.
+
+<code>'normal' | 'search' | 'prominent'</code>
+
+
 #### NativeNavigationTabLabelVisibilityMode
 
 Native tab label visibility behavior.

package/android/src/main/java/app/capgo/nativenavigation/NativeNavigationPlugin.java

@@ -256,14 +256,39 @@ public class NativeNavigationPlugin extends Plugin {
                     continue;
                 }
 
-                int visibleIndex = tabItems.size();
                 String title = tab.optString("title", "");
                 Drawable icon = icons ? iconFrom(tab.optJSONObject("icon")) : new ColorDrawable(Color.TRANSPARENT);
                 Drawable selectedIcon = icons ? iconFrom(tab.optJSONObject("selectedIcon")) : null;
                 String badge = tab.has("badge") ? String.valueOf(tab.opt("badge")) : null;
-                tabItems.add(new NativeTabItem(id, title, icon, selectedIcon, badge, tab.optBoolean("enabled", true), sourceIndex));
-                if (id.equals(selectedId)) {
-                    selectedTabIndex = visibleIndex;
+                String role = tab.optString("role", "normal");
+                boolean detachedTrailing = "search".equalsIgnoreCase(role) || "prominent".equalsIgnoreCase(role);
+                tabItems.add(
+                    new NativeTabItem(id, title, icon, selectedIcon, badge, tab.optBoolean("enabled", true), detachedTrailing, sourceIndex)
+                );
+            }
+
+            applyTabbarColors(call, colors);
+            tabbarStyle = makeTabbarStyle(call.getObject("style", new JSObject()));
+
+            // Keep at most one detached trailing action for floating bars.
+            // Curve bars ignore role so tab order / center selection stay stable.
+            if (!tabbarStyle.isCurve()) {
+                NativeTabItem trailingItem = null;
+                for (int index = tabItems.size() - 1; index >= 0; index--) {
+                    if (tabItems.get(index).detachedTrailing) {
+                        trailingItem = tabItems.remove(index);
+                        break;
+                    }
+                }
+                if (trailingItem != null) {
+                    tabItems.removeIf((item) -> item.detachedTrailing);
+                    tabItems.add(trailingItem);
+                }
+            }
+            for (int index = 0; index < tabItems.size(); index++) {
+                if (tabItems.get(index).id.equals(selectedId)) {
+                    selectedTabIndex = index;
+                    break;
                 }
             }
 
@@ -283,8 +308,6 @@ public class NativeNavigationPlugin extends Plugin {
                 selectedTabIndex = 0;
             }
 
-            applyTabbarColors(call, colors);
-            tabbarStyle = makeTabbarStyle(call.getObject("style", new JSObject()));
             applyTabbarBackground(centerTabIndex());
             renderTabbarItems(labelVisibilityMode, icons);
             if (tabbarContainer != null) {
@@ -713,8 +736,14 @@ public class NativeNavigationPlugin extends Plugin {
             final int itemIndex = index;
             NativeTabItem item = tabItems.get(index);
             boolean selected = itemIndex == selectedTabIndex;
-            boolean showLabel = shouldShowTabLabel(labelVisibilityMode, selected);
+            boolean detachedTrailing = item.detachedTrailing && !tabbarStyle.isCurve();
+            boolean showLabel = detachedTrailing
+                ? !icons && shouldShowTabLabel(labelVisibilityMode, selected)
+                : shouldShowTabLabel(labelVisibilityMode, selected);
             FrameLayout button = makeTabButton(item, selected, showLabel, icons, itemIndex == centerIndex);
+            if (detachedTrailing) {
+                button.setTag("detachedTrailing");
+            }
             button.setSelected(selected);
             button.setEnabled(item.enabled);
             button.setAlpha(item.enabled ? 1f : 0.38f);
@@ -984,15 +1013,26 @@ public class NativeNavigationPlugin extends Plugin {
         final Drawable selectedIcon;
         final String badge;
         final boolean enabled;
+        final boolean detachedTrailing;
         final int sourceIndex;
 
-        NativeTabItem(String id, String title, Drawable icon, Drawable selectedIcon, String badge, boolean enabled, int sourceIndex) {
+        NativeTabItem(
+            String id,
+            String title,
+            Drawable icon,
+            Drawable selectedIcon,
+            String badge,
+            boolean enabled,
+            boolean detachedTrailing,
+            int sourceIndex
+        ) {
             this.id = id;
             this.title = title;
             this.icon = icon;
             this.selectedIcon = selectedIcon;
             this.badge = badge;
             this.enabled = enabled;
+            this.detachedTrailing = detachedTrailing;
             this.sourceIndex = sourceIndex;
         }
     }
@@ -1098,6 +1138,17 @@ public class NativeNavigationPlugin extends Plugin {
                 return;
             }
 
+            int trailingIndex = detachedTrailingIndex();
+            if (trailingIndex >= 0) {
+                int trailingDiameter = dp(style.height);
+                int capsuleWidth = Math.max(0, width - trailingDiameter - dp(10));
+                measureRange(0, trailingIndex, capsuleWidth, height);
+                measureChildExact(getChildAt(trailingIndex), trailingDiameter, trailingDiameter);
+                measureRange(trailingIndex + 1, getChildCount(), 0, height);
+                setMeasuredDimension(width, height);
+                return;
+            }
+
             int count = Math.max(getChildCount(), 1);
             int childWidth = width / count;
             for (int index = 0; index < getChildCount(); index++) {
@@ -1125,6 +1176,17 @@ public class NativeNavigationPlugin extends Plugin {
                 return;
             }
 
+            int trailingIndex = detachedTrailingIndex();
+            if (trailingIndex >= 0) {
+                int trailingDiameter = dp(style.height);
+                int capsuleWidth = Math.max(0, width - trailingDiameter - dp(10));
+                View trailing = getChildAt(trailingIndex);
+                int trailingTop = Math.max(0, (height - trailingDiameter) / 2);
+                trailing.layout(width - trailingDiameter, trailingTop, width, trailingTop + trailingDiameter);
+                layoutRange(0, trailingIndex, 0, 0, capsuleWidth, height);
+                return;
+            }
+
             layoutRange(0, getChildCount(), 0, 0, width, height);
         }
 
@@ -1132,6 +1194,27 @@ public class NativeNavigationPlugin extends Plugin {
             return style.isCurve() && centerIndex >= 0 && centerIndex < getChildCount();
         }
 
+        private int detachedTrailingIndex() {
+            if (style.isCurve()) {
+                return -1;
+            }
+            for (int index = 0; index < getChildCount(); index++) {
+                Object tag = getChildAt(index).getTag();
+                if ("detachedTrailing".equals(tag)) {
+                    return index;
+                }
+            }
+            return -1;
+        }
+
+        private int capsuleWidth(int width) {
+            int trailingIndex = detachedTrailingIndex();
+            if (trailingIndex < 0) {
+                return width;
+            }
+            return Math.max(0, width - dp(style.height) - dp(10));
+        }
+
         private void measureRange(int start, int end, int width, int height) {
             int count = Math.max(0, end - start);
             if (count == 0) {
@@ -1166,7 +1249,20 @@ public class NativeNavigationPlugin extends Plugin {
             Path path = new Path();
             if (!style.isCurve()) {
                 float radius = dp(style.cornerRadius);
-                path.addRoundRect(new RectF(0, 0, width, height), radius, radius, Path.Direction.CW);
+                int capsuleWidth = capsuleWidth(width);
+                path.addRoundRect(new RectF(0, 0, capsuleWidth, height), radius, radius, Path.Direction.CW);
+                int trailingIndex = detachedTrailingIndex();
+                if (trailingIndex >= 0) {
+                    float diameter = dp(style.height);
+                    float left = width - diameter;
+                    float top = (height - diameter) / 2f;
+                    path.addRoundRect(
+                        new RectF(left, top, left + diameter, top + diameter),
+                        diameter / 2f,
+                        diameter / 2f,
+                        Path.Direction.CW
+                    );
+                }
                 return path;
             }
             float barTop = dp(style.barTop());
@@ -1707,7 +1803,9 @@ public class NativeNavigationPlugin extends Plugin {
             int rootWidth = root.getWidth() > 0 ? root.getWidth() : Resources.getSystem().getDisplayMetrics().widthPixels;
             int availableWidth = Math.max(0, rootWidth - dp(tabbarStyle.horizontalMargin) * 2);
             int maxWidth = tabbarStyle.maxWidth > 0 ? dp(tabbarStyle.maxWidth) : availableWidth;
-            int tabbarWidth = Math.min(availableWidth, maxWidth);
+            boolean hasDetachedTrailing = !tabbarStyle.isCurve() && tabItems.stream().anyMatch((item) -> item.detachedTrailing);
+            int trailingExtra = hasDetachedTrailing ? dp(tabbarStyle.height) + dp(10) : 0;
+            int tabbarWidth = Math.min(availableWidth, maxWidth + trailingExtra);
             FrameLayout.LayoutParams tabbarContainerParams = new FrameLayout.LayoutParams(
                 tabbarWidth,
                 tabbarHeight,

package/dist/docs.json

@@ -923,6 +923,15 @@
           "docs": "Hide the tab item from the native tabbar. When the hidden tab is selected,\nnative platform constraints may keep it visible until another tab is\nselected.",
           "complexTypes": [],
           "type": "boolean | undefined"
+        },
+        {
+          "name": "role",
+          "tags": [],
+          "docs": "Optional tab role. On floating tabbars, `search` (or `prominent` when\navailable) becomes a detached trailing circular action beside the capsule\n— including the iOS 26+ system Liquid Glass tab bar, Android floating\nlayout, and the custom floating capsule path. Only one detached trailing\nrole is used; if multiple tabs set `search` or `prominent`, the last one\nwins. Curve-shaped bars ignore `role` and keep using the included center\naction. Defaults to `normal`.",
+          "complexTypes": [
+            "NativeNavigationTabRole"
+          ],
+          "type": "NativeNavigationTabRole"
         }
       ]
     },
@@ -936,7 +945,7 @@
         {
           "name": "shape",
           "tags": [],
-          "docs": "`floating` keeps the existing capsule tabbar. `curve` draws a full-width\nbar with an included center action.",
+          "docs": "`floating` keeps the capsule tabbar. On iOS 26+ this uses the\nsystem-owned Liquid Glass `UITabBarController` unless a custom capsule\npath is required; earlier iOS and the custom capsule path use\n`UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve`\ndraws a full-width bar with an included center action.",
           "complexTypes": [
             "NativeNavigationTabbarShape"
           ],
@@ -1502,6 +1511,25 @@
         }
       ]
     },
+    {
+      "name": "NativeNavigationTabRole",
+      "slug": "nativenavigationtabrole",
+      "docs": "Native tab role for Liquid Glass tab bars.\n\n`search` (and `prominent` when the OS supports it) renders as a detached\ntrailing circular action beside the floating tab capsule — the Apple News /\nPhotos pattern. Only one detached trailing role is used; if multiple tabs\nset `search` or `prominent`, the last one wins. Curve-shaped bars ignore\n`role` and keep using the included center action instead.",
+      "types": [
+        {
+          "text": "'normal'",
+          "complexTypes": []
+        },
+        {
+          "text": "'search'",
+          "complexTypes": []
+        },
+        {
+          "text": "'prominent'",
+          "complexTypes": []
+        }
+      ]
+    },
     {
       "name": "NativeNavigationTabLabelVisibilityMode",
       "slug": "nativenavigationtablabelvisibilitymode",

package/dist/esm/definitions.d.ts

@@ -56,6 +56,16 @@ export interface NativeNavigationRect {
  * Native tabbar background shape.
  */
 export type NativeNavigationTabbarShape = 'floating' | 'curve';
+/**
+ * Native tab role for Liquid Glass tab bars.
+ *
+ * `search` (and `prominent` when the OS supports it) renders as a detached
+ * trailing circular action beside the floating tab capsule — the Apple News /
+ * Photos pattern. Only one detached trailing role is used; if multiple tabs
+ * set `search` or `prominent`, the last one wins. Curve-shaped bars ignore
+ * `role` and keep using the included center action instead.
+ */
+export type NativeNavigationTabRole = 'normal' | 'search' | 'prominent';
 /**
  * A serializable icon descriptor. Framework nodes are intentionally not accepted
  * because icons are rendered by native UI.
@@ -317,14 +327,27 @@ export interface NativeNavigationTab {
      * selected.
      */
     hidden?: boolean;
+    /**
+     * Optional tab role. On floating tabbars, `search` (or `prominent` when
+     * available) becomes a detached trailing circular action beside the capsule
+     * — including the iOS 26+ system Liquid Glass tab bar, Android floating
+     * layout, and the custom floating capsule path. Only one detached trailing
+     * role is used; if multiple tabs set `search` or `prominent`, the last one
+     * wins. Curve-shaped bars ignore `role` and keep using the included center
+     * action. Defaults to `normal`.
+     */
+    role?: NativeNavigationTabRole;
 }
 /**
  * Native tabbar layout and background shape options.
  */
 export interface NativeNavigationTabbarStyle {
     /**
-     * `floating` keeps the existing capsule tabbar. `curve` draws a full-width
-     * bar with an included center action.
+     * `floating` keeps the capsule tabbar. On iOS 26+ this uses the
+     * system-owned Liquid Glass `UITabBarController` unless a custom capsule
+     * path is required; earlier iOS and the custom capsule path use
+     * `UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve`
+     * draws a full-width bar with an included center action.
      */
     shape?: NativeNavigationTabbarShape;
     /**

package/dist/esm/definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"","sourcesContent":["import type { PluginListenerHandle } from '@capacitor/core';\n\n/**\n * Platform rendering preference for the native bars.\n */\nexport type NativeNavigationPlatformStyle = 'auto' | 'ios' | 'android';\n\n/**\n * How the plugin exposes native bar sizes to web content.\n */\nexport type NativeNavigationContentInsetMode = 'css' | 'none';\n\n/**\n * Navigation animation direction.\n */\nexport type NativeNavigationTransitionDirection = 'forward' | 'back' | 'root' | 'tab' | 'zoom' | 'none';\n\n/**\n * Native material/blur effect preference.\n */\nexport type NativeNavigationBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial'\n  | 'systemUltraThinMaterialLight'\n  | 'systemThinMaterialLight'\n  | 'systemMaterialLight'\n  | 'systemThickMaterialLight'\n  | 'systemChromeMaterialLight'\n  | 'systemUltraThinMaterialDark'\n  | 'systemThinMaterialDark'\n  | 'systemMaterialDark'\n  | 'systemThickMaterialDark'\n  | 'systemChromeMaterialDark';\n\n/**\n * Native glass background rendering preference.\n */\nexport type NativeNavigationGlassEffect = 'none' | 'liquidGlass';\n\n/**\n * Native glass background configuration.\n */\nexport interface NativeNavigationGlassOptions {\n  /**\n   * `liquidGlass` enables the Android 12+ live blurred WebView backdrop for\n   * native bars. Android 11 and older keep a translucent surface fallback. iOS\n   * uses the platform-owned Liquid Glass behavior.\n   */\n  effect?: NativeNavigationGlassEffect;\n\n  /**\n   * Android blur radius in native dp for `liquidGlass`. Defaults to `18`.\n   */\n  blurRadius?: number;\n\n  /**\n   * Alpha multiplier for the tint surface over the glass backdrop. Defaults to\n   * `0.62`.\n   */\n  surfaceAlpha?: number;\n}\n\n/**\n * Native tab label visibility behavior.\n */\nexport type NativeNavigationTabLabelVisibilityMode = 'auto' | 'selected' | 'labeled' | 'unlabeled';\n\n/**\n * A rectangle in WebView viewport coordinates, expressed in native points/dp.\n */\nexport interface NativeNavigationRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Native tabbar background shape.\n */\nexport type NativeNavigationTabbarShape = 'floating' | 'curve';\n\n/**\n * A serializable icon descriptor. Framework nodes are intentionally not accepted\n * because icons are rendered by native UI.\n */\nexport interface NativeNavigationIcon {\n  /**\n   * Cross-platform asset path or URL fallback.\n   */\n  src?: string;\n\n  /**\n   * Cross-platform inline SVG markup. The native renderers support common icon\n   * shapes such as path, line, polyline, polygon, circle, and rect. SVG icons\n   * are rendered as template images by default so native tint colors still\n   * apply.\n   */\n  svg?: string;\n\n  /**\n   * Preferred rendered icon width in native points/dp. Defaults to `24`.\n   */\n  width?: number;\n\n  /**\n   * Preferred rendered icon height in native points/dp. Defaults to `24`.\n   */\n  height?: number;\n\n  /**\n   * When `true`, native tint colors are applied to the rendered SVG/image.\n   * Defaults to `true`.\n   */\n  template?: boolean;\n\n  /**\n   * iOS-specific SF Symbol, bundled image name, or inline SVG.\n   */\n  ios?: {\n    /**\n     * SF Symbol name, for example `house.fill`.\n     */\n    sfSymbol?: string;\n\n    /**\n     * Bundled image name from the app asset catalog.\n     */\n    image?: string;\n\n    /**\n     * iOS-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n\n  /**\n   * Android-specific drawable resource, asset name, or inline SVG.\n   */\n  android?: {\n    /**\n     * Drawable resource name without the `R.drawable.` prefix.\n     */\n    resource?: string;\n\n    /**\n     * Bundled image asset name.\n     */\n    image?: string;\n\n    /**\n     * Android-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n}\n\n/**\n * Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).\n */\nexport interface NativeNavigationColors {\n  /**\n   * When `true`, Android 12+ derives unspecified bar colors from Material You\n   * system palettes. Explicit color fields still win.\n   */\n  dynamic?: boolean;\n\n  /**\n   * Tint color for active buttons/items.\n   */\n  tint?: string;\n\n  /**\n   * Color for inactive tab items. Ignored on iOS 26+ unless\n   * `experimentalBakedTintColors` is enabled.\n   */\n  inactiveTint?: string;\n\n  /**\n   * Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\n   * system Liquid Glass navigation appearance.\n   */\n  background?: string;\n\n  /**\n   * Title and label text color where the native platform supports it.\n   */\n  foreground?: string;\n\n  /**\n   * Badge background color for native tab badges.\n   */\n  badgeBackground?: string;\n\n  /**\n   * Badge text color for native tab badges.\n   */\n  badgeText?: string;\n\n  /**\n   * Active tab indicator color on Android.\n   */\n  indicator?: string;\n\n  /**\n   * Tab press ripple color on Android.\n   */\n  ripple?: string;\n}\n\n/**\n * Global plugin configuration.\n */\nexport interface NativeNavigationConfigureOptions {\n  /**\n   * Enables or disables the native chrome host.\n   */\n  enabled?: boolean;\n\n  /**\n   * Native style preference. `auto` uses the current platform.\n   */\n  platformStyle?: NativeNavigationPlatformStyle;\n\n  /**\n   * When `css`, the plugin writes CSS variables on `document.documentElement`.\n   */\n  contentInsetMode?: NativeNavigationContentInsetMode;\n\n  /**\n   * Default native transition duration in milliseconds.\n   */\n  animationDuration?: number;\n\n  /**\n   * Shared color hints for native bars.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Shared glass background defaults for native bars.\n   */\n  glass?: NativeNavigationGlassOptions;\n}\n\n/**\n * A button shown in the native navbar.\n */\nexport interface NativeNavigationBarButton {\n  /**\n   * Stable id returned in `navbarItemTap`.\n   */\n  id: string;\n\n  /**\n   * Visible text label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Whether the action is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Native back button configuration.\n */\nexport interface NativeNavigationBackButton {\n  /**\n   * Show the native back affordance.\n   */\n  visible?: boolean;\n\n  /**\n   * Optional back title.\n   */\n  title?: string;\n}\n\n/**\n * Native navbar state.\n */\nexport interface NativeNavigationNavbarOptions {\n  /**\n   * Hide the native navbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Main title.\n   */\n  title?: string;\n\n  /**\n   * Secondary title where supported by the platform.\n   */\n  subtitle?: string;\n\n  /**\n   * Prefer a large iOS title style.\n   */\n  large?: boolean;\n\n  /**\n   * Prefer transparent/scroll-edge style.\n   */\n  transparent?: boolean;\n\n  /**\n   * iOS blur/material effect for the navbar background when glass is not\n   * available. Defaults to `systemChromeMaterial` for transparent bars.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this navbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Back button state.\n   */\n  backButton?: NativeNavigationBackButton;\n\n  /**\n   * Left-side action buttons.\n   */\n  leftItems?: NativeNavigationBarButton[];\n\n  /**\n   * Right-side action buttons.\n   */\n  rightItems?: NativeNavigationBarButton[];\n\n  /**\n   * Navbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Animate native navbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * A native tab item.\n */\nexport interface NativeNavigationTab {\n  /**\n   * Stable tab id returned in `tabSelect`.\n   */\n  id: string;\n\n  /**\n   * Visible tab label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Optional selected-state icon.\n   */\n  selectedIcon?: NativeNavigationIcon;\n\n  /**\n   * Optional badge. Numeric badges are supported on both platforms; text badge\n   * support depends on platform capabilities.\n   */\n  badge?: string | number;\n\n  /**\n   * Whether the tab is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n\n  /**\n   * Hide the tab item from the native tabbar. When the hidden tab is selected,\n   * native platform constraints may keep it visible until another tab is\n   * selected.\n   */\n  hidden?: boolean;\n}\n\n/**\n * Native tabbar layout and background shape options.\n */\nexport interface NativeNavigationTabbarStyle {\n  /**\n   * `floating` keeps the existing capsule tabbar. `curve` draws a full-width\n   * bar with an included center action.\n   */\n  shape?: NativeNavigationTabbarShape;\n\n  /**\n   * Bar height in native points/dp. Defaults to `64` for `floating` and `76`\n   * for `curve`.\n   */\n  height?: number;\n\n  /**\n   * Horizontal margin in native points/dp. Defaults to `24` for `floating` and\n   * `0` for `curve`.\n   */\n  horizontalMargin?: number;\n\n  /**\n   * Maximum tabbar width in native points/dp. Defaults to `430` for `floating`;\n   * `curve` uses the available width unless this is set.\n   */\n  maxWidth?: number;\n\n  /**\n   * Bottom gap above the platform safe area in native points/dp. Defaults to\n   * `10` for `floating` and `0` for `curve`.\n   */\n  bottomGap?: number;\n\n  /**\n   * Background corner radius in native points/dp. Defaults to a capsule radius\n   * for `floating` and `0` for `curve`.\n   */\n  cornerRadius?: number;\n\n  /**\n   * Tab id promoted into the included center button for `curve`. Defaults to\n   * the middle tab.\n   */\n  centerItemId?: string;\n\n  /**\n   * Included center button diameter in native points/dp. Defaults to `56`.\n   */\n  centerButtonDiameter?: number;\n\n  /**\n   * Distance from the top of the center button to the top edge of the bar in\n   * native points/dp. Defaults to half of `centerButtonDiameter`.\n   */\n  centerButtonLift?: number;\n\n  /**\n   * Included center button color. Defaults to the active tint color.\n   */\n  centerButtonColor?: string;\n\n  /**\n   * Included center button icon color. Defaults to white.\n   */\n  centerButtonIconColor?: string;\n}\n\n/**\n * Native tabbar state.\n */\nexport interface NativeNavigationTabbarOptions {\n  /**\n   * Hide the native tabbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Tab definitions.\n   */\n  tabs?: NativeNavigationTab[];\n\n  /**\n   * Currently selected tab id.\n   */\n  selectedId?: string;\n\n  /**\n   * Show text labels. Defaults to `true`.\n   */\n  labels?: boolean;\n\n  /**\n   * Native label visibility mode. Overrides `labels` when provided.\n   */\n  labelVisibilityMode?: NativeNavigationTabLabelVisibilityMode;\n\n  /**\n   * Show icons. Defaults to `true`.\n   */\n  icons?: boolean;\n\n  /**\n   * Tabbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * iOS blur/material effect for the tabbar background when glass is not\n   * available.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this tabbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Opt into the iOS 26 Liquid Glass tint workaround that renders active and\n   * inactive tab items into baked images. This can affect badge positioning\n   * and icon sizing, so it is disabled by default.\n   */\n  experimentalBakedTintColors?: boolean;\n\n  /**\n   * Keep the iOS scroll-edge tabbar appearance from becoming transparent.\n   * Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.\n   * Defaults to `false`.\n   */\n  disableTransparentOnScrollEdge?: boolean;\n\n  /**\n   * Disable the Android active tab indicator.\n   */\n  disableIndicator?: boolean;\n\n  /**\n   * Active tab indicator color on Android. `colors.indicator` is also\n   * supported.\n   */\n  indicatorColor?: string;\n\n  /**\n   * Tab press ripple color on Android. `colors.ripple` is also supported.\n   */\n  rippleColor?: string;\n\n  /**\n   * Badge background color. `colors.badgeBackground` is also supported.\n   */\n  badgeBackgroundColor?: string;\n\n  /**\n   * Badge text color. `colors.badgeText` is also supported.\n   */\n  badgeTextColor?: string;\n\n  /**\n   * Optional native tabbar layout and shape customization.\n   */\n  style?: NativeNavigationTabbarStyle;\n\n  /**\n   * Animate native tabbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * Insets exposed to web content.\n */\nexport interface NativeNavigationInsets {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  navbarHeight: number;\n  tabbarHeight: number;\n}\n\n/**\n * Returned by methods that may change safe content bounds.\n */\nexport interface NativeNavigationInsetsResult {\n  insets: NativeNavigationInsets;\n}\n\n/**\n * Begin a native transition transaction before JS changes route content.\n */\nexport interface NativeNavigationBeginTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions. Use viewport coordinates such as\n   * those returned by `Element.getBoundingClientRect()`.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Finish a native transition transaction after JS has changed route content.\n */\nexport interface NativeNavigationFinishTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions when no active source was recorded.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Native transition result.\n */\nexport interface NativeNavigationTransitionResult {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Plugin version payload.\n */\nexport interface PluginVersionResult {\n  /**\n   * Version identifier returned by the platform implementation.\n   */\n  version: string;\n}\n\nexport interface NativeNavigationBackEvent {\n  source: 'navbar';\n}\n\nexport interface NativeNavigationBarItemTapEvent {\n  id: string;\n  title?: string;\n  placement: 'left' | 'right';\n}\n\nexport interface NativeNavigationTabSelectEvent {\n  id: string;\n  index: number;\n  title?: string;\n}\n\nexport interface NativeNavigationSafeAreaChangedEvent {\n  insets: NativeNavigationInsets;\n}\n\nexport interface NativeNavigationTransitionEvent {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Framework-agnostic native navigation chrome API.\n */\nexport interface NativeNavigationPlugin {\n  /**\n   * Configure the native chrome host and content inset behavior.\n   */\n  configure(options?: NativeNavigationConfigureOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native navbar.\n   */\n  setNavbar(options: NativeNavigationNavbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native tabbar.\n   */\n  setTabbar(options: NativeNavigationTabbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Capture the current WebView and prepare a native transition.\n   */\n  beginTransition(options?: NativeNavigationBeginTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Animate from the captured WebView snapshot to the current live WebView.\n   */\n  finishTransition(options?: NativeNavigationFinishTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Returns the platform implementation version marker.\n   */\n  getPluginVersion(): Promise<PluginVersionResult>;\n\n  addListener(\n    eventName: 'navbarBack',\n    listenerFunc: (event: NativeNavigationBackEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'navbarItemTap',\n    listenerFunc: (event: NativeNavigationBarItemTapEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'tabSelect',\n    listenerFunc: (event: NativeNavigationTabSelectEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'safeAreaChanged',\n    listenerFunc: (event: NativeNavigationSafeAreaChangedEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionStart',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionEnd',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n}\n"]}
+{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../src/definitions.ts"],"names":[],"mappings":"","sourcesContent":["import type { PluginListenerHandle } from '@capacitor/core';\n\n/**\n * Platform rendering preference for the native bars.\n */\nexport type NativeNavigationPlatformStyle = 'auto' | 'ios' | 'android';\n\n/**\n * How the plugin exposes native bar sizes to web content.\n */\nexport type NativeNavigationContentInsetMode = 'css' | 'none';\n\n/**\n * Navigation animation direction.\n */\nexport type NativeNavigationTransitionDirection = 'forward' | 'back' | 'root' | 'tab' | 'zoom' | 'none';\n\n/**\n * Native material/blur effect preference.\n */\nexport type NativeNavigationBlurEffect =\n  | 'none'\n  | 'systemDefault'\n  | 'extraLight'\n  | 'light'\n  | 'dark'\n  | 'regular'\n  | 'prominent'\n  | 'systemUltraThinMaterial'\n  | 'systemThinMaterial'\n  | 'systemMaterial'\n  | 'systemThickMaterial'\n  | 'systemChromeMaterial'\n  | 'systemUltraThinMaterialLight'\n  | 'systemThinMaterialLight'\n  | 'systemMaterialLight'\n  | 'systemThickMaterialLight'\n  | 'systemChromeMaterialLight'\n  | 'systemUltraThinMaterialDark'\n  | 'systemThinMaterialDark'\n  | 'systemMaterialDark'\n  | 'systemThickMaterialDark'\n  | 'systemChromeMaterialDark';\n\n/**\n * Native glass background rendering preference.\n */\nexport type NativeNavigationGlassEffect = 'none' | 'liquidGlass';\n\n/**\n * Native glass background configuration.\n */\nexport interface NativeNavigationGlassOptions {\n  /**\n   * `liquidGlass` enables the Android 12+ live blurred WebView backdrop for\n   * native bars. Android 11 and older keep a translucent surface fallback. iOS\n   * uses the platform-owned Liquid Glass behavior.\n   */\n  effect?: NativeNavigationGlassEffect;\n\n  /**\n   * Android blur radius in native dp for `liquidGlass`. Defaults to `18`.\n   */\n  blurRadius?: number;\n\n  /**\n   * Alpha multiplier for the tint surface over the glass backdrop. Defaults to\n   * `0.62`.\n   */\n  surfaceAlpha?: number;\n}\n\n/**\n * Native tab label visibility behavior.\n */\nexport type NativeNavigationTabLabelVisibilityMode = 'auto' | 'selected' | 'labeled' | 'unlabeled';\n\n/**\n * A rectangle in WebView viewport coordinates, expressed in native points/dp.\n */\nexport interface NativeNavigationRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Native tabbar background shape.\n */\nexport type NativeNavigationTabbarShape = 'floating' | 'curve';\n\n/**\n * Native tab role for Liquid Glass tab bars.\n *\n * `search` (and `prominent` when the OS supports it) renders as a detached\n * trailing circular action beside the floating tab capsule — the Apple News /\n * Photos pattern. Only one detached trailing role is used; if multiple tabs\n * set `search` or `prominent`, the last one wins. Curve-shaped bars ignore\n * `role` and keep using the included center action instead.\n */\nexport type NativeNavigationTabRole = 'normal' | 'search' | 'prominent';\n\n/**\n * A serializable icon descriptor. Framework nodes are intentionally not accepted\n * because icons are rendered by native UI.\n */\nexport interface NativeNavigationIcon {\n  /**\n   * Cross-platform asset path or URL fallback.\n   */\n  src?: string;\n\n  /**\n   * Cross-platform inline SVG markup. The native renderers support common icon\n   * shapes such as path, line, polyline, polygon, circle, and rect. SVG icons\n   * are rendered as template images by default so native tint colors still\n   * apply.\n   */\n  svg?: string;\n\n  /**\n   * Preferred rendered icon width in native points/dp. Defaults to `24`.\n   */\n  width?: number;\n\n  /**\n   * Preferred rendered icon height in native points/dp. Defaults to `24`.\n   */\n  height?: number;\n\n  /**\n   * When `true`, native tint colors are applied to the rendered SVG/image.\n   * Defaults to `true`.\n   */\n  template?: boolean;\n\n  /**\n   * iOS-specific SF Symbol, bundled image name, or inline SVG.\n   */\n  ios?: {\n    /**\n     * SF Symbol name, for example `house.fill`.\n     */\n    sfSymbol?: string;\n\n    /**\n     * Bundled image name from the app asset catalog.\n     */\n    image?: string;\n\n    /**\n     * iOS-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n\n  /**\n   * Android-specific drawable resource, asset name, or inline SVG.\n   */\n  android?: {\n    /**\n     * Drawable resource name without the `R.drawable.` prefix.\n     */\n    resource?: string;\n\n    /**\n     * Bundled image asset name.\n     */\n    image?: string;\n\n    /**\n     * Android-specific inline SVG markup.\n     */\n    svg?: string;\n  };\n}\n\n/**\n * Native bar colors. Use CSS-style hex strings (`#RRGGBB` or `#AARRGGBB`).\n */\nexport interface NativeNavigationColors {\n  /**\n   * When `true`, Android 12+ derives unspecified bar colors from Material You\n   * system palettes. Explicit color fields still win.\n   */\n  dynamic?: boolean;\n\n  /**\n   * Tint color for active buttons/items.\n   */\n  tint?: string;\n\n  /**\n   * Color for inactive tab items. Ignored on iOS 26+ unless\n   * `experimentalBakedTintColors` is enabled.\n   */\n  inactiveTint?: string;\n\n  /**\n   * Optional background tint. Ignored on iOS 26+ so UIKit can preserve the\n   * system Liquid Glass navigation appearance.\n   */\n  background?: string;\n\n  /**\n   * Title and label text color where the native platform supports it.\n   */\n  foreground?: string;\n\n  /**\n   * Badge background color for native tab badges.\n   */\n  badgeBackground?: string;\n\n  /**\n   * Badge text color for native tab badges.\n   */\n  badgeText?: string;\n\n  /**\n   * Active tab indicator color on Android.\n   */\n  indicator?: string;\n\n  /**\n   * Tab press ripple color on Android.\n   */\n  ripple?: string;\n}\n\n/**\n * Global plugin configuration.\n */\nexport interface NativeNavigationConfigureOptions {\n  /**\n   * Enables or disables the native chrome host.\n   */\n  enabled?: boolean;\n\n  /**\n   * Native style preference. `auto` uses the current platform.\n   */\n  platformStyle?: NativeNavigationPlatformStyle;\n\n  /**\n   * When `css`, the plugin writes CSS variables on `document.documentElement`.\n   */\n  contentInsetMode?: NativeNavigationContentInsetMode;\n\n  /**\n   * Default native transition duration in milliseconds.\n   */\n  animationDuration?: number;\n\n  /**\n   * Shared color hints for native bars.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Shared glass background defaults for native bars.\n   */\n  glass?: NativeNavigationGlassOptions;\n}\n\n/**\n * A button shown in the native navbar.\n */\nexport interface NativeNavigationBarButton {\n  /**\n   * Stable id returned in `navbarItemTap`.\n   */\n  id: string;\n\n  /**\n   * Visible text label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Whether the action is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Native back button configuration.\n */\nexport interface NativeNavigationBackButton {\n  /**\n   * Show the native back affordance.\n   */\n  visible?: boolean;\n\n  /**\n   * Optional back title.\n   */\n  title?: string;\n}\n\n/**\n * Native navbar state.\n */\nexport interface NativeNavigationNavbarOptions {\n  /**\n   * Hide the native navbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Main title.\n   */\n  title?: string;\n\n  /**\n   * Secondary title where supported by the platform.\n   */\n  subtitle?: string;\n\n  /**\n   * Prefer a large iOS title style.\n   */\n  large?: boolean;\n\n  /**\n   * Prefer transparent/scroll-edge style.\n   */\n  transparent?: boolean;\n\n  /**\n   * iOS blur/material effect for the navbar background when glass is not\n   * available. Defaults to `systemChromeMaterial` for transparent bars.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this navbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Back button state.\n   */\n  backButton?: NativeNavigationBackButton;\n\n  /**\n   * Left-side action buttons.\n   */\n  leftItems?: NativeNavigationBarButton[];\n\n  /**\n   * Right-side action buttons.\n   */\n  rightItems?: NativeNavigationBarButton[];\n\n  /**\n   * Navbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * Animate native navbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * A native tab item.\n */\nexport interface NativeNavigationTab {\n  /**\n   * Stable tab id returned in `tabSelect`.\n   */\n  id: string;\n\n  /**\n   * Visible tab label.\n   */\n  title?: string;\n\n  /**\n   * Native icon descriptor.\n   */\n  icon?: NativeNavigationIcon;\n\n  /**\n   * Optional selected-state icon.\n   */\n  selectedIcon?: NativeNavigationIcon;\n\n  /**\n   * Optional badge. Numeric badges are supported on both platforms; text badge\n   * support depends on platform capabilities.\n   */\n  badge?: string | number;\n\n  /**\n   * Whether the tab is enabled. Defaults to `true`.\n   */\n  enabled?: boolean;\n\n  /**\n   * Hide the tab item from the native tabbar. When the hidden tab is selected,\n   * native platform constraints may keep it visible until another tab is\n   * selected.\n   */\n  hidden?: boolean;\n\n  /**\n   * Optional tab role. On floating tabbars, `search` (or `prominent` when\n   * available) becomes a detached trailing circular action beside the capsule\n   * — including the iOS 26+ system Liquid Glass tab bar, Android floating\n   * layout, and the custom floating capsule path. Only one detached trailing\n   * role is used; if multiple tabs set `search` or `prominent`, the last one\n   * wins. Curve-shaped bars ignore `role` and keep using the included center\n   * action. Defaults to `normal`.\n   */\n  role?: NativeNavigationTabRole;\n}\n\n/**\n * Native tabbar layout and background shape options.\n */\nexport interface NativeNavigationTabbarStyle {\n  /**\n   * `floating` keeps the capsule tabbar. On iOS 26+ this uses the\n   * system-owned Liquid Glass `UITabBarController` unless a custom capsule\n   * path is required; earlier iOS and the custom capsule path use\n   * `UIGlassEffect` on iOS 26+ (blur material fallback otherwise). `curve`\n   * draws a full-width bar with an included center action.\n   */\n  shape?: NativeNavigationTabbarShape;\n\n  /**\n   * Bar height in native points/dp. Defaults to `64` for `floating` and `76`\n   * for `curve`.\n   */\n  height?: number;\n\n  /**\n   * Horizontal margin in native points/dp. Defaults to `24` for `floating` and\n   * `0` for `curve`.\n   */\n  horizontalMargin?: number;\n\n  /**\n   * Maximum tabbar width in native points/dp. Defaults to `430` for `floating`;\n   * `curve` uses the available width unless this is set.\n   */\n  maxWidth?: number;\n\n  /**\n   * Bottom gap above the platform safe area in native points/dp. Defaults to\n   * `10` for `floating` and `0` for `curve`.\n   */\n  bottomGap?: number;\n\n  /**\n   * Background corner radius in native points/dp. Defaults to a capsule radius\n   * for `floating` and `0` for `curve`.\n   */\n  cornerRadius?: number;\n\n  /**\n   * Tab id promoted into the included center button for `curve`. Defaults to\n   * the middle tab.\n   */\n  centerItemId?: string;\n\n  /**\n   * Included center button diameter in native points/dp. Defaults to `56`.\n   */\n  centerButtonDiameter?: number;\n\n  /**\n   * Distance from the top of the center button to the top edge of the bar in\n   * native points/dp. Defaults to half of `centerButtonDiameter`.\n   */\n  centerButtonLift?: number;\n\n  /**\n   * Included center button color. Defaults to the active tint color.\n   */\n  centerButtonColor?: string;\n\n  /**\n   * Included center button icon color. Defaults to white.\n   */\n  centerButtonIconColor?: string;\n}\n\n/**\n * Native tabbar state.\n */\nexport interface NativeNavigationTabbarOptions {\n  /**\n   * Hide the native tabbar.\n   */\n  hidden?: boolean;\n\n  /**\n   * Tab definitions.\n   */\n  tabs?: NativeNavigationTab[];\n\n  /**\n   * Currently selected tab id.\n   */\n  selectedId?: string;\n\n  /**\n   * Show text labels. Defaults to `true`.\n   */\n  labels?: boolean;\n\n  /**\n   * Native label visibility mode. Overrides `labels` when provided.\n   */\n  labelVisibilityMode?: NativeNavigationTabLabelVisibilityMode;\n\n  /**\n   * Show icons. Defaults to `true`.\n   */\n  icons?: boolean;\n\n  /**\n   * Tabbar color hints.\n   */\n  colors?: NativeNavigationColors;\n\n  /**\n   * iOS blur/material effect for the tabbar background when glass is not\n   * available.\n   */\n  blurEffect?: NativeNavigationBlurEffect;\n\n  /**\n   * Optional glass background behavior. Overrides `configure({ glass })` for\n   * this tabbar update.\n   */\n  glass?: NativeNavigationGlassOptions;\n\n  /**\n   * Opt into the iOS 26 Liquid Glass tint workaround that renders active and\n   * inactive tab items into baked images. This can affect badge positioning\n   * and icon sizing, so it is disabled by default.\n   */\n  experimentalBakedTintColors?: boolean;\n\n  /**\n   * Keep the iOS scroll-edge tabbar appearance from becoming transparent.\n   * Mirrors Expo Router native tabs' `disableTransparentOnScrollEdge` option.\n   * Defaults to `false`.\n   */\n  disableTransparentOnScrollEdge?: boolean;\n\n  /**\n   * Disable the Android active tab indicator.\n   */\n  disableIndicator?: boolean;\n\n  /**\n   * Active tab indicator color on Android. `colors.indicator` is also\n   * supported.\n   */\n  indicatorColor?: string;\n\n  /**\n   * Tab press ripple color on Android. `colors.ripple` is also supported.\n   */\n  rippleColor?: string;\n\n  /**\n   * Badge background color. `colors.badgeBackground` is also supported.\n   */\n  badgeBackgroundColor?: string;\n\n  /**\n   * Badge text color. `colors.badgeText` is also supported.\n   */\n  badgeTextColor?: string;\n\n  /**\n   * Optional native tabbar layout and shape customization.\n   */\n  style?: NativeNavigationTabbarStyle;\n\n  /**\n   * Animate native tabbar changes.\n   */\n  animated?: boolean;\n}\n\n/**\n * Insets exposed to web content.\n */\nexport interface NativeNavigationInsets {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n  navbarHeight: number;\n  tabbarHeight: number;\n}\n\n/**\n * Returned by methods that may change safe content bounds.\n */\nexport interface NativeNavigationInsetsResult {\n  insets: NativeNavigationInsets;\n}\n\n/**\n * Begin a native transition transaction before JS changes route content.\n */\nexport interface NativeNavigationBeginTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions. Use viewport coordinates such as\n   * those returned by `Element.getBoundingClientRect()`.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Finish a native transition transaction after JS has changed route content.\n */\nexport interface NativeNavigationFinishTransitionOptions {\n  id?: string;\n  direction?: NativeNavigationTransitionDirection;\n  duration?: number;\n  /**\n   * Source rectangle for `zoom` transitions when no active source was recorded.\n   */\n  sourceRect?: NativeNavigationRect;\n  /**\n   * Destination rectangle for shared-element-style `zoom` transitions.\n   */\n  targetRect?: NativeNavigationRect;\n  /**\n   * Corner radius used while animating a `zoom` transition.\n   */\n  cornerRadius?: number;\n}\n\n/**\n * Native transition result.\n */\nexport interface NativeNavigationTransitionResult {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Plugin version payload.\n */\nexport interface PluginVersionResult {\n  /**\n   * Version identifier returned by the platform implementation.\n   */\n  version: string;\n}\n\nexport interface NativeNavigationBackEvent {\n  source: 'navbar';\n}\n\nexport interface NativeNavigationBarItemTapEvent {\n  id: string;\n  title?: string;\n  placement: 'left' | 'right';\n}\n\nexport interface NativeNavigationTabSelectEvent {\n  id: string;\n  index: number;\n  title?: string;\n}\n\nexport interface NativeNavigationSafeAreaChangedEvent {\n  insets: NativeNavigationInsets;\n}\n\nexport interface NativeNavigationTransitionEvent {\n  id: string;\n  direction: NativeNavigationTransitionDirection;\n  duration: number;\n}\n\n/**\n * Framework-agnostic native navigation chrome API.\n */\nexport interface NativeNavigationPlugin {\n  /**\n   * Configure the native chrome host and content inset behavior.\n   */\n  configure(options?: NativeNavigationConfigureOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native navbar.\n   */\n  setNavbar(options: NativeNavigationNavbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Render or update the native tabbar.\n   */\n  setTabbar(options: NativeNavigationTabbarOptions): Promise<NativeNavigationInsetsResult>;\n\n  /**\n   * Capture the current WebView and prepare a native transition.\n   */\n  beginTransition(options?: NativeNavigationBeginTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Animate from the captured WebView snapshot to the current live WebView.\n   */\n  finishTransition(options?: NativeNavigationFinishTransitionOptions): Promise<NativeNavigationTransitionResult>;\n\n  /**\n   * Returns the platform implementation version marker.\n   */\n  getPluginVersion(): Promise<PluginVersionResult>;\n\n  addListener(\n    eventName: 'navbarBack',\n    listenerFunc: (event: NativeNavigationBackEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'navbarItemTap',\n    listenerFunc: (event: NativeNavigationBarItemTapEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'tabSelect',\n    listenerFunc: (event: NativeNavigationTabSelectEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'safeAreaChanged',\n    listenerFunc: (event: NativeNavigationSafeAreaChangedEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionStart',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n\n  addListener(\n    eventName: 'transitionEnd',\n    listenerFunc: (event: NativeNavigationTransitionEvent) => void,\n  ): Promise<PluginListenerHandle>;\n}\n"]}

package/ios/Sources/NativeNavigationPlugin/NativeNavigationPlugin.swift

@@ -2,6 +2,7 @@
 
 import Foundation
 import Capacitor
+import ObjectiveC
 import UIKit
 
 private struct NativeNavigationTransitionContext {
@@ -41,6 +42,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
     private var navBar: UINavigationBar?
     private var tabContainer: UIView?
     private var tabEffectView: UIVisualEffectView?
+    private var trailingTabEffectView: UIVisualEffectView?
     private var tabBar: UITabBar?
     private var floatingTabBar: NativeNavigationFloatingTabBar?
     private var tabbarStyle = NativeNavigationTabbarStyleConfig()
@@ -726,13 +728,21 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         container.layer.shadowRadius = 18
         container.layer.shadowOffset = CGSize(width: 0, height: 10)
 
-        let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemChromeMaterial))
+        let effectView = UIVisualEffectView(effect: liquidGlassEffect() ?? UIBlurEffect(style: .systemChromeMaterial))
         effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         effectView.isUserInteractionEnabled = false
         effectView.clipsToBounds = true
         container.addSubview(effectView)
         self.tabEffectView = effectView
 
+        let trailingEffectView = UIVisualEffectView(effect: liquidGlassEffect() ?? UIBlurEffect(style: .systemChromeMaterial))
+        trailingEffectView.autoresizingMask = []
+        trailingEffectView.isUserInteractionEnabled = false
+        trailingEffectView.clipsToBounds = true
+        trailingEffectView.isHidden = true
+        container.addSubview(trailingEffectView)
+        self.trailingTabEffectView = trailingEffectView
+
         let bar = NativeNavigationFloatingTabBar()
         bar.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
         bar.clipsToBounds = false
@@ -1090,6 +1100,7 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         tabSelectedImages = []
         var selectedIndex: Int?
         var items: [UITabBarItem] = []
+        var trailingEntry: (item: UITabBarItem, title: String?, image: UIImage?, selectedImage: UIImage?)?
 
         for (sourceIndex, tab) in tabs.enumerated() {
             let id = tab["id"] as? String ?? "tab-\(sourceIndex)"
@@ -1098,19 +1109,35 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
                 continue
             }
 
-            let visibleIndex = items.count
             let rawTitle = tab["title"] as? String ?? ""
             let title = tabTitle(
                 rawTitle,
                 id: id,
-                index: visibleIndex,
+                index: items.count,
                 selectedId: selectedId,
                 labelVisibilityMode: labelVisibilityMode
             )
             let image = icons ? self.image(from: tab["icon"] as? [String: Any]) : nil
             let selectedImage = icons ? self.image(from: tab["selectedIcon"] as? [String: Any]) : nil
-            let item = UITabBarItem(title: title, image: image, selectedImage: selectedImage)
-            item.tag = sourceIndex
+            let role = (tab["role"] as? String)?.lowercased()
+            let item: UITabBarItem
+            if role == "search" || role == "prominent" {
+                // iOS 26+ Liquid Glass renders `.search` as a detached trailing
+                // circular action beside the floating tab capsule. Keep the
+                // system-item title empty so UIKit treats it as icon-only.
+                item = UITabBarItem(tabBarSystemItem: .search, tag: sourceIndex)
+                item.title = nil
+                if let image = image {
+                    item.image = image
+                }
+                if let selectedImage = selectedImage {
+                    item.selectedImage = selectedImage
+                }
+                item.accessibilityLabel = rawTitle.isEmpty ? id : rawTitle
+            } else {
+                item = UITabBarItem(title: title, image: image, selectedImage: selectedImage)
+                item.tag = sourceIndex
+            }
             item.isEnabled = tab["enabled"] as? Bool ?? true
             if let badge = tab["badge"] {
                 item.badgeValue = String(describing: badge)
@@ -1121,17 +1148,31 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
             }
             tabIds[sourceIndex] = id
             tabTitles[sourceIndex] = rawTitle
-            tabDisplayTitles.append(title)
-            tabBaseImages.append(image)
-            tabSelectedImages.append(selectedImage ?? image)
-            if id == selectedId {
-                selectedIndex = visibleIndex
+            if role == "search" || role == "prominent" {
+                trailingEntry = (item, title, image, selectedImage ?? image)
+            } else {
+                items.append(item)
+                tabDisplayTitles.append(title)
+                tabBaseImages.append(image)
+                tabSelectedImages.append(selectedImage ?? image)
             }
-            items.append(item)
+        }
+
+        if let trailingEntry = trailingEntry {
+            items.append(trailingEntry.item)
+            tabDisplayTitles.append(trailingEntry.title)
+            tabBaseImages.append(trailingEntry.image)
+            tabSelectedImages.append(trailingEntry.selectedImage)
+        }
+        if let selectedId = selectedId {
+            selectedIndex = items.firstIndex(where: { item in
+                tabIds.indices.contains(item.tag) && tabIds[item.tag] == selectedId
+            })
         }
 
         return (items, selectedIndex)
     }
+
     private func makeFloatingTabBarItems(
         _ tabs: [[String: Any]],
         selectedId: String?,
@@ -1151,6 +1192,8 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
             let title = tab["title"] as? String ?? ""
             let image = icons ? self.image(from: tab["icon"] as? [String: Any]) : nil
             let selectedImage = icons ? self.image(from: tab["selectedIcon"] as? [String: Any]) : nil
+            let role = (tab["role"] as? String)?.lowercased()
+            let isDetachedTrailing = role == "search" || role == "prominent"
             if id == selectedId {
                 selectedIndex = visibleIndex
             }
@@ -1162,10 +1205,24 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
                 selectedImage: selectedImage,
                 badge: tab["badge"].map { String(describing: $0) },
                 enabled: tab["enabled"] as? Bool ?? true,
+                isDetachedTrailing: isDetachedTrailing,
                 sourceIndex: sourceIndex
             ))
         }
 
+        // Keep at most one detached trailing action and place it last so the
+        // capsule + circular button layout matches the system Liquid Glass pattern.
+        // Skip reordering for curve bars so center-item selection stays stable.
+        if tabbarStyle.shape == .floating,
+           let trailingIndex = items.lastIndex(where: { $0.isDetachedTrailing }) {
+            let trailing = items.remove(at: trailingIndex)
+            items.removeAll(where: { $0.isDetachedTrailing })
+            items.append(trailing)
+            if let selectedId = selectedId {
+                selectedIndex = items.firstIndex(where: { $0.id == selectedId })
+            }
+        }
+
         return (items, selectedIndex)
     }
     private func tabTitle(
@@ -1518,19 +1575,37 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         let colors = call.getObject("colors")
         let backgroundTint = colorValue(colors?["background"])
         let backgroundColor = (backgroundTint ?? .systemBackground).withAlphaComponent(tabbarStyle.shape == .curve ? 0.96 : 0.46)
+        let usesLiquidGlass = liquidGlassEffect() != nil
 
         if tabbarStyle.shape == .curve || prefersOpaqueTabBarBackground() {
             tabEffectView?.isHidden = true
+            trailingTabEffectView?.isHidden = true
+        } else if let glass = liquidGlassEffect() {
+            tabEffectView?.effect = glass
+            tabEffectView?.isHidden = false
+            tabEffectView?.contentView.backgroundColor = backgroundTint?.withAlphaComponent(0.08) ?? .clear
+            trailingTabEffectView?.effect = liquidGlassEffect() ?? glass
+            trailingTabEffectView?.contentView.backgroundColor = backgroundTint?.withAlphaComponent(0.08) ?? .clear
         } else if let effect = blurEffect(from: call.getString("blurEffect"), fallback: .systemChromeMaterial) {
             tabEffectView?.effect = effect
             tabEffectView?.isHidden = false
             tabEffectView?.contentView.backgroundColor = backgroundTint?.withAlphaComponent(0.12) ?? backgroundColor
+            trailingTabEffectView?.effect = effect
+            trailingTabEffectView?.contentView.backgroundColor = backgroundTint?.withAlphaComponent(0.12) ?? backgroundColor
         } else {
             tabEffectView?.isHidden = true
+            trailingTabEffectView?.isHidden = true
         }
 
         let opaqueBackground = backgroundTint ?? .systemBackground
-        tabBar.backgroundFillColor = prefersOpaqueTabBarBackground() ? opaqueBackground : backgroundColor
+        if prefersOpaqueTabBarBackground() {
+            tabBar.backgroundFillColor = opaqueBackground
+        } else if usesLiquidGlass {
+            // Keep the hand-drawn fill clear so UIGlassEffect can show through.
+            tabBar.backgroundFillColor = .clear
+        } else {
+            tabBar.backgroundFillColor = backgroundColor
+        }
         if let color = colorValue(colors?["tint"]) {
             tabBar.selectedTintColor = color
         }
@@ -1723,16 +1798,34 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         if let container = tabContainer {
             let availableWidth = max(0, width - (tabbarStyle.horizontalMargin * 2))
             let maxWidth = tabbarStyle.maxWidth > 0 ? tabbarStyle.maxWidth : availableWidth
-            let tabbarWidth = min(availableWidth, maxWidth)
+            let hasDetachedTrailing = floatingTabBar?.hasDetachedTrailing == true && tabbarStyle.shape == .floating
+            let trailingDiameter = tabbarStyle.height
+            let trailingGap: CGFloat = 10
+            let trailingExtra = hasDetachedTrailing ? trailingDiameter + trailingGap : 0
+            let tabbarWidth = min(availableWidth, maxWidth + trailingExtra)
             let originX = (width - tabbarWidth) / 2
             let originY = height - safeInsets.bottom - tabbarStyle.bottomGap - tabbarStyle.totalHeight
             container.frame = CGRect(x: originX, y: originY, width: tabbarWidth, height: tabbarStyle.totalHeight)
-            container.layer.cornerRadius = tabbarStyle.shape == .floating ? tabbarStyle.cornerRadius : 0
-            container.layer.shadowPath = NativeNavigationTabbarBackgroundPath.path(in: container.bounds, style: tabbarStyle).cgPath
-            tabEffectView?.frame = container.bounds
-            tabEffectView?.layer.cornerRadius = tabbarStyle.cornerRadius
             floatingTabBar?.frame = container.bounds
             floatingTabBar?.layer.cornerRadius = 0
+            floatingTabBar?.layoutIfNeeded()
+
+            let capsuleBounds = floatingTabBar?.capsuleBounds(in: container.bounds) ?? container.bounds
+            container.layer.cornerRadius = tabbarStyle.shape == .floating ? tabbarStyle.cornerRadius : 0
+            container.layer.shadowPath = NativeNavigationTabbarBackgroundPath.path(in: capsuleBounds, style: tabbarStyle).cgPath
+            tabEffectView?.frame = capsuleBounds
+            tabEffectView?.layer.cornerRadius = tabbarStyle.shape == .floating ? tabbarStyle.cornerRadius : 0
+            tabEffectView?.isHidden = tabbarStyle.shape == .curve || prefersOpaqueTabBarBackground() || tabEffectView?.effect == nil
+
+            if let trailingBounds = floatingTabBar?.trailingActionBounds(in: container.bounds),
+               hasDetachedTrailing,
+               !prefersOpaqueTabBarBackground() {
+                trailingTabEffectView?.frame = trailingBounds
+                trailingTabEffectView?.layer.cornerRadius = trailingBounds.height / 2
+                trailingTabEffectView?.isHidden = trailingTabEffectView?.effect == nil
+            } else {
+                trailingTabEffectView?.isHidden = true
+            }
         }
 
         if let tabBarController = tabBarController {
@@ -1822,6 +1915,28 @@ public class NativeNavigationPlugin: CAPPlugin, CAPBridgedPlugin, UITabBarContro
         ][value]
     }
 
+    private func liquidGlassEffect() -> UIVisualEffect? {
+        guard usesSystemLiquidGlass,
+              let effectClass = NSClassFromString("UIGlassEffect") else {
+            return nil
+        }
+
+        let styleSelector = NSSelectorFromString("effectWithStyle:")
+        if let method = class_getClassMethod(effectClass, styleSelector) {
+            typealias EffectWithStyle = @convention(c) (AnyClass, Selector, Int) -> AnyObject?
+            let factory = unsafeBitCast(method_getImplementation(method), to: EffectWithStyle.self)
+            if let effect = factory(effectClass, styleSelector, 0) as? UIVisualEffect {
+                return effect
+            }
+        }
+
+        if let objectType = effectClass as? NSObject.Type {
+            return objectType.init() as? UIVisualEffect
+        }
+
+        return nil
+    }
+
     private func configureGlassBarButtonItem(_ item: UIBarButtonItem, id: String) {
         guard #available(iOS 26.0, *) else {
             return
@@ -1954,6 +2069,7 @@ private struct NativeNavigationFloatingTabItem {
     let selectedImage: UIImage?
     let badge: String?
     let enabled: Bool
+    let isDetachedTrailing: Bool
     let sourceIndex: Int
 }
 
@@ -2029,6 +2145,7 @@ private struct NativeNavigationFloatingTabStyle {
     let labels: Bool
     let icons: Bool
     let isCenter: Bool
+    let isDetachedTrailing: Bool
     let selectedTint: UIColor
     let inactiveTint: UIColor
     let centerButtonColor: UIColor
@@ -2065,6 +2182,10 @@ private final class NativeNavigationFloatingTabBar: UIView {
     }
     var onSelect: ((Int, NativeNavigationFloatingTabItem) -> Void)?
 
+    var hasDetachedTrailing: Bool {
+        tabbarStyle.shape == .floating && items.contains(where: \.isDetachedTrailing)
+    }
+
     override init(frame: CGRect) {
         super.init(frame: frame)
         isOpaque = false
@@ -2094,9 +2215,33 @@ private final class NativeNavigationFloatingTabBar: UIView {
         setNeedsLayout()
     }
 
+    func capsuleBounds(in bounds: CGRect) -> CGRect {
+        guard hasDetachedTrailing else {
+            return bounds
+        }
+        let trailingGap: CGFloat = 10
+        let trailingDiameter = tabbarStyle.height
+        let capsuleWidth = max(0, bounds.width - trailingDiameter - trailingGap)
+        return CGRect(x: bounds.minX, y: bounds.minY, width: capsuleWidth, height: bounds.height)
+    }
+
+    func trailingActionBounds(in bounds: CGRect) -> CGRect? {
+        guard hasDetachedTrailing else {
+            return nil
+        }
+        let trailingDiameter = tabbarStyle.height
+        return CGRect(
+            x: bounds.maxX - trailingDiameter,
+            y: bounds.minY + (bounds.height - trailingDiameter) / 2,
+            width: trailingDiameter,
+            height: trailingDiameter
+        )
+    }
+
     override func layoutSubviews() {
         super.layoutSubviews()
-        backgroundShapeView.frame = bounds
+        let capsule = capsuleBounds(in: bounds)
+        backgroundShapeView.frame = capsule
         guard !buttons.isEmpty else {
             return
         }
@@ -2123,6 +2268,15 @@ private final class NativeNavigationFloatingTabBar: UIView {
             return
         }
 
+        if let trailingIndex = detachedTrailingIndex(),
+           buttons.indices.contains(trailingIndex),
+           let trailingBounds = trailingActionBounds(in: bounds) {
+            buttons[trailingIndex].frame = trailingBounds
+            let mainIndices = buttons.indices.filter { $0 != trailingIndex }
+            layoutButtons(mainIndices, in: capsule)
+            return
+        }
+
         layoutButtons(Array(buttons.indices), in: bounds)
     }
 
@@ -2152,6 +2306,13 @@ private final class NativeNavigationFloatingTabBar: UIView {
         return items.count / 2
     }
 
+    private func detachedTrailingIndex() -> Int? {
+        guard tabbarStyle.shape == .floating else {
+            return nil
+        }
+        return items.lastIndex(where: \.isDetachedTrailing)
+    }
+
     private func rebuildButtons() {
         buttons.forEach { $0.removeFromSuperview() }
         buttons = items.enumerated().map { index, item in
@@ -2181,11 +2342,16 @@ private final class NativeNavigationFloatingTabBar: UIView {
 
     private func style(for index: Int) -> NativeNavigationFloatingTabStyle {
         let isCenter = centerButtonIndex() == index
+        let isDetachedTrailing = detachedTrailingIndex() == index
+        // Detached actions stay icon-only when icons are available; fall back to
+        // a label when icons are disabled so the control remains discoverable.
+        let detachedShowsLabel = isDetachedTrailing && !iconsVisible && showsLabel(for: index)
         return NativeNavigationFloatingTabStyle(
             selected: index == selectedIndex,
-            labels: showsLabel(for: index),
+            labels: isDetachedTrailing ? detachedShowsLabel : showsLabel(for: index),
             icons: iconsVisible,
             isCenter: isCenter,
+            isDetachedTrailing: isDetachedTrailing,
             selectedTint: selectedTintColor,
             inactiveTint: inactiveTintColor,
             centerButtonColor: tabbarStyle.centerButtonColor ?? selectedTintColor,
@@ -2293,13 +2459,20 @@ private final class NativeNavigationFloatingTabButton: UIControl {
         isEnabled = item.enabled
         alpha = item.enabled ? 1 : 0.38
         isCenterButton = style.isCenter
+        let isDetachedTrailing = style.isDetachedTrailing
         hasIcon = style.icons && (item.image != nil || item.selectedImage != nil)
-        hasLabel = style.isCenter ? (!hasIcon && !item.title.isEmpty) : (style.labels && !item.title.isEmpty)
+        hasLabel = isDetachedTrailing
+            ? (!hasIcon && style.labels && !item.title.isEmpty)
+            : (style.isCenter ? (!hasIcon && !item.title.isEmpty) : (style.labels && !item.title.isEmpty))
         badgeText = item.badge
 
-        let color = style.isCenter ? style.centerButtonIconColor : (style.selected ? style.selectedTint : style.inactiveTint)
-        selectedView.backgroundColor = style.isCenter ? style.centerButtonColor : style.selectedTint.withAlphaComponent(style.selected ? 0.16 : 0)
-        selectedView.alpha = style.isCenter || style.selected ? 1 : 0
+        let color = style.isCenter
+            ? style.centerButtonIconColor
+            : (style.selected ? style.selectedTint : style.inactiveTint)
+        selectedView.backgroundColor = style.isCenter
+            ? style.centerButtonColor
+            : style.selectedTint.withAlphaComponent(style.selected && !isDetachedTrailing ? 0.16 : 0)
+        selectedView.alpha = style.isCenter || (style.selected && !isDetachedTrailing) ? 1 : 0
 
         layer.shadowColor = UIColor.black.cgColor
         layer.shadowOpacity = style.isCenter ? 0.2 : 0
@@ -2336,7 +2509,7 @@ private final class NativeNavigationFloatingTabButton: UIControl {
         selectedView.layer.cornerRadius = selectedView.bounds.height / 2
 
         let iconSize: CGFloat = isCenterButton ? 32 : 23
-        if isCenterButton {
+        if isCenterButton || (!hasLabel && hasIcon && bounds.width <= bounds.height + 1) {
             if hasIcon {
                 imageView.frame = CGRect(x: (bounds.width - iconSize) / 2, y: (bounds.height - iconSize) / 2, width: iconSize, height: iconSize)
                 titleLabel.frame = .zero

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capgo/capacitor-native-navigation",
-  "version": "8.2.9",
+  "version": "8.3.0",
   "description": "Capacitor plugin for native navbar, tabbar, safe-area handling, and WebView snapshot transitions.",
   "main": "dist/plugin.cjs.js",
   "module": "dist/esm/index.js",
@@ -57,7 +57,8 @@
     "example:sync": "bun run example:build && cd example-app && bunx cap sync",
     "example:ios": "bun run example:build && cd example-app && ([ -d ios ] || bunx cap add ios) && bunx cap sync ios && bunx cap run ios",
     "example:android": "bun run example:build && cd example-app && ([ -d android ] || bunx cap add android) && bunx cap sync android && bunx cap run android",
-    "example:install": "cd example-app && bun install --frozen-lockfile"
+    "example:install": "cd example-app && bun install --frozen-lockfile",
+    "changelog:ai": "node scripts/generate-ai-changelog.mjs"
   },
   "devDependencies": {
     "@capacitor/android": "^8.0.0",