@rdlabo/ionic-theme-ios27 0.1.0 → 0.2.1

package/src/native/index.ts

@@ -1,32 +1,59 @@
 import { Capacitor, registerPlugin } from '@capacitor/core';
-import type { NativeUIShellHandle, NativeUIShellPlugin } from './definitions';
+import { setConfig } from '../transition/ios.transition';
+import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellPlugin, WebViewMetrics } from './definitions';
+import { bindMetricsLifecycle } from './lifecycle';
 import { createRuntime } from './runtime';
-export type { NativeUIShellComponent, NativeUIShellHandle, NativeUIShellStatus } from './definitions';
+export type {
+  NativeUIShellComponent,
+  NativeUIShellControls,
+  NativeUIShellHandle,
+  NativeUIShellOptions,
+  NativeUIShellStatus,
+  NativeUIShellSuspension,
+  WebViewMetrics,
+} from './definitions';
 
 const plugin = registerPlugin<NativeUIShellPlugin>('IonicNativeUIShell');
 let active: Promise<NativeUIShellHandle> | undefined;
 const web = (reason: string): NativeUIShellHandle => ({
   getStatus: () => ({ state: 'web', projected: 0, updates: 0, reason }),
+  suspend: async () => ({ resume: async () => {} }),
   destroy: async () => {},
 });
 
+/** Reads the current native WebView geometry and applies it to page transitions. */
+export const configureNativeTransition = async (): Promise<WebViewMetrics> => {
+  const metrics = typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? await plugin.getWebViewMetrics() : { radius: 0 };
+  setConfig({ radius: metrics.radius });
+  return metrics;
+};
+
 /** Call once at application startup. Ionic markup remains the source of truth. */
