rdlabo-dev · rdlabo · Sep 10, 2026 · Sep 10, 2026 · Sep 10, 2026 · Sep 10, 2026
diff --git a/README.md b/README.md
@@ -3,7 +3,9 @@
 A CSS/JS theme library that brings the iOS 27 Liquid Glass appearance and navigation animations to Ionic applications while preserving Ionic components and conventions.
 
 > [!IMPORTANT]
-> This `main` branch contains the iOS 27 theme under the package name `@rdlabo/ionic-theme-ios27`. Its first npm release is pending. For the iOS 26 theme (`@rdlabo/ionic-theme-ios26`), see the [`ios26` branch](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios26).
+> This `main` branch contains the iOS 27 theme under the package name `@rdlabo/ionic-theme-ios27`. For the iOS 26 theme (`@rdlabo/ionic-theme-ios26`), see the [`ios26` branch](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios26).
+
+> All versions before 1.0.0 are release candidates (RC). APIs, CSS variables, classes, styling, and behavior may change without backward compatibility, including in minor and patch releases. A stable compatibility commitment starts with 1.0.0.
 
 [Try the iOS 27 demo](https://ionic-theme-ios27.rdlabo.dev/).
 
@@ -19,19 +21,17 @@ A CSS/JS theme library that brings the iOS 27 Liquid Glass appearance and naviga
 
 ## Installation
 
-Requires `@ionic/core` 8.8.1 or later (Ionic 8 and 9). After the first npm release, install it in an existing Ionic project:
+Requires `@ionic/core` 8.8.1 or later (Ionic 8 and 9). Install it in an existing Ionic project:
 
 ```bash
 npm install @rdlabo/ionic-theme-ios27
 ```
 
-The stylesheet filenames still use `ionic-theme-ios26` inside the new package. Use the paths below to load the iOS 27 theme.
-
 And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 
 ```css
 @import '@rdlabo/ionic-theme-ios27/dist/css/default-variables.css';
-@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios26.css';
+@import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27.css';
 
 /**
  * Keep Material Design mode unaffected by the iOS theme
@@ -50,9 +50,9 @@ And import the theme in your project's main CSS file (e.g., `src/styles.scss`).
 /*
  * Support Dark Mode
  * We support Ionic Dark Mode. More information is here: https://ionicframework.com/docs/theming/dark-mode
- * use Always:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios26-dark-always.css'
- * use System:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios26-dark-system.css'
- * use CSS Class: @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios26-dark-class.css'
+ * use Always:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-always.css'
+ * use System:    @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-system.css'
+ * use CSS Class: @import '@rdlabo/ionic-theme-ios27/dist/css/ionic-theme-ios27-dark-class.css'
  */
 ```
 
@@ -119,8 +119,8 @@ When your global stylesheet uses Sass, initialize the themes in this order:
 
 ```scss
 @use '@rdlabo/ionic-theme-ios27/src/styles/default-variables.scss' as ios27-vars;
-@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios26.scss';
-@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios26-dark-class.scss';
+@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27.scss';
+@use '@rdlabo/ionic-theme-ios27/src/styles/ionic-theme-ios27-dark-class.scss';
 @use '@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect.scss';
 @use '@rdlabo/ionic-theme-md3/dist/css/default-variables.css' as md3-vars;
 @use '@rdlabo/ionic-theme-md3/dist/css/ionic-theme-md3.css';
@@ -163,11 +163,13 @@ createApp(App)
 
 ## Documentation
 
+- [Adaptive iOS themes](./docs/ios-adaptive.md) — conditionally load iOS 26 or iOS 27 styles.
 - [Using ion-item-group](./docs/using-ion-item-group.md) — required markup for inset lists.
 - [Special markup and classes](./docs/special-markup.md) — opt-in markup and utility classes used by the theme.
 - [ESLint](./docs/eslint.md) — check list structure with ESLint rules.
 - [Features](./docs/features.md) — CSS variables, Liquid Glass, selective imports, and dark mode.
 - [Experimental Animation](./docs/experimental-animation.md) — tab bar and searchable effects.
+- [Migration](./docs/migration.md) — stylesheet, class, and CSS variable naming changes.
 - [iOS 26 migration history](https://github.com/rdlabo-dev/ionic-theme-ios27/blob/ios26/docs/migration.md) — earlier major-version changes for the previous package.
 
 <!-- rdlabo-docs-omit -->

diff --git a/demo/README.md b/demo/README.md
@@ -1,6 +1,6 @@
 # Demo Application
 
-This is an Angular-based demo application for the Ionic iOS26 Theme Library.
+This is an Angular-based demo application for the Ionic iOS27 Theme Library.
 
 ## Getting Started
 
@@ -84,8 +84,8 @@ demo/
 │   │       ├── pages/        # All page components
 │   │       └── index.routes.ts
 │   ├── theme/
-│   │   └── theme-ios26.scss  # iOS26 theme
-│   └── global.scss
+│   │   └── variables.scss    # Demo variables
+│   └── global.scss           # Imports the iOS 27 theme
 ├── playwright.config.ts       # Playwright configuration
 └── package.json
 ```

diff --git a/demo/capacitor.config.ts b/demo/capacitor.config.ts
@@ -1,8 +1,8 @@
 import type { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
-  appId: 'io.ionic.theme.ios26',
-  appName: 'theme-ios26',
+  appId: 'io.ionic.theme.ios27',
+  appName: 'theme-ios27',
   webDir: 'www',
 };
 

diff --git a/demo/ios/App/App.xcodeproj/project.pbxproj b/demo/ios/App/App.xcodeproj/project.pbxproj
@@ -355,7 +355,7 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.theme.ios26;
+				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.theme.ios27;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -375,7 +375,7 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0;
-				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.theme.ios26;
+				PRODUCT_BUNDLE_IDENTIFIER = io.ionic.theme.ios27;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

diff --git a/demo/ios/App/App/Info.plist b/demo/ios/App/App/Info.plist
@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>theme-ios26</string>
+        <string>theme-ios27</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>

diff --git a/demo/src/app/album/album-page.component.html b/demo/src/app/album/album-page.component.html
@@ -2,7 +2,7 @@
   <ion-toolbar color="light">
     <ion-title size="large" style="margin-top: 8px">Library</ion-title>
     <ion-buttons slot="end" style="margin-top: 6px">
-      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios26"
+      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios27"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
       <ion-button fill="default">Select</ion-button>

diff --git a/demo/src/app/docs/docs-content.generated.ts b/demo/src/app/docs/docs-content.generated.ts
diff --git a/demo/src/app/docs/docs-page.component.html b/demo/src/app/docs/docs-page.component.html
@@ -2,7 +2,7 @@
   <ion-toolbar>
     <ion-title>Docs</ion-title>
     <ion-buttons slot="end">
-      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios26">
+      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios27">
         <ion-icon name="logo-github" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>

diff --git a/demo/src/app/index/index-page.component.html b/demo/src/app/index/index-page.component.html
@@ -5,7 +5,7 @@
     </ion-buttons>
     <ion-title>Index</ion-title>
     <ion-buttons slot="end">
-      <ion-button href="https://github.com/rdlabo-dev/ionic-theme-ios26"
+      <ion-button href="https://github.com/rdlabo-dev/ionic-theme-ios27"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
       <ion-button href="https://ionicframework.com/"><ion-icon name="logo-ionic" slot="icon-only"></ion-icon></ion-button>

diff --git a/demo/src/app/index/pages/button/button.page.html b/demo/src/app/index/pages/button/button.page.html
@@ -12,7 +12,7 @@
     <ion-buttons slot="end">
       <ion-button>Example</ion-button>
     </ion-buttons>
-    <ion-buttons slot="end" class="ios26-disabled">
+    <ion-buttons slot="end" class="ios-theme-disabled">
       <ion-button fill="default">Example</ion-button>
       <ion-button fill="solid">Example</ion-button>
       <ion-button>Example</ion-button>
@@ -144,7 +144,7 @@ <h2>button</h2>
         <ion-label><code>buttons > button[fill=default][size=large]</code></ion-label>
         <ion-buttons slot="end">
           <ion-button fill="default" size="large">Buttons Shadow</ion-button>
-          <ion-button fill="default" class="ios26-disabled" size="large">Default Theme</ion-button>
+          <ion-button fill="default" class="ios-theme-disabled" size="large">Default Theme</ion-button>
         </ion-buttons>
       </ion-item>
       <ion-item>

diff --git a/demo/src/app/index/pages/chip/chip.page.html b/demo/src/app/index/pages/chip/chip.page.html
@@ -24,17 +24,17 @@ <h2>chip</h2>
   </ion-list>
 
   <section class="section-example">
-    <ion-chip class="ios26-disabled">Default</ion-chip>
-    <ion-chip class="ios26-disabled" [disabled]="true">Disabled</ion-chip>
-    <ion-chip class="ios26-disabled" [outline]="true">Outline</ion-chip>
-    <ion-chip class="ios26-disabled">
+    <ion-chip class="ios-theme-disabled">Default</ion-chip>
+    <ion-chip class="ios-theme-disabled" [disabled]="true">Disabled</ion-chip>
+    <ion-chip class="ios-theme-disabled" [outline]="true">Outline</ion-chip>
+    <ion-chip class="ios-theme-disabled">
       <ion-avatar>
         <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
       </ion-avatar>
       <ion-label>Avatar Chip</ion-label>
       <ion-icon name="close-circle"></ion-icon>
     </ion-chip>
-    <ion-chip class="ios26-disabled">
+    <ion-chip class="ios-theme-disabled">
       <ion-icon name="pin" color="primary"></ion-icon>
       <ion-label>Icon Chip</ion-label>
       <ion-icon name="close"></ion-icon>

diff --git a/demo/src/app/index/pages/searchbar/searchbar.page.html b/demo/src/app/index/pages/searchbar/searchbar.page.html
@@ -25,10 +25,10 @@ <h2>searchbar</h2>
 
   <ion-toolbar><ion-searchbar></ion-searchbar></ion-toolbar>
 
-  <ion-toolbar class="ios26-disabled">
-    <ion-searchbar class="ios26-disabled"></ion-searchbar>
-    <ion-buttons class="ios26-disabled" slot="end">
-      <ion-button class="ios26-disabled">Search</ion-button>
+  <ion-toolbar class="ios-theme-disabled">
+    <ion-searchbar class="ios-theme-disabled"></ion-searchbar>
+    <ion-buttons class="ios-theme-disabled" slot="end">
+      <ion-button class="ios-theme-disabled">Search</ion-button>
     </ion-buttons>
   </ion-toolbar>
 

diff --git a/demo/src/app/index/pages/segment/segment.page.html b/demo/src/app/index/pages/segment/segment.page.html
@@ -57,7 +57,7 @@ <h2>segment</h2>
           <ion-label>Segment</ion-label>
         </ion-segment-button>
       </ion-segment>
-      <ion-buttons slot="end" class="ios26-disabled">
+      <ion-buttons slot="end" class="ios-theme-disabled">
         <ion-button fill="default"><ion-icon name="images" slot="icon-only"></ion-icon></ion-button>
       </ion-buttons>
     </ion-toolbar>

diff --git a/demo/src/app/settings/settings-page.component.html b/demo/src/app/settings/settings-page.component.html
@@ -4,8 +4,8 @@
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
     <ion-title>Settings</ion-title>
-    <ion-buttons class="ios26-disabled" slot="end">
-      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios26"
+    <ion-buttons class="ios-theme-disabled" slot="end">
+      <ion-button fill="default" href="https://github.com/rdlabo-dev/ionic-theme-ios27"
         ><ion-icon name="logo-github" slot="icon-only"></ion-icon
       ></ion-button>
     </ion-buttons>

diff --git a/demo/src/global.scss b/demo/src/global.scss
@@ -37,13 +37,13 @@
 @use '@ionic/angular/css/palettes/dark.class.css';
 
 @use '../../src/styles/default-variables';
-@use '../../src/styles/ionic-theme-ios26';
-@use '../../src/styles/ionic-theme-ios26-dark-class';
+@use '../../src/styles/ionic-theme-ios27';
+@use '../../src/styles/ionic-theme-ios27-dark-class';
 @use '../../src/styles/md-ion-list-inset';
 @use '../../src/styles/md-remove-ios-class-effect';
 
 :root {
-  --ios26-menu-width: 300px;
+  --ios-theme-menu-width: 300px;
 }
 
 /**
@@ -189,7 +189,7 @@ code {
 }
 
 ion-content {
-  --ios26-content-box-shadow-rgb: var(--ion-color-base-rgb, var(--ion-background-color-rgb, 255, 255, 255));
+  --ios-theme-content-box-shadow-rgb: var(--ion-color-base-rgb, var(--ion-background-color-rgb, 255, 255, 255));
 }
 
 #main-content {

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Demo for ionic-theme-ios26</title>
+    <title>Demo for ionic-theme-ios27</title>
     <base href="/" />
     <meta name="color-scheme" content="light dark" />
     <meta

diff --git a/docs/eslint.md b/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
 

diff --git a/docs/feedback.md b/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
 

diff --git a/docs/ios-18.md b/docs/ios-18.md