@rdlabo/ionic-theme-ios27 0.1.0-0 → 0.1.0-1

package/docs/eslint.md

@@ -2,7 +2,7 @@
 title: Keep lists consistent with ESLint
 ---
 
-Catch missing list groups before they reach the screen. In Ionic Angular apps, `@rdlabo/eslint-plugin-rules` checks the markup used by iOS 26.
+Catch missing list groups before they reach the screen. In Ionic Angular apps, `@rdlabo/eslint-plugin-rules` checks the markup used by iOS 27.
 
 ## Enable the list check
 

package/docs/feedback.md

@@ -31,7 +31,7 @@ export interface IonicConfig {
 
 ### native-inner(or item-inner) part to ion-item
 
-The styling for `ion-item[lines=inset]` is applied to `.item-inner`, which cannot be styled directly. This limitation means that for iOS 26 styling, I can only modify the border-bottom style through `::part(native)` with padding-right, preventing me from utilizing the full right side of `ion-item`. Adding `::part(native-inner)` would increase styling flexibility.
+The styling for `ion-item[lines=inset]` is applied to `.item-inner`, which cannot be styled directly. This limitation means that for iOS 27 styling, I can only modify the border-bottom style through `::part(native)` with padding-right, preventing me from utilizing the full right side of `ion-item`. Adding `::part(native-inner)` would increase styling flexibility.
 
 ```diff
   <ion-item>
@@ -54,7 +54,7 @@ Resolved.
 
 ### should disable ion-back-button Animation
 
-Resolved: by created https://github.com/rdlabo-dev/ionic-theme-ios26/tree/main/src/transition
+Resolved: by created https://github.com/rdlabo-dev/ionic-theme-ios27/tree/main/src/transition
 
 ## feat(): ion-content[fullscreen=true] will have .content-fullscreen class
 

package/docs/ios-adaptive.md

@@ -0,0 +1,90 @@
+---
+title: Adaptive iOS themes
+---
+
+# Adaptive iOS themes
+
+Use CSS feature queries to choose a theme while keeping Ionic's default iOS styles on older browsers. Safari 27 adds `:heading` support; see the [WebKit announcement](https://webkit.org/blog/17967/news-from-wwdc26-webkit-in-safari-27-beta/).
+
+These checks detect browser capabilities, not the operating system version. Other browsers may support the same features. Keep Ionic mode and platform-specific animation configuration consistent with your application.
+
+## Load only the iOS 27 theme
+
+In your global Sass stylesheet, use `meta.load-css` inside the feature query. Unlike `@use`, it can emit the theme inside `@supports`.
+
+```scss
+@use 'sass:meta';
+
+@supports selector(:heading) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect');
+}
+```
+
+## Use the iOS 26 and iOS 27 themes together
+
+Install both packages:
+
+```bash
+npm install @rdlabo/ionic-theme-ios26 @rdlabo/ionic-theme-ios27
+```
+
+Use this global Sass configuration instead of unconditional theme imports:
+
+```scss
+@use 'sass:meta';
+
+@supports selector(:heading) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect');
+}
+
+@supports (text-wrap: pretty) and (not selector(:heading)) {
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/default-variables');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/ionic-theme-ios26-dark-class');
+  @include meta.load-css('@rdlabo/ionic-theme-ios26/src/styles/md-remove-ios-class-effect');
+}
+```
+
+The branches are mutually exclusive. Browsers without either feature retain Ionic's default styling. The `text-wrap: pretty` check preserves the earlier theme's capability-based fallback for older Safari versions.
+
+Both examples use class-based dark mode. Load Ionic's matching dark palette in your application; for system or always-dark mode, replace the `-dark-class` imports with the matching variant. If you also use `md-ion-list-inset`, load the corresponding package's stylesheet inside each branch.
+
+## Select matching JavaScript animations
+
+Use the same feature checks for dynamic imports before initializing Ionic. Call this loader for the iOS platform; leave other platforms on their existing animation configuration.
+
+```ts
+async function loadIOSAnimations() {
+  if (typeof CSS === 'undefined') {
+    return {};
+  }
+
+  const theme = CSS.supports('selector(:heading)')
+    ? await import('@rdlabo/ionic-theme-ios27')
+    : CSS.supports('text-wrap: pretty')
+      ? await import('@rdlabo/ionic-theme-ios26')
+      : undefined;
+
+  if (!theme) {
+    return {};
+  }
+
+  return {
+    navAnimation: theme.iosTransitionAnimation,
+    popoverEnter: theme.popoverEnterAnimation,
+    popoverLeave: theme.popoverLeaveAnimation,
+  };
+}
+
+// In your browser bootstrap, before initializing Ionic:
+const animations = isPlatform('ios') ? await loadIOSAnimations() : {};
+provideIonicAngular({ ...animations });
+```
+
+Import `isPlatform` and `provideIonicAngular` from your Ionic Angular entry point as shown in the README. Pass the same options to `setupIonicReact` or `IonicVue` when using those frameworks. The imports are selected at runtime; the bundler may still emit chunks for both packages. In server-rendered apps, run the selection during browser initialization.

package/docs/migration.md

@@ -4,91 +4,14 @@ title: Migration
 
 # Migration
 
-Review every section newer than the version currently installed, in ascending order. For example, when upgrading from 1.x to 9.0.0, complete the 2.0.0 and 3.0.0 migration steps before reviewing 9.0.0.
+## iOS 27 naming
 
-Each section lists only the changes that require application code or configuration updates.
+Use `@rdlabo/ionic-theme-ios27` for the current theme. Update stylesheet imports to `ionic-theme-ios27.scss` or `ionic-theme-ios27.css`, including the `-dark-always`, `-dark-system`, and `-dark-class` variants.
 
-## Migrating to 9.0.0
+Use the version-independent `--ios-theme-*` CSS variables. The corresponding `--ios26-*` variables remain supported as deprecated fallbacks. When both are set, the new name takes precedence. For example, use `--ios-theme-content-box-shadow-rgb` instead of `--ios26-content-box-shadow-rgb`.
 
-Version 9 aligns the theme's major version with Ionic Framework 9. It does not introduce additional breaking changes beyond those documented in the earlier migration sections.
+For opting out of the theme, use the version-independent `ios-theme-disabled` class. The `ios26-disabled` class remains supported as a deprecated alias; migrate existing markup when convenient.
 
-Both Ionic 8 and Ionic 9 remain supported. Version 9 requires `@ionic/core >=8.8.1 <10`.
+See [Special markup and classes](./special-markup.md) and [Default variables](../src/styles/default-variables.scss) for the current names.
 
-## Migrating to 3.0.0
-
-### Rename `.header-item-group` to `.item-group-header`
-
-The class for an `ion-item-group` used as a section header has been renamed for consistency with the element it modifies. Replace every occurrence of `.header-item-group` in application templates and styles.
-
-```diff
-- <ion-item-group class="header-item-group">
-+ <ion-item-group class="item-group-header">
-    ...
-  </ion-item-group>
-```
-
-The old class is no longer styled by the theme. This rename applies to markup shared with `@rdlabo/ionic-theme-md3` as well.
-
-## Migrating to 2.0.0
-
-### Configure `iosTransitionAnimation`
-
-Version 2 requires the package navigation transition. It follows Ionic's default iOS transition without the obsolete `animateBackButton()` behavior that animated a Large Title into the back-button label.
-
-```ts
-import { isPlatform } from '@ionic/core'; // or @ionic/angular/standalone, @ionic/react, @ionic/vue
-import { iosTransitionAnimation } from '@rdlabo/ionic-theme-ios26';
-
-// Angular
-provideIonicAngular({
-  // ...
-  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
-});
-
-// React
-setupIonicReact({
-  // ...
-  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
-});
-
-// Vue
-createApp(App).use(IonicVue, {
-  // ...
-  navAnimation: isPlatform('ios') ? iosTransitionAnimation : undefined,
-});
-```
-
-With this transition configured, `<ion-buttons><ion-back-button></ion-back-button></ion-buttons>` can be used without the unwanted transition side effects caused by the old animation.
-
-## Migrating to 1.0.0
-
-### Update SCSS import paths
-
-The source files moved under `src/styles` when JavaScript files were added to the package.
-
-```diff
-- @import '@rdlabo/ionic-theme-ios26/src/default-variables.scss';
-+ @import '@rdlabo/ionic-theme-ios26/src/styles/default-variables.scss';
-```
-
-Generated CSS paths under `dist` did not change.
-
-### Rename `--ios26-color-background-rgb`
-
-```diff
-  :root {
--   --ios26-color-background-rgb: 255, 255, 255;
-+   --ios26-content-box-shadow-rgb: 255, 255, 255;
-  }
-```
-
-### Rename brightness variables
-
-Replace each `--ion-color-*-brightness-rgb` variable with `--ion-color-*-brightness` and use a color value instead of an RGB channel list.
-
-```diff
-  :root {
--   --ion-color-primary-brightness-rgb: 130, 255, 255;
-+   --ion-color-primary-brightness: #96feff;
-  }
-```
+Earlier migration notes are preserved on the [previous theme branch](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/ios26/docs/migration.md).

package/docs/special-markup.md

@@ -79,7 +79,7 @@ Add `.segment-expand` when segment buttons should divide the available width eve
 
 ## Classic search bar in a condense header
 
-The theme gives iOS search bars the iOS 26 appearance by default. Add `.searchbar-classic` to the search field shown beneath a large title in an `ion-header` with `collapse="condense"`. It uses the conventional filled iOS appearance and collapses with the large title instead of remaining in the fixed header.
+The theme gives iOS search bars the iOS 27 appearance by default. Add `.searchbar-classic` to the search field shown beneath a large title in an `ion-header` with `collapse="condense"`. It uses the conventional filled iOS appearance and collapses with the large title instead of remaining in the fixed header.
 
 Place it in a toolbar with a color, such as `color="light"`; the classic background is derived from that color's contrast value.
 
@@ -136,10 +136,12 @@ Add `.toolbar-searchbar` when an `ion-toolbar` combines a search bar with start
 
 ## Opting out
 
-Add `.ios26-disabled` to an individual Ionic component when it must retain Ionic's standard iOS styling.
+Add `.ios-theme-disabled` to an individual Ionic component when it must retain Ionic's standard iOS styling.
+
+`.ios26-disabled` is deprecated but remains supported as an alias with the same behavior. Use `.ios-theme-disabled` for new code.
 
 ```html preview