-export const enableNativeUIShell = (): Promise<NativeUIShellHandle> => {
+export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise<NativeUIShellHandle> => {
+  if (options.enabled === false) {
+    const current = active;
+    active = undefined;
+    return current
+      ? current.then(async (handle) => {
+          await handle.destroy();
+          return web('Disabled');
+        })
+      : Promise.resolve(web('Disabled'));
+  }
   if (typeof document === 'undefined' || Capacitor.getPlatform() !== 'ios') return Promise.resolve(web('Requires Capacitor iOS'));
   return (active ??= (async () => {
     try {
+      await configureNativeTransition().catch(() => undefined);
       if (!(await plugin.configure()).supported) {
         active = undefined;
         return web('Requires iOS 26 or later');
       }
-      const runtime = await createRuntime(document, plugin);
-      return {
-        getStatus: runtime.getStatus,
-        async destroy() {
-          await runtime.destroy();
-          active = undefined;
-        },
-      };
+      const runtime = await createRuntime(document, plugin, options);
+      return await bindMetricsLifecycle(
+        runtime,
+        () => plugin.addListener('webViewMetricsChange', (metrics) => setConfig({ radius: metrics.radius })),
+        () => (active = undefined),
+      );
     } catch (error) {
       active = undefined;
       return web(error instanceof Error ? error.message : String(error));

package/src/native/lifecycle.ts

@@ -0,0 +1,38 @@
+import type { PluginListenerHandle } from '@capacitor/core';
+import type { NativeUIShellHandle } from './definitions';
+
+export const bindMetricsLifecycle = async (
+  runtime: NativeUIShellHandle,
+  listen: () => Promise<PluginListenerHandle>,
+  deactivate: () => void,
+): Promise<NativeUIShellHandle> => {
+  let listener: PluginListenerHandle;
+  try {
+    listener = await listen();
+  } catch (error) {
+    await runtime.destroy();
+    throw error;
+  }
+
+  let destroying: Promise<void> | undefined;
+  return {
+    getStatus: runtime.getStatus,
+    suspend: runtime.suspend,
+    destroy() {
+      return (destroying ??= (async () => {
+        let removalError: unknown;
+        try {
+          await listener.remove();
+        } catch (error) {
+          removalError = error;
+        }
+        try {
+          await runtime.destroy();
+        } finally {
+          deactivate();
+        }
+        if (removalError) throw removalError;
+      })());
+    },
+  };
+};

package/src/native/runtime.ts

@@ -2,7 +2,14 @@ import type { PluginListenerHandle } from '@capacitor/core';
 import { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core';
 import { getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
 import { createSearchSupport } from './components/searchable-tabs';
-import type { ShellActivation, ShellSnapshot, NativeUIShellHandle, NativeUIShellPlugin, NativeUIShellStatus } from './definitions';
+import type {
+  ShellActivation,
+  ShellSnapshot,
+  NativeUIShellHandle,
+  NativeUIShellOptions,
+  NativeUIShellPlugin,
+  NativeUIShellStatus,
+} from './definitions';
 import { readCandidate, selector, shadowSelector, motionSelector } from './components';
 import { marker, unprojected } from './shared/dom';
 import { createIconRenderer } from './shared/icons';
@@ -20,7 +27,11 @@ const bounded = <T>(promise: Promise<T>): Promise<T> =>
     promise.then(resolve, reject).finally(() => clearTimeout(timer));
   });
 
-export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin): Promise<NativeUIShellHandle> => {
+export const createRuntime = async (
+  doc: Document,
+  plugin: NativeUIShellPlugin,
+  options: NativeUIShellOptions = {},
+): Promise<NativeUIShellHandle> => {
   const win = doc.defaultView!;
   const icons = createIconRenderer();
   const crossfade = createCrossfade(win);
@@ -30,6 +41,7 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
   const suspended = new Set<HTMLElement[]>();
   const pages = new Set<HTMLElement>();
   const presented = new Set<HTMLElement>();
+  const manualSuspensions = new Set<symbol>();
   const moving = new Map<HTMLElement, Set<string>>();
   const observed = new Set<Element | ShadowRoot>();
   const listeners = new AbortController();
@@ -52,6 +64,16 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
   let listener: PluginListenerHandle | undefined;
   let searchListener: PluginListenerHandle | undefined;
   let waiters: (() => void)[] = [];
+  const control = (kind: Candidate['control']['kind']): keyof NonNullable<NativeUIShellOptions['controls']> => {
+    if (kind === 'ion-tab-bar') return 'tabs';
+    if (kind === 'ion-segment') return 'segment';
+    if (kind === 'ion-fab') return 'fab';
+    return 'toolbar';
+  };
+  const controlEnabled = (candidate: Candidate) => {
+    const controls = options.controls;
+    return controls === undefined || controls[control(candidate.control.kind)] === true;
+  };
   const id = (element: Element) => {
     let value = ids.get(element);
     if (!value) {
@@ -91,6 +113,10 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
   };
   const search = createSearchSupport(doc, id, schedule);
   const candidateSources = (candidate: Candidate) => candidate.sources ?? [candidate.element];
+  const readEnabledCandidate = (element: HTMLElement): Candidate | undefined => {
+    const candidate = readCandidate(element, id);
+    return candidate && controlEnabled(candidate) ? candidate : undefined;
+  };
   const flush = async () => {
     if (stopped) return;
     schedule();
@@ -108,6 +134,7 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
   const overlayOpen = () => {
     for (const element of presented) if (!element.isConnected) presented.delete(element);
     return (
+      manualSuspensions.size > 0 ||
       presented.size > 0 ||
       Array.from(doc.querySelectorAll(overlays)).some(
         (element) => (element as Element & { presented?: boolean }).presented || element.classList.contains('show-menu'),
@@ -128,7 +155,7 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
         .decorate(
           Array.from(doc.querySelectorAll<HTMLElement>(selector))
             .filter((element) => !blocked(element))
-            .map((element) => readCandidate(element, id))
+            .map(readEnabledCandidate)
             .filter((candidate): candidate is Candidate => !!candidate),
           blocked,
         )
@@ -375,6 +402,23 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
       updates,
       reason,
     }),
+    async suspend() {
+      const token = Symbol();
+      let resumed = false;
+      if (!stopped) {
+        manualSuspensions.add(token);
+        getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
+        await flush();
+      }
+      return {
+        async resume() {
+          if (resumed) return;
+          resumed = true;
+          if (stopped || !manualSuspensions.delete(token)) return;
+          await flush();
+        },
+      };
+    },
     async destroy() {
       if (stopped) return;
       stopped = true;
@@ -399,6 +443,7 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
       icons.clear();
       pages.clear();
       presented.clear();
+      manualSuspensions.clear();
       moving.clear();
       suspended.clear();
       await listener?.remove().catch(() => {});
@@ -427,7 +472,7 @@ export const createRuntime = async (doc: Document, plugin: NativeUIShellPlugin):
     if (!element) return;
     const owner = Array.from(sources.keys()).find((source) => source === element || source.contains(element));
     if (!owner) return;
-    const direct = !blocked(owner) && unprojected(sources.keys(), () => readCandidate(owner, id));
+    const direct = !blocked(owner) && unprojected(sources.keys(), () => readEnabledCandidate(owner));
     const candidate = direct || read().find((candidate) => candidate.actions.has(event.id));
     const item = candidate?.control.items.find((item) => item.id === event.id);
     const searchAction =

package/src/styles/components/ion-button.scss

@@ -13,6 +13,9 @@ $scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
 $scaleup-large: 1.12;
 $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
 
+// Fit to the iOS 27 glass button's expansion: a small overshoot, settling at 380ms.
+$press-transition: transform var(--ios-theme-button-press-duration, 380ms) cubic-bezier(0.37, 0.36, 0.03, 1.34);
+
 @mixin theme-buttons {
   @include api.glass-control-background;
   border-radius: 25px;
@@ -24,14 +27,17 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
   /**
    * compare .header-collapse-main ion-toolbar.in-toolbar ion-title, .header-collapse-main ion-toolbar.in-toolbar ion-buttons
    */
-  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
+  transition: $press-transition;
 
   z-index: 0;
 
   &:has(.ion-activated) {
     z-index: 5;
     @include api.glass-background-button-activated;
+  }
 
+  // Follow the actual press so a short tap reverses before reaching full scale.
+  &:has(ion-button:active:not(.button-disabled), ion-menu-button:active:not([disabled])) {
     // Hardware acceleration optimization for scale transforms
     transform: scale($scaleup-default-icon-only) translateZ(0);
     -webkit-transform: scale($scaleup-default-icon-only) translateZ(0);
@@ -141,7 +147,7 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
   }
 
   transition:
-    transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out,
+    $press-transition,
     color 50ms ease;
 
   &.in-toolbar:not(.ion-color):not(.in-toolbar-color) {
@@ -247,8 +253,10 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
           inset 0 -0.5px 0 rgba(255, 255, 255, 0.48),
           0 0.5px 1px rgba(0, 0, 0, 0.12);
       }
-      &.ion-activated.button-has-icon-only,
-      &.ion-activated.back-button-has-icon-only {
+    }
+    &:active:not(.button-disabled) {
+      &.button-has-icon-only,
+      &.back-button-has-icon-only {
         transform: scale($scaleup-default-icon-only);
         &.button-small {
           transform: scale($scaleup-small-icon-only);
@@ -332,8 +340,10 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
       &.ion-color {
         --color: rgba(var(--ion-color-base-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.1);
       }
-      &.ion-activated.button-has-icon-only,
-      &.ion-activated.back-button-has-icon-only {
+    }
+    &:active:not(.button-disabled) {
+      &.button-has-icon-only,
+      &.back-button-has-icon-only {
         transform: scale($scaleup-default-icon-only);
         &.button-small {
           transform: scale($scaleup-small-icon-only);
@@ -401,17 +411,18 @@ ion-buttons.ios:not(.ios-theme-disabled, .ios26-disabled):not(
   ion-buttons.ios:not(.ios-theme-disabled, .ios26-disabled):not(
     :has(ion-back-button, ion-button:not(.button-clear), ion-menu-button.menu-button-hidden)
   ) {
-  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
+  transition: $press-transition;
 }
 
 ion-buttons.ios:not(.ios-theme-disabled, .ios26-disabled):not(:has(ion-back-button, ion-button.button-clear)) {
   ion-button {
-    margin: 0 6px;
+    margin-block: 0;
+    margin-inline: 6px;
     &:first-child {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
     &:last-child {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
     &:only-child {
       margin: 0;

package/src/styles/components/ion-fab.scss

@@ -6,7 +6,13 @@ $scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
 $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
 
 ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  --ios-theme-safe-area-inline-start: var(--ion-safe-area-left, 0px);
+  --ios-theme-safe-area-inline-end: var(--ion-safe-area-right, 0px);
   --transform-value: 2.5px;
+  &:dir(rtl) {
+    --ios-theme-safe-area-inline-start: var(--ion-safe-area-right, 0px);
+    --ios-theme-safe-area-inline-end: var(--ion-safe-area-left, 0px);
+  }
   &:has(> ion-fab-button.fab-button-small) {
     --transform-value: 4px;
   }
@@ -85,20 +91,20 @@ ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
   }
 
   &.fab-horizontal-start {
-    left: calc(16px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ion-safe-area-left), 0px)));
+    inset-inline-start: calc(16px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ios-theme-safe-area-inline-start))));
   }
 
   &.fab-horizontal-end {
-    right: calc(16px + var(--ion-safe-area-right, 0px));
+    inset-inline-end: calc(16px + var(--ios-theme-safe-area-inline-end));
   }
 
   &:has(.fab-button-small) {
     &.fab-horizontal-start {
-      left: calc(10px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ion-safe-area-left), 0px)));
+      inset-inline-start: calc(10px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ios-theme-safe-area-inline-start))));
     }
 
     &.fab-horizontal-end {
-      right: calc(10px + var(--ion-safe-area-right, 0px));
+      inset-inline-end: calc(10px + var(--ios-theme-safe-area-inline-end));
     }
   }
 }

package/src/styles/components/ion-list.scss

@@ -1,4 +1,4 @@
-@use '../utils/structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8));
@@ -11,7 +11,7 @@ ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
 }
 
 ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  @include structured-list.layout(20px, 28px);
+  @include structured-list.layout(20px, 28px, $variant: ios27);
 
   ion-radio-group,
   ion-reorder-group {
@@ -23,13 +23,22 @@ ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
     padding-inline-end: calc(var(--ion-safe-area-right, 0) + 20px);
   }
 
+  &:dir(rtl) ion-radio-group > .radio-group-top {
+    padding-inline-start: calc(var(--ion-safe-area-right, 0) + 20px);
+    padding-inline-end: calc(var(--ion-safe-area-left, 0) + 20px);
+  }
+
   > :is(#{structured-list.$groups}) {
     ion-item {
       // To draw lines inside
       --inner-padding-end: 0;
 
       &::part(native) {
-        padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
+        padding-inline-end: calc(var(--ion-safe-area-right, 0px) + 18px);
+      }
+
+      &:dir(rtl)::part(native) {
+        padding-inline-end: calc(var(--ion-safe-area-left, 0px) + 18px);
       }
 
       --min-height: 52px;

package/src/styles/components/ion-menu.scss

@@ -6,13 +6,13 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
   .split-pane-main {
     ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       width: calc(
-        100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 60px -
+        100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 60px -
           12px - var(--ios-theme-menu-width, var(--ios26-menu-width))
       );
 
       &:has(:nth-child(5)) {
         width: calc(
-          100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - var(
+          100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - var(
               --ios-theme-menu-width,
               var(--ios26-menu-width)
             )
@@ -31,7 +31,7 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
           /*
            * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
            */
-          padding-left: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
+          padding-inline-start: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
         }
       }
       ion-content {
@@ -45,7 +45,10 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
       }
       ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
         &[slot='bottom'] {
-          left: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)));
+          inset-inline-start: calc(16px + var(--ion-safe-area-left, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)));
+          &:dir(rtl) {
+            inset-inline-start: calc(16px + var(--ion-safe-area-right, 0px) + var(--ios-theme-menu-width, var(--ios26-menu-width)));
+          }
         }
       }
     }
@@ -62,7 +65,7 @@ ion-split-pane.ios:not(.ios-theme-disabled, .ios26-disabled).split-pane-visible:
           /*
            * 90px: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/title.ios.scss#L8
            */
-          padding-right: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
+          padding-inline-end: calc(90px + var(--ios-theme-menu-width, var(--ios26-menu-width)));
         }
       }
       ion-content {
@@ -88,10 +91,10 @@ ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled) {
   z-index: 999;
 
   &.menu-side-start {
-    left: 0;
+    inset-inline-start: 0;
   }
   &.menu-side-end {
-    left: calc(100vw - var(--ios-theme-menu-width, var(--ios26-menu-width)));
+    inset-inline-end: 0;
   }
 
   &::part(backdrop) {
@@ -119,9 +122,13 @@ ion-menu.ios:not(.ios-theme-disabled, .ios26-disabled) {
     --ios-theme-content-box-shadow-rgb: var(--ios26-content-box-shadow-rgb);
 
     &::part(scroll) {
-      margin: calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px)
-        calc(16px + var(--ion-safe-area-right, 0px)) var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom))
-        calc(12px + var(--ion-safe-area-left, 0px));
+      margin-block: calc(var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top)) + 6px)
+        var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));
+      margin-inline: calc(12px + var(--ion-safe-area-left, 0px)) calc(16px + var(--ion-safe-area-right, 0px));
+    }
+
+    &:dir(rtl)::part(scroll) {
+      margin-inline: calc(12px + var(--ion-safe-area-right, 0px)) calc(16px + var(--ion-safe-area-left, 0px));
     }
   }
 }

