@rdlabo/ionic-theme-ios27 0.1.0 → 0.2.1-beta.pr185.sha0793981f6cf4

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:'' を持たない限り表示されない
  */

package/src/tab-bar-searchable/animations/enter.ts

@@ -1,7 +1,6 @@
-import { ElementReferences, ElementSizes } from '../interfaces';
 import { Animation, createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION, type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
-import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
 
 export const createEffectAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
   const effectElement = cloneElement('ion-icon');

package/src/tab-bar-searchable/animations/leave.ts

@@ -1,7 +1,6 @@
-import { ElementReferences, ElementSizes } from '../interfaces';
 import { Animation, createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION, type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
-import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
 
 export const createReverseEffectAnimation = (
   references: ElementReferences,

package/src/tab-bar-searchable/index.ts

@@ -1,5 +1,4 @@
 import { createAnimation } from '@ionic/core';
-import { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from '../native-integration';
 import {
   ANIMATION_DELAY_BASE,
   ANIMATION_DURATION,
@@ -7,8 +6,11 @@ import {
   getElementReferences,
   getElementSizes,
   throwErrorByFailedClickElement,
-} from './utils';
-import { SearchableEventCache, TabBarSearchableFunction, TabBarSearchableType } from './interfaces';
+  type SearchableEventCache,
+  type TabBarSearchableFunction,
+  TabBarSearchableType,
+} from '@rdlabo/ionic-theme-utils';
+import { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from '../native-integration';
 import {
   createCloseButtonsAnimation,
   createEffectAnimation,
@@ -24,7 +26,13 @@ import {
   createReverseTabBarAnimation,
 } from './animations/leave';
 
-export * from './interfaces';
+export {
+  TabBarSearchableType,
+  type TabBarSearchableFunction,
+  type SearchableEventCache,
+  type ElementSizes,
+  type ElementReferences,
+} from '@rdlabo/ionic-theme-utils';
 
 /**
  *  <ion-fab vertical="bottom" horizontal="end" slot="fixed">