docs: update Ionic iOS27 guides for 1.2.0-1

package.json

@@ -71,6 +71,7 @@
     "@capacitor-community/stripe-identity": "8.2.1",
     "@capacitor/docgen": "0.3.1",
     "@eslint/js": "^10.0.1",
+    "@ionic/core": "8.8.19",
     "@rdlabo/capacitor-brotherprint": "8.2.1",
     "@rdlabo/capacitor-codescanner": "8.0.3",
     "@rdlabo/capacitor-docgen": "0.4.1",
@@ -83,7 +84,7 @@
     "@rdlabo/ionic-angular-photo-editor": "22.0.3",
     "@rdlabo/ionic-angular-scroll-header": "22.0.3",
     "@rdlabo/ionic-theme-ios26": "9.2.0",
-    "@rdlabo/ionic-theme-ios27": "1.2.0-0",
+    "@rdlabo/ionic-theme-ios27": "1.2.0-1",
     "@rdlabo/ionic-theme-md3": "9.1.0",
     "@rdlabo/ngx-cdk-scroll-strategies": "22.0.3",
     "@rdlabo/workers-hono-kit": "0.12.2",

projects/docs/src/app/generated/project-catalog.generated.ts

@@ -484,10 +484,10 @@ export const PROJECTS_EN = [
     "packageName": "@rdlabo/ionic-theme-ios27",
     "repositoryUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27",
     "demoUrl": "https://ionic-theme-ios27.rdlabo.dev/",
-    "releaseNotesUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27/releases/tag/ios27-v1.2.0-0",
+    "releaseNotesUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27/releases/tag/ios27-v1.2.0-1",
     "category": "frontend-tools",
     "icon": "theme",
-    "version": "1.2.0-0",
+    "version": "1.2.0-1",
     "description": "Stable iOS 27 styling and motion for Ionic, with an optional experimental Native UI Shell.",
     "headline": "Bring iOS 27 design to Ionic apps",
     "overview": "Bring iOS 27 Liquid Glass and motion to Ionic components. Install alongside the iOS 26 theme to select styles by browser capability; Native UI Shell remains experimental.",
@@ -509,7 +509,7 @@ export const PROJECTS_EN = [
         "description": "Adopt dark-mode styles and migrate component by component when needed."
       }
     ],