package/src/styles/components/ion-searchbar.scss

@@ -274,6 +274,6 @@ ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled).searchbar-classic {
     width: 1.18rem;
   }
   button.searchbar-clear-button {
-    right: 8px;
+    inset-inline-end: 8px;
   }
 }

package/src/styles/components/ion-tabs.scss

@@ -1,6 +1,12 @@
 @use '../utils/api';
 
 ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  --ios-theme-safe-area-inline-start: var(--ion-safe-area-left, 0px);
+  --ios-theme-safe-area-inline-end: var(--ion-safe-area-right, 0px);
+  &:dir(rtl) {
+    --ios-theme-safe-area-inline-start: var(--ion-safe-area-right, 0px);
+    --ios-theme-safe-area-inline-end: var(--ion-safe-area-left, 0px);
+  }
   // Ionic forces content-box on the host. Keep the Glass border in a
   // separate layer so its physical-pixel rounding cannot resize the bar.
   border: 0;
@@ -29,26 +35,24 @@ ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   &[slot='top'] {
     position: absolute;
     top: var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top));
-    right: calc(16px + var(--ion-safe-area-right, 0px));
+    inset-inline-end: calc(16px + var(--ios-theme-safe-area-inline-end));
   }
 
   &[slot='bottom'] {
     position: absolute;
     bottom: var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));
