@rdlabo/ionic-theme-ios26 1.0.5 → 1.1.0

package/src/{gestures → sheets-of-glass}/animations.ts

@@ -1,7 +1,7 @@
 import { Animation, AnimationKeyFrames } from '@ionic/core/dist/types/utils/animation/animation-interface';
 import { AnimationPosition, EffectScales } from './interfaces';
 import { createAnimation, GestureDetail } from '@ionic/core';
-import { getStep } from './utils';
+import { getStep } from '../utils';
 
 export const getScaleAnimation = (effectElement: Element): Animation => {
   return createAnimation().addElement(effectElement.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!).easing('ease-out');

package/src/{gestures → sheets-of-glass}/index.ts

@@ -2,7 +2,7 @@ import { AnimationPosition, EffectScales, registeredEffect } from './interfaces'
 import { createAnimation, createGesture, GestureDetail } from '@ionic/core';
 import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
 import { Gesture } from '@ionic/core/dist/types/utils/gesture';
-import { changeSelectedElement, cloneElement, getStep } from './utils';
+import { changeSelectedElement, cloneElement, getStep } from '../utils';
 import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
 
 const GESTURE_NAME = 'ios26-enable-gesture';

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

@@ -1,6 +1,7 @@
 @use '../utils/api';
 
 ion-alert.ios:not(.ios26-disabled) {
+  --min-width: 280px;
   --backdrop-opacity: 0.2;
 
   // --max-width: clamp(270px, 16.875rem, 324px);

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

@@ -28,23 +28,30 @@ $scaleup-large-icon-only: 1.22;
     z-index: 5;
     @include api.glass-background-button-activated;
 
-    transform: scale($scaleup-default-icon-only);
+    // Hardware acceleration optimization for scale transforms
+    transform: scale($scaleup-default-icon-only) translateZ(0);
+    -webkit-transform: scale($scaleup-default-icon-only) translateZ(0);
     &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
     &:has(ion-button:nth-child(n + 2)) {
-      transform: scale($scaleup-default);
+      transform: scale($scaleup-default) translateZ(0);
+      -webkit-transform: scale($scaleup-default) translateZ(0);
     }
     &:has(.button-small) {
-      transform: scale($scaleup-small-icon-only);
+      transform: scale($scaleup-small-icon-only) translateZ(0);
+      -webkit-transform: scale($scaleup-small-icon-only) translateZ(0);
       &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
       &:has(ion-button:nth-child(n + 2)) {
-        transform: scale($scaleup-small);
+        transform: scale($scaleup-small) translateZ(0);
+        -webkit-transform: scale($scaleup-small) translateZ(0);
       }
     }
     &:has(.button-large) {
-      transform: scale($scaleup-large-icon-only);
+      transform: scale($scaleup-large-icon-only) translateZ(0);
+      -webkit-transform: scale($scaleup-large-icon-only) translateZ(0);
       &:has(:not(.button-has-icon-only):not(.back-button-has-icon-only)),
       &:has(ion-button:nth-child(n + 2)) {
-        transform: scale($scaleup-large);
+        transform: scale($scaleup-large) translateZ(0);
+        -webkit-transform: scale($scaleup-large) translateZ(0);
       }
     }
   }
@@ -135,7 +142,17 @@ $scaleup-large-icon-only: 1.22;
   transition:
     transform var(--ios26-activated-transition-duration) ease-out,
     color 50ms ease;
-  will-change: transform;
+
+  // will-change is optimized to only apply when needed for performance
+  &:not(.ios26-disabled):hover,
+  &:not(.ios26-disabled):active,
+  &:not(.ios26-disabled).ion-activated {
+    will-change: transform;
+  }
+
+  &:not(.ios26-disabled):not(:hover):not(:active):not(.ion-activated) {
+    will-change: auto;
+  }
 
   // button size default
   &:not(.button-small):not(.button-large) {
@@ -166,7 +183,8 @@ $scaleup-large-icon-only: 1.22;
   /*
    * fill=solid && type=submit button has edge brightness.
    */
-  &.button-solid[type='submit'] {
+  &.button-solid[type='submit'],
+  &.button-solid.button-submit {
     /*
      * If not set ion-color-**, button color set primary.
      * https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/button/button.scss#L78-L81
@@ -174,6 +192,9 @@ $scaleup-large-icon-only: 1.22;
     --color: var(--ion-color-primary-brightness, var(--ion-color-contrast));
     --color-activated: var(--ion-color-primary-brightness);
     --border-color: var(--ion-color-primary-brightness, transparent);
+    --background-activated: var(--ion-color-primary-shade, #004acd);
+    --background-focused: var(--ion-color-primary-shade, #004acd);
+    --background-hover: var(--ion-color-primary-tint, #1a65eb);
     --border-width: 0.5px;
     --border-style: solid;
 

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

@@ -18,6 +18,12 @@ ion-popover.ios:not(.ios26-disabled) {
       background: transparent;
       ion-item {
         --background: transparent;
+        &:last-of-type {
+          --border-width: 0px;
+          --show-full-highlight: 0;
+          --inner-border-width: 0px;
+          --show-inset-highlight: 0;
+        }
       }
     }
   }

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

@@ -22,7 +22,8 @@ ion-range.ios:not(.ios26-disabled) {
     transition: transform 300ms ease;
   }
   &.range-pressed::part(knob) {
-    transform: scale(1.4, 1.6) translateX(calc(38px * -0.1));
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.1)) translateZ(0);
+    -webkit-transform: scale(1.4, 1.6) translateX(calc(38px * -0.1)) translateZ(0);
     @include api.glass-background(0.1, 0.5px, 120%);
     box-shadow:
       inset 0 8px 8px -8px var(--bar-background),

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

@@ -19,7 +19,16 @@ ion-segment.ios:not(.ios26-disabled) {
   }
 
   transition: transform var(--ios26-activated-transition-duration) ease-out;
-  will-change: transform;
+
+  // will-change is optimized to only apply when needed for performance
+  &:has(ion-segment-button.ion-activated),
+  &:has(ion-segment-button.segment-activated) {
+    will-change: transform;
+  }
+
+  &:not(:has(ion-segment-button.ion-activated)):not(:has(ion-segment-button.segment-activated)) {
+    will-change: auto;
+  }
 
   &.in-toolbar-color:not(.in-segment-color) {
     ion-segment-button:not(.segment-button-checked)::part(native) {
@@ -28,17 +37,20 @@ ion-segment.ios:not(.ios26-disabled) {
   }
 
   &:not(.ios26-enable-gesture).segment-activated {
-    transform: scale(1.1);
+    transform: scale(1.1) translateZ(0);
+    -webkit-transform: scale(1.1) translateZ(0);
     ion-segment-button {
       transition: transform 100ms ease-out;
       &.segment-button-checked::part(native) {
-        transform: scale(1.08);
+        transform: scale(1.08) translateZ(0);
+        -webkit-transform: scale(1.08) translateZ(0);
       }
       &::part(indicator-background) {
         position: relative;
         z-index: 1;
         background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
-        transform: scale(1.1);
+        transform: scale(1.1) translateZ(0);
+        -webkit-transform: scale(1.1) translateZ(0);
         transform-origin: center center;
       }
     }
@@ -46,16 +58,19 @@ ion-segment.ios:not(.ios26-disabled) {
 
   &.ios26-enable-gesture {
     &:has(ion-segment-button.ion-activated) {
-      transform: scale(1.1);
+      transform: scale(1.1) translateZ(0);
+      -webkit-transform: scale(1.1) translateZ(0);
       ion-segment-button {
         transition: transform 100ms ease-out;
         &.segment-button-checked::part(native) {
-          transform: scale(1.08);
+          transform: scale(1.08) translateZ(0);
+          -webkit-transform: scale(1.08) translateZ(0);
         }
         &::part(indicator-background) {
           position: relative;
           z-index: 1;
-          transform: scale(1.1);
+          transform: scale(1.1) translateZ(0);
+          -webkit-transform: scale(1.1) translateZ(0);
           transform-origin: center center;
         }
       }

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

@@ -32,9 +32,16 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   padding: 2px 2px;
 
   transition: transform var(--ios26-activated-transition-duration) ease-out;
-  will-change: transform;
+
+  // will-change is optimized to only apply when needed for performance
   &:has(ion-tab-button.ion-activated) {
-    transform: scale(1.038);
+    will-change: transform;
+    transform: scale(1.038) translateZ(0);
+    -webkit-transform: scale(1.038) translateZ(0);
+  }
+
+  &:not(:has(ion-tab-button.ion-activated)) {
+    will-change: auto;
   }
 
   &:has(ion-tab-button.ion-activated) {

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

@@ -7,10 +7,12 @@
 ion-item.ios:not(.ios26-disabled) ion-toggle.ios:not(.ios26-disabled) {
   &.toggle-checked.toggle-activated::part(track) {
     transform-origin: left;
-    transform: scaleX(0.894);
+    transform: scaleX(0.894) translateZ(0);
+    -webkit-transform: scaleX(0.894) translateZ(0);
   }
   &.toggle-activated::part(handle) {
-    transform: scale(1.4, 1.6) translateX(calc(38px * -0.15));
+    transform: scale(1.4, 1.6) translateX(calc(38px * -0.15)) translateZ(0);
+    -webkit-transform: scale(1.4, 1.6) translateX(calc(38px * -0.15)) translateZ(0);
   }
 }
 
@@ -27,10 +29,12 @@ ion-toggle.ios:not(.ios26-disabled) {
     transition: transform 280ms ease;
   }
   &.toggle-activated:not(.toggle-checked)::part(handle) {
-    transform: translateX(-4px) scale(1.4, 1.6);
+    transform: translateX(-4px) scale(1.4, 1.6) translateZ(0);
+    -webkit-transform: translateX(-4px) scale(1.4, 1.6) translateZ(0);
   }
   &.toggle-activated::part(handle) {
-    transform: scale(1.4, 1.6);
+    transform: scale(1.4, 1.6) translateZ(0);
+    -webkit-transform: scale(1.4, 1.6) translateZ(0);
     @include api.glass-background(0.1, 0.5px, 120%);
     transition:
       transform 280ms,

package/src/styles/utils/api.scss

@@ -8,6 +8,12 @@
   border-right: 0.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.8);
   border-bottom: 0.5px solid rgba(var(--ios26-glass-border-color-rgb), 1);
   border-left: 0.5px solid rgba(var(--ios26-glass-border-color-rgb), 0.6);
+
+  // Hardware acceleration optimization for glass effects
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 @mixin glass-background-button-activated {
@@ -24,6 +30,12 @@
   border-right: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.4);
   border-bottom: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.8);
   border-left: 0.8px solid rgba(var(--ios26-button-color-selected-rgb), 0.6);
+
+  // Hardware acceleration optimization for glass effects
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 @mixin glass-background-overlay {

package/src/{gestures/utils.ts → utils.ts}

@@ -1,4 +1,21 @@
-import { AnimationPosition } from './interfaces';
+import { AnimationPosition } from './sheets-of-glass/interfaces';
+
+declare const __zone_symbol__requestAnimationFrame: any;
+declare const requestAnimationFrame: any;
+
+export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
+  return el.shadowRoot || fallback;
+};
+
+export const raf = (h: FrameRequestCallback) => {
+  if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+    return __zone_symbol__requestAnimationFrame(h);
+  }
+  if (typeof requestAnimationFrame === 'function') {
+    return requestAnimationFrame(h);
+  }
+  return setTimeout(h);
+};
 
 export const cloneElement = (tagName: string): HTMLElement => {
   const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);