-<ion-button>iOS 26 theme</ion-button> <ion-button class="ios26-disabled">Standard Ionic button</ion-button>
+<ion-button>iOS 27 theme</ion-button> <ion-button class="ios-theme-disabled">Standard Ionic button</ion-button>
 ```
 
 For the background model behind inset lists, see [Using `ion-item-group`](./using-ion-item-group.md).

package/docs/using-ion-item-group.md

@@ -24,9 +24,9 @@ No wrapper is required for lists that do not use `inset="true"`.
 
 ## Why the wrapper is required
 
-Ionic normally gives `ion-list` its background, which makes `ion-list-header` appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.
+Ionic normally gives `ion-list` its background, which makes `ion-list-header` appear inside the same surface as the items. The iOS 27 layout treats the header and item surface separately.
 
-![Inset list background comparison showing why ion-item-group is required](https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios26/v3.0.0/screenshots/why-ion-list-inset.png)
+![Inset list background comparison showing why ion-item-group is required](https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/v3.0.0/screenshots/why-ion-list-inset.png)
 
 The theme therefore:
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "0.1.0-0",
+  "version": "0.1.0-1",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,7 +46,7 @@
   "bugs": {
     "url": "https://github.com/rdlabo-dev/ionic-theme-ios27/issues"
   },
-  "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios26",
+  "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "devDependencies": {
     "@ionic/angular": "^9.0.0",
     "husky": "^9.1.7",

package/src/popover/animations/ios.enter.ts

@@ -27,7 +27,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
       return false;
     }
-    if (referenceSizeEl.classList.contains('ios26-disabled')) {
+    if (referenceSizeEl.matches('.ios-theme-disabled, .ios26-disabled')) {
       return false;
     }
     return true;
@@ -102,7 +102,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
       .duration(200)
       .addElement(referenceSizeEl)
       .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
-      .beforeAddClass('ios26-replace-element')
+      .beforeAddClass('ios27-replace-element')
       .fromTo('transform', 'scale(1)', 'scale(1.05)')
       .fromTo('opacity', 1, 0);
   }

package/src/popover/animations/ios.leave.ts

@@ -17,7 +17,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
   const targetAnimation = createAnimation();
 
   const doc = baseEl.ownerDocument as any;
-  const replaceElement = doc.querySelector('.ios26-replace-element') as HTMLElement | null;
+  const replaceElement = doc.querySelector('.ios27-replace-element') as HTMLElement | null;
 
   if (replaceElement) {
     const ratio = contentEl.getBoundingClientRect().width / contentEl.getBoundingClientRect().height;
@@ -27,7 +27,7 @@ export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
       .addElement(replaceElement)
       .delay(100)
       .duration(300)
-      .afterRemoveClass('ios26-replace-element')
+      .afterRemoveClass('ios27-replace-element')
       .fromTo('transform', `scale(${scale})`, 'scale(1)')
       .fromTo('opacity', 0, 0.9);
   }

package/src/sheets-of-glass/index.ts

@@ -4,8 +4,8 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/core';
 import { changeSelectedElement, cloneElement, getStep } from '../utils';
 import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
 
-const GESTURE_NAME = 'ios26-enable-gesture';
-const ANIMATED_NAME = 'ios26-animated';
+const GESTURE_NAME = 'ios27-enable-gesture';
+const ANIMATED_NAME = 'ios27-animated';
 
 export const registerEffect = (
   targetElement: HTMLElement,

package/src/styles/components/ion-action-sheet.scss

@@ -1,12 +1,12 @@
 @use '../utils/api';
 
-ion-action-sheet.ios:not(.ios26-disabled) {
+ion-action-sheet.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --backdrop-opacity: 0.2;
   --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
 
   .action-sheet-wrapper {
     padding-bottom: 0;
-    bottom: var(--ios26-floating-safe-area-bottom);
+    bottom: var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));
   }
 
   .action-sheet-container {
@@ -71,10 +71,10 @@ ion-action-sheet.ios:not(.ios26-disabled) {
 
 /**
  * For ion-select[interface=action-sheet].
- * ios26, action-sheet should not has 'cancel'.
+ * ios27, action-sheet should not has 'cancel'.
  * It is recommend to use Popover.
  */
-ion-action-sheet.ios.select-action-sheet:not(.ios26-disabled) {
+ion-action-sheet.ios.select-action-sheet:not(.ios-theme-disabled, .ios26-disabled) {
   .action-sheet-container {
     .action-sheet-group {
       button.action-sheet-cancel {

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

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-alert.ios:not(.ios26-disabled) {
+ion-alert.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --min-width: 280px;
   --backdrop-opacity: 0.2;
 

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

@@ -23,7 +23,7 @@ $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(--ios26-activated-transition-duration) ease-out;
+  transition: transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out;
 
   z-index: 0;
 
@@ -59,11 +59,11 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
     }
   }
 
-  &:has(ion-button:not(.ios26-disabled).button-clear.button-large) {
+  &:has(ion-button:not(.ios-theme-disabled, .ios26-disabled).button-clear.button-large) {
     border-radius: 30px;
   }
 
-  ion-button:not(.ios26-disabled).button-clear {
+  ion-button:not(.ios-theme-disabled, .ios26-disabled).button-clear {
     --background: transparent;
     --border-style: none;
     --border-width: 0;
@@ -121,11 +121,11 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
     }
   }
 
-  ion-button:not(.ios26-disabled) {
+  ion-button:not(.ios-theme-disabled, .ios26-disabled) {
     margin: 0;
   }
 
-  ion-menu-button:not(.ios26-disabled) {
+  ion-menu-button:not(.ios-theme-disabled, .ios26-disabled) {
     width: 44px;
     height: 44px;
     padding: 2px;
@@ -140,7 +140,7 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
   }
 
   transition:
-    transform var(--ios26-activated-transition-duration) ease-out,
+    transform var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) ease-out,
     color 50ms ease;
 
   &.in-toolbar:not(.ion-color):not(.in-toolbar-color) {
@@ -153,13 +153,13 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
   }
 
   // will-change is optimized to only apply when needed for performance
-  &:not(.ios26-disabled):hover,
-  &:not(.ios26-disabled):active,
-  &:not(.ios26-disabled).ion-activated {
+  &:not(.ios-theme-disabled, .ios26-disabled):hover,
+  &:not(.ios-theme-disabled, .ios26-disabled):active,
+  &:not(.ios-theme-disabled, .ios26-disabled).ion-activated {
     will-change: transform;
   }
 
-  &:not(.ios26-disabled):not(:hover):not(:active):not(.ion-activated) {
+  &:not(.ios-theme-disabled, .ios26-disabled):not(:hover):not(:active):not(.ion-activated) {
     will-change: auto;
   }
 
@@ -248,8 +248,8 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
         }
       } @else {
         --box-shadow:
-          inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),
-          0 0 8px -4px rgba(var(--ios26-glass-box-shadow-color-rgb), 0.92);
+          inset 0 0 8px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
+          0 0 8px -4px rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.92);
       }
       &::part(native)::before {
         content: '';
@@ -313,13 +313,13 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
 
   // fill:default only
   &:not(.button-solid):not(.button-outline):not(.button-clear) {
-    --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
     --background-hover: transparent;
     --background-activated: transparent;
     @if not $is-back-button {
       --box-shadow:
-        inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2),
-        0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08);
+        inset 0 0 8px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
+        0 0.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.08);
     }
 
     &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
@@ -409,18 +409,22 @@ $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
   }
 }
 
-ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button:not(.button-clear), ion-menu-button.menu-button-hidden)) {
+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)
+  ) {
   @include theme-buttons;
 }
 
 // Ionic's collapsing-header transition has a more specific contextual selector.
 .header-collapse-main
   :where(ion-toolbar.in-toolbar)
-  ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button:not(.button-clear), ion-menu-button.menu-button-hidden)) {
-  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  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;
 }
 
-ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button.button-clear)) {
+ion-buttons.ios:not(.ios-theme-disabled, .ios26-disabled):not(:has(ion-back-button, ion-button.button-clear)) {
   ion-button {
     margin: 0 6px;
     &:first-child {
@@ -435,9 +439,9 @@ ion-buttons.ios:not(.ios26-disabled):not(:has(ion-back-button, ion-button.button
   }
 }
 
-ion-button.ios:not(.ios26-disabled) {
+ion-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include theme-button;
 }
-ion-back-button.ios:not(.ios26-disabled) {
+ion-back-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include theme-button($is-back-button: true);
 }

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

@@ -1,4 +1,4 @@
-ion-card.ios:not(.ios26-disabled) {
+ion-card.ios:not(.ios-theme-disabled, .ios26-disabled) {
   border-radius: 24px;
 
   ion-list ion-item {

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

@@ -1,10 +1,10 @@
 /**
- * Since iOS26, content is now displayed to the full extent of the top and bottom safe areas,
+ * Since iOS27, content is now displayed to the full extent of the top and bottom safe areas,
  * so we adjust the margin and padding of the content.
  * Also supports virtual scrolling using .ion-content-scroll-host.
  */
-.ion-page.ios:not(.ios26-disabled):has(ion-header.header-translucent)
-  ion-content.ios:not(.ios26-disabled).content-fullscreen:has(.ion-content-scroll-host) {
+.ion-page.ios:not(.ios-theme-disabled, .ios26-disabled):has(ion-header.header-translucent)
+  ion-content.ios:not(.ios-theme-disabled, .ios26-disabled).content-fullscreen:has(.ion-content-scroll-host) {
   --padding-top: calc(var(--offset-top) * -1);
   > *:not(.ion-content-scroll-host, ion-fab) {
     transform: translateY(var(--offset-top));
@@ -13,10 +13,12 @@
     padding-top: var(--offset-top);
   }
 }
-.ion-page.ios:not(.ios26-disabled):not(:has(ion-footer)) ion-content.ios:not(.ios26-disabled).content-fullscreen .ion-content-scroll-host {
-  margin-bottom: calc(calc(60px + var(--ios26-floating-safe-area-bottom)) * -1);
-  padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom));
+.ion-page.ios:not(.ios-theme-disabled, .ios26-disabled):not(:has(ion-footer))
+  ion-content.ios:not(.ios-theme-disabled, .ios26-disabled).content-fullscreen
+  .ion-content-scroll-host {
+  margin-bottom: calc(calc(60px + var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom))) * -1);
+  padding-bottom: calc(60px + var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom)));
 }
-ion-content.ios:not(.ios26-disabled).content-fullscreen:not(:has(.ion-content-scroll-host)) {
-  --padding-bottom: calc(60px + var(--ios26-floating-safe-area-bottom));
+ion-content.ios:not(.ios-theme-disabled, .ios26-disabled).content-fullscreen:not(:has(.ion-content-scroll-host)) {
+  --padding-bottom: calc(60px + var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom)));
 }

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

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-datetime.ios:not(.ios26-disabled) {
+ion-datetime.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include api.glass-background-overlay;
   border-radius: 24px;
 

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

@@ -4,19 +4,21 @@ $scaleup-small-icon-only: api.$button-scaleup-small-icon-only;
 $scaleup-default-icon-only: api.$button-scaleup-default-icon-only;
 $scaleup-large-icon-only: api.$button-scaleup-large-icon-only;
 
-ion-fab.ios:not(.ios26-disabled) {
+ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --transform-value: 2.5px;
   &:has(> ion-fab-button.fab-button-small) {
     --transform-value: 4px;
   }
 
   ion-fab-button {
-    --background: rgba(var(--ios26-glass-background-rgb), 0.72);
+    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
     --box-shadow:
-      inset 0 0 8px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.2), 0 0.5px 1px 0 rgba(var(--ios26-glass-box-shadow-color-rgb), 0.08);
+      inset 0 0 8px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.2),
+      0 0.5px 1px 0 rgba(var(--ios-theme-glass-box-shadow-color-rgb, var(--ios26-glass-box-shadow-color-rgb)), 0.08);
     --transition:
-      var(--ios26-activated-transition-duration) transform cubic-bezier(0.25, 1.11, 0.78, 1.59),
-      var(--ios26-activated-transition-duration) color ease;
+      var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) transform
+        cubic-bezier(0.25, 1.11, 0.78, 1.59),
+      var(--ios-theme-activated-transition-duration, var(--ios26-activated-transition-duration)) color ease;
     --background-activated-opacity: 0;
     --background-focused-opacity: 0;
     --background-hover-opacity: 0;
@@ -77,15 +79,15 @@ ion-fab.ios:not(.ios26-disabled) {
   }
 
   &.fab-vertical-top {
-    top: var(--ios26-floating-safe-area-top);
+    top: var(--ios-theme-floating-safe-area-top, var(--ios26-floating-safe-area-top));
   }
 
   &.fab-vertical-bottom {
-    bottom: var(--ios26-floating-safe-area-bottom);
+    bottom: var(--ios-theme-floating-safe-area-bottom, var(--ios26-floating-safe-area-bottom));
   }
 
   &.fab-horizontal-start {
-    left: calc(16px + var(--ios26-menu-width, var(--ion-safe-area-left), 0px));
+    left: calc(16px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ion-safe-area-left), 0px)));
   }
 
   &.fab-horizontal-end {
@@ -94,7 +96,7 @@ ion-fab.ios:not(.ios26-disabled) {
 
   &:has(.fab-button-small) {
     &.fab-horizontal-start {
-      left: calc(10px + var(--ios26-menu-width, var(--ion-safe-area-left), 0px));
+      left: calc(10px + var(--ios-theme-menu-width, var(--ios26-menu-width, var(--ion-safe-area-left), 0px)));
     }
 
     &.fab-horizontal-end {

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

@@ -54,7 +54,7 @@
   }
 }
 
-ion-input.ios:not(.ios26-disabled) {
+ion-input.ios:not(.ios-theme-disabled, .ios26-disabled) {
   &.input-fill-outline {
     @include outline-field('input');
 
@@ -65,7 +65,7 @@ ion-input.ios:not(.ios26-disabled) {
   }
 }
 
-ion-textarea.ios:not(.ios26-disabled) {
+ion-textarea.ios:not(.ios-theme-disabled, .ios26-disabled) {
   &.textarea-fill-outline {
     @include outline-field('textarea');
 

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

@@ -1,6 +1,6 @@
 @use '../utils/structured-list';
 
-ion-list.ios:not(.ios26-disabled) {
+ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include structured-list.support-text;
   ion-item {
     --background-hover-opacity: 0;
@@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) {
   }
 }
 
-ion-list.list-inset.ios:not(.ios26-disabled) {
+ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include structured-list.layout(20px, 24px);
 
   ion-radio-group,

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

@@ -1,6 +1,6 @@
 @use '../utils/api';
 
-ion-loading.ios:not(.ios26-disabled) {
+ion-loading.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --backdrop-opacity: 0.2;
   .loading-wrapper {
     @include api.glass-background;