-    left: calc(16px + var(--ion-safe-area-left, 0px));
+    inset-inline-start: calc(16px + var(--ios-theme-safe-area-inline-start));
   }
 
-  &.tab-bar-position-start,
-  &.tab-bar-position-end:dir(rtl) {
-    left: calc(16px + var(--ion-safe-area-left, 0px));
-    right: auto;
+  &.tab-bar-position-start {
+    inset-inline-start: calc(16px + var(--ios-theme-safe-area-inline-start));
+    inset-inline-end: auto;
     margin-inline: 0;
   }
 
-  &.tab-bar-position-end,
-  &.tab-bar-position-start:dir(rtl) {
-    left: auto;
-    right: calc(16px + var(--ion-safe-area-right, 0px));
+  &.tab-bar-position-end {
+    inset-inline-start: auto;
+    inset-inline-end: calc(16px + var(--ios-theme-safe-area-inline-end));
     margin-inline: 0;
   }
 

package/src/styles/components/ion-toolbar.scss

@@ -57,27 +57,29 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled).toolbar-searchbar {
   }
   &:has(ion-buttons[slot='start']) {
     ion-buttons[slot='start'] {
-      margin-right: 6px;
+      margin-inline-end: 6px;
     }
     ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       &:not(.searchbar-classic) {
         padding-inline: 6px 12px;
       }
       &.searchbar-classic .searchbar-input-container {
-        margin: 0 12px 0 6px;
+        margin-block: 0;
+        margin-inline: 6px 12px;
       }
     }
   }
   &:has(ion-buttons[slot='end']) {
     ion-buttons[slot='end'] {
-      margin-left: 6px;
+      margin-inline-start: 6px;
     }
     ion-searchbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
       &:not(.searchbar-classic) {
         padding-inline: 12px 6px;
       }
       &.searchbar-classic .searchbar-input-container {
-        margin: 0 6px 0 12px;
+        margin-block: 0;
+        margin-inline: 12px 6px;
       }
     }
   }