-    "overviewHtml": "<p>\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-settings.png\" width=\"32%\" alt=\"iOS 27 theme: Settings in light mode with a Liquid Glass search bar\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-settings-dark.png\" width=\"32%\" alt=\"iOS 27 theme: Settings in dark mode\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-library.png\" width=\"32%\" alt=\"iOS 27 theme: Library with Liquid Glass buttons and tab bar\">\n</p>",
+    "overviewHtml": "<p>\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-settings.png\" width=\"32%\" alt=\"iOS 27 theme: Settings in light mode with a Liquid Glass search bar\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-settings-dark.png\" width=\"32%\" alt=\"iOS 27 theme: Settings in dark mode\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-library.png\" width=\"32%\" alt=\"iOS 27 theme: Library with Liquid Glass buttons and tab bar\">\n</p>",
     "path": "/projects/ionic-theme-ios27",
     "pages": [
       {
@@ -2660,10 +2660,10 @@ export const PROJECTS_JA = [
     "packageName": "@rdlabo/ionic-theme-ios27",
     "repositoryUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27",
     "demoUrl": "https://ionic-theme-ios27.rdlabo.dev/",
-    "releaseNotesUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27/releases/tag/ios27-v1.2.0-0",
+    "releaseNotesUrl": "https://github.com/rdlabo-dev/ionic-theme-ios27/releases/tag/ios27-v1.2.0-1",
     "category": "frontend-tools",
     "icon": "theme",
-    "version": "1.2.0-0",
+    "version": "1.2.0-1",
     "description": "Ionic向けの安定版iOS 27スタイルとアニメーション。実験的なNative UI Shellも選択できます。",
     "headline": "IonicアプリにiOS 27デザインを取り入れる",
     "overview": "IonicコンポーネントにiOS 27のLiquid Glassとアニメーションを適用します。iOS 26テーマと併用するとブラウザ機能に応じてスタイルを切り替えられます。Native UI Shellは実験的機能です。",
@@ -2685,7 +2685,7 @@ export const PROJECTS_JA = [
         "description": "必要に応じてダークモードスタイルを導入し、コンポーネント単位で移行できます。"
       }
     ],
-    "overviewHtml": "<p>\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-settings.png\" width=\"32%\" alt=\"iOS 27テーマ: Liquid Glass検索バーを備えたライトモードの設定画面\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-settings-dark.png\" width=\"32%\" alt=\"iOS 27テーマ: ダークモードの設定画面\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-0/screenshots/ios27-library.png\" width=\"32%\" alt=\"iOS 27テーマ: Liquid Glassボタンとタブバーを備えたライブラリ画面\">\n</p>",
+    "overviewHtml": "<p>\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-settings.png\" width=\"32%\" alt=\"iOS 27テーマ: Liquid Glass検索バーを備えたライトモードの設定画面\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-settings-dark.png\" width=\"32%\" alt=\"iOS 27テーマ: ダークモードの設定画面\">\n  <img src=\"https://raw.githubusercontent.com/rdlabo-dev/ionic-theme-ios27/ios27-v1.2.0-1/screenshots/ios27-library.png\" width=\"32%\" alt=\"iOS 27テーマ: Liquid Glassボタンとタブバーを備えたライブラリ画面\">\n</p>",
     "path": "/projects/ionic-theme-ios27",
     "pages": [
       {

projects/docs/src/ionic-theme-ios27/docs/api.md

@@ -2,7 +2,7 @@
 title: API
 ---
 
-Reference for the JavaScript API exported by `@rdlabo/ionic-theme-ios27` v1.2.0-0. CSS and Sass entry points remain documented in the README.
+Reference for the JavaScript API exported by `@rdlabo/ionic-theme-ios27` v1.2.0-1. CSS and Sass entry points remain documented in the README.
 
 ## Effects
 
@@ -54,6 +54,12 @@ Attaches the searchable tab-bar transition and returns its event handler.
 
 ## Animations
 
+#### `function` withNativeUIShellTransition
+
+`(builder: AnimationBuilder) => AnimationBuilder`
+
+Wraps an Ionic navigation animation builder to coordinate native control retirement, swipe progress, and cancellation while preserving the returned animation. Exported from the package root and `/vertical-bars`. Register it as `navAnimation`; use a fresh `Animation` for each navigation. The package's `iosTransitionAnimation` already includes this adapter. See [existing-theme setup](/docs/iphone-duo-with-original-theme) for Ionic's default and custom builders.
+
 #### `function` iosTransitionAnimation
 
 `(navEl: HTMLElement, opts: TransitionOptions) => Animation`

projects/docs/src/ionic-theme-ios27/docs/ja/api.md

@@ -2,7 +2,7 @@
 title: API
 ---
 
-`@rdlabo/ionic-theme-ios27` v1.2.0-0 が公開するJavaScript APIのリファレンスです。CSSとSassのentry pointはREADMEで説明します。
+`@rdlabo/ionic-theme-ios27` v1.2.0-1 が公開するJavaScript APIのリファレンスです。CSSとSassのentry pointはREADMEで説明します。
 
 ## Effect
 
@@ -54,6 +54,12 @@ Searchable Tab Barのtransitionを設定し、event handlerを返します。
 
 ## Animation
 
+#### `function` withNativeUIShellTransition
+
+`(builder: AnimationBuilder) => AnimationBuilder`
+
+Ionicの画面遷移builderをラップし、返されるアニメーションを維持しながら、ネイティブ部品の退避、スワイプの進捗、キャンセルを連携します。パッケージrootと `/vertical-bars` からexportされます。`navAnimation` に登録し、遷移ごとに新しい `Animation` を使ってください。本パッケージの `iosTransitionAnimation` には既に組み込まれています。Ionic標準と独自builderの設定は[既存テーマでの導入](/docs/iphone-duo-with-original-theme)を参照してください。
+
 #### `function` iosTransitionAnimation
 
 `(navEl: HTMLElement, opts: TransitionOptions) => Animation`

projects/docs/src/ionic-theme-ios27/docs/ja/features.md

@@ -7,7 +7,7 @@ CSS変数とSass mixinでテーマをカスタマイズしたり、コンポー
 ## CSS変数
 
 ライブラリのデフォルトスタイルをデザインに合わせてカスタマイズできるよう、複数のCSS変数を提供しています。詳細は次のファイルを参照してください。
-https://github.com/rdlabo-dev/ionic-theme-ios27/blob/ios27-v1.2.0-0/src/styles/default-variables.scss
+https://github.com/rdlabo-dev/ionic-theme-ios27/blob/ios27-v1.2.0-1/src/styles/default-variables.scss
 
 メニューの背景RGBは `--ios-theme-menu-background-rgb`（ライト: `225, 230, 240`、ダーク: `26, 31, 34`）、不透明度は `--ios-theme-menu-background-opacity`（既定値: `0.96`）で指定します。どちらも `ion-menu` に設定できる公開CSS変数です。
 

projects/docs/src/ionic-theme-ios27/docs/ja/iphone-duo-with-original-theme.md

@@ -15,7 +15,7 @@ title: 既存テーマでiPhone Duoに対応する（実験的機能）
 Ionic `>=8.8.1 <10` とCapacitor Core `>=8 <9` を使う既存アプリを前提とします。既存のCapacitor 8は再インストール不要です。別majorを使う場合は、Core・CLI・platformパッケージをまとめて移行してから進めてください。Capacitorを使わないWeb専用アプリでは `@capacitor/core@^8` もインストールします。JavaScriptのentry pointはChromeでもこの依存を必要とします。
 
 ```bash
-npm install @rdlabo/ionic-theme-ios27@1.2.0-0
+npm install @rdlabo/ionic-theme-ios27@1.2.0-1
 ```
 
 既存テーマのimportを維持し、グローバルSassファイルに次を追加します。
@@ -38,9 +38,31 @@ npm install @rdlabo/ionic-theme-ios27@1.2.0-0
 
 プレビューは物理的な右側に `80px` を確保します。左側を試すには `ios-theme-vertical-bars-left` も追加します。
 
-### 3. Ionicの初期化前に画面遷移を設定する
+### 3. 画面遷移アニメーションを接続する
 
-画面遷移をimportし、Ionicの `navAnimation` に登録します。操作領域のruntimeを起動するだけでは、この設定は登録されません。このアニメーションは画面遷移前にネイティブ部品の退避を待ち、縦レイアウトでは水平の戻るボタンをアニメーション対象から外します。既存テーマのスタイルは維持しますが、iOSの画面遷移には本パッケージのアニメーションを使います。
+Ionicの初期化前に `navAnimation` を設定します。操作領域のruntimeを起動するだけでは、この設定は登録されません。アダプターは既存アニメーションを維持しながらネイティブ部品の退避を待ち、スワイプの進捗とキャンセルを連携します。
+
+#### Ionicの標準アニメーションを維持する
+
+`navAnimation` を設定していない場合は、Ionic標準のbuilderをラップします。Ionicが遷移時に渡す `mode` でbuilderを選び、`ios` と `md` のどちらも通常のアニメーションを維持します。
+
+```ts
+import { iosTransitionAnimation, mdTransitionAnimation, type AnimationBuilder } from '@ionic/core';
+import { withNativeUIShellTransition } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+const defaultTransition: AnimationBuilder = (baseEl, opts) =>
+  (opts.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation)(baseEl, opts);
+
+const ionicConfig = {
+  navAnimation: withNativeUIShellTransition(defaultTransition),
+};
+```
+
+初期化前に、既存のIonic設定へこのオプションを統合します。Angularでは `provideIonicAngular()`、Reactでは `setupIonicReact()`、Vueでは `IonicVue` pluginのオプションへ渡してください。既存テーマのスタイルシートのimportは維持します。iOS 27テーマのスタイルシートは不要です。
+
+#### 本パッケージのiOSアニメーションを使う
+
+既にiOS 27の画面遷移を使っている場合は、この設定を維持します。ネイティブ連携のアダプターを含み、縦レイアウトでは水平の戻るボタンの効果を対象から外すため、追加のラップは不要です。このJavaScriptのentry pointをimportしても、テーマのスタイルシートは読み込まれません。
 
 ```ts
 import { iosTransitionAnimation } from '@rdlabo/ionic-theme-ios27';
@@ -50,7 +72,27 @@ const ionicConfig = {
 };
 ```
 
-初期化前に、既存のIonic設定の `ios` mode用設定へこのオプションを統合します。Angularでは `provideIonicAngular()`、Reactでは `setupIonicReact()`、Vueでは `IonicVue` pluginのオプションへ渡してください。既存の `md` 用アニメーション設定は維持します。JavaScriptのentry pointをimportしても、iOS 27テーマのスタイルシートは読み込まれません。
+既存のiOS mode用設定へこのオプションを適用し、MD用設定は維持してください。
+
+#### 独自アニメーションを維持する
+
+`navAnimation` に他のbuilderを使っている場合は、それをラップします。
+
+```ts
+import type { AnimationBuilder } from '@ionic/core';
+import { withNativeUIShellTransition } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+// アプリで既に使っているanimation builderを渡します。
+const configureNavigation = (existingTransition: AnimationBuilder) => ({
+  navAnimation: withNativeUIShellTransition(existingTransition),
+});
+```
+
+アダプターは元の `Animation` を返し、効果、duration、easingを維持します。画面遷移だけに使い、modalやpopoverのアニメーションには使いません。Ionicが遷移後に破棄するため、builderは遷移ごとに新しい `Animation` を返してください。部品登録とアニメーションなしの遷移には、引き続きlifecycle eventを使います。
+
+アダプターは、水平の戻るボタンへの効果を含むbuilderのアニメーション対象を維持します。縦レイアウトでその効果を除外するiOS 27の画面遷移が必要なら、`@rdlabo/ionic-theme-ios27` の `iosTransitionAnimation` を `navAnimation` に使ってください。こちらにはアダプターが組み込まれているため、ラップは不要です。
+
+`withNativeUIShellTransition()` は `1.2.0-1` 以降で利用できます。
 
 ### 4. App rootのマウント後に操作部品を起動する