@@ -85,15 +87,12 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled).toolbar-searchbar {
 
 ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   ion-buttons {
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-inline: 12px;
   }
   ion-back-button {
-    margin-left: 12px;
-    margin-right: 12px;
+    margin-inline: 12px;
   }
   ion-buttons > ion-back-button {
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
   }
 }

package/src/styles/md-ion-list-inset.scss

@@ -1,10 +1,10 @@
-@use 'utils/structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 ion-list.md {
   @include structured-list.support-text;
 
   &.list-inset {
-    @include structured-list.layout(8px, 16px);
+    @include structured-list.layout(8px, 16px, $variant: ios27);
     :is(#{structured-list.$groups}) ion-item {
       & > ion-input[labelplacement='floating'] {
         transition: transform 200ms ease;

package/src/styles/utils/dark/ion-list.scss

@@ -1,4 +1,4 @@
-@use '../structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 @mixin ion-list {
   ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {

package/src/styles/utils/translucent.scss

@@ -20,6 +20,18 @@ ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled).footer-translucent {
   }
 }
 
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-header.ios:not(.ios-theme-disabled, .ios26-disabled):not(.header-translucent),
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled):not(.footer-translucent) {
+  ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+    --background: transparent;
+    --opacity: 1;
+
+    &::part(background) {
+      --opacity: 0;
+    }
+  }
+}
+
 ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-translucent:not(.header-collapse-condense) {
   &:has(> ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) > *)::before {
     height: 100%;
@@ -40,6 +52,27 @@ ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-translucent:not(
   }
 }
 
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled).footer-translucent {
+  &:has(> ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) > *)::before {
+    bottom: 0;
+    height: 100%;
+    background: rgba(
+      var(--ion-color-base-rgb, var(--ios-theme-content-box-shadow-rgb, var(--ios26-content-box-shadow-rgb))),
+      calc(0.2 * var(--opacity-scale, 1))
+    );
+    backdrop-filter: blur(8px);
+  }
+
+  &:not(.ion-no-border) > ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):has(> *):first-of-type {
+    --border-width: 0.5px 0 0;
+    --border-color: var(--ion-toolbar-border-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08));
+    &::part(background) {
+      --opacity: 1;
+      background: transparent;
+    }
+  }
+}
+
 ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-collapse-main ion-toolbar.in-toolbar ion-title {
   transition:
     opacity 0.5s ease-in-out,
@@ -58,6 +91,8 @@ ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-collapse-condens
 
 ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-translucent::before,
 ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-translucent::after,
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled).footer-translucent::before,
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled).footer-translucent::after,
 ion-content.ios:not(.ios-theme-disabled, .ios26-disabled).content-fullscreen::part(background)::before {
   content: '';
   position: absolute;
@@ -84,6 +119,15 @@ ion-header.ios:not(.ios-theme-disabled, .ios26-disabled).header-translucent::aft
   mask-composite: intersect;
 }
 
+.ion-page:has(> ion-content.ios.content-fullscreen) > ion-footer.ios:not(.ios-theme-disabled, .ios26-disabled).footer-translucent::after {
+  z-index: 2;
+  bottom: 0;
+  height: 100%;
+  backdrop-filter: blur(2px);
+  mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%);
+  mask-composite: intersect;
+}
+
 /**
  * ここから下は、ion-content::beforeが content:'' を持たない限り表示されない
  */