diff --git a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html
index 684eee09d3..b8468c927e 100644
--- a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html
+++ b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.en.html
@@ -1,8 +1,16 @@
 @if (!hasAccepted()) {
   <div class="docs-cookies-popup docs-invert-mode">
-    <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
+    <div class="docs-cookies-popup-header">
+      <img
+        class="docs-cookies-popup-angie"
+        src="assets/images/angie/greeting.svg"
+        alt=""
+        aria-hidden="true"
+      />
+      <p>This site uses cookies from Google to deliver its services and to analyze traffic.</p>
+    </div>
 
-    <div>
+    <div class="docs-cookies-popup-actions">
       <a
         href="https://policies.google.com/technologies/cookies"
         target="_blank"
diff --git a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html
index 82edf25997..344adf77f0 100644
--- a/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html
+++ b/adev-ja/shared-docs/components/cookie-popup/cookie-popup.component.html
@@ -1,8 +1,16 @@
 @if (!hasAccepted()) {
   <div class="docs-cookies-popup docs-invert-mode">
-    <p>このサイトでは、サービスの提供とトラフィックの分析のためにGoogleのクッキーを使用しています。</p>
+    <div class="docs-cookies-popup-header">
+      <img
+        class="docs-cookies-popup-angie"
+        src="assets/images/angie/greeting.svg"
+        alt=""
+        aria-hidden="true"
+      />
+      <p>このサイトでは、サービスの提供とトラフィックの分析のためにGoogleのクッキーを使用しています。</p>
+    </div>
 
-    <div>
+    <div class="docs-cookies-popup-actions">
       <a
         href="https://policies.google.com/technologies/cookies"
         target="_blank"
diff --git a/adev-ja/src/app/features/home/home.component.en.html b/adev-ja/src/app/features/home/home.component.en.html
index 0af7560ddf..45b0809e94 100644
--- a/adev-ja/src/app/features/home/home.component.en.html
+++ b/adev-ja/src/app/features/home/home.component.en.html
@@ -228,7 +228,7 @@ <h2>Want to learn more about Angular?</h2>
   <section class="learn-more-bottom-section" id="bottom">
     <div class="pattern"></div>
     <div class="content">
-      <h2>Want to learn more about Angular ?</h2>
+      <h2>Want to learn more about Angular?</h2>
       <button
         class="docs-primary-btn"
         [attr.text]="'Learn more'"
diff --git a/adev-ja/src/app/features/update/recommendations.en.ts b/adev-ja/src/app/features/update/recommendations.en.ts
index df358a32c2..0ac863dafd 100644
--- a/adev-ja/src/app/features/update/recommendations.en.ts
+++ b/adev-ja/src/app/features/update/recommendations.en.ts
@@ -245,7 +245,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 8',
     action:
-      'Make sure you are using [Node 8 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
+      'Make sure you are using [Node 8 or later](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
   },
   {
     possibleIn: 600,
@@ -486,7 +486,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 10',
     action:
-      'Make sure you are using [Node 10 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
+      'Make sure you are using [Node 10 or later](https://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
   },
   {
     possibleIn: 800,
@@ -579,7 +579,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 10.13',
     action:
-      'Make sure you are using [Node 10.13 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
+      'Make sure you are using [Node 10.13 or later](https://www.hostingadvice.com/how-to/update-node-js-latest-version/).',
   },
   {
     possibleIn: 900,
@@ -708,7 +708,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Advanced,
     step: 'wtf',
     action:
-      'Support for web tracing framework in Angular was deprecated in version 8. You should stop using any of the `wtf*` APIs. To do performance tracing, we recommend using [browser performance tools](https://developers.google.com/web/tools/lighthouse/audits/user-timing).',
+      'Support for web tracing framework in Angular was deprecated in version 8. You should stop using any of the `wtf*` APIs. To do performance tracing, we recommend using [browser performance tools](https://developer.chrome.com/docs/lighthouse/performance/user-timings).',
   },
   {
     possibleIn: 800,
@@ -780,7 +780,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Medium,
     step: '$localize',
     action:
-      "If you use [Angular's i18n support](http://angular.io/guide/i18n), you will need to begin using `@angular/localize`. Learn more about the [$localize Global Import Migration](https://v9.angular.io/guide/migration-localize).",
+      "If you use [Angular's i18n support](https://angular.io/guide/i18n), you will need to begin using `@angular/localize`. Learn more about the [$localize Global Import Migration](https://v9.angular.io/guide/migration-localize).",
   },
 
   {
@@ -981,7 +981,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v11 browser support',
     action:
-      'Support for IE9, IE10, and IE mobile has been removed. This was announced in the [v10 update](http://blog.angular.dev/version-10-of-angular-now-available-78960babd41#c357). ',
+      'Support for IE9, IE10, and IE mobile has been removed. This was announced in the [v10 update](https://blog.angular.dev/version-10-of-angular-now-available-78960babd41#c357). ',
   },
   {
     possibleIn: 1100,
@@ -1348,7 +1348,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v13 node',
     action:
-      'Make sure you are using [Node 12.20.0 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
+      'Make sure you are using [Node 12.20.0 or later](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
   },
   {
     possibleIn: 1300,
@@ -1471,7 +1471,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v14 node',
     action:
-      'Make sure you are using [Node 14.15.0 or later](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
+      'Make sure you are using [Node 14.15.0 or later](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)',
   },
   {
     possibleIn: 1400,
@@ -2542,6 +2542,14 @@ export const RECOMMENDATIONS: Step[] = [
     possibleIn: 1900,
     step: '19.0.0-update-fakeasync-to-flush-pending-timers',
   },
+  {
+    action:
+      'Remove the `allowSignalWrites` option from `effect()` calls. The option is deprecated and no longer required, as signal writes inside effects are allowed by default.',
+    level: ApplicationComplexity.Medium,
+    necessaryAsOf: 1900,
+    possibleIn: 1900,
+    step: '19.0.0-remove-allow-signal-writes',
+  },
   {
     action:
       "In the application's project directory, run `ng update @angular/core@20 @angular/cli@20` to update your application to Angular v20.",
@@ -2781,6 +2789,15 @@ export const RECOMMENDATIONS: Step[] = [
     step: 'update @angular/material',
     action: 'Run `ng update @angular/material@21`.',
   },
+  {
+    possibleIn: 2100,
+    necessaryAsOf: 2100,
+    level: ApplicationComplexity.Medium,
+    material: true,
+    step: '21.0.0-cdk-overlay-top-layer-stacking',
+    action:
+      "CDK overlays can now render in the browser's native top layer, causing elements that previously appeared above Material overlays via `z-index` to render beneath them. You can restore the previous behavior by providing `OVERLAY_DEFAULT_CONFIG` from `@angular/cdk/overlay` with the value `{usePopover: false}`.",
+  },
   {
     possibleIn: 2100,
     necessaryAsOf: 2100,
@@ -2998,6 +3015,14 @@ export const RECOMMENDATIONS: Step[] = [
     action:
       'Angular expressions with optional chaining (`?.`) now return `undefined` instead of `null`. You can use the `$safeNavigationMigration()` magic function to revert to the previous behavior.',
   },
+  {
+    possibleIn: 2200,
+    necessaryAsOf: 2200,
+    level: ApplicationComplexity.Medium,
+    step: '22.0.0-resource-stream-synchronous-resolution',
+    action:
+      'The `stream` property on `Resource`, including `rxResource`, now resolves synchronously when the stream or observable emits synchronously. Tests that assumed asynchronous resolution may need to wait for the value immediately instead.',
+  },
   {
     possibleIn: 2200,
     necessaryAsOf: 2200,
@@ -3030,6 +3055,14 @@ export const RECOMMENDATIONS: Step[] = [
     action:
       'The `reportProgress` option in HTTP requests is deprecated. Use `reportUploadProgress` or `reportDownloadProgress` instead for more explicit control over progress reporting.',
   },
+  {
+    possibleIn: 2200,
+    necessaryAsOf: 2200,
+    level: ApplicationComplexity.Medium,
+    step: '22.0.0-deprecate-server-xhr',
+    action:
+      'XHR support in `@angular/platform-server` is deprecated and is intended to be removed in Angular 23. The underlying `xhr2` library does not safely handle redirects (e.g. it can forward `Authorization` headers on cross-origin redirects and is susceptible to DoS via redirect loops). For server-side rendering, use the default `fetch` backend instead of `withXhr()`.',
+  },
   {
     possibleIn: 2200,
     necessaryAsOf: 2200,
diff --git a/adev-ja/src/app/features/update/recommendations.ts b/adev-ja/src/app/features/update/recommendations.ts
index 66574888d0..09b024c64f 100644
--- a/adev-ja/src/app/features/update/recommendations.ts
+++ b/adev-ja/src/app/features/update/recommendations.ts
@@ -245,7 +245,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 8',
     action:
-      '[Node 8以降](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
+      '[Node 8以降](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
   },
   {
     possibleIn: 600,
@@ -486,7 +486,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 10',
     action:
-      '[Node 10以降](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
+      '[Node 10以降](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
   },
   {
     possibleIn: 800,
@@ -579,7 +579,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'node 10.13',
     action:
-      '[Node 10.13以降](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
+      '[Node 10.13以降](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
   },
   {
     possibleIn: 900,
@@ -708,7 +708,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Advanced,
     step: 'wtf',
     action:
-      'AngularでのWebトレーシングフレームワークのサポートはバージョン8で非推奨になりました。`wtf*` APIの使用をやめるべきです。パフォーマンス追跡を行うには、[ブラウザのパフォーマンスツール](https://developers.google.com/web/tools/lighthouse/audits/user-timing)の使用をお勧めします。',
+      'AngularでのWebトレーシングフレームワークのサポートはバージョン8で非推奨になりました。`wtf*` APIの使用をやめるべきです。パフォーマンス追跡を行うには、[ブラウザのパフォーマンスツール](https://developer.chrome.com/docs/lighthouse/performance/user-timings)の使用をお勧めします。',
   },
   {
     possibleIn: 800,
@@ -780,7 +780,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Medium,
     step: '$localize',
     action:
-      '[Angularのi18nサポート](http://angular.io/guide/i18n)を使用している場合、`@angular/localize`の使用を開始する必要があります。[$localizeグローバルインポートマイグレーション](https://v9.angular.io/guide/migration-localize)について詳しくはこちらを参照してください。',
+      '[Angularのi18nサポート](https://angular.io/guide/i18n)を使用している場合、`@angular/localize`の使用を開始する必要があります。[$localizeグローバルインポートマイグレーション](https://v9.angular.io/guide/migration-localize)について詳しくはこちらを参照してください。',
   },
 
   {
@@ -981,7 +981,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v11 browser support',
     action:
-      'IE9、IE10、およびIEモバイルのサポートは削除されました。これは[v10アップデート](http://blog.angular.dev/version-10-of-angular-now-available-78960babd41#c357)で発表されました。',
+      'IE9、IE10、およびIEモバイルのサポートは削除されました。これは[v10アップデート](https://blog.angular.dev/version-10-of-angular-now-available-78960babd41#c357)で発表されました。',
   },
   {
     possibleIn: 1100,
@@ -1348,7 +1348,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v13 node',
     action:
-      '[Node 12.20.0以降](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
+      '[Node 12.20.0以降](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
   },
   {
     possibleIn: 1300,
@@ -1471,7 +1471,7 @@ export const RECOMMENDATIONS: Step[] = [
     level: ApplicationComplexity.Basic,
     step: 'v14 node',
     action:
-      '[Node 14.15.0以降](http://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
+      '[Node 14.15.0以降](https://www.hostingadvice.com/how-to/update-node-js-latest-version/)を使用していることを確認してください。',
   },
   {
     possibleIn: 1400,
@@ -2542,6 +2542,14 @@ export const RECOMMENDATIONS: Step[] = [
     possibleIn: 1900,
     step: '19.0.0-update-fakeasync-to-flush-pending-timers',
   },
+  {
+    action:
+      '`effect()`の呼び出しから`allowSignalWrites`オプションを削除してください。エフェクト内でのシグナルへの書き込みがデフォルトで許可されるようになったため、このオプションは非推奨となり不要になりました。',
+    level: ApplicationComplexity.Medium,
+    necessaryAsOf: 1900,
+    possibleIn: 1900,
+    step: '19.0.0-remove-allow-signal-writes',
+  },
   {
       action:
         'アプリケーションのプロジェクトディレクトリで、`ng update @angular/core@20 @angular/cli@20` を実行して、アプリケーションをAngular v20に更新します。',
@@ -2781,6 +2789,15 @@ export const RECOMMENDATIONS: Step[] = [
     step: 'update @angular/material',
     action: '`ng update @angular/material@21` を実行します。',
   },
+  {
+    possibleIn: 2100,
+    necessaryAsOf: 2100,
+    level: ApplicationComplexity.Medium,
+    material: true,
+    step: '21.0.0-cdk-overlay-top-layer-stacking',
+    action:
+      'CDKオーバーレイは、ブラウザのネイティブなトップレイヤーにレンダリングできるようになりました。これにより、以前は`z-index`によってMaterialオーバーレイの上に表示されていた要素が、その下に表示されるようになる場合があります。以前の動作に戻すには、`@angular/cdk/overlay`から`OVERLAY_DEFAULT_CONFIG`を`{usePopover: false}`という値で提供してください。',
+  },
   {
     possibleIn: 2100,
     necessaryAsOf: 2100,
@@ -2998,6 +3015,14 @@ export const RECOMMENDATIONS: Step[] = [
     action:
       'オプショナルチェイニング (`?.`) を使用した Angular の式は、`null` の代わりに `undefined` を返すようになりました。以前の動作に戻すには `$safeNavigationMigration()` マジック関数を使用できます。',
   },
+  {
+    possibleIn: 2200,
+    necessaryAsOf: 2200,
+    level: ApplicationComplexity.Medium,
+    step: '22.0.0-resource-stream-synchronous-resolution',
+    action:
+      '`rxResource`を含む`Resource`の`stream`プロパティは、ストリームやObservableが同期的にemitする場合、同期的に解決されるようになりました。非同期的な解決を前提としていたテストは、代わりに値をすぐに待つように修正する必要があるかもしれません。',
+  },
   {
     possibleIn: 2200,
     necessaryAsOf: 2200,
@@ -3030,6 +3055,14 @@ export const RECOMMENDATIONS: Step[] = [
     action:
       'HTTP リクエストの `reportProgress` オプションは非推奨になりました。進捗レポートをより明示的に制御するには、代わりに `reportUploadProgress` または `reportDownloadProgress` を使用してください。',
   },
+  {
+    possibleIn: 2200,
+    necessaryAsOf: 2200,
+    level: ApplicationComplexity.Medium,
+    step: '22.0.0-deprecate-server-xhr',
+    action:
+      '`@angular/platform-server`におけるXHRサポートは非推奨となり、Angular 23で削除される予定です。基盤となる`xhr2`ライブラリはリダイレクトを安全に処理できません（たとえば、クロスオリジンのリダイレクトで`Authorization`ヘッダーを転送してしまうことがあり、リダイレクトループによるDoSの影響を受けやすくなっています）。サーバーサイドレンダリングでは、`withXhr()`の代わりにデフォルトの`fetch`バックエンドを使用してください。',
+  },
   {
     possibleIn: 2200,
     necessaryAsOf: 2200,
diff --git a/adev-ja/src/app/routing/navigation-entries/index.en.ts b/adev-ja/src/app/routing/navigation-entries/index.en.ts
index c021ea7f27..c9dc4f0168 100644
--- a/adev-ja/src/app/routing/navigation-entries/index.en.ts
+++ b/adev-ja/src/app/routing/navigation-entries/index.en.ts
@@ -313,13 +313,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'Overview',
             path: 'guide/di',
             contentPath: 'guide/di/overview',
-            status: 'updated',
           },
           {
             label: 'Creating and using services',
             path: 'guide/di/creating-and-using-services',
             contentPath: 'guide/di/creating-and-using-services',
-            status: 'updated',
           },
           {
             label: 'Lazy loading services',
@@ -331,7 +329,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'Defining dependency providers',
             path: 'guide/di/defining-dependency-providers',
             contentPath: 'guide/di/defining-dependency-providers',
-            status: 'updated',
           },
           {
             label: 'Injection context',
@@ -363,7 +360,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Routing',
-        status: 'updated',
         children: [
           {
             label: 'Overview',
@@ -419,7 +415,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'Testing routing and navigation',
             path: 'guide/routing/testing',
             contentPath: 'guide/routing/testing',
-            status: 'new',
           },
           {
             label: 'Other routing tasks',
@@ -435,13 +430,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'Rendering strategies',
             path: 'guide/routing/rendering-strategies',
             contentPath: 'guide/routing/rendering-strategies',
-            status: 'new',
           },
           {
             label: 'Customizing route behavior',
             path: 'guide/routing/customizing-route-behavior',
             contentPath: 'guide/routing/customizing-route-behavior',
-            status: 'new',
           },
           {
             label: 'Router reference',
@@ -459,6 +452,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'Forms',
         status: 'updated',
         preserveOtherCategoryOrder: true,
+        categoriesStatus: [
+          {
+            'Signal Forms': 'new',
+          },
+        ],
         children: [
           {
             label: 'Overview',
@@ -471,98 +469,96 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/forms/signals/overview',
             contentPath: 'guide/forms/signals/overview',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Form models',
             path: 'guide/forms/signals/models',
             contentPath: 'guide/forms/signals/models',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Form model design',
             path: 'guide/forms/signals/model-design',
             contentPath: 'guide/forms/signals/designing-your-form-model',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Field state management',
             path: 'guide/forms/signals/field-state-management',
             contentPath: 'guide/forms/signals/field-state-management',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Validation',
             path: 'guide/forms/signals/validation',
             contentPath: 'guide/forms/signals/validation',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Form logic',
             path: 'guide/forms/signals/form-logic',
             contentPath: 'guide/forms/signals/form-logic',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Cross-field logic',
             path: 'guide/forms/signals/cross-field-logic',
             contentPath: 'guide/forms/signals/cross-field-logic',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Form submission',
             path: 'guide/forms/signals/form-submission',
             contentPath: 'guide/forms/signals/form-submission',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Schemas',
             path: 'guide/forms/signals/schemas',
             contentPath: 'guide/forms/signals/schemas',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Field metadata',
             path: 'guide/forms/signals/field-metadata',
             contentPath: 'guide/forms/signals/field-metadata',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Async operations',
             path: 'guide/forms/signals/async-operations',
             contentPath: 'guide/forms/signals/async-operations',
             category: 'Signal Forms',
-            status: 'new',
+          },
+          {
+            label: 'Dynamic forms with JSON',
+            path: 'guide/forms/signals/dynamic-forms-with-json',
+            contentPath: 'guide/forms/signals/dynamic-forms-with-json',
+            category: 'Signal Forms',
           },
           {
             label: 'Custom controls',
             path: 'guide/forms/signals/custom-controls',
             contentPath: 'guide/forms/signals/custom-controls',
             category: 'Signal Forms',
-            status: 'new',
+          },
+          {
+            label: 'Testing',
+            path: 'guide/forms/signals/testing',
+            contentPath: 'guide/forms/signals/testing',
+            category: 'Signal Forms',
           },
           {
             label: 'Comparison with other form systems',
             path: 'guide/forms/signals/comparison',
             contentPath: 'guide/forms/signals/comparison',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Migrating from Reactive Forms',
             path: 'guide/forms/signals/migration',
             contentPath: 'guide/forms/signals/migration',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Reactive forms',
@@ -887,13 +883,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Animations',
-        status: 'updated',
         children: [
           {
             label: 'Enter and Leave animations',
             path: 'guide/animations',
             contentPath: 'guide/animations/enter-and-leave',
-            status: 'new',
           },
           {
             label: 'Complex Animations with CSS',
@@ -1115,7 +1109,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'Style Guide',
         path: 'style-guide',
         contentPath: 'best-practices/style-guide',
-        status: 'updated',
       },
       {
         label: 'Security',
@@ -1354,7 +1347,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'Tailwind',
         path: 'guide/tailwind',
         contentPath: 'guide/tailwind',
-        status: 'new',
       },
       {
         label: 'Angular Fire',
@@ -1760,25 +1752,21 @@ export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'NgClass to Class',
         path: 'reference/migrations/ngclass-to-class',
         contentPath: 'reference/migrations/ngclass-to-class',
-        status: 'new',
       },
       {
         label: 'NgStyle to Style',
         path: 'reference/migrations/ngstyle-to-style',
         contentPath: 'reference/migrations/ngstyle-to-style',
-        status: 'new',
       },
       {
         label: 'Router Testing Module Migration',
         path: 'reference/migrations/router-testing-module-migration',
         contentPath: 'reference/migrations/router-testing-module-migration',
-        status: 'new',
       },
       {
         label: 'CommonModule to Standalone',
         path: 'reference/migrations/common-to-standalone',
         contentPath: 'reference/migrations/common-to-standalone',
-        status: 'new',
       },
     ],
   },
diff --git a/adev-ja/src/app/routing/navigation-entries/index.ts b/adev-ja/src/app/routing/navigation-entries/index.ts
index c83e0c99ca..c71e83a98c 100644
--- a/adev-ja/src/app/routing/navigation-entries/index.ts
+++ b/adev-ja/src/app/routing/navigation-entries/index.ts
@@ -313,13 +313,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: '概要',
             path: 'guide/di',
             contentPath: 'guide/di/overview',
-            status: 'updated',
           },
           {
             label: 'サービスの作成と使用',
             path: 'guide/di/creating-and-using-services',
             contentPath: 'guide/di/creating-and-using-services',
-            status: 'updated',
           },
           {
             label: 'サービスの遅延読み込み',
@@ -331,7 +329,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: '依存性プロバイダーの定義',
             path: 'guide/di/defining-dependency-providers',
             contentPath: 'guide/di/defining-dependency-providers',
-            status: 'updated',
           },
           {
             label: '注入コンテキスト',
@@ -363,7 +360,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'ルーティング',
-        status: 'updated',
         children: [
           {
             label: '概要',
@@ -419,7 +415,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'ルーティングとナビゲーションのテスト',
             path: 'guide/routing/testing',
             contentPath: 'guide/routing/testing',
-            status: 'new',
           },
           {
             label: 'その他のルーティングタスク',
@@ -435,13 +430,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             label: 'レンダリング戦略',
             path: 'guide/routing/rendering-strategies',
             contentPath: 'guide/routing/rendering-strategies',
-            status: 'new',
           },
           {
             label: 'ルートの動作のカスタマイズ',
             path: 'guide/routing/customizing-route-behavior',
             contentPath: 'guide/routing/customizing-route-behavior',
-            status: 'new',
           },
           {
             label: 'ルーターリファレンス',
@@ -459,6 +452,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'フォーム',
         status: 'updated',
         preserveOtherCategoryOrder: true,
+        categoriesStatus: [
+          {
+            'Signal Forms': 'new',
+          },
+        ],
         children: [
           {
             label: '概要',
@@ -471,98 +469,96 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/forms/signals/overview',
             contentPath: 'guide/forms/signals/overview',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フォームモデル',
             path: 'guide/forms/signals/models',
             contentPath: 'guide/forms/signals/models',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フォームモデルの設計',
             path: 'guide/forms/signals/model-design',
             contentPath: 'guide/forms/signals/designing-your-form-model',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フィールド状態管理',
             path: 'guide/forms/signals/field-state-management',
             contentPath: 'guide/forms/signals/field-state-management',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'バリデーション',
             path: 'guide/forms/signals/validation',
             contentPath: 'guide/forms/signals/validation',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フォームロジック',
             path: 'guide/forms/signals/form-logic',
             contentPath: 'guide/forms/signals/form-logic',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フィールド間ロジック',
             path: 'guide/forms/signals/cross-field-logic',
             contentPath: 'guide/forms/signals/cross-field-logic',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フォームの送信',
             path: 'guide/forms/signals/form-submission',
             contentPath: 'guide/forms/signals/form-submission',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'スキーマ',
             path: 'guide/forms/signals/schemas',
             contentPath: 'guide/forms/signals/schemas',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'フィールドメタデータ',
             path: 'guide/forms/signals/field-metadata',
             contentPath: 'guide/forms/signals/field-metadata',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: '非同期処理',
             path: 'guide/forms/signals/async-operations',
             contentPath: 'guide/forms/signals/async-operations',
             category: 'Signal Forms',
-            status: 'new',
+          },
+          {
+            label: 'JSONを使った動的フォームの構築',
+            path: 'guide/forms/signals/dynamic-forms-with-json',
+            contentPath: 'guide/forms/signals/dynamic-forms-with-json',
+            category: 'Signal Forms',
           },
           {
             label: 'カスタムコントロール',
             path: 'guide/forms/signals/custom-controls',
             contentPath: 'guide/forms/signals/custom-controls',
             category: 'Signal Forms',
-            status: 'new',
+          },
+          {
+            label: 'テスト',
+            path: 'guide/forms/signals/testing',
+            contentPath: 'guide/forms/signals/testing',
+            category: 'Signal Forms',
           },
           {
             label: '他のフォームシステムとの比較',
             path: 'guide/forms/signals/comparison',
             contentPath: 'guide/forms/signals/comparison',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'Migrating from Reactive Forms',
             path: 'guide/forms/signals/migration',
             contentPath: 'guide/forms/signals/migration',
             category: 'Signal Forms',
-            status: 'new',
           },
           {
             label: 'リアクティブフォーム',
@@ -887,13 +883,11 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'アニメーション',
-        status: 'updated',
         children: [
           {
             label: 'Enter and Leave アニメーション',
             path: 'guide/animations',
             contentPath: 'guide/animations/enter-and-leave',
-            status: 'new',
           },
           {
             label: '複雑なCSSアニメーション',
@@ -1115,7 +1109,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'スタイルガイド',
         path: 'style-guide',
         contentPath: 'best-practices/style-guide',
-        status: 'updated',
       },
       {
         label: 'セキュリティ',
@@ -1354,7 +1347,6 @@ export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'Tailwind',
         path: 'guide/tailwind',
         contentPath: 'guide/tailwind',
-        status: 'new',
       },
       {
         label: 'Angular Fire',
@@ -1760,25 +1752,21 @@ export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         label: 'NgClassからClassへ',
         path: 'reference/migrations/ngclass-to-class',
         contentPath: 'reference/migrations/ngclass-to-class',
-        status: 'new',
       },
       {
         label: 'NgStyleからStyleへ',
         path: 'reference/migrations/ngstyle-to-style',
         contentPath: 'reference/migrations/ngstyle-to-style',
-        status: 'new',
       },
       {
         label: 'Routerテストモジュールのマイグレーション',
         path: 'reference/migrations/router-testing-module-migration',
         contentPath: 'reference/migrations/router-testing-module-migration',
-        status: 'new',
       },
       {
         label: 'CommonModuleからスタンドアロンへ',
         path: 'reference/migrations/common-to-standalone',
         contentPath: 'reference/migrations/common-to-standalone',
-        status: 'new',
       },
     ],
   },
diff --git a/adev-ja/src/content/ai/ai-tutor.en.md b/adev-ja/src/content/ai/ai-tutor.en.md
index e5a6144966..c38c778bdc 100644
--- a/adev-ja/src/content/ai/ai-tutor.en.md
+++ b/adev-ja/src/content/ai/ai-tutor.en.md
@@ -97,6 +97,36 @@ If you want to learn about a specific topic out of order (e.g., jump from the ba
 
 ## **Troubleshooting**
 
+### Setup Issues
+
+**"launch the Angular AI tutor" doesn't do anything?**
+
+Make sure you have a project open first. The tutor needs an actual Angular project to work with:
+
+```bash
+ng new my-app
+cd my-app
+code .
+```
+
+Then ensure your MCP server is running. In VS Code, open the `.vscode/mcp.json` file and click the **"Start"** button at the top of the file.
+
+When you type "launch the Angular AI tutor", you should see a checkmark saying
+"Reviewed .vscode/mcp.json and ran start task" and a prompt asking to
+"Allow task run?" — go ahead and click Allow.
+
+**Still not working?**
+
+Try typing `#angular-cli` first to load the Angular context, then paste the tutorial URL: `https://angular.dev/ai/ai-tutor`
+
+**How to verify the server is running**
+
+Open the Command Palette (`Ctrl+Shift+P`), type "MCP: List Running Servers", and look for "angular-cli" in the list.
+
+---
+
+### General Issues
+
 If the tutor doesn't respond correctly or you suspect an issue with your application, here are a few things to try:
 
 1. **Type "proceed":** This can often nudge the tutor to continue to the next step in the event it gets stuck.
diff --git a/adev-ja/src/content/ai/ai-tutor.md b/adev-ja/src/content/ai/ai-tutor.md
index 1e35df924a..f3c66436b9 100644
--- a/adev-ja/src/content/ai/ai-tutor.md
+++ b/adev-ja/src/content/ai/ai-tutor.md
@@ -97,6 +97,36 @@ Angular AIチューターは、完全でモダンなAngularアプリケーショ
 
 ## **トラブルシューティング** {#troubleshooting}
 
+### セットアップの問題 {#setup-issues}
+
+**"launch the Angular AI tutor"と入力しても何も起こらない場合**
+
+まず、プロジェクトを開いていることを確認してください。チューターには、実際に操作対象となるAngularプロジェクトが必要です:
+
+```bash
+ng new my-app
+cd my-app
+code .
+```
+
+次に、MCPサーバーが起動していることを確認してください。VS Codeでは、`.vscode/mcp.json`ファイルを開き、ファイル上部にある**"Start"**ボタンをクリックします。
+
+"launch the Angular AI tutor"と入力すると、
+"Reviewed .vscode/mcp.json and ran start task"、および
+"Allow task run?"という確認が表示されるので、そのままAllowをクリックしてください。
+
+**それでも動作しない場合**
+
+まず`#angular-cli`と入力してAngularのコンテキストを読み込み、次にチュートリアルのURL `https://angular.dev/ai/ai-tutor` を貼り付けてみてください。
+
+**サーバーが起動しているかを確認する方法**
+
+コマンドパレット（`Ctrl+Shift+P`）を開き、"MCP: List Running Servers"と入力して、一覧に"angular-cli"があるかを確認してください。
+
+---
+
+### 一般的な問題 {#general-issues}
+
 チューターが正しく応答しない場合や、アプリケーションに問題があると思われる場合は、以下のことを試してみてください:
 
 1. **"proceed"と入力する:** これにより、チューターがスタックした場合に次のステップに進むよう促すことができます。
diff --git a/adev-ja/src/content/ai/develop-with-ai.en.md b/adev-ja/src/content/ai/develop-with-ai.en.md
index 8e4e3c5189..33edbf2370 100644
--- a/adev-ja/src/content/ai/develop-with-ai.en.md
+++ b/adev-ja/src/content/ai/develop-with-ai.en.md
@@ -18,11 +18,11 @@ Here is a set of instructions to help LLMs generate correct code that follows An
 
 ## Rules Files
 
-Several editors, such as <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio" target="_blank">Firebase Studio</a> have rules files useful for providing critical context to LLMs.
+Several tools, such as <a href="https://antigravity.google?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_antigravity" target="_blank">Antigravity</a> have rules files useful for providing critical context to LLMs.
 
 | Environment/IDE      | Rules File                                                                                                             | Installation Instructions                                                                                                                                       |
 | :------------------- | :--------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Firebase Studio      | <a download href="/assets/context/airules.md" target="_blank">airules.md</a>                                           | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions" target="_blank">Configure `airules.md`</a>                                  |
+| Antigravity          | <a download href="/assets/context/GEMINI.md" target="_blank">GEMINI.md</a>                                             | <a href="https://antigravity.google/docs/rules-workflows" target="_blank">Configure GEMINI.md</a>                                                               |
 | Copilot powered IDEs | <a download="copilot-instructions.md" href="/assets/context/guidelines.md" target="_blank">copilot-instructions.md</a> | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.github/copilot-instructions.md`</a> |
 | Cursor               | <a download href="/assets/context/angular-20.mdc" target="_blank">cursor.md</a>                                        | <a href="https://docs.cursor.com/context/rules" target="_blank">Configure `cursorrules.md`</a>                                                                  |
 | JetBrains IDEs       | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>                                     | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">Configure `guidelines.md`</a>                                          |
@@ -42,7 +42,7 @@ The Angular CLI includes an experimental [Model Context Protocol (MCP) server](h
 - <a href="/llms.txt" target="_blank">llms.txt</a> - an index file providing links to key files and resources.
 - <a href="/assets/context/llms-full.txt" target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
 
-Be sure [to check out the overview page](/ai) for more information on how to integrate AI into your Angular applications.
+Be sure to check out the [overview page](/ai) for more information on how to integrate AI into your Angular applications.
 
 ## Web Codegen Scorer
 
diff --git a/adev-ja/src/content/ai/develop-with-ai.md b/adev-ja/src/content/ai/develop-with-ai.md
index 2bc8e03876..50b2776098 100644
--- a/adev-ja/src/content/ai/develop-with-ai.md
+++ b/adev-ja/src/content/ai/develop-with-ai.md
@@ -18,11 +18,11 @@ NOTE: これらのファイルは、Angularの規約に準拠するために定
 
 ## ルールファイル {#rules-files}
 
-いくつかのエディター（例: <a href="https://studio.firebase.google.com?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_firebase_studio" target="_blank">Firebase Studio</a>）には、LLMに重要なコンテキストを提供するのに役立つルールファイルがあります。
+いくつかのツール（例: <a href="https://antigravity.google?utm_source=adev&utm_medium=website&utm_campaign=BUILD_WITH_AI_ANGULAR&utm_term=angular_devrel&utm_content=build_with_ai_angular_antigravity" target="_blank">Antigravity</a>）には、LLMに重要なコンテキストを提供するのに役立つルールファイルがあります。
 
 | 環境/IDE        | ルールファイル                                                  | インストール手順                                                                                                 |
 |:----------------|:----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------|
-| Firebase Studio | <a download href="/assets/context/airules.md" target="_blank">airules.md</a>    | <a href="https://firebase.google.com/docs/studio/set-up-gemini#custom-instructions" target="_blank">`airules.md`を設定</a>         |
+| Antigravity     | <a download href="/assets/context/GEMINI.md" target="_blank">GEMINI.md</a>    | <a href="https://antigravity.google/docs/rules-workflows" target="_blank">`GEMINI.md`を設定</a>         |
 | Copilot powered IDEs | <a download="copilot-instructions.md" href="/assets/context/guidelines.md" target="_blank">copilot-instructions.md</a>  | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">`.github/copilot-instructions.md`を設定</a> |
 | Cursor          | <a download href="/assets/context/angular-20.mdc" target="_blank">cursor.md</a> | <a href="https://docs.cursor.com/context/rules" target="_blank">`cursorrules.md`を設定</a>                         |
 | JetBrains IDEs  | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>  | <a href="https://www.jetbrains.com/help/junie/customize-guidelines.html" target="_blank">`guidelines.md`を設定</a> |
diff --git a/adev-ja/src/content/ai/mcp-server-setup.en.md b/adev-ja/src/content/ai/mcp-server-setup.en.md
deleted file mode 100644
index 1a9a8a6be5..0000000000
--- a/adev-ja/src/content/ai/mcp-server-setup.en.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Angular CLI MCP Server setup
-
-The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) enabling AI assistants in your development environment to interact with the Angular CLI. We've included support for CLI powered code generation, adding packages, and more.
-
-## Available Tools
-
-The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled:
-
-| Name                        | Description                                                                                                                                                                                        | `local-only` | `read-only` |
-| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `ai_tutor`                  | Launches an interactive AI-powered Angular tutor. Recommended to run from a new Angular project using v20 or later. [Learn more](ai/ai-tutor).                                                     |      ✅      |     ✅      |
-| `find_examples`             | Finds authoritative code examples from a curated database of official, best-practice examples, focusing on **modern, new, and recently updated** Angular features.                                 |      ✅      |     ✅      |
-| `get_best_practices`        | Retrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow. |      ✅      |     ✅      |
-| `list_projects`             | Lists the names of all applications and libraries defined within an Angular workspace. It reads the `angular.json` configuration file to identify the projects.                                    |      ✅      |     ✅      |
-| `onpush_zoneless_migration` | Analyzes Angular code and provides a step-by-step, iterative plan to migrate it to `OnPush` change detection, a prerequisite for a zoneless application.                                           |      ✅      |     ✅      |
-| `search_documentation`      | Searches the official Angular documentation at <https://angular.dev>. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices.             |      ❌      |     ✅      |
-
-### Experimental Tools
-
-Some tools are provided in experimental / preview status since they are new or not fully tested. Enable them individually with the [`--experimental-tool`](#command-options) option and use them with caution.
-
-| Name                       | Description                                                                                                                                                                                                                                                         | `local-only` | `read-only` |
-| :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------: | :---------: |
-| `build`                    | Perform a one-off, non-watched build using `ng build`.                                                                                                                                                                                                              |      ✅      |     ❌      |
-| `devserver.start`          | Asynchronously starts a development server that watches the workspace for changes, similar to running `ng serve`. Since this is asynchronous it returns immediately. To manage the resulting server, use the `devserver.stop` and `devserver.wait_for_build` tools. |      ✅      |     ✅      |
-| `devserver.stop`           | Stops a development server started by `devserver.start`.                                                                                                                                                                                                            |      ✅      |     ✅      |
-| `devserver.wait_for_build` | Returns the output logs of the most recent build in a running development server started by `devserver.start`. If a build is currently ongoing, it will first wait for that build to complete and then return the logs.                                             |      ✅      |     ✅      |
-| `e2e`                      | Executes the end-to-end tests configured in the project.                                                                                                                                                                                                            |      ✅      |     ✅      |
-| `modernize`                | Performs code migrations and provides further instructions on how to modernize Angular code to align with the latest best practices and syntax. [Learn more](https://angular.dev/reference/migrations)                                                              |      ✅      |     ❌      |
-| `test`                     | Runs the project's unit tests.                                                                                                                                                                                                                                      |      ✅      |     ✅      |
-
-## Get Started
-
-To get started, run the following command in your terminal:
-
-```bash
-ng mcp
-```
-
-When run from an interactive terminal, this command displays instructions on how to configure a host environment to use the MCP server. The following sections provide example configurations for several popular editors and tools.
-
-### Cursor
-
-Create a file named `.cursor/mcp.json` in your project's root and add the following configuration. You can also configure it globally in `~/.cursor/mcp.json`.
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### Firebase Studio
-
-Create a file named `.idx/mcp.json` in your project's root and add the following configuration:
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### Gemini CLI
-
-Create a file named `.gemini/settings.json` in your project's root and add the following configuration:
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### JetBrains IDEs
-
-In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrains AI Assistant plugin, go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)`. Add a new server (`+`) and select `As JSON`. Then paste the following configuration:
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-For the most up-to-date instructions on configuring MCP servers, please refer to the JetBrains documentation: [Connect to an MCP server](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).
-
-### VS Code
-
-In your project's root, create a file named `.vscode/mcp.json` and add the following configuration. Note the use of the `servers` property.
-
-```json
-{
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-### Other IDEs
-
-For other IDEs, check your IDE's documentation for the proper location of the MCP configuration file (often `mcp.json`). The configuration should contain the following snippet.
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
-
-## Command Options
-
-The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration:
-
-| Option                        | Type      | Description                                                                                                                                                               | Default |
-| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ |
-| `--read-only`                 | `boolean` | Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.                                                         | `false` |
-| `--local-only`                | `boolean` | Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.                                         | `false` |
-| `--experimental-tool`<br>`-E` | `string`  | Enable an [experimental tool](#experimental-tools). Separate multiple options by spaces, e.g. `-E tool_a tool_b`. Enable all `devserver.x` tools by using `-E devserver`. |         |
-
-For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
-
-```json
-{
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp", "--read-only"]
-    }
-  }
-}
-```
-
-## Feedback and New Ideas
-
-The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the [angular/angular GitHub repository](https://github.com/angular/angular/issues).
diff --git a/adev-ja/src/content/ai/mcp-server-setup.md b/adev-ja/src/content/ai/mcp-server-setup.md
index 6eba92921a..f8901dd2f0 100644
--- a/adev-ja/src/content/ai/mcp-server-setup.md
+++ b/adev-ja/src/content/ai/mcp-server-setup.md
@@ -1,159 +1,125 @@
-# Angular CLI MCPサーバーセットアップ
+# Angular CLI MCP Server
 
-Angular CLIには、開発環境のAIアシスタントがAngular CLIと対話できるようにする実験的な[Model Context Protocol (MCP) サーバー](https://modelcontextprotocol.io/)が含まれています。CLIによるコード生成、パッケージの追加などに対応しています。
+The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Antigravity, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for code generation, workspace analysis, and running builds/tests.
 
-## 利用可能なツール {#available-tools}
+<docs-callout title="Integration with Angular AI Agent Skills">
+  If your host environment supports custom Agent Skills (such as Antigravity), you can combine the Angular CLI MCP server with the official [Angular AI Skills](https://angular.dev/ai/agent-skills). While the skills provide the agent with deep instruction-level guidance and coding standards, the MCP server provides the action tools (like compiling, running tests, and analyzing workspaces) to execute those guidelines, resulting in a complete and powerful development agent.
+</docs-callout>
 
-Angular CLI MCPサーバーは、開発ワークフローを支援するいくつかのツールを提供します。デフォルトで、以下のツールが有効になっています：
+## Get Started
 
-| 名前                        | 説明                                                                                                                                                                                                       | `local-only` | `read-only` |
-| :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `ai_tutor`                  | インタラクティブなAI駆動のAngularチューターを起動します。v20以降を使用する新しいAngularプロジェクトから実行することを推奨します。[詳細を見る](ai/ai-tutor)。                                                  |      ✅      |     ✅      |
-| `find_examples`             | 公式のベストプラクティス例の厳選されたデータベースから、権威ある コード例を検索します。**モダンで新しい、最近更新された**Angular機能に焦点を当てています。                                                     |      ✅      |     ✅      |
-| `get_best_practices`        | Angularベストプラクティスガイドを取得します。このガイドは、スタンドアロンコンポーネント、型付きフォーム、モダンな制御フローなど、すべてのコードが現代的な標準に準拠することを保証するために不可欠です。         |      ✅      |     ✅      |
-| `list_projects`             | Angularワークスペース内で定義されたすべてのアプリケーションとライブラリの名前を一覧表示します。`angular.json`設定ファイルを読み取ってプロジェクトを識別します。                                                |      ✅      |     ✅      |
-| `onpush_zoneless_migration` | Angularコードを分析し、ゾーンレスアプリケーションの前提条件である`OnPush`変更検知に移行するための段階的で反復的な計画を提供します。                                                                          |      ✅      |     ✅      |
-| `search_documentation`      | <https://angular.dev> の公式Angularドキュメントを検索します。このツールは、API、チュートリアル、ベストプラクティスなど、Angularに関する質問に答えるために使用する必要があります。                           |      ❌      |     ✅      |
+To use the MCP server, you configure your host environment (IDE or CLI) to run `npx @angular/cli mcp`.
 
-### 実験的ツール {#experimental-tools}
+<docs-tab-group>
+  <docs-tab label="Antigravity IDE">
+    Create a file named `.antigravity/mcp.json` in your project's root:
 
-一部のツールは、新しいまたは完全にテストされていないため、実験的/プレビューステータスで提供されています。[`--experimental-tool`](#command-options)オプションを使用して個別に有効化し、注意して使用してください。
-
-| 名前                       | 説明                                                                                                                                                                                                                                                             | `local-only` | `read-only` |
-| :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `build`                    | `ng build`を使用して、1回限りの非監視ビルドを実行します。                                                                                                                                                                                                           |      ✅      |     ❌      |
-| `devserver.start`          | ワークスペースの変更を監視する開発サーバーを非同期に起動します。`ng serve`の実行に似ています。これは非同期であるため、即座に戻ります。結果として得られるサーバーを管理するには、`devserver.stop`および`devserver.wait_for_build`ツールを使用します。                     |      ✅      |     ✅      |
-| `devserver.stop`           | `devserver.start`によって起動された開発サーバーを停止します。                                                                                                                                                                                                        |      ✅      |     ✅      |
-| `devserver.wait_for_build` | `devserver.start`によって起動された実行中の開発サーバーにおける最新のビルドの出力ログを返します。ビルドが現在進行中の場合、まずそのビルドが完了するのを待ってからログを返します。                                                                                        |      ✅      |     ✅      |
-| `e2e`                      | プロジェクトで設定されたエンドツーエンドテストを実行します。                                                                                                                                                                                                          |      ✅      |     ✅      |
-| `modernize`                | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](https://angular.dev/reference/migrations)                                                                                   |      ✅      |     ❌      |
-| `test`                     | プロジェクトのユニットテストを実行します。                                                                                                                                                                                                                           |      ✅      |     ✅      |
-
-## 開始方法 {#get-started}
+    ```json
+    {
+      "mcpServers": {
+        "angular-cli": {
+          "command": "npx",
+          "args": ["-y", "@angular/cli", "mcp"]
+        }
+      }
+    }
+    ```
 
-開始するには、ターミナルで次のコマンドを実行します。
+  </docs-tab>
 
-```bash
-ng mcp
-```
+  <docs-tab label="Cursor">
+    Create `.cursor/mcp.json` in the project root (or globally at `~/.cursor/mcp.json`):
 
-インタラクティブなターミナルから実行すると、このコマンドはMCPサーバーを使用するためのホスト環境の設定方法についての指示を表示します。以下のセクションでは、いくつかの人気のあるエディタとツールの設定例を提供します。
+    ```json
+    {
+      "mcpServers": {
+        "angular-cli": {
+          "command": "npx",
+          "args": ["-y", "@angular/cli", "mcp"]
+        }
+      }
+    }
+    ```
 
-### Cursor
+  </docs-tab>
 
-プロジェクトのルートに`.cursor/mcp.json`という名前のファイルを作成し、以下の設定を追加します。`~/.cursor/mcp.json`でグローバルに設定できます。
+  <docs-tab label="VS Code">
+    Create `.vscode/mcp.json`:
 
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
+    ```json
+    {
+      "servers": {
+        "angular-cli": {
+          "command": "npx",
+          "args": ["-y", "@angular/cli", "mcp"]
+        }
+      }
     }
-  }
-}
-```
+    ```
 
-### Firebase Studio
+  </docs-tab>
+</docs-tab-group>
 
-プロジェクトのルートに`.idx/mcp.json`という名前のファイルを作成し、以下の設定を追加します：
+## Available Tools (Default)
 
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
+When the MCP server is enabled, AI agents have access to the following tools:
 
-### Gemini CLI
+| Name                        | Description                                                                                               |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
+| `ai_tutor`                  | Launches an interactive AI-powered Angular tutor.                                                         |
+| `devserver.start`           | Asynchronously starts a dev server (`ng serve`). Returns immediately.                                     |
+| `devserver.stop`            | Stops the dev server.                                                                                     |
+| `devserver.wait_for_build`  | Returns the logs of the most recent build in a running dev server.                                        |
+| `get_best_practices`        | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.).        |
+| `list_projects`             | Lists all applications and libraries in the workspace by reading `angular.json`.                          |
+| `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
+| `run_target`                | Executes a configured target (e.g., build, test, lint, e2e, deploy).                                      |
+| `search_documentation`      | Searches the official documentation at `https://angular.dev`.                                             |
 
-プロジェクトのルートに`.gemini/settings.json`という名前のファイルを作成し、以下の設定を追加します：
-
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
+## Common Workflows
 
-### JetBrains IDEs
+These workflows demonstrate how AI assistants coordinate different MCP tools to automatically achieve complex developer stories.
 
-JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、JetBrains AI Assistantプラグインをインストールした後、`Settings | Tools | AI Assistant | Model Context Protocol (MCP)`に移動します。新しいサーバー（`+`）を追加し、`As JSON`を選択します。次に、以下の設定を貼り付けます：
+### 1. Performance Tuning: Zoneless & OnPush Migration
 
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
+The AI agent optimizes change detection performance and migrates components to a zoneless-ready state.
 
-MCPサーバーの設定に関する最新の手順については、JetBrainsのドキュメントを参照してください：[MCPサーバーに接続する](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server)。
+1. **Discover Workspace**: The AI agent calls `list_projects` to locate components, projects, and style/test configurations in the workspace.
+2. **Schematic Modernization (Prerequisite)**: The AI agent runs any prerequisite signal migrations using standard `ng generate` commands (e.g., Signal Inputs, Signal Queries).
+3. **Plan Migration**: The AI agent calls `onpush_zoneless_migration` with the absolute path of the directory or component file.
+4. **Apply Changes**: The AI agent automatically applies the single actionable change returned by the tool to the codebase.
+5. **Verify Changes**: The AI agent runs unit tests by calling `run_target` with the target parameter set to `"test"`.
+6. **Repeat**: The AI agent calls `onpush_zoneless_migration` again to retrieve the next step, repeating until the tool indicates the migration is complete.
 
-### VS Code
+### 2. Feature Development & TDD Loop
 
-プロジェクトのルートに`.vscode/mcp.json`という名前のファイルを作成し、以下の設定を追加します。`servers`プロパティの使用に注意してください。
+The AI agent automates research, implementation, and verification when developing new features.
 
-```json
-{
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
+1. **API & Syntax Research**: The AI agent uses `search_documentation` to look up Angular APIs or syntax rules (e.g., `@defer` block options).
+2. **Load Coding Standards**: The AI agent calls `get_best_practices` with the workspace path to load Angular version-aligned coding rules.
+3. **Start Local Dev Server**: The AI agent starts a background server by calling `devserver.start`.
+4. **Monitor Build**: The AI agent uses `devserver.wait_for_build` to watch build logs and ensure compilation succeeds as it edits the code.
+5. **Write and Execute Tests**: The AI agent identifies the project's test framework (e.g., Jasmine, Jest, Vitest) via `list_projects`, writes the corresponding test file, and runs the tests using `run_target` with `"test"`.
+6. **Stop Dev Server**: When finished, the AI agent stops the active dev server by calling `devserver.stop`.
 
-### その他のIDE
+### 3. Developer Onboarding and Learning
 
-その他のIDEについては、MCP設定ファイルの適切な場所（多くの場合`mcp.json`）について、IDEのドキュメントを確認してください。設定には以下のスニペットを含める必要があります。
+The AI agent guides the developer through Angular concepts in an interactive sandbox.
 
-```json
-{
-  "mcpServers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}
-```
+1. **Discover Projects**: The AI agent calls `list_projects` to scan the workspace and identify the codebase structure.
+2. **Launch Tutor**: The AI agent runs `ai_tutor` to load the curriculum instructions, persona, and tutoring guidelines.
+3. **Follow the Curriculum**: The AI agent guides the user through the curriculum, explaining concepts and instructing them on what components to build or modify.
+4. **Implement & Verify**: The AI agent helps implement the sandbox code and verifies changes using `run_target` with `"test"` or `"build"`.
 
-## コマンドオプション {#command-options}
+## Command Options
 
-`mcp`コマンドは、IDEのMCP設定で引数として渡される以下のオプションで設定できます：
+You can pass arguments to the MCP server in the `args` array of your configuration:
 
-| オプション                    | 型        | 説明                                                                                                                                                                                                                                                     | デフォルト |
-| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- |
-| `--read-only`                 | `boolean` | プロジェクトに変更を加えないツールのみを登録します。エディタまたはコーディングエージェントは引き続き編集を実行する場合があります。                                                                                                                         | `false`    |
-| `--local-only`                | `boolean` | インターネット接続を必要としないツールのみを登録します。エディタまたはコーディングエージェントは引き続きネットワーク経由でデータを送信する場合があります。                                                                                                 | `false`    |
-| `--experimental-tool`<br>`-E` | `string`  | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`-E devserver`を使用してすべての`devserver.x`ツールを有効にできます。 |            |
+- `--read-only`: Only registers tools that do not modify the project.
+- `--local-only`: Only registers tools that do not require an internet connection.
 
-たとえば、VS Codeにおいて読み取り専用モードでサーバーを実行する場合は、`mcp.json`を次のように更新します：
+Example for read-only mode:
 
 ```json
-{
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp", "--read-only"]
-    }
-  }
-}
+"args": ["-y", "@angular/cli", "mcp", "--read-only"]
 ```
-
-## フィードバックと新しいアイデア {#feedback-and-new-ideas}
-
-Angularチームは、既存のMCP機能に対するフィードバックや新しいツールまたは機能のアイデアを歓迎します。[angular/angular GitHubリポジトリ](https://github.com/angular/angular/issues)でissueを作成して、ご意見をお聞かせください。
diff --git a/adev-ja/src/content/ai/mcp-server-setup.md.bak b/adev-ja/src/content/ai/mcp-server-setup.md.bak
new file mode 100644
index 0000000000..6eba92921a
--- /dev/null
+++ b/adev-ja/src/content/ai/mcp-server-setup.md.bak
@@ -0,0 +1,159 @@
+# Angular CLI MCPサーバーセットアップ
+
+Angular CLIには、開発環境のAIアシスタントがAngular CLIと対話できるようにする実験的な[Model Context Protocol (MCP) サーバー](https://modelcontextprotocol.io/)が含まれています。CLIによるコード生成、パッケージの追加などに対応しています。
+
+## 利用可能なツール {#available-tools}
+
+Angular CLI MCPサーバーは、開発ワークフローを支援するいくつかのツールを提供します。デフォルトで、以下のツールが有効になっています：
+
+| 名前                        | 説明                                                                                                                                                                                                       | `local-only` | `read-only` |
+| :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
+| `ai_tutor`                  | インタラクティブなAI駆動のAngularチューターを起動します。v20以降を使用する新しいAngularプロジェクトから実行することを推奨します。[詳細を見る](ai/ai-tutor)。                                                  |      ✅      |     ✅      |
+| `find_examples`             | 公式のベストプラクティス例の厳選されたデータベースから、権威ある コード例を検索します。**モダンで新しい、最近更新された**Angular機能に焦点を当てています。                                                     |      ✅      |     ✅      |
+| `get_best_practices`        | Angularベストプラクティスガイドを取得します。このガイドは、スタンドアロンコンポーネント、型付きフォーム、モダンな制御フローなど、すべてのコードが現代的な標準に準拠することを保証するために不可欠です。         |      ✅      |     ✅      |
+| `list_projects`             | Angularワークスペース内で定義されたすべてのアプリケーションとライブラリの名前を一覧表示します。`angular.json`設定ファイルを読み取ってプロジェクトを識別します。                                                |      ✅      |     ✅      |
+| `onpush_zoneless_migration` | Angularコードを分析し、ゾーンレスアプリケーションの前提条件である`OnPush`変更検知に移行するための段階的で反復的な計画を提供します。                                                                          |      ✅      |     ✅      |
+| `search_documentation`      | <https://angular.dev> の公式Angularドキュメントを検索します。このツールは、API、チュートリアル、ベストプラクティスなど、Angularに関する質問に答えるために使用する必要があります。                           |      ❌      |     ✅      |
+
+### 実験的ツール {#experimental-tools}
+
+一部のツールは、新しいまたは完全にテストされていないため、実験的/プレビューステータスで提供されています。[`--experimental-tool`](#command-options)オプションを使用して個別に有効化し、注意して使用してください。
+
+| 名前                       | 説明                                                                                                                                                                                                                                                             | `local-only` | `read-only` |
+| :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
+| `build`                    | `ng build`を使用して、1回限りの非監視ビルドを実行します。                                                                                                                                                                                                           |      ✅      |     ❌      |
+| `devserver.start`          | ワークスペースの変更を監視する開発サーバーを非同期に起動します。`ng serve`の実行に似ています。これは非同期であるため、即座に戻ります。結果として得られるサーバーを管理するには、`devserver.stop`および`devserver.wait_for_build`ツールを使用します。                     |      ✅      |     ✅      |
+| `devserver.stop`           | `devserver.start`によって起動された開発サーバーを停止します。                                                                                                                                                                                                        |      ✅      |     ✅      |
+| `devserver.wait_for_build` | `devserver.start`によって起動された実行中の開発サーバーにおける最新のビルドの出力ログを返します。ビルドが現在進行中の場合、まずそのビルドが完了するのを待ってからログを返します。                                                                                        |      ✅      |     ✅      |
+| `e2e`                      | プロジェクトで設定されたエンドツーエンドテストを実行します。                                                                                                                                                                                                          |      ✅      |     ✅      |
+| `modernize`                | コード移行を実行し、最新のベストプラクティスと構文に合わせてAngularコードをモダナイズする方法についてさらなる指示を提供します。[詳細を見る](https://angular.dev/reference/migrations)                                                                                   |      ✅      |     ❌      |
+| `test`                     | プロジェクトのユニットテストを実行します。                                                                                                                                                                                                                           |      ✅      |     ✅      |
+
+## 開始方法 {#get-started}
+
+開始するには、ターミナルで次のコマンドを実行します。
+
+```bash
+ng mcp
+```
+
+インタラクティブなターミナルから実行すると、このコマンドはMCPサーバーを使用するためのホスト環境の設定方法についての指示を表示します。以下のセクションでは、いくつかの人気のあるエディタとツールの設定例を提供します。
+
+### Cursor
+
+プロジェクトのルートに`.cursor/mcp.json`という名前のファイルを作成し、以下の設定を追加します。`~/.cursor/mcp.json`でグローバルに設定できます。
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Firebase Studio
+
+プロジェクトのルートに`.idx/mcp.json`という名前のファイルを作成し、以下の設定を追加します：
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Gemini CLI
+
+プロジェクトのルートに`.gemini/settings.json`という名前のファイルを作成し、以下の設定を追加します：
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### JetBrains IDEs
+
+JetBrains IDEs（IntelliJ IDEAやWebStormなど）では、JetBrains AI Assistantプラグインをインストールした後、`Settings | Tools | AI Assistant | Model Context Protocol (MCP)`に移動します。新しいサーバー（`+`）を追加し、`As JSON`を選択します。次に、以下の設定を貼り付けます：
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+MCPサーバーの設定に関する最新の手順については、JetBrainsのドキュメントを参照してください：[MCPサーバーに接続する](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server)。
+
+### VS Code
+
+プロジェクトのルートに`.vscode/mcp.json`という名前のファイルを作成し、以下の設定を追加します。`servers`プロパティの使用に注意してください。
+
+```json
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### その他のIDE
+
+その他のIDEについては、MCP設定ファイルの適切な場所（多くの場合`mcp.json`）について、IDEのドキュメントを確認してください。設定には以下のスニペットを含める必要があります。
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+## コマンドオプション {#command-options}
+
+`mcp`コマンドは、IDEのMCP設定で引数として渡される以下のオプションで設定できます：
+
+| オプション                    | 型        | 説明                                                                                                                                                                                                                                                     | デフォルト |
+| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- |
+| `--read-only`                 | `boolean` | プロジェクトに変更を加えないツールのみを登録します。エディタまたはコーディングエージェントは引き続き編集を実行する場合があります。                                                                                                                         | `false`    |
+| `--local-only`                | `boolean` | インターネット接続を必要としないツールのみを登録します。エディタまたはコーディングエージェントは引き続きネットワーク経由でデータを送信する場合があります。                                                                                                 | `false`    |
+| `--experimental-tool`<br>`-E` | `string`  | [実験的ツール](#experimental-tools)を有効にします。複数のオプションをスペースで区切ります。例: `-E tool_a tool_b`。`-E devserver`を使用してすべての`devserver.x`ツールを有効にできます。 |            |
+
+たとえば、VS Codeにおいて読み取り専用モードでサーバーを実行する場合は、`mcp.json`を次のように更新します：
+
+```json
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp", "--read-only"]
+    }
+  }
+}
+```
+
+## フィードバックと新しいアイデア {#feedback-and-new-ideas}
+
+Angularチームは、既存のMCP機能に対するフィードバックや新しいツールまたは機能のアイデアを歓迎します。[angular/angular GitHubリポジトリ](https://github.com/angular/angular/issues)でissueを作成して、ご意見をお聞かせください。
diff --git a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
index d992e529a6..fa21d3682b 100644
--- a/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
+++ b/adev-ja/src/content/best-practices/runtime-performance/profiling-with-chrome-devtools.md
@@ -51,6 +51,18 @@ Use the **Record** button in the Chrome DevTools performance panel:
 
 See the [Chrome DevTools documentation](https://developer.chrome.com/docs/devtools/performance#record) for more details on recording profiles.
 
+## Open a component in Angular DevTools
+
+After recording a profile, select a component event in the **Angular** track.
+The **Summary** tab can include a **Component** link that uses the `angular-devtools://component/...` URL scheme.
+
+<img alt="Chrome DevTools Performance panel showing an Angular custom track with a selected _MainComponent event. The Summary tab displays a Component link that uses the angular-devtools://component URL scheme." src="assets/images/best-practices/runtime-performance/chrome-performance-deep-link.png">
+
+Click the link to open Angular DevTools and select the matching component in the **Components** tab.
+This helps you move from a browser-level profile to the component state and metadata for a selected event.
+
+NOTE: Opening component links requires Angular DevTools for Chrome and Chrome's experimental `chrome://flags/#enable-devtools-deep-link-via-extensibility-api` flag.
+
 ## Interpreting a recorded profile
 
 You can use the "Angular" custom track to quickly identify and diagnose performance issues. The following sections describe some common profiling scenarios.
diff --git a/adev-ja/src/content/best-practices/style-guide.en.md b/adev-ja/src/content/best-practices/style-guide.en.md
index 9a8c542f75..8c12a9a5c2 100644
--- a/adev-ja/src/content/best-practices/style-guide.en.md
+++ b/adev-ja/src/content/best-practices/style-guide.en.md
@@ -196,9 +196,7 @@ properties initialized by `input`, `model`, `output`, and queries. The readonly
 ensures that the value set by Angular is not overwritten.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   readonly userId = input();
   readonly userSaved = output();
@@ -210,9 +208,7 @@ For components and directives that use the decorator-based `@Input`, `@Output`,
 advice applies to output properties and queries, but not input properties.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   @Output() readonly userSaved = new EventEmitter<void>();
   @ViewChildren(PaymentMethod) readonly paymentMethods?: QueryList<PaymentMethod>;
@@ -275,9 +271,7 @@ single well-named handler. In these cases, it's fine to fall back to a name like
 then delegate to more specific behaviors based on the event details:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 class RichText {
   handleKeydown(event: KeyboardEvent) {
     if (event.ctrlKey) {
@@ -322,9 +316,7 @@ your class, import and `implement` these interfaces to ensure that the methods a
 ```ts
 import {Component, OnInit} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile implements OnInit {
   // The `OnInit` interface ensures this method is named correctly.
   ngOnInit() {
diff --git a/adev-ja/src/content/best-practices/style-guide.md b/adev-ja/src/content/best-practices/style-guide.md
index 3e2bce8a0d..b2cf191566 100644
--- a/adev-ja/src/content/best-practices/style-guide.md
+++ b/adev-ja/src/content/best-practices/style-guide.md
@@ -3,7 +3,8 @@
 ## はじめに {#introduction}
 
 このガイドでは、Angularアプリケーションコードのさまざまなスタイル規約について説明します。これらの推奨事項は
-Angularが機能するために必須ではありませんが、Angularエコシステム全体で一貫性を促進する一連のコーディングプラクティスを確立します。
+Angularが機能するために必須ではありませんが、
+Angularエコシステム全体で一貫性を促進する一連のコーディングプラクティスを確立します。
 一貫したプラクティスセットにより、コードの共有やプロジェクト間の移動が容易になります。
 
 このガイドは、TypeScriptやAngularに無関係な一般的なコーディングプラクティスは_対象としていません_。
@@ -41,8 +42,7 @@ TypeScriptクラスを含む場合、ファイル名はそのクラス名を反
 
 ### コンポーネントのTypeScript、テンプレート、スタイルに同じファイル名を使用する {#use-the-same-file-name-for-a-components-typescript-template-and-styles}
 
-コンポーネントは通常、1つのTypeScriptファイル、1つのテンプレートファイル、
-1つのスタイルファイルで構成されます。これらのファイルは異なるファイル拡張子を持つ
+コンポーネントは通常、1つのTypeScriptファイル、1つのテンプレートファイル、1つのスタイルファイルで構成されます。これらのファイルは異なるファイル拡張子を持つ
 同じ名前を共有するべきです。例えば、`UserProfile`コンポーネントは
 `user-profile.ts`、`user-profile.html`、`user-profile.css`というファイルを持つことができます。
 
@@ -196,9 +196,7 @@ Angularによって初期化されるコンポーネントとディレクティ
 readonlyアクセス修飾子は、Angularによって設定された値が上書きされないことを保証します。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   readonly userId = input();
   readonly userSaved = output();
@@ -210,9 +208,7 @@ export class UserProfile {
 このアドバイスは出力プロパティとクエリに適用されますが、入力プロパティには適用されません。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   @Output() readonly userSaved = new EventEmitter<void>();
   @ViewChildren(PaymentMethod) readonly paymentMethods?: QueryList<PaymentMethod>;
@@ -275,9 +271,7 @@ export class UserProfile {
 イベントの詳細に基づいてより具体的な動作に委譲しても問題ありません。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 class RichText {
   handleKeydown(event: KeyboardEvent) {
     if (event.ctrlKey) {
@@ -322,9 +316,7 @@ Angularは、各ライフサイクルメソッドに対応するTypeScriptイン
 ```ts
 import {Component, OnInit} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile implements OnInit {
   // The `OnInit` interface ensures this method is named correctly.
   ngOnInit() {
diff --git a/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md b/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
index ae5abe8718..3a5fef2cd3 100644
--- a/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
+++ b/adev-ja/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -12,9 +12,7 @@ The `outputFromObservable` lets you create a component or directive output that
 import {Directive} from '@angular/core';
 import {outputFromObservable} from '@angular/core/rxjs-interop';
 
-@Directive({
-  /*...*/
-})
+@Directive(/* ... */)
 class Draggable {
   pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
 
diff --git a/adev-ja/src/content/events/v21.en.md b/adev-ja/src/content/events/v21.en.md
index 46838e632d..675e931ac1 100644
--- a/adev-ja/src/content/events/v21.en.md
+++ b/adev-ja/src/content/events/v21.en.md
@@ -4,7 +4,7 @@
 
 ## Release Blog
 
-**Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.
+**Angular v21 is live**: check out the [v21 release blog](https://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way.
 
 ## Experience the v21 Release
 
diff --git a/adev-ja/src/content/events/v21.md b/adev-ja/src/content/events/v21.md
index 9f9bd7fa61..47ecbef067 100644
--- a/adev-ja/src/content/events/v21.md
+++ b/adev-ja/src/content/events/v21.md
@@ -4,7 +4,7 @@
 
 ## リリースブログ {#release-blog}
 
-**Angular v21がリリースされました**: [v21リリースブログ](http://goo.gle/angular-v21-blog)で、みなさんに提供されるすばらしい新機能のすべてをご確認ください。
+**Angular v21がリリースされました**: [v21リリースブログ](https://goo.gle/angular-v21-blog)で、みなさんに提供されるすばらしい新機能のすべてをご確認ください。
 
 ## v21リリースを体験する {#experience-the-v21-release}
 
diff --git a/adev-ja/src/content/events/v22.en.md b/adev-ja/src/content/events/v22.en.md
index 18ec2ae2aa..028563bd7f 100644
--- a/adev-ja/src/content/events/v22.en.md
+++ b/adev-ja/src/content/events/v22.en.md
@@ -18,15 +18,13 @@ Angular v22 is ready for you to build modern, high-performance web applications.
   <docs-card title="Changelog" href="https://github.com/angular/angular/blob/main/CHANGELOG.md#2200-2026-06-03" link="View the changelog">
     Review the detailed, commit-by-commit list of new features, bug fixes, and breaking changes.
   </docs-card>
-    <docs-card title="Update to v22" href="https://angular.dev/update-guide?v=21.0-22.0&l=3" link="Chart your updade path to v22">
+    <docs-card title="Update to v22" href="https://angular.dev/update-guide?v=21.0-22.0&l=3" link="Chart your update path to v22">
     Get instructions on how to update your project to Angular v22.
   </docs-card>
 </docs-card-container>
 
 ## Developer event
 
-The v22 release video will be launching soon, [so tune in to the Angular YouTube Channel Friday, June 5 @ 9 AM Pacific](https://goo.gle/angular-v22-yt).
+[Watch the Angular v22 Developer Event online](https://goo.gle/angular-v22-yt).
 
-In the meantime, you can watch the Angular v21 Developer Event:
-
-<docs-video src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr" title="Angular v21 Developer Event"/>
+<docs-video src="https://www.youtube.com/embed/h5OJUSS_8IA?si=MdQ_EUn5ED89wX1j" title="Angular v22 Developer Event"/>
diff --git a/adev-ja/src/content/events/v22.md b/adev-ja/src/content/events/v22.md
index d72b32722c..9d728f871e 100644
--- a/adev-ja/src/content/events/v22.md
+++ b/adev-ja/src/content/events/v22.md
@@ -25,8 +25,6 @@ Angular v22は、モダンで高性能なWebアプリケーションを構築す
 
 ## 開発者向けイベント {#developer-event}
 
-v22リリースビデオがまもなく公開されます。[6月5日(金)太平洋時間午前9時、Angular YouTubeチャンネルでご視聴ください](https://goo.gle/angular-v22-yt)。
+[Angular v22開発者向けイベントをオンラインで視聴する](https://goo.gle/angular-v22-yt)。
 
-それまでの間、Angular v21開発者向けイベントの動画をご覧いただけます。
-
-<docs-video src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr" title="Angular v21 Developer Event"/>
+<docs-video src="https://www.youtube.com/embed/h5OJUSS_8IA?si=MdQ_EUn5ED89wX1j" title="Angular v22 Developer Event"/>
diff --git a/adev-ja/src/content/guide/animations/css.en.md b/adev-ja/src/content/guide/animations/css.en.md
index 5781643021..30e4c802d4 100644
--- a/adev-ja/src/content/guide/animations/css.en.md
+++ b/adev-ja/src/content/guide/animations/css.en.md
@@ -127,7 +127,7 @@ If you have actions you would like to execute at certain points during animation
 
 [`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)  
 [`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)  
-[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)  
+[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event)  
 [`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
 
 [`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)  
diff --git a/adev-ja/src/content/guide/animations/migration.en.md b/adev-ja/src/content/guide/animations/migration.en.md
index 7aa4258b58..32a960290d 100644
--- a/adev-ja/src/content/guide/animations/migration.en.md
+++ b/adev-ja/src/content/guide/animations/migration.en.md
@@ -193,7 +193,7 @@ The animations package exposed callbacks for you to use in the case that you wan
 
 [`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)  
 [`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)  
-[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event)  
+[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event)  
 [`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
 
 [`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event)  
diff --git a/adev-ja/src/content/guide/aria/accordion.en.md b/adev-ja/src/content/guide/aria/accordion.en.md
index d99a4a7ab8..b1449e8ac0 100644
--- a/adev-ja/src/content/guide/aria/accordion.en.md
+++ b/adev-ja/src/content/guide/aria/accordion.en.md
@@ -208,90 +208,11 @@ describe('MyAccordionComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### AccordionGroup
+For detailed API documentation, inspect the following API references:
 
-The container directive that manages keyboard navigation and expansion behavior for a group of accordion items.
-
-#### Inputs
-
-| Property          | Type      | Default | Description                                                               |
-| ----------------- | --------- | ------- | ------------------------------------------------------------------------- |
-| `disabled`        | `boolean` | `false` | Disables all triggers in the group                                        |
-| `multiExpandable` | `boolean` | `true`  | Whether multiple panels can be expanded simultaneously                    |
-| `softDisabled`    | `boolean` | `true`  | When `true`, disabled items are focusable. When `false`, they are skipped |
-| `wrap`            | `boolean` | `false` | Whether keyboard navigation wraps from last to first item and vice versa  |
-
-#### Methods
-
-| Method        | Parameters | Description                                                      |
-| ------------- | ---------- | ---------------------------------------------------------------- |
-| `expandAll`   | none       | Expands all panels (only works when `multiExpandable` is `true`) |
-| `collapseAll` | none       | Collapses all panels                                             |
-
-### AccordionTrigger
-
-The directive applied to the button element that toggles panel visibility.
-
-#### Inputs
-
-| Property   | Type             | Default | Description                                                    |
-| ---------- | ---------------- | ------- | -------------------------------------------------------------- |
-| `panel`    | `AccordionPanel` | —       | **Required.** The reference of the controlled accordion panel. |
-| `id`       | `string`         | auto    | Unique identifier for the trigger                              |
-| `disabled` | `boolean`        | `false` | Disables this trigger                                          |
-| `expanded` | `boolean`        | `false` | Whether the panel is expanded (supports two-way binding)       |
-
-#### Signals
-
-| Property | Type              | Description                             |
-| -------- | ----------------- | --------------------------------------- |
-| `active` | `Signal<boolean>` | Whether the trigger currently has focus |
-
-#### Methods
-
-| Method     | Parameters | Description                       |
-| ---------- | ---------- | --------------------------------- |
-| `expand`   | none       | Expands the associated panel      |
-| `collapse` | none       | Collapses the associated panel    |
-| `toggle`   | none       | Toggles the panel expansion state |
-
-### AccordionPanel
-
-The directive applied to the element containing the collapsible content.
-
-#### Inputs
-
-| Property          | Type      | Default | Description                                          |
-| ----------------- | --------- | ------- | ---------------------------------------------------- |
-| `id`              | `string`  | auto    | Unique identifier for the panel                      |
-| `preserveContent` | `boolean` | `true`  | Whether to keep content in DOM after panel collapses |
-
-#### Signals
-
-| Property  | Type              | Description                             |
-| --------- | ----------------- | --------------------------------------- |
-| `visible` | `Signal<boolean>` | Whether the panel is currently expanded |
-
-#### Methods
-
-| Method     | Parameters | Description                 |
-| ---------- | ---------- | --------------------------- |
-| `expand`   | none       | Expands this panel          |
-| `collapse` | none       | Collapses this panel        |
-| `toggle`   | none       | Toggles the expansion state |
-
-### AccordionContent
-
-The structural directive applied to an `ng-template` inside an accordion panel to enable lazy rendering.
-
-This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element:
-
-```angular-html
-<div ngAccordionPanel #panel1="ngAccordionPanel">
-  <ng-template ngAccordionContent>
-    <!-- Content here is lazily rendered -->
-  </ng-template>
-</div>
-```
+- [`AccordionGroup`](/api/aria/accordion/AccordionGroup)
+- [`AccordionTrigger`](/api/aria/accordion/AccordionTrigger)
+- [`AccordionPanel`](/api/aria/accordion/AccordionPanel)
+- [`AccordionContent`](/api/aria/accordion/AccordionContent)
diff --git a/adev-ja/src/content/guide/aria/accordion.md b/adev-ja/src/content/guide/aria/accordion.md
index d5d3d600f5..766378fb15 100644
--- a/adev-ja/src/content/guide/aria/accordion.md
+++ b/adev-ja/src/content/guide/aria/accordion.md
@@ -208,90 +208,11 @@ describe('MyAccordionComponent', () => {
 });
 ```
 
-## API
+## API reference {#api-reference}
 
-### AccordionGroup {#accordiongroup}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-アコーディオンアイテムのグループのキーボードナビゲーションと展開動作を管理するコンテナディレクティブです。
-
-#### Inputs {#inputs}
-
-| プロパティ        | 型        | デフォルト | 説明                                                                      |
-| ----------------- | --------- | ------- | ------------------------------------------------------------------------- |
-| `disabled`        | `boolean` | `false` | グループ内のすべてのトリガーを無効にします                                |
-| `multiExpandable` | `boolean` | `true`  | 複数のパネルを同時に展開できるかどうか                                    |
-| `softDisabled`    | `boolean` | `true`  | `true`の場合、無効化されたアイテムはフォーカス可能です。`false`の場合、スキップされます |
-| `wrap`            | `boolean` | `false` | キーボードナビゲーションが最後のアイテムから最初のアイテムへ、またはその逆にラップするかどうか |
-
-#### Methods {#methods}
-
-| メソッド      | パラメータ | 説明                                                             |
-| ------------- | ---------- | ---------------------------------------------------------------- |
-| `expandAll`   | none       | すべてのパネルを展開します（`multiExpandable`が`true`の場合のみ機能します） |
-| `collapseAll` | none       | すべてのパネルを折りたたみます                                     |
-
-### AccordionTrigger {#accordiontrigger}
-
-パネルの表示/非表示を切り替えるボタン要素に適用されるディレクティブです。
-
-#### Inputs {#inputs}
-
-| プロパティ | 型               | デフォルト | 説明                                                           |
-| ---------- | ---------------- | ------- | -------------------------------------------------------------- |
-| `panel`    | `AccordionPanel` | —       | **必須。**制御対象のアコーディオンパネルへの参照                |
-| `id`       | `string`         | auto    | トリガーの一意の識別子                                         |
-| `disabled` | `boolean`        | `false` | このトリガーを無効にします                                     |
-| `expanded` | `boolean`        | `false` | パネルが展開されているかどうか（双方向バインディングをサポート） |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                                    |
-| -------- | ----------------- | --------------------------------------- |
-| `active` | `Signal<boolean>` | トリガーが現在フォーカスを持っているかどうか    |
-
-#### Methods {#methods}
-
-| メソッド   | パラメータ | 説明                              |
-| ---------- | ---------- | --------------------------------- |
-| `expand`   | none       | 関連付けられたパネルを展開します      |
-| `collapse` | none       | 関連付けられたパネルを折りたたみます    |
-| `toggle`   | none       | パネルの展開状態を切り替えます        |
-
-### AccordionPanel {#accordionpanel}
-
-折りたたみ可能なコンテンツを含む要素に適用されるディレクティブです。
-
-#### Inputs {#inputs}
-
-| プロパティ        | 型        | デフォルト | 説明                                                 |
-| ----------------- | --------- | ------- | ---------------------------------------------------- |
-| `id`              | `string`  | auto    | パネルの一意の識別子                                 |
-| `preserveContent` | `boolean` | `true`  | パネルが折りたたまれた後もコンテンツをDOMに保持するかどうか |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                                    |
-| --------- | ----------------- | --------------------------------------- |
-| `visible` | `Signal<boolean>` | パネルが現在展開されているかどうか        |
-
-#### Methods {#methods}
-
-| メソッド   | パラメータ | 説明                        |
-| ---------- | ---------- | --------------------------- |
-| `expand`   | none       | このパネルを展開します          |
-| `collapse` | none       | このパネルを折りたたみます        |
-| `toggle`   | none       | 展開状態を切り替えます          |
-
-### AccordionContent {#accordioncontent}
-
-遅延レンダリングを有効にするために、アコーディオンパネル内の`ng-template`に適用される構造ディレクティブです。
-
-このディレクティブには、input、output、メソッドはありません。`ng-template`要素に適用してください:
-
-```angular-html
-<div ngAccordionPanel #panel1="ngAccordionPanel">
-  <ng-template ngAccordionContent>
-    <!-- Content here is lazily rendered -->
-  </ng-template>
-</div>
-```
+- [`AccordionGroup`](/api/aria/accordion/AccordionGroup)
+- [`AccordionTrigger`](/api/aria/accordion/AccordionTrigger)
+- [`AccordionPanel`](/api/aria/accordion/AccordionPanel)
+- [`AccordionContent`](/api/aria/accordion/AccordionContent)
diff --git a/adev-ja/src/content/guide/aria/autocomplete.en.md b/adev-ja/src/content/guide/aria/autocomplete.en.md
index b7906c8ab5..2b164bce33 100644
--- a/adev-ja/src/content/guide/aria/autocomplete.en.md
+++ b/adev-ja/src/content/guide/aria/autocomplete.en.md
@@ -216,73 +216,12 @@ describe('MyAutocompleteComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Combobox Directive
+For detailed API documentation, inspect the following API references:
 
-The `ngCombobox` directive is applied directly onto the editable text `<input>` or `<textarea>` to manage keyboard triggers and popover states.
-
-#### Inputs
-
-| Property           | Type                  | Default     | Description                                                     |
-| ------------------ | --------------------- | ----------- | --------------------------------------------------------------- |
-| `disabled`         | `boolean`             | `false`     | Disables the combobox                                           |
-| `softDisabled`     | `boolean`             | `true`      | Focusable when disabled                                         |
-| `inlineSuggestion` | `string \| undefined` | `undefined` | Displays an inline completion suggestion for autocomplete modes |
-
-#### Models
-
-| Property   | Type                   | Default | Description                                                       |
-| ---------- | ---------------------- | ------- | ----------------------------------------------------------------- |
-| `value`    | `ModelSignal<string>`  | `''`    | Two-way bindable value of the input using `[(value)]`             |
-| `expanded` | `ModelSignal<boolean>` | `false` | Two-way bindable expanded state of the popup using `[(expanded)]` |
-
----
-
-### ComboboxPopup Directive
-
-A structural directive applied to `<ng-template>` to mark the container used as the popup.
-
-#### Inputs
-
-| Property   | Type       | Description                                 |
-| ---------- | ---------- | ------------------------------------------- |
-| `combobox` | `Combobox` | Required reference to the parent `Combobox` |
-
----
-
-### ComboboxWidget Directive
-
-Applied to the popup content container to bridge active-descendant focus changes to the input trigger.
-
-#### Inputs
-
-| Property           | Type                  | Description                                                                       |
-| ------------------ | --------------------- | --------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active descendant (bound to `listbox.activeDescendant()`) |
-
----
-
-### Listbox Directives
-
-Autocomplete suggestion lists use the standard standalone listbox directives.
-
-#### Inputs
-
-| Property        | Type                               | Default    | Description                                                                                          |
-| --------------- | ---------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------- |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'follow'` | In manual/explicit mode, updates are committed explicitly on click/Enter rather than following focus |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'` | Set to `'activedescendant'` so browser focus stays on the trigger input                              |
-| `tabIndex`      | `number`                           | `0`        | Set to `-1` to prevent keyboard tab focus from entering the popup listbox container                  |
-
-#### Models
-
-| Property | Type                 | Description                                                 |
-| -------- | -------------------- | ----------------------------------------------------------- |
-| `value`  | `ModelSignal<any[]>` | Two-way bindable array of selected values using `[(value)]` |
-
----
-
-### Related components
-
-Autocomplete uses standard standalone [Listbox](/api/aria/listbox/Listbox) and [Option](/api/aria/listbox/Option) directives. See the [Listbox documentation](/guide/aria/listbox) for advanced options.
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
diff --git a/adev-ja/src/content/guide/aria/autocomplete.md b/adev-ja/src/content/guide/aria/autocomplete.md
index 1dfa3e17d9..e815709413 100644
--- a/adev-ja/src/content/guide/aria/autocomplete.md
+++ b/adev-ja/src/content/guide/aria/autocomplete.md
@@ -216,73 +216,12 @@ describe('MyAutocompleteComponent', () => {
 });
 ```
 
-## API {#apis}
+## API reference {#api-reference}
 
-### Comboboxディレクティブ {#combobox-directive}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-`ngCombobox`ディレクティブは、編集可能なテキスト`<input>`または`<textarea>`に直接適用され、キーボードトリガーとポップオーバーの状態を管理します。
-
-#### 入力 {#inputs}
-
-| プロパティ         | 型                    | デフォルト  | 説明                                                                   |
-| ------------------ | --------------------- | ----------- | ---------------------------------------------------------------------- |
-| `disabled`         | `boolean`             | `false`     | コンボボックスを無効にします                                           |
-| `softDisabled`     | `boolean`             | `true`      | 無効化されていてもフォーカス可能にします                               |
-| `inlineSuggestion` | `string \| undefined` | `undefined` | オートコンプリートモード向けにインライン補完候補を表示します           |
-
-#### モデル {#models}
-
-| プロパティ | 型                     | デフォルト | 説明                                                                              |
-| ---------- | ---------------------- | ---------- | --------------------------------------------------------------------------------- |
-| `value`    | `ModelSignal<string>`  | `''`       | `[(value)]`を使用した、inputの値の双方向バインディング                            |
-| `expanded` | `ModelSignal<boolean>` | `false`    | `[(expanded)]`を使用した、ポップアップの展開状態の双方向バインディング            |
-
----
-
-### ComboboxPopupディレクティブ {#comboboxpopup-directive}
-
-ポップアップとして使用されるコンテナを示すために`<ng-template>`に適用される構造ディレクティブです。
-
-#### 入力 {#combobox-popup-inputs}
-
-| プロパティ | 型         | 説明                                       |
-| ---------- | ---------- | ------------------------------------------ |
-| `combobox` | `Combobox` | 親の`Combobox`への必須の参照               |
-
----
-
-### ComboboxWidgetディレクティブ {#comboboxwidget-directive}
-
-アクティブな子孫要素のフォーカス変更を入力トリガーに橋渡しするため、ポップアップのコンテンツコンテナに適用されます。
-
-#### 入力 {#combobox-widget-inputs}
-
-| プロパティ         | 型                    | 説明                                                                                       |
-| ------------------ | --------------------- | ------------------------------------------------------------------------------------------ |
-| `activeDescendant` | `string \| undefined` | 現在アクティブな子孫要素のID（`listbox.activeDescendant()`にバインド）                     |
-
----
-
-### Listboxディレクティブ {#listbox-directives}
-
-オートコンプリートの候補リストには、標準のスタンドアロンlistboxディレクティブを使用します。
-
-#### 入力 {#listbox-inputs}
-
-| プロパティ      | 型                                 | デフォルト | 説明                                                                                                            |
-| --------------- | ---------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------- |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'follow'` | manual/explicitモードでは、フォーカス追従ではなくクリックやEnterで明示的に更新を確定します                      |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'` | `'activedescendant'`に設定すると、ブラウザのフォーカスはトリガー入力に留まります                                |
-| `tabIndex`      | `number`                           | `0`        | `-1`に設定すると、キーボードのタブフォーカスがポップアップlistboxコンテナに入るのを防ぎます                     |
-
-#### モデル {#listbox-models}
-
-| プロパティ | 型                   | 説明                                                                |
-| ---------- | -------------------- | ------------------------------------------------------------------- |
-| `value`    | `ModelSignal<any[]>` | `[(value)]`を使用した、選択された値の配列の双方向バインディング     |
-
----
-
-### 関連コンポーネント {#related-components}
-
-オートコンプリートは、標準のスタンドアロンの[Listbox](/api/aria/listbox/Listbox)と[Option](/api/aria/listbox/Option)ディレクティブを使用します。高度なオプションについては、[Listboxのドキュメント](/guide/aria/listbox)を参照してください。
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
diff --git a/adev-ja/src/content/guide/aria/combobox.en.md b/adev-ja/src/content/guide/aria/combobox.en.md
index e104eb8ba7..aa2aa426bc 100644
--- a/adev-ja/src/content/guide/aria/combobox.en.md
+++ b/adev-ja/src/content/guide/aria/combobox.en.md
@@ -235,62 +235,23 @@ describe('MyComboboxComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Combobox Directive
+For detailed API documentation, inspect the following API references:
 
-Coordinates an interactive trigger element (such as a text input, button, or div) with a popup container.
-
-#### Inputs / Model
-
-| Property           | Type                   | Default | Description                                                         |
-| ------------------ | ---------------------- | ------- | ------------------------------------------------------------------- |
-| `value`            | `ModelSignal<string>`  | `''`    | Two-way bindable text value of the combobox                         |
-| `expanded`         | `ModelSignal<boolean>` | `false` | Two-way bindable open/closed expanded state of the popup            |
-| `disabled`         | `boolean`              | `false` | Disables the combobox trigger element                               |
-| `softDisabled`     | `boolean`              | `true`  | Disables interaction while keeping the element keyboard focusable   |
-| `alwaysExpanded`   | `boolean`              | `false` | Forces the popup to always remain open                              |
-| `inlineSuggestion` | `string \| undefined`  | -       | Sets an inline suggestion to be highlighted at the end of the input |
-| `tabIndex`         | `number \| undefined`  | -       | Tabindex of the combobox element (aliased to `tabindex`)            |
-
-All keyboard events, focus coordination, and ARIA state properties (including `role="combobox"`, `aria-autocomplete`, and `aria-expanded`) are handled automatically on the host element.
-
----
-
-### ComboboxPopup Directive
-
-Marks an `<ng-template>` as the popup container for the combobox.
-
-#### Inputs
-
-| Property    | Type                                        | Default     | Description                                    |
-| ----------- | ------------------------------------------- | ----------- | ---------------------------------------------- |
-| `combobox`  | `Combobox`                                  | (Required)  | Reference to the parent `Combobox` directive   |
-| `popupType` | `'listbox' \| 'tree' \| 'grid' \| 'dialog'` | `'listbox'` | Specifies the layout/role profile of the popup |
-
----
-
-### ComboboxWidget Directive
-
-Connects the popup contents (such as a listbox or grid) with the parent combobox trigger.
-
-#### Inputs
-
-| Property           | Type                  | Description                                                                         |
-| ------------------ | --------------------- | ----------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active option (bound to the active option ID in the widget) |
-
----
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
 
 ### Related patterns and directives
 
 Combobox is the primitive directive for these documented patterns:
 
-- **[Autocomplete](guide/aria/autocomplete)** - Filtering and suggestions pattern (coordinates input typing with options list)
-- **[Select](guide/aria/select)** - Single selection dropdown pattern (applied directly on non-editable button triggers)
-- **[Multiselect](guide/aria/multiselect)** - Multiple selection pattern (applied on non-editable triggers with multi-enabled Listbox)
+- [Autocomplete](guide/aria/autocomplete) - Filtering and suggestions pattern (coordinates input typing with options list)
+- [Select](guide/aria/select) - Single selection dropdown pattern (applied directly on non-editable button triggers)
+- [Multiselect](guide/aria/multiselect) - Multiple selection pattern (applied on non-editable triggers with multi-enabled Listbox)
 
 Combobox typically combines with:
 
-- **[Listbox](guide/aria/listbox)** - Most common popup content
-- **[Tree](guide/aria/tree)** - Hierarchical popup content (see Tree guide for examples)
+- [Listbox](guide/aria/listbox) - Most common popup content
+- [Tree](guide/aria/tree) - Hierarchical popup content (see Tree guide for examples)
diff --git a/adev-ja/src/content/guide/aria/combobox.md b/adev-ja/src/content/guide/aria/combobox.md
index df05f60337..4728da4823 100644
--- a/adev-ja/src/content/guide/aria/combobox.md
+++ b/adev-ja/src/content/guide/aria/combobox.md
@@ -235,62 +235,23 @@ describe('MyComboboxComponent', () => {
 });
 ```
 
-## API {#apis}
+## API reference {#api-reference}
 
-### Comboboxディレクティブ {#combobox-directive}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-インタラクティブなトリガー要素（テキスト入力、ボタン、divなど）とポップアップコンテナを連携させます。
-
-#### 入力 / モデル {#inputs--model}
-
-| プロパティ         | 型                     | デフォルト | 説明                                                                |
-| ------------------ | ---------------------- | ------- | ------------------------------------------------------------------- |
-| `value`            | `ModelSignal<string>`  | `''`    | コンボボックスの双方向バインディング可能なテキスト値                |
-| `expanded`         | `ModelSignal<boolean>` | `false` | ポップアップの開閉状態を双方向バインディングできる値                |
-| `disabled`         | `boolean`              | `false` | コンボボックスのトリガー要素を無効にします                          |
-| `softDisabled`     | `boolean`              | `true`  | 要素をキーボードフォーカス可能に保ちながら、インタラクションを無効にします |
-| `alwaysExpanded`   | `boolean`              | `false` | ポップアップを常に開いたままにします                                |
-| `inlineSuggestion` | `string \| undefined`  | -       | 入力の末尾でハイライト表示するインライン補完候補を設定します        |
-| `tabIndex`         | `number \| undefined`  | -       | コンボボックス要素のtabindex（`tabindex`のエイリアス）              |
-
-すべてのキーボードイベント、フォーカス連携、ARIA状態プロパティ（`role="combobox"`、`aria-autocomplete`、`aria-expanded`を含む）は、ホスト要素で自動的に処理されます。
-
----
-
-### ComboboxPopupディレクティブ {#comboboxpopup-directive}
-
-`<ng-template>`をコンボボックスのポップアップコンテナとしてマークします。
-
-#### 入力 {#comboboxpopup-inputs}
-
-| プロパティ  | 型                                          | デフォルト  | 説明                                           |
-| ----------- | ------------------------------------------- | ----------- | ---------------------------------------------- |
-| `combobox`  | `Combobox`                                  | (必須)      | 親`Combobox`ディレクティブへの参照             |
-| `popupType` | `'listbox' \| 'tree' \| 'grid' \| 'dialog'` | `'listbox'` | ポップアップのレイアウト/ロールプロファイルを指定します |
-
----
-
-### ComboboxWidgetディレクティブ {#comboboxwidget-directive}
-
-ポップアップコンテンツ（リストボックスやグリッドなど）を親コンボボックストリガーに接続します。
-
-#### 入力 {#comboboxwidget-inputs}
-
-| プロパティ         | 型                    | 説明                                                                                |
-| ------------------ | --------------------- | ----------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | 現在アクティブなオプションのID（ウィジェット内のアクティブなオプションIDにバインド） |
-
----
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
 
 ### 関連するパターンとディレクティブ {#related-patterns-and-directives}
 
 Comboboxは、これらのドキュメント化されたパターンのためのプリミティブディレクティブです:
 
-- **[オートコンプリート](guide/aria/autocomplete)** - フィルタリングと提案のパターン（入力タイピングとオプションリストを連携）
-- **[セレクト](guide/aria/select)** - 単一選択のドロップダウンパターン（編集不可のボタントリガーに直接適用）
-- **[マルチセレクト](guide/aria/multiselect)** - 複数選択のパターン（複数選択が有効なListboxを持つ編集不可トリガーに適用）
+- [オートコンプリート](guide/aria/autocomplete) - フィルタリングと提案のパターン（入力タイピングとオプションリストを連携）
+- [セレクト](guide/aria/select) - 単一選択のドロップダウンパターン（編集不可のボタントリガーに直接適用）
+- [マルチセレクト](guide/aria/multiselect) - 複数選択のパターン（複数選択が有効なListboxを持つ編集不可トリガーに適用）
 
 Comboboxは通常、以下と組み合わせて使用されます:
 
-- **[Listbox](guide/aria/listbox)** - 最も一般的なポップアップコンテンツ
-- **[Tree](guide/aria/tree)** - 階層的なポップアップコンテンツ（例についてはTreeガイドを参照）
+- [Listbox](guide/aria/listbox) - 最も一般的なポップアップコンテンツ
+- [Tree](guide/aria/tree) - 階層的なポップアップコンテンツ（例についてはTreeガイドを参照）
diff --git a/adev-ja/src/content/guide/aria/grid.en.md b/adev-ja/src/content/guide/aria/grid.en.md
index 753e73cebc..7a241fd48b 100644
--- a/adev-ja/src/content/guide/aria/grid.en.md
+++ b/adev-ja/src/content/guide/aria/grid.en.md
@@ -211,86 +211,11 @@ describe('MyGridComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Grid
+For detailed API documentation, inspect the following API references:
 
-The container directive that provides keyboard navigation and focus management for rows and cells.
-
-#### Inputs
-
-| Property               | Type                                 | Default    | Description                                                   |
-| ---------------------- | ------------------------------------ | ---------- | ------------------------------------------------------------- |
-| `enableSelection`      | `boolean`                            | `false`    | Whether selection is enabled for the grid                     |
-| `disabled`             | `boolean`                            | `false`    | Disables the entire grid                                      |
-| `softDisabled`         | `boolean`                            | `true`     | When `true`, disabled cells are focusable but not interactive |
-| `focusMode`            | `'roving' \| 'activedescendant'`     | `'roving'` | Focus strategy used by the grid                               |
-| `rowWrap`              | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'`   | Navigation wrapping behavior along rows                       |
-| `colWrap`              | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'`   | Navigation wrapping behavior along columns                    |
-| `multi`                | `boolean`                            | `false`    | Whether multiple cells can be selected                        |
-| `selectionMode`        | `'follow' \| 'explicit'`             | `'follow'` | Whether selection follows focus or requires explicit action   |
-| `enableRangeSelection` | `boolean`                            | `false`    | Enable range selections with modifier keys or dragging        |
-
-### GridRow
-
-Represents a row within a grid and serves as a container for grid cells.
-
-#### Inputs
-
-| Property   | Type     | Default | Description                           |
-| ---------- | -------- | ------- | ------------------------------------- |
-| `rowIndex` | `number` | auto    | The index of this row within the grid |
-
-### GridCell
-
-Represents an individual cell within a grid row.
-
-#### Inputs
-
-| Property      | Type                         | Default        | Description                                             |
-| ------------- | ---------------------------- | -------------- | ------------------------------------------------------- |
-| `id`          | `string`                     | auto           | Unique identifier for the cell                          |
-| `role`        | `string`                     | `'gridcell'`   | Cell role: `gridcell`, `columnheader`, or `rowheader`   |
-| `disabled`    | `boolean`                    | `false`        | Disables this cell                                      |
-| `selected`    | `boolean`                    | `false`        | Whether the cell is selected (supports two-way binding) |
-| `selectable`  | `boolean`                    | `true`         | Whether the cell can be selected                        |
-| `rowSpan`     | `number`                     | —              | Number of rows the cell spans                           |
-| `colSpan`     | `number`                     | —              | Number of columns the cell spans                        |
-| `rowIndex`    | `number`                     | —              | Row index of the cell                                   |
-| `colIndex`    | `number`                     | —              | Column index of the cell                                |
-| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Orientation for widgets within the cell                 |
-| `wrap`        | `boolean`                    | `true`         | Whether widget navigation wraps within the cell         |
-
-#### Signals
-
-| Property | Type              | Description                          |
-| -------- | ----------------- | ------------------------------------ |
-| `active` | `Signal<boolean>` | Whether the cell currently has focus |
-
-### GridCellWidget
-
-Applied to an interactive element inside a grid cell to allow for pausing grid navigation.
-
-#### Inputs
-
-| Property      | Type                                  | Default    | Description                                               |
-| ------------- | ------------------------------------- | ---------- | --------------------------------------------------------- |
-| `id`          | `string`                              | auto       | Unique identifier for the widget                          |
-| `widgetType`  | `'simple' \| 'complex' \| 'editable'` | `'simple'` | The widget type, controlling how activation behaves       |
-| `disabled`    | `boolean`                             | `false`    | Disables this cell widget                                 |
-| `focusTarget` | `ElementResolver<HTMLElement>`        | —          | Optional element reference to receive focus on activation |
-| `tabindex`    | `number`                              | —          | Tabindex override for the widget                          |
-
-#### Outputs
-
-| Property      | Type                                                     | Description                                    |
-| ------------- | -------------------------------------------------------- | ---------------------------------------------- |
-| `activated`   | `EventEmitter<KeyboardEvent \| FocusEvent \| undefined>` | Emits when the cell widget becomes activated   |
-| `deactivated` | `EventEmitter<KeyboardEvent \| FocusEvent \| undefined>` | Emits when the cell widget becomes deactivated |
-
-#### Methods
-
-| Method       | Parameters | Description                       |
-| ------------ | ---------- | --------------------------------- |
-| `activate`   | none       | Forcefully activates the widget   |
-| `deactivate` | none       | Forcefully deactivates the widget |
+- [`Grid`](/api/aria/grid/Grid)
+- [`GridRow`](/api/aria/grid/GridRow)
+- [`GridCell`](/api/aria/grid/GridCell)
+- [`GridCellWidget`](/api/aria/grid/GridCellWidget)
diff --git a/adev-ja/src/content/guide/aria/grid.md b/adev-ja/src/content/guide/aria/grid.md
index d551a26f5f..3a7039c300 100644
--- a/adev-ja/src/content/guide/aria/grid.md
+++ b/adev-ja/src/content/guide/aria/grid.md
@@ -211,86 +211,11 @@ describe('MyGridComponent', () => {
 });
 ```
 
-## API
+## API reference {#api-reference}
 
-### Grid {#grid}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-行とセルのキーボードナビゲーションとフォーカス管理を提供するコンテナディレクティブです。
-
-#### Inputs {#inputs}
-
-| プロパティ             | 型                                   | デフォルト   | 説明                                                          |
-| ---------------------- | ------------------------------------ | ---------- | ------------------------------------------------------------- |
-| `enableSelection`      | `boolean`                            | `false`    | グリッドの選択が有効かどうか                                  |
-| `disabled`             | `boolean`                            | `false`    | グリッド全体を無効にします                                    |
-| `softDisabled`         | `boolean`                            | `true`     | `true`の場合、無効化されたセルはフォーカス可能ですが、インタラクティブではありません |
-| `focusMode`            | `'roving' \| 'activedescendant'`     | `'roving'` | グリッドで使用されるフォーカス戦略                            |
-| `rowWrap`              | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'`   | 行に沿ったナビゲーションの折り返し動作                        |
-| `colWrap`              | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'`   | 列に沿ったナビゲーションの折り返し動作                        |
-| `multi`                | `boolean`                            | `false`    | 複数のセルを選択できるかどうか                                |
-| `selectionMode`        | `'follow' \| 'explicit'`             | `'follow'` | 選択がフォーカスに追従するか、明示的なアクションを必要とするか |
-| `enableRangeSelection` | `boolean`                            | `false`    | 修飾キーまたはドラッグによる範囲選択を有効にします            |
-
-### GridRow {#gridrow}
-
-グリッド内の行を表し、グリッドセルのコンテナとして機能します。
-
-#### Inputs {#inputs}
-
-| プロパティ | 型       | デフォルト | 説明                                  |
-| ---------- | -------- | ------- | ------------------------------------- |
-| `rowIndex` | `number` | auto    | グリッド内でのこの行のインデックス    |
-
-### GridCell {#gridcell}
-
-グリッド行内の個々のセルを表します。
-
-#### Inputs {#inputs}
-
-| プロパティ    | 型                           | デフォルト     | 説明                                                    |
-| ------------- | ---------------------------- | -------------- | ------------------------------------------------------- |
-| `id`          | `string`                     | auto           | セルの一意の識別子                                      |
-| `role`        | `string`                     | `'gridcell'`   | セルのロール: `gridcell`、`columnheader`、または`rowheader` |
-| `disabled`    | `boolean`                    | `false`        | このセルを無効にします                                  |
-| `selected`    | `boolean`                    | `false`        | セルが選択されているかどうか (双方向バインディングをサポート) |
-| `selectable`  | `boolean`                    | `true`         | セルが選択可能かどうか                                  |
-| `rowSpan`     | `number`                     | —              | セルがまたがる行の数                                    |
-| `colSpan`     | `number`                     | —              | セルがまたがる列の数                                    |
-| `rowIndex`    | `number`                     | —              | セルの行インデックス                                    |
-| `colIndex`    | `number`                     | —              | セルの列インデックス                                    |
-| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | セル内のウィジェットの方向                              |
-| `wrap`        | `boolean`                    | `true`         | ウィジェットのナビゲーションがセル内で折り返すかどうか    |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                                 |
-| -------- | ----------------- | ------------------------------------ |
-| `active` | `Signal<boolean>` | セルが現在フォーカスを持っているかどうか |
-
-### GridCellWidget
-
-Applied to an interactive element inside a grid cell to allow for pausing grid navigation.
-
-#### Inputs
-
-| Property      | Type                                  | Default    | Description                                               |
-| ------------- | ------------------------------------- | ---------- | --------------------------------------------------------- |
-| `id`          | `string`                              | auto       | Unique identifier for the widget                          |
-| `widgetType`  | `'simple' \| 'complex' \| 'editable'` | `'simple'` | The widget type, controlling how activation behaves       |
-| `disabled`    | `boolean`                             | `false`    | Disables this cell widget                                 |
-| `focusTarget` | `ElementResolver<HTMLElement>`        | —          | Optional element reference to receive focus on activation |
-| `tabindex`    | `number`                              | —          | Tabindex override for the widget                          |
-
-#### Outputs
-
-| Property      | Type                                                     | Description                                    |
-| ------------- | -------------------------------------------------------- | ---------------------------------------------- |
-| `activated`   | `EventEmitter<KeyboardEvent \| FocusEvent \| undefined>` | Emits when the cell widget becomes activated   |
-| `deactivated` | `EventEmitter<KeyboardEvent \| FocusEvent \| undefined>` | Emits when the cell widget becomes deactivated |
-
-#### Methods
-
-| Method       | Parameters | Description                       |
-| ------------ | ---------- | --------------------------------- |
-| `activate`   | none       | Forcefully activates the widget   |
-| `deactivate` | none       | Forcefully deactivates the widget |
+- [`Grid`](/api/aria/grid/Grid)
+- [`GridRow`](/api/aria/grid/GridRow)
+- [`GridCell`](/api/aria/grid/GridCell)
+- [`GridCellWidget`](/api/aria/grid/GridCellWidget)
diff --git a/adev-ja/src/content/guide/aria/listbox.en.md b/adev-ja/src/content/guide/aria/listbox.en.md
index 5ca60d6af7..c4a6569e96 100644
--- a/adev-ja/src/content/guide/aria/listbox.en.md
+++ b/adev-ja/src/content/guide/aria/listbox.en.md
@@ -182,77 +182,19 @@ describe('MyListboxComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Listbox Directive
+For detailed API documentation, inspect the following API references:
 
-The `ngListbox` directive creates an accessible list of selectable options.
-
-#### Inputs
-
-| Property         | Type                               | Default      | Description                                  |
-| ---------------- | ---------------------------------- | ------------ | -------------------------------------------- |
-| `id`             | `string`                           | auto         | Unique identifier for the listbox            |
-| `multi`          | `boolean`                          | `false`      | Enables multiple selection                   |
-| `orientation`    | `'vertical'` \| `'horizontal'`     | `'vertical'` | Layout direction of the list                 |
-| `wrap`           | `boolean`                          | `true`       | Whether focus wraps at list edges            |
-| `selectionMode`  | `'follow'` \| `'explicit'`         | `'follow'`   | How selection is triggered                   |
-| `focusMode`      | `'roving'` \| `'activedescendant'` | `'roving'`   | Focus management strategy                    |
-| `softDisabled`   | `boolean`                          | `true`       | Whether disabled items are focusable         |
-| `disabled`       | `boolean`                          | `false`      | Disables the entire listbox                  |
-| `readonly`       | `boolean`                          | `false`      | Makes listbox readonly                       |
-| `typeaheadDelay` | `number`                           | `500`        | Milliseconds before type-ahead search resets |
-
-#### Model
-
-| Property | Type  | Description                               |
-| -------- | ----- | ----------------------------------------- |
-| `value`  | `V[]` | Two-way bindable array of selected values |
-
-#### Signals
-
-| Property | Type          | Description                           |
-| -------- | ------------- | ------------------------------------- |
-| `value`  | `Signal<V[]>` | Currently selected values as a signal |
-
-#### Methods
-
-| Method                     | Parameters                        | Description                                |
-| -------------------------- | --------------------------------- | ------------------------------------------ |
-| `scrollActiveItemIntoView` | `options?: ScrollIntoViewOptions` | Scrolls the active item into view          |
-| `gotoFirst`                | none                              | Navigates to the first item in the listbox |
-
-### Option Directive
-
-The `ngOption` directive marks an item within a listbox.
-
-#### Inputs
-
-| Property   | Type      | Default | Description                                      |
-| ---------- | --------- | ------- | ------------------------------------------------ |
-| `id`       | `string`  | auto    | Unique identifier for the option                 |
-| `value`    | `V`       | -       | The value associated with this option (required) |
-| `label`    | `string`  | -       | Optional label for screen readers                |
-| `disabled` | `boolean` | `false` | Whether this option is disabled                  |
-
-#### Signals
-
-| Property   | Type              | Description                     |
-| ---------- | ----------------- | ------------------------------- |
-| `selected` | `Signal<boolean>` | Whether this option is selected |
-| `active`   | `Signal<boolean>` | Whether this option has focus   |
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
 
 ### Related patterns
 
 Listbox is used by these documented dropdown patterns:
 
-- **[Select](guide/aria/select)** - Single-selection dropdown pattern using readonly combobox + listbox
-- **[Multiselect](guide/aria/multiselect)** - Multiple-selection dropdown pattern using readonly combobox + listbox with `multi`
-- **[Autocomplete](guide/aria/autocomplete)** - Filterable dropdown pattern using combobox + listbox
+- [Select](guide/aria/select) - Single-selection dropdown pattern using readonly combobox + listbox
+- [Multiselect](guide/aria/multiselect) - Multiple-selection dropdown pattern using readonly combobox + listbox with `multi`
+- [Autocomplete](guide/aria/autocomplete) - Filterable dropdown pattern using combobox + listbox
 
 For complete dropdown patterns with trigger, popup, and overlay positioning, see those pattern guides instead of using listbox alone.
-
-<docs-pill-row>
-  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" title="Listbox ARIA pattern"/>
-  <docs-pill href="/api/aria/listbox/Listbox" title="Listbox API Reference"/>
-</docs-pill-row>
diff --git a/adev-ja/src/content/guide/aria/listbox.md b/adev-ja/src/content/guide/aria/listbox.md
index 25ec09963a..0d8321ec53 100644
--- a/adev-ja/src/content/guide/aria/listbox.md
+++ b/adev-ja/src/content/guide/aria/listbox.md
@@ -182,77 +182,19 @@ describe('MyListboxComponent', () => {
 });
 ```
 
-## API {#apis}
+## API reference {#api-reference}
 
-### Listboxディレクティブ {#listbox-directive}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-`ngListbox`ディレクティブは、選択可能なオプションのアクセシブルなリストを作成します。
-
-#### 入力 {#inputs}
-
-| プロパティ       | 型                                 | デフォルト   | 説明                                         |
-| ---------------- | ---------------------------------- | ------------ | -------------------------------------------- |
-| `id`             | `string`                           | auto         | リストボックスの一意の識別子                 |
-| `multi`          | `boolean`                          | `false`      | 複数選択を有効にします                       |
-| `orientation`    | `'vertical'` \| `'horizontal'`     | `'vertical'` | リストのレイアウト方向                       |
-| `wrap`           | `boolean`                          | `true`       | リストの端でフォーカスをラップするかどうか     |
-| `selectionMode`  | `'follow'` \| `'explicit'`         | `'follow'`   | 選択がどのようにトリガーされるか             |
-| `focusMode`      | `'roving'` \| `'activedescendant'` | `'roving'`   | フォーカス管理戦略                           |
-| `softDisabled`   | `boolean`                          | `true`       | 無効化されたアイテムがフォーカス可能かどうか   |
-| `disabled`       | `boolean`                          | `false`      | リストボックス全体を無効にします             |
-| `readonly`       | `boolean`                          | `false`      | リストボックスを読み取り専用にします         |
-| `typeaheadDelay` | `number`                           | `500`        | 先行入力の検索がリセットされるまでのミリ秒   |
-
-#### モデル {#model}
-
-| プロパティ | 型    | 説明                                       |
-| -------- | ----- | ------------------------------------------ |
-| `value`  | `V[]` | 選択された値の双方向バインディング可能な配列 |
-
-#### シグナル {#signals}
-
-| プロパティ | 型            | 説明                                  |
-| -------- | ------------- | ------------------------------------- |
-| `value`  | `Signal<V[]>` | 現在選択されている値（シグナルとして）    |
-
-#### メソッド {#methods}
-
-| メソッド                   | パラメータ                        | 説明                                       |
-| -------------------------- | --------------------------------- | ------------------------------------------ |
-| `scrollActiveItemIntoView` | `options?: ScrollIntoViewOptions` | アクティブなアイテムを表示領域にスクロールします |
-| `gotoFirst`                | none                              | リストボックスの最初のアイテムに移動します     |
-
-### Optionディレクティブ {#option-directive}
-
-`ngOption`ディレクティブは、リストボックス内のアイテムをマークします。
-
-#### 入力 {#inputs}
-
-| プロパティ | 型        | デフォルト | 説明                                             |
-| ---------- | --------- | ------- | ------------------------------------------------ |
-| `id`       | `string`  | auto    | オプションの一意の識別子                         |
-| `value`    | `V`       | -       | このオプションに関連付けられた値（必須）         |
-| `label`    | `string`  | -       | スクリーンリーダー用のオプションのラベル         |
-| `disabled` | `boolean` | `false` | このオプションが無効かどうか                     |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                            |
-| ---------- | ----------------- | ------------------------------- |
-| `selected` | `Signal<boolean>` | このオプションが選択されているかどうか |
-| `active`   | `Signal<boolean>` | このオプションにフォーカスがあるかどうか |
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
 
 ### 関連パターン {#related-patterns}
 
 Listboxは、これらのドキュメント化されたドロップダウンパターンで使用されます：
 
-- **[Select](guide/aria/select)** - 読み取り専用のcombobox + listboxを使用した単一選択のドロップダウンパターン
-- **[Multiselect](guide/aria/multiselect)** - `multi`を使用した読み取り専用のcombobox + listboxによる複数選択のドロップダウンパターン
-- **[Autocomplete](guide/aria/autocomplete)** - combobox + listboxを使用したフィルタリング可能なドロップダウンパターン
+- [Select](guide/aria/select) - 読み取り専用のcombobox + listboxを使用した単一選択のドロップダウンパターン
+- [Multiselect](guide/aria/multiselect) - `multi`を使用した読み取り専用のcombobox + listboxによる複数選択のドロップダウンパターン
+- [Autocomplete](guide/aria/autocomplete) - combobox + listboxを使用したフィルタリング可能なドロップダウンパターン
 
 トリガー、ポップアップ、オーバーレイの配置を含む完全なドロップダウンパターンについては、listboxを単独で使用するのではなく、それらのパターンガイドを参照してください。
-
-<docs-pill-row>
-  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" title="Listbox ARIA pattern"/>
-  <docs-pill href="/api/aria/listbox/Listbox" title="Listbox API Reference"/>
-</docs-pill-row>
diff --git a/adev-ja/src/content/guide/aria/menu.en.md b/adev-ja/src/content/guide/aria/menu.en.md
index ac06b4078e..dc2ebe4671 100644
--- a/adev-ja/src/content/guide/aria/menu.en.md
+++ b/adev-ja/src/content/guide/aria/menu.en.md
@@ -244,85 +244,12 @@ describe('MyMenuComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Menu
+For detailed API documentation, inspect the following API references:
 
-The container directive for menu items.
-
-#### Inputs
-
-| Property       | Type      | Default | Description                                                   |
-| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`     | `boolean` | `false` | Disables all items in the menu                                |
-| `wrap`         | `boolean` | `true`  | Whether keyboard navigation wraps at edges                    |
-| `softDisabled` | `boolean` | `true`  | When `true`, disabled items are focusable but not interactive |
-
-#### Methods
-
-| Method  | Parameters | Description     |
-| ------- | ---------- | --------------- |
-| `close` | none       | Closes the menu |
-
-### MenuBar
-
-A horizontal container for multiple menus.
-
-#### Inputs
-
-| Property       | Type      | Default | Description                                                   |
-| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`     | `boolean` | `false` | Disables the entire menubar                                   |
-| `wrap`         | `boolean` | `true`  | Whether keyboard navigation wraps at edges                    |
-| `softDisabled` | `boolean` | `true`  | When `true`, disabled items are focusable but not interactive |
-
-### MenuItem
-
-An individual item within a menu.
-
-#### Inputs
-
-| Property     | Type                                                  | Default      | Description                                          |
-| ------------ | ----------------------------------------------------- | ------------ | ---------------------------------------------------- |
-| `value`      | `any`                                                 | —            | **Required.** Value for this item                    |
-| `role`       | `'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'` | `'menuitem'` | The ARIA role for the menu item                      |
-| `disabled`   | `boolean`                                             | `false`      | Disables this menu item                              |
-| `submenu`    | `Menu`                                                | —            | Reference to a submenu                               |
-| `searchTerm` | `string`                                              | `''`         | Search term for typeahead (supports two-way binding) |
-
-#### Signals
-
-| Property   | Type              | Description                                |
-| ---------- | ----------------- | ------------------------------------------ |
-| `active`   | `Signal<boolean>` | Whether the item currently has focus       |
-| `expanded` | `Signal<boolean>` | Whether the submenu is expanded            |
-| `hasPopup` | `Signal<boolean>` | Whether the item has an associated submenu |
-
-NOTE: MenuItem does not expose public methods. Use the `submenu` input to associate submenus with menu items.
-
-### MenuTrigger
-
-A button or element that opens a menu.
-
-#### Inputs
-
-| Property       | Type      | Default | Description                                |
-| -------------- | --------- | ------- | ------------------------------------------ |
-| `menu`         | `Menu`    | —       | **Required.** The menu to trigger          |
-| `disabled`     | `boolean` | `false` | Disables the trigger                       |
-| `softDisabled` | `boolean` | `true`  | When `true`, disabled trigger is focusable |
-
-#### Signals
-
-| Property   | Type              | Description                                |
-| ---------- | ----------------- | ------------------------------------------ |
-| `expanded` | `Signal<boolean>` | Whether the menu is currently open         |
-| `hasPopup` | `Signal<boolean>` | Whether the trigger has an associated menu |
-
-#### Methods
-
-| Method   | Parameters | Description                  |
-| -------- | ---------- | ---------------------------- |
-| `open`   | none       | Opens the menu               |
-| `close`  | none       | Closes the menu              |
-| `toggle` | none       | Toggles the menu open/closed |
+- [`Menu`](/api/aria/menu/Menu)
+- [`MenuBar`](/api/aria/menu/MenuBar)
+- [`MenuItem`](/api/aria/menu/MenuItem)
+- [`MenuTrigger`](/api/aria/menu/MenuTrigger)
+- [`MenuContent`](/api/aria/menu/MenuContent)
diff --git a/adev-ja/src/content/guide/aria/menu.md b/adev-ja/src/content/guide/aria/menu.md
index d676d46692..708cfb6a10 100644
--- a/adev-ja/src/content/guide/aria/menu.md
+++ b/adev-ja/src/content/guide/aria/menu.md
@@ -244,85 +244,12 @@ describe('MyMenuComponent', () => {
 });
 ```
 
-## API {#apis}
+## API reference {#api-reference}
 
-### Menu {#menu}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-メニューアイテムのコンテナディレクティブです。
-
-#### 入力 {#inputs}
-
-| Property       | Type      | Default | Description                                                   |
-| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`     | `boolean` | `false` | メニュー内のすべてのアイテムを無効にします |
-| `wrap`         | `boolean` | `true`  | キーボードナビゲーションが端で折り返すかどうか |
-| `softDisabled` | `boolean` | `true`  | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-
-#### メソッド {#methods}
-
-| Method  | Parameters | Description     |
-| ------- | ---------- | --------------- |
-| `close` | none       | メニューを閉じます |
-
-### MenuBar {#menubar}
-
-複数のメニューを格納する水平コンテナです。
-
-#### 入力 {#inputs}
-
-| Property       | Type      | Default | Description                                                   |
-| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`     | `boolean` | `false` | メニューバー全体を無効にします |
-| `wrap`         | `boolean` | `true`  | キーボードナビゲーションが端で折り返すかどうか |
-| `softDisabled` | `boolean` | `true`  | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-
-### MenuItem {#menuitem}
-
-メニュー内の個々のアイテムです。
-
-#### 入力 {#inputs}
-
-| Property     | Type      | Default | Description                                          |
-| ------------ | --------- | ------- | ---------------------------------------------------- |
-| `value`      | `any`     | —       | **必須。** このアイテムの値です |
-| `role`       | `'menuitem' \| 'menuitemcheckbox' \| 'menuitemradio'` | `'menuitem'` | The ARIA role for the menu item                      |
-| `disabled`   | `boolean` | `false` | このメニューアイテムを無効にします |
-| `submenu`    | `Menu`    | —       | サブメニューへの参照です |
-| `searchTerm` | `string`  | `''`    | タイプアヘッドの検索語です（双方向バインディングをサポート） |
-
-#### シグナル {#signals}
-
-| Property   | Type              | Description                                |
-| ---------- | ----------------- | ------------------------------------------ |
-| `active`   | `Signal<boolean>` | アイテムが現在フォーカスを持っているかどうか |
-| `expanded` | `Signal<boolean>` | サブメニューが展開されているかどうか |
-| `hasPopup` | `Signal<boolean>` | アイテムに関連付けられたサブメニューがあるかどうか |
-
-NOTE: MenuItemはパブリックメソッドを公開しません。`submenu`入力を使用して、サブメニューをメニューアイテムに関連付けます。
-
-### MenuTrigger {#menutrigger}
-
-メニューを開くボタンまたは要素です。
-
-#### 入力 {#inputs}
-
-| Property       | Type      | Default | Description                                |
-| -------------- | --------- | ------- | ------------------------------------------ |
-| `menu`         | `Menu`    | —       | **必須。** トリガーするメニューです |
-| `disabled`     | `boolean` | `false` | トリガーを無効にします |
-| `softDisabled` | `boolean` | `true`  | `true`の場合、無効化されたトリガーはフォーカス可能です |
-
-#### シグナル {#signals}
-
-| Property   | Type              | Description                                |
-| ---------- | ----------------- | ------------------------------------------ |
-| `expanded` | `Signal<boolean>` | メニューが現在開いているかどうか |
-| `hasPopup` | `Signal<boolean>` | トリガーに関連付けられたメニューがあるかどうか |
-
-#### メソッド {#methods}
-
-| Method   | Parameters | Description                  |
-| -------- | ---------- | ---------------------------- |
-| `open`   | none       | メニューを開きます |
-| `close`  | none       | メニューを閉じます |
-| `toggle` | none       | メニューの開閉を切り替えます |
+- [`Menu`](/api/aria/menu/Menu)
+- [`MenuBar`](/api/aria/menu/MenuBar)
+- [`MenuItem`](/api/aria/menu/MenuItem)
+- [`MenuTrigger`](/api/aria/menu/MenuTrigger)
+- [`MenuContent`](/api/aria/menu/MenuContent)
diff --git a/adev-ja/src/content/guide/aria/menubar.en.md b/adev-ja/src/content/guide/aria/menubar.en.md
index 36c25721b9..80f8221174 100644
--- a/adev-ja/src/content/guide/aria/menubar.en.md
+++ b/adev-ja/src/content/guide/aria/menubar.en.md
@@ -214,37 +214,11 @@ describe('MyMenubarComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-The menubar pattern uses directives from Angular's Aria library. See the [Menu guide](guide/aria/menu) for complete API documentation.
+For detailed API documentation, inspect the following API references:
 
-### MenuBar
-
-The horizontal container for top-level menu items.
-
-#### Inputs
-
-| Property         | Type      | Default | Description                                                   |
-| ---------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`       | `boolean` | `false` | Disables the entire menubar                                   |
-| `wrap`           | `boolean` | `true`  | Whether keyboard navigation wraps from last to first item     |
-| `softDisabled`   | `boolean` | `true`  | When `true`, disabled items are focusable but not interactive |
-| `value`          | `V[]`     | `[]`    | Selected menu item values (supports two-way binding)          |
-| `typeaheadDelay` | `number`  | `500`   | Milliseconds before the typeahead buffer is reset             |
-
-See the [Menu API documentation](guide/aria/menu#apis) for complete details on all available inputs and signals.
-
-### MenuItem
-
-Individual items within the menubar. Same API as Menu - see [MenuItem](guide/aria/menu#menuitem).
-
-**Menubar-specific behavior:**
-
-- Left/Right arrows navigate between menubar items (vs Up/Down in vertical menus)
-- First keyboard interaction or click enables hover-to-open for submenus
-- Enter or Down arrow opens the submenu and focuses the first item
-- `aria-haspopup="menu"` indicates items with submenus
-
-### MenuTrigger
-
-Not typically used in menubars - MenuItem handles trigger behavior directly when it has an associated submenu. See [MenuTrigger](guide/aria/menu#menutrigger) for standalone menu trigger patterns.
+- [`MenuBar`](/api/aria/menu/MenuBar)
+- [`MenuItem`](/api/aria/menu/MenuItem)
+- [`MenuTrigger`](/api/aria/menu/MenuTrigger)
+- [`Menu`](/api/aria/menu/Menu)
diff --git a/adev-ja/src/content/guide/aria/menubar.md b/adev-ja/src/content/guide/aria/menubar.md
index 15d9cae5ef..a795b6ad40 100644
--- a/adev-ja/src/content/guide/aria/menubar.md
+++ b/adev-ja/src/content/guide/aria/menubar.md
@@ -214,37 +214,11 @@ describe('MyMenubarComponent', () => {
 });
 ```
 
-## API {#apis}
+## APIリファレンス {#api-reference}
 
-メニューバーパターンはAngularのAriaライブラリのディレクティブを使用します。完全なAPIドキュメントについては、[Menuガイド](guide/aria/menu)を参照してください。
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-### MenuBar {#menubar}
-
-トップレベルのメニューアイテムのための水平コンテナです。
-
-#### Inputs {#inputs}
-
-| プロパティ     | 型        | デフォルト | 説明                                                          |
-| -------------- | --------- | ------- | ------------------------------------------------------------- |
-| `disabled`     | `boolean` | `false` | メニューバー全体を無効にします                                  |
-| `wrap`         | `boolean` | `true`  | キーボードナビゲーションが最後のアイテムから最初のアイテムにラップするかどうか |
-| `softDisabled` | `boolean` | `true`  | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-| `value`          | `V[]`     | `[]`    | Selected menu item values (supports two-way binding)          |
-| `typeaheadDelay` | `number`  | `500`   | Milliseconds before the typeahead buffer is reset             |
-
-利用可能なすべての入力とシグナルの詳細については、[Menu APIドキュメント](guide/aria/menu#apis)を参照してください。
-
-### MenuItem {#menuitem}
-
-メニューバー内の個々のアイテムです。Menuと同じAPIです - [MenuItem](guide/aria/menu#menuitem)を参照してください。
-
-**メニューバー固有の動作:**
-
-- 左右の矢印キーでメニューバーのアイテム間を移動します（垂直メニューでは上下）
-- 最初のキーボード操作またはクリックで、サブメニューのホバーで開く機能が有効になります
-- Enterキーまたは下矢印キーでサブメニューを開き、最初のアイテムにフォーカスします
-- `aria-haspopup="menu"`はサブメニューを持つアイテムを示します
-
-### MenuTrigger {#menutrigger}
-
-通常メニューバーでは使用されません - MenuItemは関連するサブメニューがある場合、トリガーの動作を直接処理します。スタンドアロンのメニュートリガーパターンについては、[MenuTrigger](guide/aria/menu#menutrigger)を参照してください。
+- [`MenuBar`](/api/aria/menu/MenuBar)
+- [`MenuItem`](/api/aria/menu/MenuItem)
+- [`MenuTrigger`](/api/aria/menu/MenuTrigger)
+- [`Menu`](/api/aria/menu/Menu)
diff --git a/adev-ja/src/content/guide/aria/multiselect.en.md b/adev-ja/src/content/guide/aria/multiselect.en.md
index 8af5fb0d9f..c430db6444 100644
--- a/adev-ja/src/content/guide/aria/multiselect.en.md
+++ b/adev-ja/src/content/guide/aria/multiselect.en.md
@@ -215,61 +215,12 @@ describe('MyMultiselectComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-The multiselect pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+For detailed API documentation, inspect the following API references:
 
-### Combobox directives
-
-The multiselect pattern uses `ngCombobox` directly on the trigger element (such as a `div` or `button`) to create a select-like multiselect dropdown.
-
-#### Inputs
-
-| Property   | Type      | Default | Description                     |
-| ---------- | --------- | ------- | ------------------------------- |
-| `disabled` | `boolean` | `false` | Disables the entire multiselect |
-
-See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
-
-#### Popup directives
-
-The structural `ngComboboxPopup` directive marks the overlay template and requires a reference to the parent combobox:
-
-| Property   | Type       | Description                                 |
-| ---------- | ---------- | ------------------------------------------- |
-| `combobox` | `Combobox` | Required reference to the parent `Combobox` |
-
-#### ComboboxWidget directive
-
-The `ngComboboxWidget` directive bridges the listbox with the combobox trigger to support active-descendant focus tracking.
-
-| Property           | Type                  | Description                                                                                                                                  |
-| ------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active option (bound to `listbox.activeDescendant()`) to update the `aria-activedescendant` attribute on the trigger |
-
-### Listbox directives
-
-The multiselect pattern uses `ngListbox` with the `multi` attribute for multiple selection and `ngOption` for each selectable item.
-
-#### Inputs
-
-| Property        | Type                               | Default    | Description                                                                                                                     |
-| --------------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `multi`         | `boolean`                          | `false`    | Set to `true` to enable multiple selection                                                                                      |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'follow'` | Set to `'explicit'` so options are toggled explicitly via click/Space instead of following active focus                         |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'` | The focus strategy used by the listbox. Set to `'activedescendant'` so browser focus remains on the combobox trigger.           |
-| `tabIndex`      | `number`                           | `0`        | The tabindex of the listbox. Set to `-1` to prevent keyboard focus from entering the popup container in active-descendant mode. |
-
-#### Model
-
-| Property | Type                 | Description                               |
-| -------- | -------------------- | ----------------------------------------- |
-| `value`  | `ModelSignal<any[]>` | Two-way bindable array of selected values |
-
-When `multi` is true, users can select multiple options using Space to toggle selection. The popup remains open after selection, allowing additional choices.
-
-See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
-
-### Positioning
-
-The multiselect pattern integrates with [CDK Overlay](https://material.angular.io/cdk/overlay/overview) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
diff --git a/adev-ja/src/content/guide/aria/multiselect.md b/adev-ja/src/content/guide/aria/multiselect.md
index 8e2a043115..4015f5cd1e 100644
--- a/adev-ja/src/content/guide/aria/multiselect.md
+++ b/adev-ja/src/content/guide/aria/multiselect.md
@@ -215,61 +215,12 @@ describe('MyMultiselectComponent', () => {
 });
 ```
 
-## API {#apis}
+## APIリファレンス {#api-reference}
 
-マルチセレクトパターンは、AngularのAriaライブラリから以下のディレクティブを使用します。詳細なAPIドキュメントについては、リンク先のガイドを参照してください。
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-### Comboboxディレクティブ {#combobox-directives}
-
-マルチセレクトパターンでは、`ngCombobox`をトリガー要素 (`div`や`button`など) に直接使用して、セレクト風のマルチセレクトドロップダウンを作成します。
-
-#### 入力 {#inputs}
-
-| プロパティ   | 型        | デフォルト | 説明                            |
-| ---------- | --------- | ------- | ------------------------------- |
-| `disabled` | `boolean` | `false` | マルチセレクト全体を無効化します |
-
-利用可能なすべての入力とシグナルの詳細については、[Combobox APIドキュメント](guide/aria/combobox#apis)を参照してください。
-
-#### Popup directives {#popup-directives}
-
-The structural `ngComboboxPopup` directive marks the overlay template and requires a reference to the parent combobox:
-
-| Property   | Type       | Description                                 |
-| ---------- | ---------- | ------------------------------------------- |
-| `combobox` | `Combobox` | Required reference to the parent `Combobox` |
-
-#### ComboboxWidget directive {#comboboxwidget-directive}
-
-The `ngComboboxWidget` directive bridges the listbox with the combobox trigger to support active-descendant focus tracking.
-
-| Property           | Type                  | Description                                                                                                                                  |
-| ------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active option (bound to `listbox.activeDescendant()`) to update the `aria-activedescendant` attribute on the trigger |
-
-### Listboxディレクティブ {#listbox-directives}
-
-マルチセレクトパターンでは、複数選択のために`ngListbox`と`multi`属性を、各選択可能な項目のために`ngOption`を使用します。
-
-#### 入力 {#inputs}
-
-| プロパティ        | 型                                 | デフォルト   | 説明                                                                                                                          |
-| --------------- | ---------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `multi`         | `boolean`                          | `false`    | `true`に設定すると複数選択が可能になります                                                                                          |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'follow'` | `'explicit'`に設定すると、アクティブフォーカスに従う代わりに、クリック/Spaceで明示的にオプションが切り替わります                              |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'` | リストボックスが使用するフォーカス戦略。`'activedescendant'`に設定すると、ブラウザのフォーカスはコンボボックスのトリガーに残ります。                |
-| `tabIndex`      | `number`                           | `0`        | リストボックスのtabindex。`-1`に設定すると、active-descendantモードでポップアップコンテナにキーボードフォーカスが入るのを防ぎます。              |
-
-#### モデル {#model}
-
-| プロパティ | 型                   | 説明                                      |
-| -------- | -------------------- | ----------------------------------------- |
-| `value`  | `ModelSignal<any[]>` | 選択された値の双方向バインディング可能な配列 |
-
-`multi`がtrueの場合、ユーザーはスペースキーを使用して選択を切り替えることで、複数のオプションを選択できます。ポップアップは選択後も開いたままで、追加の選択が可能です。
-
-リストボックスの設定、選択モード、オプションのプロパティに関する完全な詳細については、[Listbox APIドキュメント](guide/aria/listbox#apis)を参照してください。
-
-### ポジショニング {#positioning}
-
-マルチセレクトパターンは、スマートなポジショニングのために[CDK Overlay](https://material.angular.io/cdk/overlay/overview)と統合されています。`cdkConnectedOverlay`を使用すると、ビューポートの端やスクロールを自動的に処理できます。
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
diff --git a/adev-ja/src/content/guide/aria/select.en.md b/adev-ja/src/content/guide/aria/select.en.md
index 163cbc2798..7e01b1b186 100644
--- a/adev-ja/src/content/guide/aria/select.en.md
+++ b/adev-ja/src/content/guide/aria/select.en.md
@@ -212,57 +212,16 @@ describe('MySelectComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-The select pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+For detailed API documentation, inspect the following API references:
 
-### Combobox Directives
-
-The select pattern applies `ngCombobox` directly onto a non-interactive host element (such as a `div` or a `button`) to prevent text input while preserving keyboard navigation.
-
-#### Inputs
-
-| Property   | Type                   | Default | Description                |
-| ---------- | ---------------------- | ------- | -------------------------- |
-| `disabled` | `boolean`              | `false` | Disables the entire select |
-| `expanded` | `ModelSignal<boolean>` | `false` | Expanded state of select   |
-
-See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
-
-#### Popup Directives
-
-The structural `ngComboboxPopup` directive marks the overlay template and requires a reference to the parent combobox:
-
-| Property   | Type       | Description                                 |
-| ---------- | ---------- | ------------------------------------------- |
-| `combobox` | `Combobox` | Required reference to the parent `Combobox` |
-
-#### ComboboxWidget Directive
-
-The `ngComboboxWidget` directive bridges the listbox with the combobox trigger to support active-descendant focus tracking.
-
-| Property           | Type                  | Description                                                                                                                                  |
-| ------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active option (bound to `listbox.activeDescendant()`) to update the `aria-activedescendant` attribute on the trigger |
-
-### Listbox Directives
-
-The select pattern uses `ngListbox` for the dropdown list and `ngOption` for each selectable item.
-
-#### Inputs
-
-| Property        | Type                               | Default      | Description                                                                                                                     |
-| --------------- | ---------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'explicit'` | Set to `'explicit'` so options are toggled explicitly via click/Enter instead of following active focus                         |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'`   | The focus strategy used by the listbox. Set to `'activedescendant'` so browser focus remains on the combobox trigger.           |
-| `tabIndex`      | `number`                           | `0`          | The tabindex of the listbox. Set to `-1` to prevent keyboard focus from entering the popup container in active-descendant mode. |
-
-#### Model
-
-| Property | Type                 | Description                                                                  |
-| -------- | -------------------- | ---------------------------------------------------------------------------- |
-| `value`  | `ModelSignal<any[]>` | Two-way bindable array of selected values (contains single value for select) |
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
 
 ### Positioning
 
-The select pattern integrates with [CDK Overlay](https://material.angular.io/cdk/overlay/overview) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
+The select pattern integrates with [CDK Overlay](https://material.angular.dev/cdk/overlay/overview) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
diff --git a/adev-ja/src/content/guide/aria/select.md b/adev-ja/src/content/guide/aria/select.md
index c99c058cda..5876244a02 100644
--- a/adev-ja/src/content/guide/aria/select.md
+++ b/adev-ja/src/content/guide/aria/select.md
@@ -212,57 +212,16 @@ describe('MySelectComponent', () => {
 });
 ```
 
-## API
+## APIリファレンス {#api-reference}
 
-selectパターンは、AngularのAriaライブラリから以下のディレクティブを使用します。詳細なAPIドキュメントについては、リンク先のガイドを参照してください。
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-### コンボボックスディレクティブ {#combobox-directives}
-
-selectパターンは、キーボードナビゲーションを維持しつつテキスト入力を防ぐために、`ngCombobox`を`div`や`button`のような非インタラクティブなホスト要素に直接適用します。
-
-#### 入力 {#inputs}
-
-| プロパティ | 型                     | デフォルト | 説明                       |
-| ---------- | ---------------------- | ---------- | -------------------------- |
-| `disabled` | `boolean`              | `false`    | select全体を無効にします   |
-| `expanded` | `ModelSignal<boolean>` | `false`    | selectの展開状態           |
-
-利用可能なすべての入力とシグナルの詳細については、[コンボボックスAPIドキュメント](guide/aria/combobox#apis)を参照してください。
-
-#### Popup Directives {#popup-directives}
-
-The structural `ngComboboxPopup` directive marks the overlay template and requires a reference to the parent combobox:
-
-| Property   | Type       | Description                                 |
-| ---------- | ---------- | ------------------------------------------- |
-| `combobox` | `Combobox` | Required reference to the parent `Combobox` |
-
-#### ComboboxWidget Directive {#comboboxwidget-directive}
-
-The `ngComboboxWidget` directive bridges the listbox with the combobox trigger to support active-descendant focus tracking.
-
-| Property           | Type                  | Description                                                                                                                                  |
-| ------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `activeDescendant` | `string \| undefined` | The ID of the currently active option (bound to `listbox.activeDescendant()`) to update the `aria-activedescendant` attribute on the trigger |
-
-### リストボックスディレクティブ {#listbox-directives}
-
-selectパターンは、ドロップダウンリストに`ngListbox`を、選択可能な各項目に`ngOption`を使用します。
-
-#### Inputs {#listbox-inputs}
-
-| Property        | Type                               | Default      | Description                                                                                                                     |
-| --------------- | ---------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| `selectionMode` | `'follow'` \| `'explicit'`         | `'explicit'` | Set to `'explicit'` so options are toggled explicitly via click/Enter instead of following active focus                         |
-| `focusMode`     | `'roving'` \| `'activedescendant'` | `'roving'`   | The focus strategy used by the listbox. Set to `'activedescendant'` so browser focus remains on the combobox trigger.           |
-| `tabIndex`      | `number`                           | `0`          | The tabindex of the listbox. Set to `-1` to prevent keyboard focus from entering the popup container in active-descendant mode. |
-
-#### モデル {#model}
-
-| プロパティ | 型                   | 説明                                                                         |
-| ---------- | -------------------- | ---------------------------------------------------------------------------- |
-| `value`    | `ModelSignal<any[]>` | 選択された値の双方向バインディング可能な配列（selectの場合は単一の値を含む） |
+- [`Combobox`](/api/aria/combobox/Combobox)
+- [`ComboboxPopup`](/api/aria/combobox/ComboboxPopup)
+- [`ComboboxWidget`](/api/aria/combobox/ComboboxWidget)
+- [`Listbox`](/api/aria/listbox/Listbox)
+- [`Option`](/api/aria/listbox/Option)
 
 ### ポジショニング {#positioning}
 
-selectパターンは、スマートなポジショニングのために[CDK Overlay](https://material.angular.io/cdk/overlay/overview)と統合されています。ビューポートの端やスクロールを自動的に処理するには`cdkConnectedOverlay`を使用してください。
+selectパターンは、スマートなポジショニングのために[CDK Overlay](https://material.angular.dev/cdk/overlay/overview)と統合されています。ビューポートの端やスクロールを自動的に処理するには`cdkConnectedOverlay`を使用してください。
diff --git a/adev-ja/src/content/guide/aria/tabs.en.md b/adev-ja/src/content/guide/aria/tabs.en.md
index c15b98f444..b7d703ef68 100644
--- a/adev-ja/src/content/guide/aria/tabs.en.md
+++ b/adev-ja/src/content/guide/aria/tabs.en.md
@@ -284,74 +284,12 @@ describe('MyTabsComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Tabs
+For detailed API documentation, inspect the following API references:
 
-The container directive that coordinates tab lists and panels.
-
-This directive has no inputs or outputs. It serves as the root container for `ngTabList`, `ngTab`, and `ngTabPanel` directives.
-
-### TabList
-
-The container for tab buttons that manages selection and keyboard navigation.
-
-#### Inputs
-
-| Property        | Type                             | Default        | Description                                                        |
-| --------------- | -------------------------------- | -------------- | ------------------------------------------------------------------ |
-| `orientation`   | `'horizontal' \| 'vertical'`     | `'horizontal'` | Tab list layout direction                                          |
-| `wrap`          | `boolean`                        | `true`         | Whether keyboard navigation wraps from last to first tab           |
-| `softDisabled`  | `boolean`                        | `true`         | When `true`, disabled tabs are focusable but not activatable       |
-| `selectionMode` | `'follow' \| 'explicit'`         | `'follow'`     | Whether tabs activate on focus or require explicit activation      |
-| `focusMode`     | `'roving' \| 'activedescendant'` | `'roving'`     | Focus management strategy                                          |
-| `selectedTab`   | `any`                            | —              | The value of the currently selected tab (supports two-way binding) |
-
-### Tab
-
-An individual tab button.
-
-#### Inputs
-
-| Property   | Type      | Default | Description                             |
-| ---------- | --------- | ------- | --------------------------------------- |
-| `value`    | `any`     | —       | **Required.** Unique value for this tab |
-| `disabled` | `boolean` | `false` | Disables this tab                       |
-
-#### Signals
-
-| Property   | Type              | Description                           |
-| ---------- | ----------------- | ------------------------------------- |
-| `selected` | `Signal<boolean>` | Whether the tab is currently selected |
-| `active`   | `Signal<boolean>` | Whether the tab currently has focus   |
-
-### TabPanel
-
-The content panel associated with a tab.
-
-#### Inputs
-
-| Property          | Type      | Default | Description                                                |
-| ----------------- | --------- | ------- | ---------------------------------------------------------- |
-| `value`           | `any`     | —       | **Required.** Must match the `value` of the associated tab |
-| `preserveContent` | `boolean` | `true`  | Whether to keep panel content in DOM after deactivation    |
-
-#### Signals
-
-| Property  | Type              | Description                            |
-| --------- | ----------------- | -------------------------------------- |
-| `visible` | `Signal<boolean>` | Whether the panel is currently visible |
-
-### TabContent
-
-A structural directive for lazy rendering tab panel content.
-
-This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element inside a tab panel:
-
-```angular-html
-<div ngTabPanel value="tab1">
-  <ng-template ngTabContent>
-    <!-- Content here is lazily rendered -->
-  </ng-template>
-</div>
-```
+- [`Tabs`](/api/aria/tabs/Tabs)
+- [`TabList`](/api/aria/tabs/TabList)
+- [`Tab`](/api/aria/tabs/Tab)
+- [`TabPanel`](/api/aria/tabs/TabPanel)
+- [`TabContent`](/api/aria/tabs/TabContent)
diff --git a/adev-ja/src/content/guide/aria/tabs.md b/adev-ja/src/content/guide/aria/tabs.md
index efd24920fd..71fe7a4edc 100644
--- a/adev-ja/src/content/guide/aria/tabs.md
+++ b/adev-ja/src/content/guide/aria/tabs.md
@@ -284,74 +284,12 @@ describe('MyTabsComponent', () => {
 });
 ```
 
-## API
+## APIリファレンス {#api-reference}
 
-### Tabs {#tabs}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-タブリストとパネルを調整するコンテナディレクティブです。
-
-このディレクティブには入力と出力がありません。`ngTabList`、`ngTab`、`ngTabPanel`ディレクティブのルートコンテナとして機能します。
-
-### TabList {#tablist}
-
-選択とキーボードナビゲーションを管理するタブボタンのコンテナです。
-
-#### Inputs {#inputs}
-
-| プロパティ      | 型                           | デフォルト     | 説明                                                               |
-| --------------- | ---------------------------- | -------------- | ------------------------------------------------------------------ |
-| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | タブリストのレイアウト方向                                         |
-| `wrap`          | `boolean`                    | `false`        | キーボードナビゲーションが最後のタブから最初のタブにラップするかどうか |
-| `softDisabled`  | `boolean`                    | `true`         | `true`の場合、無効化されたタブはフォーカス可能ですが、アクティブにはできません |
-| `selectionMode` | `'follow' \| 'explicit'`         | `'follow'`     | タブがフォーカス時にアクティブになるか、明示的なアクティベーションが必要か |
-| `focusMode`     | `'roving' \| 'activedescendant'` | `'roving'`     | Focus management strategy                                          |
-| `selectedTab`   | `any`                            | —              | 現在選択されているタブの値（双方向バインディングをサポート）       |
-
-### Tab {#tab}
-
-個々のタブボタンです。
-
-#### Inputs {#inputs}
-
-| プロパティ   | 型        | デフォルト | 説明                                |
-| ---------- | --------- | ------- | ----------------------------------- |
-| `value`    | `any`     | —       | **必須。** このタブの一意な値       |
-| `disabled` | `boolean` | `false` | このタブを無効化します              |
-
-#### シグナル {#signals}
-
-| プロパティ   | 型                | 説明                                |
-| ---------- | ----------------- | ----------------------------------- |
-| `selected` | `Signal<boolean>` | タブが現在選択されているかどうか    |
-| `active`   | `Signal<boolean>` | タブが現在フォーカスを持っているかどうか |
-
-### TabPanel {#tabpanel}
-
-タブに関連付けられたコンテンツパネルです。
-
-#### Inputs {#inputs}
-
-| プロパティ        | 型        | デフォルト | 説明                                                       |
-| ----------------- | --------- | ------- | ---------------------------------------------------------- |
-| `value`           | `any`     | —       | **必須。** 関連付けられたタブの`value`と一致する必要があります |
-| `preserveContent` | `boolean` | `true`  | 非アクティブ化後もパネルコンテンツをDOMに保持するかどうか    |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                           |
-| --------- | ----------------- | ------------------------------ |
-| `visible` | `Signal<boolean>` | パネルが現在表示されているかどうか |
-
-### TabContent {#tabcontent}
-
-タブパネルのコンテンツを遅延レンダリングするための構造ディレクティブです。
-
-このディレクティブには入力、出力、メソッドはありません。タブパネル内の`ng-template`要素に適用します:
-
-```angular-html
-<div ngTabPanel value="tab1">
-  <ng-template ngTabContent>
-    <!-- ここのコンテンツは遅延レンダリングされます -->
-  </ng-template>
-</div>
-```
+- [`Tabs`](/api/aria/tabs/Tabs)
+- [`TabList`](/api/aria/tabs/TabList)
+- [`Tab`](/api/aria/tabs/Tab)
+- [`TabPanel`](/api/aria/tabs/TabPanel)
+- [`TabContent`](/api/aria/tabs/TabContent)
diff --git a/adev-ja/src/content/guide/aria/toolbar.en.md b/adev-ja/src/content/guide/aria/toolbar.en.md
index 779771f0f8..95a1bb754d 100644
--- a/adev-ja/src/content/guide/aria/toolbar.en.md
+++ b/adev-ja/src/content/guide/aria/toolbar.en.md
@@ -257,57 +257,10 @@ describe('MyToolbarComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Toolbar Directive
+For detailed API documentation, inspect the following API references:
 
-The `ngToolbar` directive provides the container for toolbar functionality.
-
-#### Inputs
-
-| Property       | Type                           | Default        | Description                                            |
-| -------------- | ------------------------------ | -------------- | ------------------------------------------------------ |
-| `orientation`  | `'vertical'` \| `'horizontal'` | `'horizontal'` | Whether toolbar is vertically or horizontally oriented |
-| `disabled`     | `boolean`                      | `false`        | Disables the entire toolbar                            |
-| `softDisabled` | `boolean`                      | `true`         | Whether disabled items can receive focus               |
-| `wrap`         | `boolean`                      | `true`         | Whether focus should wrap at the edges                 |
-| `value`        | `V[]`                          | `[]`           | Selected widget values (supports two-way binding)      |
-
-### ToolbarWidget Directive
-
-The `ngToolbarWidget` directive marks an element as a navigable widget within the toolbar.
-
-#### Inputs
-
-| Property   | Type      | Default | Description                                     |
-| ---------- | --------- | ------- | ----------------------------------------------- |
-| `id`       | `string`  | auto    | Unique identifier for the widget                |
-| `disabled` | `boolean` | `false` | Disables the widget                             |
-| `value`    | `V`       | -       | The value associated with the widget (required) |
-
-#### Signals
-
-| Property   | Type              | Description                                 |
-| ---------- | ----------------- | ------------------------------------------- |
-| `active`   | `Signal<boolean>` | Whether the widget is currently focused     |
-| `selected` | `Signal<boolean>` | Whether the widget is selected (in a group) |
-
-### ToolbarWidgetGroup Directive
-
-The `ngToolbarWidgetGroup` directive groups related widgets together.
-
-#### Inputs
-
-| Property   | Type      | Default | Description                              |
-| ---------- | --------- | ------- | ---------------------------------------- |
-| `disabled` | `boolean` | `false` | Disables all widgets in the group        |
-| `multi`    | `boolean` | `false` | Whether multiple widgets can be selected |
-
-### Related components
-
-Toolbar can contain various widget types including buttons, trees, and comboboxes. See individual component documentation for specific widget implementations.
-
-<docs-pill-row>
-  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" title="Toolbar ARIA pattern"/>
-  <docs-pill href="/api/aria/toolbar/Toolbar" title="Toolbar API Reference"/>
-</docs-pill-row>
+- [`Toolbar`](/api/aria/toolbar/Toolbar)
+- [`ToolbarWidget`](/api/aria/toolbar/ToolbarWidget)
+- [`ToolbarWidgetGroup`](/api/aria/toolbar/ToolbarWidgetGroup)
diff --git a/adev-ja/src/content/guide/aria/toolbar.md b/adev-ja/src/content/guide/aria/toolbar.md
index ac55cac707..875d259c91 100644
--- a/adev-ja/src/content/guide/aria/toolbar.md
+++ b/adev-ja/src/content/guide/aria/toolbar.md
@@ -257,57 +257,10 @@ describe('MyToolbarComponent', () => {
 });
 ```
 
-## API
+## APIリファレンス {#api-reference}
 
-### Toolbarディレクティブ {#toolbar-directive}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-`ngToolbar`ディレクティブは、ツールバー機能のコンテナを提供します。
-
-#### 入力 {#inputs}
-
-| プロパティ     | 型                             | デフォルト     | 説明                                                   |
-| -------------- | ------------------------------ | -------------- | ------------------------------------------------------ |
-| `orientation`  | `'vertical'` \| `'horizontal'` | `'horizontal'` | ツールバーが垂直方向か水平方向か                       |
-| `disabled`     | `boolean`                      | `false`        | ツールバー全体を無効にします                           |
-| `softDisabled` | `boolean`                      | `true`         | 無効化された項目がフォーカスを受け取れるかどうか       |
-| `wrap`         | `boolean`                      | `true`         | フォーカスが端で折り返すかどうか                       |
-| `value`        | `V[]`                          | `[]`           | Selected widget values (supports two-way binding)      |
-
-### ToolbarWidgetディレクティブ {#toolbarwidget-directive}
-
-`ngToolbarWidget`ディレクティブは、要素をツールバー内のナビゲート可能なウィジェットとしてマークします。
-
-#### 入力 {#inputs}
-
-| プロパティ | 型        | デフォルト | 説明                                            |
-| ---------- | --------- | ------- | ----------------------------------------------- |
-| `id`       | `string`  | auto    | ウィジェットの一意の識別子                      |
-| `disabled` | `boolean` | `false` | ウィジェットを無効にします                      |
-| `value`    | `V`       | -       | ウィジェットに関連付けられた値（必須）          |
-
-#### シグナル {#signals}
-
-| プロパティ | 型                | 説明                                        |
-| ---------- | ----------------- | ------------------------------------------- |
-| `active`   | `Signal<boolean>` | ウィジェットが現在フォーカスされているかどうか      |
-| `selected` | `Signal<boolean>` | ウィジェットが（グループ内で）選択されているかどうか |
-
-### ToolbarWidgetGroupディレクティブ {#toolbarwidgetgroup-directive}
-
-`ngToolbarWidgetGroup`ディレクティブは、関連するウィジェットをグループ化します。
-
-#### 入力 {#inputs}
-
-| プロパティ | 型        | デフォルト | 説明                                     |
-| ---------- | --------- | ------- | ---------------------------------------- |
-| `disabled` | `boolean` | `false` | グループ内のすべてのウィジェットを無効にします |
-| `multi`    | `boolean` | `false` | 複数のウィジェットを選択できるかどうか     |
-
-### 関連コンポーネント {#related-components}
-
-ツールバーには、ボタン、ツリー、コンボボックスなど、さまざまなウィジェットタイプを含めることができます。特定のウィジェットの実装については、個々のコンポーネントのドキュメントを参照してください。
-
-<docs-pill-row>
-  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" title="Toolbar ARIA pattern"/>
-  <docs-pill href="/api/aria/toolbar/Toolbar" title="Toolbar API Reference"/>
-</docs-pill-row>
+- [`Toolbar`](/api/aria/toolbar/Toolbar)
+- [`ToolbarWidget`](/api/aria/toolbar/ToolbarWidget)
+- [`ToolbarWidgetGroup`](/api/aria/toolbar/ToolbarWidgetGroup)
diff --git a/adev-ja/src/content/guide/aria/tree.en.md b/adev-ja/src/content/guide/aria/tree.en.md
index e97cd42727..9e7b93406a 100644
--- a/adev-ja/src/content/guide/aria/tree.en.md
+++ b/adev-ja/src/content/guide/aria/tree.en.md
@@ -215,85 +215,10 @@ describe('MyTreeComponent', () => {
 });
 ```
 
-## APIs
+## API reference
 
-### Tree
+For detailed API documentation, inspect the following API references:
 
-The container directive that manages hierarchical navigation and selection.
-
-#### Inputs
-
-| Property        | Type                             | Default      | Description                                                   |
-| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------- |
-| `disabled`      | `boolean`                        | `false`      | Disables the entire tree                                      |
-| `softDisabled`  | `boolean`                        | `true`       | When `true`, disabled items are focusable but not interactive |
-| `multi`         | `boolean`                        | `false`      | Whether multiple items can be selected                        |
-| `selectionMode` | `'explicit' \| 'follow'`         | `'explicit'` | Whether selection requires explicit action or follows focus   |
-| `nav`           | `boolean`                        | `false`      | Whether the tree is in navigation mode (uses `aria-current`)  |
-| `wrap`          | `boolean`                        | `true`       | Whether keyboard navigation wraps from last to first item     |
-| `focusMode`     | `'roving' \| 'activedescendant'` | `'roving'`   | Focus strategy used by the tree                               |
-| `values`        | `any[]`                          | `[]`         | Selected item values (supports two-way binding)               |
-
-#### Methods
-
-| Method           | Parameters | Description                                   |
-| ---------------- | ---------- | --------------------------------------------- |
-| `expandAll`      | none       | Expands all tree nodes                        |
-| `collapseAll`    | none       | Collapses all tree nodes                      |
-| `selectAll`      | none       | Selects all items (only in multi-select mode) |
-| `clearSelection` | none       | Clears all selection                          |
-
-### TreeItem
-
-An individual node in the tree that can contain child nodes.
-
-#### Inputs
-
-| Property   | Type                    | Default | Description                                             |
-| ---------- | ----------------------- | ------- | ------------------------------------------------------- |
-| `parent`   | `Tree \| TreeItemGroup` | —       | **Required.** The parent Tree root or TreeItemGroup.    |
-| `value`    | `any`                   | —       | **Required.** Unique value for this tree item           |
-| `disabled` | `boolean`               | `false` | Disables this item                                      |
-| `expanded` | `boolean`               | `false` | Whether the node is expanded (supports two-way binding) |
-
-#### Signals
-
-| Property      | Type              | Description                          |
-| ------------- | ----------------- | ------------------------------------ |
-| `selected`    | `Signal<boolean>` | Whether the item is selected         |
-| `active`      | `Signal<boolean>` | Whether the item currently has focus |
-| `hasChildren` | `Signal<boolean>` | Whether the item has child nodes     |
-
-#### Methods
-
-| Method     | Parameters | Description                 |
-| ---------- | ---------- | --------------------------- |
-| `expand`   | none       | Expands this node           |
-| `collapse` | none       | Collapses this node         |
-| `toggle`   | none       | Toggles the expansion state |
-
-### TreeItemGroup
-
-The structural directive applied to an `ng-template` that holds the children nodes of an expandable tree item.
-
-#### Inputs
-
-| Property  | Type       | Default | Description                                             |
-| --------- | ---------- | ------- | ------------------------------------------------------- |
-| `ownedBy` | `TreeItem` | —       | **Required.** The reference of the parent `ngTreeItem`. |
-
-#### Usage
-
-```angular-html
-<ul ngTree #tree="ngTree">
-  <li ngTreeItem [parent]="tree" value="parent" #parentItem="ngTreeItem">
-    Parent Item
-    <ul role="group">
-      <ng-template ngTreeItemGroup [ownedBy]="parentItem" #group="ngTreeItemGroup">
-        <li ngTreeItem [parent]="group" value="child1">Child 1</li>
-        <li ngTreeItem [parent]="group" value="child2">Child 2</li>
-      </ng-template>
-    </ul>
-  </li>
-</ul>
-```
+- [`Tree`](/api/aria/tree/Tree)
+- [`TreeItem`](/api/aria/tree/TreeItem)
+- [`TreeItemGroup`](/api/aria/tree/TreeItemGroup)
diff --git a/adev-ja/src/content/guide/aria/tree.md b/adev-ja/src/content/guide/aria/tree.md
index 7e28e8ebc6..5d4c0f9c57 100644
--- a/adev-ja/src/content/guide/aria/tree.md
+++ b/adev-ja/src/content/guide/aria/tree.md
@@ -215,85 +215,10 @@ describe('MyTreeComponent', () => {
 });
 ```
 
-## API {#apis}
+## APIリファレンス {#api-reference}
 
-### Tree {#tree}
+詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。
 
-階層的なナビゲーションと選択を管理するコンテナディレクティブです。
-
-#### Inputs {#inputs}
-
-| プロパティ      | 型                               | デフォルト   | 説明                                                          |
-| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------- |
-| `disabled`      | `boolean`                        | `false`      | ツリー全体を無効にします                                      |
-| `softDisabled`  | `boolean`                        | `true`       | `true`の場合、無効化されたアイテムはフォーカス可能ですが、インタラクティブではありません |
-| `multi`         | `boolean`                        | `false`      | 複数アイテムの選択が可能かどうか                                |
-| `selectionMode` | `'explicit' \| 'follow'`         | `'explicit'` | 選択に明示的なアクションが必要か、フォーカスに追従するかどうか  |
-| `nav`           | `boolean`                        | `false`      | ツリーがナビゲーションモードであるかどうか（`aria-current`を使用） |
-| `wrap`          | `boolean`                        | `true`       | キーボードナビゲーションが最後のアイテムから最初のアイテムにラップするかどうか |
-| `focusMode`     | `'roving' \| 'activedescendant'` | `'roving'`   | ツリーで使用されるフォーカス戦略                              |
-| `values`        | `any[]`                          | `[]`         | 選択されたアイテムの値（双方向バインディングをサポート）      |
-
-#### メソッド {#methods}
-
-| メソッド         | パラメータ | 説明                                          |
-| ---------------- | ---------- | --------------------------------------------- |
-| `expandAll`      | none       | すべてのツリーノードを展開します                      |
-| `collapseAll`    | none       | すべてのツリーノードを折りたたみます                  |
-| `selectAll`      | none       | すべてのアイテムを選択します（複数選択モードのみ）    |
-| `clearSelection` | none       | すべての選択をクリアします                            |
-
-### TreeItem {#treeitem}
-
-子ノードを含むことができるツリー内の個々のノードです。
-
-#### Inputs {#inputs}
-
-| プロパティ | 型                      | デフォルト | 説明                                                    |
-| ---------- | ----------------------- | ------- | ------------------------------------------------------- |
-| `parent`   | `Tree \| TreeItemGroup` | —       | **必須。** 親のTreeルートまたはTreeItemGroup。           |
-| `value`    | `any`                   | —       | **必須。** このツリーアイテムの一意な値                   |
-| `disabled` | `boolean`               | `false` | このアイテムを無効にします                                |
-| `expanded` | `boolean`               | `false` | ノードが展開されているかどうか（双方向バインディングをサポート） |
-
-#### シグナル {#signals}
-
-| プロパティ    | 型                | 説明                                 |
-| ------------- | ----------------- | ------------------------------------ |
-| `selected`    | `Signal<boolean>` | アイテムが選択されているかどうか             |
-| `active`      | `Signal<boolean>` | アイテムが現在フォーカスを持っているかどうか   |
-| `hasChildren` | `Signal<boolean>` | アイテムが子ノードを持っているかどうか         |
-
-#### メソッド {#methods}
-
-| メソッド   | パラメータ | 説明                        |
-| ---------- | ---------- | --------------------------- |
-| `expand`   | none       | このノードを展開します            |
-| `collapse` | none       | このノードを折りたたみます        |
-| `toggle`   | none       | 展開状態を切り替えます            |
-
-### TreeItemGroup {#tree-item-group}
-
-The structural directive applied to an `ng-template` that holds the children nodes of an expandable tree item.
-
-#### Inputs {#inputs}
-
-| Property  | Type       | Default | Description                                             |
-| --------- | ---------- | ------- | ------------------------------------------------------- |
-| `ownedBy` | `TreeItem` | —       | **Required.** The reference of the parent `ngTreeItem`. |
-
-#### Usage {#usage}
-
-```angular-html
-<ul ngTree #tree="ngTree">
-  <li ngTreeItem [parent]="tree" value="parent" #parentItem="ngTreeItem">
-    Parent Item
-    <ul role="group">
-      <ng-template ngTreeItemGroup [ownedBy]="parentItem" #group="ngTreeItemGroup">
-        <li ngTreeItem [parent]="group" value="child1">Child 1</li>
-        <li ngTreeItem [parent]="group" value="child2">Child 2</li>
-      </ng-template>
-    </ul>
-  </li>
-</ul>
-```
+- [`Tree`](/api/aria/tree/Tree)
+- [`TreeItem`](/api/aria/tree/TreeItem)
+- [`TreeItemGroup`](/api/aria/tree/TreeItemGroup)
diff --git a/adev-ja/src/content/guide/components/content-projection.en.md b/adev-ja/src/content/guide/components/content-projection.en.md
index 5459aead64..202af3e35b 100644
--- a/adev-ja/src/content/guide/components/content-projection.en.md
+++ b/adev-ja/src/content/guide/components/content-projection.en.md
@@ -105,9 +105,9 @@ export class CardBody {}
   selector: 'custom-card',
   template: `
   <div class="card-shadow">
-    <ng-content select="card-title"></ng-content>
+    <ng-content select="card-title" />
     <div class="card-divider"></div>
-    <ng-content select="card-body"></ng-content>
+    <ng-content select="card-body" />
   </div>
   `,
 })
@@ -150,10 +150,10 @@ did not match a `select` attribute:
 ```angular-html
 <!-- Component template -->
 <div class="card-shadow">
-  <ng-content select="card-title"></ng-content>
+  <ng-content select="card-title" />
   <div class="card-divider"></div>
   <!-- capture anything except "card-title" -->
-  <ng-content></ng-content>
+  <ng-content />
 </div>
 ```
 
@@ -222,7 +222,7 @@ placeholder, Angular compares against the `ngProjectAs` value instead of the ele
 ```angular-html
 <!-- Component template -->
 <div class="card-shadow">
-  <ng-content select="card-title"></ng-content>
+  <ng-content select="card-title" />
   <div class="card-divider"></div>
   <ng-content />
 </div>
diff --git a/adev-ja/src/content/guide/components/content-projection.md b/adev-ja/src/content/guide/components/content-projection.md
index cfb307df50..2444e1a6c2 100644
--- a/adev-ja/src/content/guide/components/content-projection.md
+++ b/adev-ja/src/content/guide/components/content-projection.md
@@ -105,9 +105,9 @@ export class CardBody {}
   selector: 'custom-card',
   template: `
   <div class="card-shadow">
-    <ng-content select="card-title"></ng-content>
+    <ng-content select="card-title" />
     <div class="card-divider"></div>
-    <ng-content select="card-body"></ng-content>
+    <ng-content select="card-body" />
   </div>
   `,
 })
@@ -150,10 +150,10 @@ export class App {}
 ```angular-html
 <!-- コンポーネントテンプレート -->
 <div class="card-shadow">
-  <ng-content select="card-title"></ng-content>
+  <ng-content select="card-title" />
   <div class="card-divider"></div>
   <!-- "card-title"以外をすべてキャプチャ -->
-  <ng-content></ng-content>
+  <ng-content />
 </div>
 ```
 
@@ -222,7 +222,7 @@ Angularは要素のIDではなく`ngProjectAs`の値と比較します。
 ```angular-html
 <!-- コンポーネントテンプレート -->
 <div class="card-shadow">
-  <ng-content select="card-title"></ng-content>
+  <ng-content select="card-title" />
   <div class="card-divider"></div>
   <ng-content />
 </div>
diff --git a/adev-ja/src/content/guide/components/dom-apis.en.md b/adev-ja/src/content/guide/components/dom-apis.en.md
index be1881e7b5..9c774c0638 100644
--- a/adev-ja/src/content/guide/components/dom-apis.en.md
+++ b/adev-ja/src/content/guide/components/dom-apis.en.md
@@ -7,9 +7,7 @@ directly interact with a component's DOM. Components can inject ElementRef to ge
 component's host element:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
@@ -25,9 +23,7 @@ You can use Angular's `afterEveryRender` and `afterNextRender` functions to regi
 callback** that runs when Angular has finished rendering the page.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
diff --git a/adev-ja/src/content/guide/components/dom-apis.md b/adev-ja/src/content/guide/components/dom-apis.md
index 8c1ecaf1fa..5beffed9b4 100644
--- a/adev-ja/src/content/guide/components/dom-apis.md
+++ b/adev-ja/src/content/guide/components/dom-apis.md
@@ -7,9 +7,7 @@ Angularは、ほとんどのDOM作成、更新、および削除を自動的に
 コンポーネントは `ElementRef` を注入して、コンポーネントのホスト要素への参照を取得できます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
@@ -25,9 +23,7 @@ Angularの `afterEveryRender` および `afterNextRender` 関数を使用して
 Angularがページのレンダリングを完了したときに実行される **レンダリングコールバック** を登録できます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
diff --git a/adev-ja/src/content/guide/components/inheritance.en.md b/adev-ja/src/content/guide/components/inheritance.en.md
index 163e305ddd..233db69a47 100644
--- a/adev-ja/src/content/guide/components/inheritance.en.md
+++ b/adev-ja/src/content/guide/components/inheritance.en.md
@@ -12,9 +12,7 @@ export class ListboxBase {
   value: string;
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   // CustomListbox inherits the `value` property.
 }
@@ -68,16 +66,12 @@ and their own.
 When a base class uses `inject()` as a property initializer, the child class inherits the property automatically. No `super` forwarding is needed.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   protected element = inject(ElementRef);
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   // `element` is inherited from `ListboxBase`.
 }
@@ -86,16 +80,12 @@ export class CustomListbox extends ListboxBase {
 If a base class injects dependencies as constructor parameters, the child class must explicitly pass these dependencies to `super`.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   constructor(private element: ElementRef) {}
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   constructor(element: ElementRef) {
     super(element);
@@ -110,9 +100,7 @@ implements `ngOnInit` _overrides_ the base class's implementation. If you want t
 class's lifecycle method, explicitly call the method with `super`:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   protected isInitialized = false;
   ngOnInit() {
@@ -120,9 +108,7 @@ export class ListboxBase {
   }
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   override ngOnInit() {
     super.ngOnInit();
diff --git a/adev-ja/src/content/guide/components/inheritance.md b/adev-ja/src/content/guide/components/inheritance.md
index 72dd9893d3..d4bacd7956 100644
--- a/adev-ja/src/content/guide/components/inheritance.md
+++ b/adev-ja/src/content/guide/components/inheritance.md
@@ -12,9 +12,7 @@ export class ListboxBase {
   value: string;
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   // CustomListboxは`value`プロパティを継承します。
 }
@@ -68,16 +66,12 @@ export class CustomListbox extends ListboxBase {
 基底クラスが`inject()`をプロパティイニシャライザーとして使用する場合、子クラスはそのプロパティを自動的に継承します。`super`への転送は不要です。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   protected element = inject(ElementRef);
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   // `element` is inherited from `ListboxBase`.
 }
@@ -86,16 +80,12 @@ export class CustomListbox extends ListboxBase {
 もし基底クラスがコンストラクターのパラメーターとして依存性を注入している場合、子クラスではその依存性を明示的に`super`に渡す必要があります。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   constructor(private element: ElementRef) {}
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   constructor(element: ElementRef) {
     super(element);
@@ -110,9 +100,7 @@ export class CustomListbox extends ListboxBase {
 基底クラスのライフサイクルメソッドを保持したい場合は、`super`で明示的にメソッドを呼び出します。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ListboxBase {
   protected isInitialized = false;
   ngOnInit() {
@@ -120,9 +108,7 @@ export class ListboxBase {
   }
 }
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomListbox extends ListboxBase {
   override ngOnInit() {
     super.ngOnInit();
diff --git a/adev-ja/src/content/guide/components/inputs.en.md b/adev-ja/src/content/guide/components/inputs.en.md
index 0321d2ae5f..d8877449e3 100644
--- a/adev-ja/src/content/guide/components/inputs.en.md
+++ b/adev-ja/src/content/guide/components/inputs.en.md
@@ -1,18 +1,14 @@
 # Accepting data with input properties
 
-TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
-
-TIP: If you're familiar with other web frameworks, input properties are similar to _props_.
+TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular. If you're familiar with other web frameworks, input properties are similar to _props_.
 
 When you use a component, you commonly want to pass some data to it. A component specifies the data that it accepts by declaring
 **inputs**:
 
-```ts {highlight:[8]}
+```ts {highlight:[6]}
 import {Component, input} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Declare an input named 'value' with a default value of zero.
   value = input(0);
@@ -28,9 +24,7 @@ This lets you bind to the property in a template:
 If an input has a default value, TypeScript infers the type from the default value:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // TypeScript infers that this input is a number, returning InputSignal<number>.
   value = input(0);
@@ -42,9 +36,7 @@ You can explicitly declare a type for the input by specifying a generic paramete
 If an input without a default value is not set, its value is `undefined`:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Produces an InputSignal<number | undefined> because `value` may not be set.
   value = input<number>();
@@ -63,12 +55,10 @@ When extending a component class, **inputs are inherited by the child class.**
 
 The `input` function returns an `InputSignal`. You can read the value by calling the signal:
 
-```ts {highlight:[11]}
+```ts {highlight:[9]}
 import {Component, input, computed} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Declare an input named 'value' with a default value of zero.
   value = input(0);
@@ -84,10 +74,8 @@ Signals created by the `input` function are read-only.
 
 You can declare that an input is `required` by calling `input.required` instead of `input`:
 
-```ts {highlight:[6]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[4]}
+@Component(/* ... */)
 export class CustomSlider {
   // Declare a required input named value. Returns an `InputSignal<number>`.
   value = input.required<number>();
@@ -137,9 +125,7 @@ The most common use-case for input transforms is to accept a wider range of valu
 When you specify an input transform, the type of the transform function's parameter determines the types of values that can be set to the input in a template.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   widthPx = input('', {transform: appendPx});
 }
@@ -158,9 +144,7 @@ Angular includes two built-in transform functions for the two most common scenar
 ```ts
 import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   disabled = input(false, {transform: booleanAttribute});
   value = input(0, {transform: numberAttribute});
@@ -176,10 +160,8 @@ _presence_ of the attribute indicates a "true" value. However, Angular's `boolea
 
 You can specify the `alias` option to change the name of an input in templates.
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   value = input(0, {alias: 'sliderValue'});
 }
@@ -202,9 +184,7 @@ When creating a component, you can define a model input similarly to how you cre
 Both types of input allow someone to bind a value into the property. However, **model inputs allow the component author to write values into the property**. If the property is bound with a two-way binding, the new value propagates to that binding.
 
 ```ts
-@Component({
-  /* ... */
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Define a model input named "value".
   value = model(0);
@@ -257,9 +237,7 @@ In the example above, the `CustomSlider` can write values into its `value` model
 When you declare a model input in a component or directive, Angular automatically creates a corresponding [output](guide/components/outputs) for that model. The output's name is the model input's name suffixed with "Change".
 
 ```ts
-@Directive({
-  /* ... */
-})
+@Directive(/* ... */)
 export class CustomCheckbox {
   // This automatically creates an output named "checkedChange".
   // Can be subscribed to using `(checkedChange)="handler()"` in the template.
@@ -273,7 +251,7 @@ See [Custom events with outputs](guide/components/outputs) for more details on o
 
 ### Customizing model inputs
 
-You can mark a model input as required or provide an alias in the same way as a [standard input](guide/components/inputs).
+You can mark a model input as [required](#required-inputs) or provide an [alias](#input-aliases) in the same way as a standard input.
 
 Model inputs do not support input transforms.
 
@@ -293,10 +271,8 @@ TIP: While the Angular team recommends using the signal-based `input` function f
 
 You can alternatively declare component inputs by adding the `@Input` decorator to a property:
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input() value = 0;
 }
@@ -316,10 +292,8 @@ The `@Input` decorator accepts a config object that lets you change the way that
 
 You can specify the `required` option to enforce that a given input must always have a value.
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
@@ -349,10 +323,8 @@ function trimString(value: string | undefined) {
 
 You can specify the `alias` option to change the name of an input in templates.
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }
diff --git a/adev-ja/src/content/guide/components/inputs.md b/adev-ja/src/content/guide/components/inputs.md
index de1424f926..5e00e7f1d3 100644
--- a/adev-ja/src/content/guide/components/inputs.md
+++ b/adev-ja/src/content/guide/components/inputs.md
@@ -1,18 +1,14 @@
 # 入力プロパティによるデータの受け取り
 
-TIP: このガイドは、既に[基本概念ガイド](essentials)を読んでいることを前提としています。Angularを初めて使用する場合は、まずそちらをお読みください。
-
-TIP: 他のウェブフレームワークに精通している場合は、入力プロパティは_props_に似ています。
+TIP: このガイドは、既に[基本概念ガイド](essentials)を読んでいることを前提としています。Angularを初めて使用する場合は、まずそちらをお読みください。他のウェブフレームワークに精通している場合は、入力プロパティは_props_に似ています。
 
 コンポーネントを使用する際に、一般的にいくつかのデータを渡したいことがあります。
 コンポーネントは、**入力**を宣言することで、受け入れるデータを指定します。
 
-```ts {highlight:[8]}
+```ts {highlight:[6]}
 import {Component, input} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Declare an input named 'value' with a default value of zero.
   value = input(0);
@@ -28,9 +24,7 @@ export class CustomSlider {
 入力にデフォルト値がある場合、TypeScriptはデフォルト値から型を推論します。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // TypeScriptは、この入力が数値であると推論し、InputSignal<number>を返します。
   value = input(0);
@@ -42,9 +36,7 @@ export class CustomSlider {
 デフォルト値のない入力が設定されていない場合、その値は`undefined`になります。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // `value`は設定されない可能性があるため、InputSignal<number | undefined>を生成します。
   value = input<number>();
@@ -59,16 +51,14 @@ export class CustomSlider {
 
 **入力名は大文字と小文字が区別されます。**
 
-## 入力の読み取り
+## 入力の読み取り {#reading-inputs}
 
 `input`関数は`InputSignal`を返します。シグナルを呼び出すことで値を読み取ることができます。
 
-```ts {highlight:[11]}
+```ts {highlight:[9]}
 import {Component, input, computed} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   // Declare an input named 'value' with a default value of zero.
   value = input(0);
@@ -80,14 +70,12 @@ export class CustomSlider {
 
 `input`関数によって作成されたシグナルは読み取り専用です。
 
-## 必須入力
+## 必須入力 {#required-inputs}
 
 `input`の代わりに`input.required`を呼び出すことで、入力が`required`であることを宣言できます。
 
-```ts {highlight:[6]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[4]}
+@Component(/* ... */)
 export class CustomSlider {
   // Declare a required input named value. Returns an `InputSignal<number>`.
   value = input.required<number>();
@@ -98,11 +86,11 @@ Angularは、テンプレートでコンポーネントを使用する際に、
 
 必須入力は、返される`InputSignal`のジェネリックパラメーターに`undefined`を自動的に含めません。
 
-## 入力の構成
+## 入力の構成 {#configuring-inputs}
 
 `input`関数は、入力の動作を変更できる2番目のパラメーターとしてconfigオブジェクトを受け取ります。
 
-### 入力変換
+### 入力変換 {#input-transforms}
 
 入力がAngularによって設定されるときに、その値を変更する`transform`関数を指定できます。
 
@@ -132,14 +120,12 @@ function trimString(value: string | undefined): string {
 
 **入力変換関数は常に[純粋関数](https://en.wikipedia.org/wiki/Pure_function)でなければなりません。**変換関数外の状態に依存すると、予期せぬ動作につながる可能性があります。
 
-#### 型チェック
+#### 型チェック {#type-checking}
 
 入力変換を指定すると、変換関数の引数の型によって、テンプレートで入力に設定できる値の型が決まります。
 
-<docs-code language="ts">
-@Component({
-  /*...*/
-})
+```ts
+@Component(/* ... */)
 export class CustomSlider {
   widthPx = input('', {transform: appendPx});
 }
@@ -147,20 +133,18 @@ export class CustomSlider {
 function appendPx(value: number): string {
   return `${value}px`;
 }
-</docs-code>
+```
 
 上記の例では、`widthPx`入力は`number`を受け入れる一方、`InputSignal`プロパティは`string`を返します。
 
-#### 組み込み変換
+#### 組み込み変換 {#built-in-transformations}
 
 Angularには、最も一般的な2つのシナリオのための2つの組み込み変換関数が含まれています。ブール値と数値への値の強制変換です。
 
 ```ts
 import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   disabled = input(false, {transform: booleanAttribute});
   value = input(0, {transform: numberAttribute});
@@ -172,14 +156,12 @@ export class CustomSlider {
 
 `numberAttribute`は、与えられた値を数値として解析しようと試み、解析に失敗した場合は`NaN`を生成します。
 
-### 入力エイリアス
+### 入力エイリアス {#input-aliases}
 
 `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   value = input(0, {alias: 'sliderValue'});
 }
@@ -193,7 +175,7 @@ export class CustomSlider {
 
 一般的にコンポーネントの入力をエイリアス化することは避けるべきですが、この機能は、元の名前のエイリアスを保持しながらプロパティの名前を変更したり、ネイティブDOM要素プロパティの名前との競合を回避したりする場合に役立ちます。
 
-## モデル入力
+## モデル入力 {#model-inputs}
 
 **モデル入力**は、コンポーネントが新しい値を親コンポーネントに伝播できるようにする特殊なタイプの入力です。
 
@@ -202,9 +184,7 @@ export class CustomSlider {
 どちらの種類の入力も、値をプロパティにバインドすることを可能にします。しかし、**モデル入力は、コンポーネントの作者がプロパティに値を書き込むことを可能にします。**プロパティが双方向バインディングでバインドされている場合、新しい値はそのバインディングに伝播します。
 
 ```ts
-@Component({
-  /* ... */
-})
+@Component(/* ... */)
 export class CustomSlider {
   // "value"という名前のモデル入力を定義します。
   value = model(0);
@@ -234,7 +214,7 @@ export class MediaControls {
 
 テンプレートでの双方向バインディングの詳細については、[双方向バインディング](guide/templates/two-way-binding)を参照してください。
 
-### プレーンプロパティとの双方向バインディング
+### プレーンプロパティとの双方向バインディング {#two-way-binding-with-plain-properties}
 
 プレーンなJavaScriptプロパティをモデル入力にバインドできます。
 
@@ -252,14 +232,12 @@ export class MediaControls {
 
 上記の例では、`CustomSlider`は`value`モデル入力に値を書き込むことができ、それによって`MediaControls`の`volume`プロパティに値が伝播します。このバインディングにより、`value`と`volume`の値が同期します。
 
-### 暗黙的な`change`イベント
+### 暗黙的な`change`イベント {#implicit-change-events}
 
 コンポーネントまたはディレクティブでモデル入力を宣言すると、Angularはそのモデルに対応する[出力](guide/components/outputs)を自動的に作成します。出力の名前は、モデル入力の名前に「Change」が付いたものです。
 
 ```ts
-@Directive({
-  /* ... */
-})
+@Directive(/* ... */)
 export class CustomCheckbox {
   // これにより、「checkedChange」という名前の出力が自動的に作成されます。
   // テンプレートで `(checkedChange)="handler()"` を使用して購読できます。
@@ -271,13 +249,13 @@ export class CustomCheckbox {
 
 出力の詳細については、[出力によるカスタムイベント](guide/components/outputs)を参照してください。
 
-### モデル入力のカスタマイズ
+### モデル入力のカスタマイズ {#customizing-model-inputs}
 
-[通常の入力](guide/components/inputs)と同様に、モデル入力を必須としてマークしたり、エイリアスを提供したりできます。
+標準入力と同様に、モデル入力を[必須](#required-inputs)としてマークしたり、[エイリアス](#input-aliases)を提供したりできます。
 
 モデル入力は入力変換をサポートしません。
 
-### モデル入力を使用する場合
+### モデル入力を使用する場合 {#when-to-use-model-inputs}
 
 コンポーネントが双方向バインディングをサポートする場合に、モデル入力を使用します。これは通常、ユーザーの操作に基づいて値を変更するためにコンポーネントが存在する場合に適しています。最も一般的には、日付ピッカーやコンボボックスなどのカスタムフォームコントロールは、主要な値にモデル入力を使用する必要があります。
 
@@ -293,10 +271,8 @@ TIP: Angularチームは新しいプロジェクトにはシグナルベース
 
 コンポーネント入力を宣言する代わりに、プロパティに`@Input`デコレーターを追加できます。
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input() value = 0;
 }
@@ -308,18 +284,16 @@ export class CustomSlider {
 <custom-slider [value]="50" />
 ```
 
-### デコレーターベースの入力のカスタマイズ
+### デコレーターベースの入力のカスタマイズ {#customizing-decorator-based-inputs}
 
 `@Input`デコレーターは、入力の動作を変更できるconfigオブジェクトを受け取ります。
 
-#### 必須入力
+#### 必須入力 {#required-inputs}
 
 `required`オプションを指定して、特定の入力が常に値を持つ必要があることを強制できます。
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
@@ -327,7 +301,7 @@ export class CustomSlider {
 
 すべての必須入力を指定せずにコンポーネントを使用しようとすると、Angularはビルド時にエラーを報告します。
 
-#### 入力変換
+#### 入力変換 {#input-transforms}
 
 Angularによって入力が設定されるときにその値を変更する`transform`関数を指定できます。この変換関数は、上記で説明したシグナルベースの入力の変換関数と同様に機能します。
 
@@ -345,14 +319,12 @@ function trimString(value: string | undefined) {
 }
 ```
 
-#### 入力エイリアス
+#### 入力エイリアス {#input-aliases}
 
 `alias`オプションを指定して、テンプレートでの入力の名前を変更できます。
 
-```ts {highlight:[5]}
-@Component({
-  /*...*/
-})
+```ts {highlight:[3]}
+@Component(/* ... */)
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }
@@ -366,7 +338,7 @@ export class CustomSlider {
 
 入力エイリアスは、上記で説明したシグナルベースの入力と同じように機能します。
 
-### ゲッターとセッターを持つ入力
+### ゲッターとセッターを持つ入力 {#inputs-with-getters-and-setters}
 
 デコレーターベースの入力を使用する場合、ゲッターとセッターで実装されたプロパティを入力にできます。
 
@@ -402,7 +374,7 @@ export class CustomSlider {
 
 複雑なゲッターとセッター、またはコストの高いゲッターとセッターは避けてください。Angularは入力のセッターを複数回呼び出す可能性があり、セッターがDOM操作などのコストの高い処理を実行する場合、アプリケーションのパフォーマンスに悪影響を与える可能性があります。
 
-## `@Component`デコレーターでの入力の指定
+## `@Component`デコレーターでの入力の指定 {#specify-inputs-in-the-component-decorator}
 
 `@Input`デコレーターに加えて、`@Component`デコレーターの`inputs`プロパティを使用して、コンポーネントの入力を指定できます。これは、コンポーネントが基本クラスからプロパティを継承する場合に役立ちます。
 
diff --git a/adev-ja/src/content/guide/components/lifecycle.en.md b/adev-ja/src/content/guide/components/lifecycle.en.md
index b74ef898c5..419765338f 100644
--- a/adev-ja/src/content/guide/components/lifecycle.en.md
+++ b/adev-ja/src/content/guide/components/lifecycle.en.md
@@ -256,9 +256,7 @@ next phase.
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   private prevPadding = 0;
   private elementHeight = 0;
diff --git a/adev-ja/src/content/guide/components/lifecycle.md b/adev-ja/src/content/guide/components/lifecycle.md
index 8f02a019c4..6d6af0bff2 100644
--- a/adev-ja/src/content/guide/components/lifecycle.md
+++ b/adev-ja/src/content/guide/components/lifecycle.md
@@ -18,7 +18,7 @@ Angularアプリケーション全体に関連するライフサイクルフッ
 このトラバーサルは、各コンポーネントをちょうど1回だけ訪問するため、
 プロセス中にさらに状態を変更することは避けるべきです。
 
-## 概要
+## 概要 {#summary}
 
 <div class="docs-table docs-scroll-track-transparent">
   <table>
@@ -100,7 +100,7 @@ Angularアプリケーション全体に関連するライフサイクルフッ
 
 初期化中は、最初の `ngOnChanges` は `ngOnInit` の前に実行されます。
 
-#### 変更の検査
+#### 変更の検査 {#inspecting-changes}
 
 `ngOnChanges` メソッドは、1つの `SimpleChanges` 引数を受け取ります。
 このオブジェクトは、[`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) であり、
@@ -162,7 +162,7 @@ export class UserProfile {
 `DestroyRef` を使用して、クリーンアップコードをすべて `ngOnDestroy` メソッドに置くのではなく、
 クリーンアップコードに近い場所にセットアップコードを保持できます。
 
-##### インスタンス破棄の検出
+##### インスタンス破棄の検出 {#detecting-instance-destruction}
 
 `DestroyRef` は、指定されたインスタンスが既に破棄されているかどうかを確認できる `destroyed` プロパティを提供します。これは、特に遅延または非同期ロジックを扱う際に、破棄されたコンポーネントでの操作を避けるのに役立ちます。
 
@@ -226,7 +226,7 @@ Angularがコンポーネントのテンプレートの変更をチェックす
 このメソッドで状態を変更しようとすると、
 [ExpressionChangedAfterItHasBeenCheckedError](errors/NG0100) が発生します。
 
-### afterEveryRender と afterNextRender
+### afterEveryRender と afterNextRender {#aftereveryrender-and-afternextrender}
 
 `afterEveryRender` と `afterNextRender` 関数は、
 Angularがページ上の*すべてのコンポーネント*をDOMにレンダリングし終えた後に呼び出される**レンダリングコールバック** を登録できます。
@@ -244,7 +244,7 @@ AngularでDOMを操作する方法については、[DOM API の使用](guide/co
 
 レンダリングコールバックは、サーバーサイドレンダリング中またはビルド時の事前レンダリング中は実行されません。
 
-#### after\*Render フェーズ
+#### after\*Render フェーズ {#afterrender-phases}
 
 `afterEveryRender` または `afterNextRender` を使用する場合、
 オプションで作業をフェーズに分割できます。
@@ -256,9 +256,7 @@ AngularでDOMを操作する方法については、[DOM API の使用](guide/co
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   private prevPadding = 0;
   private elementHeight = 0;
@@ -298,7 +296,7 @@ export class UserProfile {
 | `mixedReadWrite`    | デフォルトのフェーズ。レイアウトに影響を与えるプロパティとスタイルを読み書きする必要がある操作に使用します。可能な限り、このフェーズを避け、明示的な `write` フェーズと `read` フェーズを優先します。  |
 | `read`              | このフェーズを使用して、レイアウトに影響を与えるDOMプロパティを読み取ります。                                                                                                                              |
 
-## ライフサイクルインターフェース
+## ライフサイクルインターフェース {#lifecycle-interfaces}
 
 Angularは、各ライフサイクルメソッド用のTypeScriptインターフェースを提供します。
 これらのインターフェースをインポートして `implement` することで、
@@ -318,11 +316,11 @@ export class UserProfile implements OnInit {
 }
 ```
 
-## 実行順序
+## 実行順序 {#execution-order}
 
 次の図は、Angularのライフサイクルフックの実行順序を示しています。
 
-### 初期化中
+### 初期化中 {#during-initialization}
 
 ```mermaid
 graph TD;
@@ -339,7 +337,7 @@ end
 CHANGE--Rendering-->afterNextRender-->afterEveryRender
 ```
 
-### 後続の更新
+### 後続の更新 {#subsequent-updates}
 
 ```mermaid
 graph TD;
@@ -352,7 +350,7 @@ end
 CHANGE--Rendering-->afterEveryRender
 ```
 
-### ディレクティブとの順序付け
+### ディレクティブとの順序付け {#ordering-with-directives}
 
 テンプレートまたは `hostDirectives` プロパティで、コンポーネントと同じ要素に1つ以上のディレクティブを配置する場合、
 フレームワークは単一の要素上のコンポーネントとディレクティブの間で特定のライフサイクルフックの順序を保証しません。
diff --git a/adev-ja/src/content/guide/components/outputs.en.md b/adev-ja/src/content/guide/components/outputs.en.md
index b21550ef9e..e61cfed5dc 100644
--- a/adev-ja/src/content/guide/components/outputs.en.md
+++ b/adev-ja/src/content/guide/components/outputs.en.md
@@ -4,7 +4,7 @@ TIP: This guide assumes you've already read the [Essentials Guide](essentials).
 
 Angular components can define custom events by assigning a property to the `output` function:
 
-```ts {highlight:[3]}
+```ts {highlight:[5]}
 @Component({
   /*...*/
 })
@@ -73,9 +73,7 @@ export class App {
 The `output` function accepts a parameter that lets you specify a different name for the event in a template:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   changed = output({alias: 'valueChanged'});
 }
@@ -134,9 +132,7 @@ original decorator-based `@Output` API remains fully supported.
 You can alternatively define custom events by assigning a property to a new `EventEmitter` and adding the `@Output` decorator:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ExpandablePanel {
   @Output() panelClosed = new EventEmitter<void>();
 }
@@ -149,9 +145,7 @@ You can emit an event by calling the `emit` method on the `EventEmitter`.
 The `@Output` decorator accepts a parameter that lets you specify a different name for the event in a template:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   @Output('valueChanged') changed = new EventEmitter<number>();
 }
diff --git a/adev-ja/src/content/guide/components/outputs.md b/adev-ja/src/content/guide/components/outputs.md
index 4b8599ff55..67a5c8e830 100644
--- a/adev-ja/src/content/guide/components/outputs.md
+++ b/adev-ja/src/content/guide/components/outputs.md
@@ -4,7 +4,7 @@ TIP: このガイドは、[基本概念のガイド](essentials) を既読して
 
 Angularコンポーネントは、`output`関数にプロパティを割り当てることでカスタムイベントを定義できます。
 
-```ts {highlight:[3]}
+```ts {highlight:[5]}
 @Component({
   /*...*/
 })
@@ -33,7 +33,7 @@ Angularでは、`output`関数で初期化されたプロパティを**出力**
 
 `output`関数は、Angularコンパイラにとって特別な意味を持ちます。**`output`は、コンポーネントとディレクティブのプロパティ初期化子でのみ呼び出すことができます。**
 
-## イベントデータの送出
+## イベントデータの送出 {#emitting-event-data}
 
 `emit`を呼び出す際に、イベントデータを渡すことができます。
 
@@ -68,14 +68,12 @@ export class App {
 
 ```
 
-## 出力名のカスタマイズ
+## 出力名のカスタマイズ {#customizing-output-names}
 
 `output`関数は、テンプレートでイベントに異なる名前を指定できるパラメーターを受け入れます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   changed = output({alias: 'valueChanged'});
 }
@@ -89,7 +87,7 @@ export class CustomSlider {
 
 一般的に、コンポーネントの出力のエイリアスは避けるべきですが、この機能は元の名前のエイリアスを保持しながらプロパティの名前を変更する場合や、ネイティブDOMイベントの名前との衝突を避ける場合に役立ちます。
 
-## プログラムによる出力の購読
+## プログラムによる出力の購読 {#subscribing-to-outputs-programmatically}
 
 コンポーネントを動的に作成する場合は、コンポーネントインスタンスから出力イベントをプログラムで購読できます。
 `OutputRef`型には`subscribe`メソッドが含まれています。
@@ -122,11 +120,11 @@ HTMLElementなどのDOM要素のイベントと衝突する出力名を選択す
 
 常に[camelCase](https://en.wikipedia.org/wiki/Camel_case)出力名を使用してください。「on」で始まる出力名は避けてください。
 
-## RxJSを使用したoutputs
+## RxJSを使用したoutputs {#using-outputs-with-rxjs}
 
 outputsとRxJSの相互運用性については、[RxJS interop with component and directive outputs](ecosystem/rxjs-interop/output-interop)を参照してください。
 
-## `@Output`デコレーターを使用した出力の宣言
+## `@Output`デコレーターを使用した出力の宣言 {#declaring-outputs-with-the-output-decorator}
 
 TIP: Angularチームは新規プロジェクトでは`output`関数の使用を推奨していますが、
 元のデコレーターベースの`@Output`APIは引き続き完全にサポートされています。
@@ -134,9 +132,7 @@ TIP: Angularチームは新規プロジェクトでは`output`関数の使用を
 代替として、新しい`EventEmitter`にプロパティを割り当て、`@Output`デコレーターを追加することで、カスタムイベントを定義できます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class ExpandablePanel {
   @Output() panelClosed = new EventEmitter<void>();
 }
@@ -144,14 +140,12 @@ export class ExpandablePanel {
 
 `EventEmitter`の`emit`メソッドを呼び出すことで、イベントを発生させることができます。
 
-### `@Output`デコレーターを使用したエイリアス
+### `@Output`デコレーターを使用したエイリアス {#aliases-with-the-output-decorator}
 
 `@Output`デコレーターは、テンプレートでイベントに異なる名前を指定できるパラメーターを受け入れます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomSlider {
   @Output('valueChanged') changed = new EventEmitter<number>();
 }
@@ -163,7 +157,7 @@ export class CustomSlider {
 
 このエイリアスは、TypeScriptコードでのプロパティの使用には影響しません。
 
-## `@Component`デコレーターでの出力の指定
+## `@Component`デコレーターでの出力の指定 {#specify-outputs-in-the-component-decorator}
 
 `@Output`デコレーターに加えて、`@Component`デコレーターの`outputs`プロパティを使用して、コンポーネントの出力を指定できます。これは、コンポーネントが基底クラスからプロパティを継承する場合に役立ちます。
 
diff --git a/adev-ja/src/content/guide/components/programmatic-rendering.md b/adev-ja/src/content/guide/components/programmatic-rendering.md
index 3b29f1e2d2..48d196785e 100644
--- a/adev-ja/src/content/guide/components/programmatic-rendering.md
+++ b/adev-ja/src/content/guide/components/programmatic-rendering.md
@@ -14,7 +14,7 @@ HELPFUL: 遅延読み込みのユースケース(たとえば、重いコンポ
 自動的に別のJavaScriptチャンクに抽出され、設定されたトリガーに基づいて必要な場合にのみ
 読み込まれます。
 
-## NgComponentOutletの使用
+## NgComponentOutletの使用 {#using-ngcomponentoutlet}
 
 `NgComponentOutlet`は、テンプレートで指定されたコンポーネントを動的にレンダリングする
 構造ディレクティブです。
@@ -41,7 +41,7 @@ export class CustomDialog {
 }
 ```
 
-### 動的にレンダリングされたコンポーネントへのインプットの渡し方
+### 動的にレンダリングされたコンポーネントへのインプットの渡し方 {#passing-inputs-to-dynamically-rendered-components}
 
 `ngComponentOutletInputs`プロパティを使用して、動的にレンダリングされたコンポーネントにインプットを渡すことができます。このプロパティは、キーがインプット名で値がインプット値であるオブジェクトを受け入れます。
 
@@ -73,7 +73,7 @@ export class ProfileView {
 
 インプットは`greetingInputs`シグナルが変更されるたびに更新され、動的コンポーネントを親の状態と同期させます。
 
-### コンテンツプロジェクションの提供
+### コンテンツプロジェクションの提供 {#providing-content-projection}
 
 `ngComponentOutletContent`を使用して、動的にレンダリングされたコンポーネントにプロジェクトされたコンテンツを渡すことができます。これは、動的コンポーネントが`<ng-content>`を使用してコンテンツを表示する場合に便利です。
 
@@ -117,7 +117,7 @@ export class DynamicCard {
 
 NOTE: Hydrationは、ネイティブDOM APIで作成されたDOMノードのプロジェクションをサポートしていません。これにより[NG0503エラー](/errors/NG0503)が発生します。Angular APIを使用してプロジェクトされたコンテンツを作成するか、コンポーネントに`ngSkipHydration`を追加してください。
 
-### インジェクターの提供
+### インジェクターの提供 {#providing-injectors}
 
 `ngComponentOutletInjector`を使用して、動的に作成されたコンポーネントにカスタムインジェクターを提供できます。これは、コンポーネント固有のサービスや設定を提供する場合に便利です。
 
@@ -148,7 +148,7 @@ export class DynamicPanel {
 }
 ```
 
-### コンポーネントインスタンスへのアクセス
+### コンポーネントインスタンスへのアクセス {#accessing-the-component-instance}
 
 ディレクティブの`exportAs`機能を使用して、動的に作成されたコンポーネントのインスタンスにアクセスできます。
 
@@ -182,7 +182,7 @@ NOTE: `componentInstance`プロパティは、コンポーネントがレンダ
 ディレクティブの機能の詳細については、[NgComponentOutlet APIリファレンス](api/common/NgComponentOutlet)を
 参照してください。
 
-## ViewContainerRefの使用
+## ViewContainerRefの使用 {#using-viewcontainerref}
 
 **ビューコンテナ**は、Angularのコンポーネントツリー内のノードで、コンテンツを含むことができます。任意のコンポーネント
 またはディレクティブは`ViewContainerRef`を注入して、DOM内のそのコンポーネントまたはディレクティブの位置に対応する
@@ -235,7 +235,7 @@ export class InnerItem {
 </outer-container>
 ```
 
-## コンポーネントの遅延読み込み
+## コンポーネントの遅延読み込み {#lazy-loading-components}
 
 HELPFUL: コンポーネントを遅延読み込みしたい場合は、代わりに組み込みの[`@defer`機能](/guide/templates/defer)
 の使用を検討してください。
@@ -274,13 +274,13 @@ export class AdminSettings {
 
 上記の例では、ボタンクリックを受け取ると`AdvancedSettings`を読み込んで表示します。
 
-## 作成時のインプット、アウトプットのバインディングとホストディレクティブの設定
+## 作成時のインプット、アウトプットのバインディングとホストディレクティブの設定 {#binding-inputs-outputs-and-setting-host-directives-at-creation}
 
 コンポーネントを動的に作成する場合、手動でインプットを設定し、アウトプットを購読するのはエラーが発生しやすくなります。コンポーネントがインスタンス化された後にバインディングを接続するためだけに、余分なコードを記述する必要があることがよくあります。
 
 これを簡素化するために、`createComponent`と`ViewContainerRef.createComponent`の両方が、`inputBinding()`、`outputBinding()`、`twoWayBinding()`などのヘルパーを使用した`bindings`配列を渡して、インプットとアウトプットを事前に設定できるようにサポートしています。また、ホストディレクティブを適用するための`directives`配列を指定できます。これにより、単一の宣言的な呼び出しで、テンプレートのようなバインディングでコンポーネントをプログラム的に作成できます。
 
-### `ViewContainerRef.createComponent`を使用したホストビュー
+### `ViewContainerRef.createComponent`を使用したホストビュー {#host-view-using-viewcontainerrefcreatecomponent}
 
 `ViewContainerRef.createComponent`はコンポーネントを作成し、そのホストビューとホスト要素をコンテナのビュー階層内のコンテナの位置に自動的に挿入します。動的コンポーネントがコンテナの論理的および視覚的な構造の一部になる場合(たとえば、リストアイテムやインラインUIの追加)に使用します。
 
@@ -348,7 +348,7 @@ export class Host {
 
 上記の例では、動的な**AppWarning**は、`canClose`インプットがリアクティブシグナルにバインドされ、`isExpanded`状態で双方向バインディングが行われ、`close`のアウトプットリスナーが設定されて作成されます。`FocusTrap`と`ThemeDirective`は、`directives`を介してホスト要素にアタッチされます。
 
-### `createComponent` + `hostElement`で`document.body`にアタッチされたポップアップ
+### `createComponent` + `hostElement`で`document.body`にアタッチされたポップアップ {#popup-attached-to-documentbody-with-createcomponent--hostelement}
 
 現在のビュー階層の外側にレンダリングする場合(オーバーレイなど)に使用します。提供された`hostElement`がDOM内のコンポーネントのホストになるため、Angularはセレクターに一致する新しい要素を作成しません。**bindings**を直接設定できます。
 
diff --git a/adev-ja/src/content/guide/components/queries.en.md b/adev-ja/src/content/guide/components/queries.en.md
index b76607661f..8ce4e253ac 100644
--- a/adev-ja/src/content/guide/components/queries.en.md
+++ b/adev-ja/src/content/guide/components/queries.en.md
@@ -147,9 +147,7 @@ If a child query (`viewChild` or `contentChild`) does not find a result, its val
 In some cases, especially with `viewChild`, you know with certainty that a specific child is always available. In other cases, you may want to strictly enforce that a specific child is present. For these cases, you can use a _required query_.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);
   body = contentChild.required(CustomCardBody);
@@ -199,9 +197,7 @@ const SUB_ITEM = new InjectionToken<string>('sub-item');
 })
 export class SpecialItem {}
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomList {
   subItemType = contentChild(SUB_ITEM);
 }
@@ -218,9 +214,7 @@ All query functions accept an options object as a second parameter. These option
 By default, the query locator indicates both the element you're searching for and the value retrieved. You can alternatively specify the `read` option to retrieve a different value from the element matched by the locator.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomExpando {
   toggle = contentChild(ExpandoContent, {read: TemplateRef});
 }
diff --git a/adev-ja/src/content/guide/components/queries.md b/adev-ja/src/content/guide/components/queries.md
index 1b233b4728..e1544875a6 100644
--- a/adev-ja/src/content/guide/components/queries.md
+++ b/adev-ja/src/content/guide/components/queries.md
@@ -140,16 +140,14 @@ export class UserProfile {}
 
 **クエリはコンポーネントの境界を貫通することはありません。**コンテンツクエリは、コンポーネント自体と同じテンプレートからの結果のみを取得できます。
 
-## 必須クエリ
+## 必須クエリ {#required-queries}
 
 子クエリ（`viewChild`または`contentChild`）が結果を見つけられない場合、その値は`undefined`になります。これは、ターゲット要素が`@if`や`@for`などの制御フロー文によって非表示になっている場合に発生する可能性があります。このため、子クエリは`undefined`を含む値型を持つシグナルを返します。
 
 場合によっては、特に`viewChild`を使用する場合、特定の子が常に利用可能であることが確実な場合があります。他の場合では、特定の子が存在することを厳格に適用したい場合があります。これらの場合、_必須クエリ_を使用できます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);
   body = contentChild.required(CustomCardBody);
@@ -158,7 +156,7 @@ export class CustomCard {
 
 必須クエリが一致する結果を見つけられない場合、Angularはエラーを報告します。これは結果が利用可能であることを保証するため、必須クエリは自動的にシグナルの値型に`undefined`を含めません。
 
-## クエリロケーター
+## クエリロケーター {#query-locators}
 
 各クエリデコレーターの最初の引数は、その**ロケーター**です。
 
@@ -184,7 +182,7 @@ export class ActionBar {
 
 Angularは、CSSセレクターをクエリロケーターとしてサポートしていません。
 
-### クエリとインジェクターツリー
+### クエリとインジェクターツリー {#queries-and-the-injector-tree}
 
 TIP: プロバイダーとAngularのインジェクションツリーについては、[依存性の注入](guide/di)を参照してください。
 
@@ -199,7 +197,7 @@ const SUB_ITEM = new InjectionToken<string>('sub-item');
 })
 export class SpecialItem {}
 
-@Component({/*...*/})
+@Component(/* ... */)
 export class CustomList {
   subItemType = contentChild(SUB_ITEM);
 }
@@ -207,18 +205,16 @@ export class CustomList {
 
 上記の例では、ロケーターとして`InjectionToken`を使用していますが、任意の`ProviderToken`を使用して特定の要素を見つけることができます。
 
-## クエリオプション
+## クエリオプション {#query-options}
 
 すべてのクエリ関数は、第2引数としてオプションオブジェクトを受け取ります。これらのオプションは、クエリが結果を見つける方法を制御します。
 
-### 要素のインジェクターからの特定の値の読み取り
+### 要素のインジェクターからの特定の値の読み取り {#reading-specific-values-from-an-elements-injector}
 
 デフォルトでは、クエリロケーターは、検索対象の要素と取得される値の両方を示します。代わりに、`read`オプションを指定して、ロケーターによって一致した要素から別の値を取得できます。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class CustomExpando {
   toggle = contentChild(ExpandoContent, {read: TemplateRef});
 }
@@ -229,7 +225,7 @@ export class CustomExpando {
 
 開発者は、`read`を使用して`ElementRef`と`TemplateRef`を取得することが最も一般的です。
 
-### コンテンツの子孫
+### コンテンツの子孫 {#content-descendants}
 
 デフォルトでは、`contentChildren`クエリはコンポーネントの直接の子要素のみを検索し、子孫要素にはトラバースしません。
 一方、`contentChild`クエリはデフォルトで子孫要素も検索します。
@@ -261,7 +257,7 @@ export class UserProfile { }
 
 ビュークエリにはこのオプションはありません。これは、常に子孫をトラバースするためです。
 
-## デコレーターベースのクエリ
+## デコレーターベースのクエリ {#decorator-based-queries}
 
 TIP: Angularチームは新規プロジェクトにはシグナルベースのクエリ関数の使用を推奨していますが、
 元のデコレーターベースのクエリAPIは引き続き完全にサポートされています。
@@ -335,10 +331,10 @@ export class CustomCard {
 
 `@ContentChild`デコレーターを使用して、単一の結果をクエリできます。
 
-```angular-ts {highlight: [15, 16, 17, 18, 19, 26]}
+```angular-ts {highlight: [14, 16, 17, 18]}
 @Component({
   selector: 'custom-toggle',
-  /* ... */
+  /*...*/
 })
 export class CustomToggle {
   text: string;
@@ -346,10 +342,9 @@ export class CustomToggle {
 
 @Component({
   selector: 'custom-expando',
-  /* ... */
+  /*...*/
 })
-
-export class CustomExpando {
+export class CustomExpando implements AfterContentInit {
   @ContentChild(CustomToggle) toggle: CustomToggle;
 
   ngAfterContentInit() {
@@ -363,9 +358,9 @@ export class CustomExpando {
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
     </custom-expando>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 この例では、`CustomExpando`コンポーネントは子`CustomToggle`をクエリし、`ngAfterContentInit`で結果にアクセスしています。
@@ -376,10 +371,10 @@ Angularは、アプリケーションの状態が変化するにつれて`@Conte
 
 `@ContentChildren`デコレーターを使用して、複数の結果をクエリできます。
 
-```angular-ts {highlight: [15, 17, 18, 19, 20, 21]}
+```angular-ts {highlight: [14, 16, 17, 18, 19, 20]}
 @Component({
   selector: 'custom-menu-item',
-  /* ... */
+  /*...*/
 })
 export class CustomMenuItem {
   text: string;
@@ -387,14 +382,13 @@ export class CustomMenuItem {
 
 @Component({
   selector: 'custom-menu',
-  /* ... */
+  /*...*/
 })
-
-export class CustomMenu {
+export class CustomMenu implements AfterContentInit {
   @ContentChildren(CustomMenuItem) items: QueryList<CustomMenuItem>;
 
   ngAfterContentInit() {
-    this.items.forEach(item => {
+    this.items.forEach((item) => {
       console.log(item.text);
     });
   }
@@ -407,18 +401,18 @@ export class CustomMenu {
       <custom-menu-item>Cheese</custom-menu-item>
       <custom-menu-item>Tomato</custom-menu-item>
     </custom-menu>
-  `
+  `,
 })
-export class UserProfile { }
+export class UserProfile {}
 ```
 
 `@ContentChildren`は、クエリ結果を含む`QueryList`オブジェクトを作成します。`changes`プロパティを使用して、時間の経過とともにクエリ結果の変更を購読できます。
 
-### デコレーターベースのクエリオプション
+### デコレーターベースのクエリオプション {#decorator-based-query-options}
 
 すべてのクエリデコレーターは、第2引数としてオプションオブジェクトを受け取ります。これらのオプションは、シグナルベースのクエリと同じように動作しますが、下記で説明する点を除きます。
 
-### 静的クエリ
+### 静的クエリ {#static-queries}
 
 `@ViewChild`と`@ContentChild`デコレーターは、`static`オプションを受け取ります。
 
@@ -442,7 +436,7 @@ export class CustomCard {
 
 `static`オプションは、`@ViewChildren`と`@ContentChildren`クエリでは使用できません。
 
-### QueryListの使用
+### QueryListの使用 {#using-querylist}
 
 `@ViewChildren`と`@ContentChildren`はどちらも、結果のリストを含む`QueryList`オブジェクトを提供します。
 
@@ -450,7 +444,7 @@ export class CustomCard {
 
 `changes`プロパティを購読して、結果が変更されるたびに何かを実行できます。
 
-## 一般的なクエリの落とし穴
+## 一般的なクエリの落とし穴 {#common-query-pitfalls}
 
 クエリを使用する際、一般的な落とし穴により、コードの理解と保守が難しくなる可能性があります。
 
diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.en.md b/adev-ja/src/content/guide/di/creating-and-using-services.en.md
index 4ea9f6af5d..10034ca916 100644
--- a/adev-ja/src/content/guide/di/creating-and-using-services.en.md
+++ b/adev-ja/src/content/guide/di/creating-and-using-services.en.md
@@ -35,38 +35,26 @@ export class BasicDataStore {
 
 ## How services become available
 
-When you use `@Injectable({ providedIn: 'root' })` in your service, Angular:
+Services are provisioned at the root level by default. When a service is provided globally, Angular guarantees three main benefits:
 
-- **Creates a single instance** (a singleton) for the entire application
-- **Makes it available throughout your application** without additional configuration
-- **Enables tree-shaking** so Angular only includes the service in your JavaScript bundle if you actually use it
+- **Singleton Instance:** Creates a single, shared instance for the entire application.
+- **Global Availability:** Automatically accessible anywhere without manual provider registration.
+- **Tree-shakability:** Ensures the service is excluded from the final production bundle if your code never explicitly uses it.
 
-This is the recommended approach for most services.
+### Using the `@Service` vs `@Injectable` decorator
 
-## Using the `@Service` decorator
+The `@Service` decorator serves as a modern, ergonomic shorthand for the traditional `@Injectable({ providedIn: 'root' })` syntax.
 
-For the common case of a singleton service available throughout your application, Angular provides the `@Service` decorator as a more ergonomic alternative to `@Injectable({providedIn: 'root'})`.
+Use this quick reference to decide which decorator fits your scenario:
 
-The earlier `BasicDataStore` example can be rewritten with `@Service`:
-
-```ts {header: "src/app/basic-data-store.ts"}
-import {Service} from '@angular/core';
-
-@Service()
-export class BasicDataStore {
-  private data: string[] = [];
-
-  addData(item: string): void {
-    this.data.push(item);
-  }
-
-  getData(): string[] {
-    return [...this.data];
-  }
-}
-```
-
-This behaves the same as the `@Injectable({providedIn: 'root'})` version above: Angular creates a single instance, makes it available everywhere, and tree-shakes it from the bundle if it is never injected.
+| Feature / Requirement                         | `@Service` | `@Injectable`                           |
+| --------------------------------------------- | ---------- | --------------------------------------- |
+| **`inject()` function support**               | Yes        | Yes                                     |
+| **Constructor-based DI**                      | ❌ No      | Yes                                     |
+| **Implicit root singleton provider**          | Yes        | ❌ No (requires `{providedIn: 'root'}`) |
+| **Advanced provider keys (`useClass`, etc.)** | ❌ No      | Yes                                     |
+| **Custom initialization factories**           | Yes        | Yes                                     |
+| **Non-root scopes (`platform`, etc.)**        | ❌ No      | Yes                                     |
 
 ### Replacing the implementation with a factory
 
diff --git a/adev-ja/src/content/guide/di/creating-and-using-services.md b/adev-ja/src/content/guide/di/creating-and-using-services.md
index bba257e9b5..9b8a69f408 100644
--- a/adev-ja/src/content/guide/di/creating-and-using-services.md
+++ b/adev-ja/src/content/guide/di/creating-and-using-services.md
@@ -35,38 +35,26 @@ export class BasicDataStore {
 
 ## サービスが利用可能になる仕組み {#how-services-become-available}
 
-サービスで`@Injectable({ providedIn: 'root' })`を使用すると、Angularは次のことを行います:
+デフォルトでは、サービスはルートレベルでプロビジョニングされます。サービスをグローバルに提供すると、Angularは主に3つのメリットを保証します。
 
-- **アプリケーション全体で単一のインスタンス** (シングルトン) を作成します
-- **アプリケーション全体で利用可能**にします (追加の設定は不要です)
-- **ツリーシェイキングを有効にし**、実際に使用される場合にのみAngularがJavaScriptバンドルにサービスを含めるようにします
+- **シングルトンインスタンス:** アプリケーション全体で共有される単一のインスタンスを作成します。
+- **グローバルな可用性:** プロバイダーを手動で登録しなくても、どこからでも自動的にアクセスできます。
+- **ツリーシェイク可能性:** コードがそのサービスを明示的に使用しない場合、本番用の最終バンドルから確実に除外されます。
 
-これは、ほとんどのサービスで推奨されるアプローチです。
+### `@Service`デコレーターと`@Injectable`デコレーターの使い分け {#using-the-service-vs-injectable-decorator}
 
-## Using the `@Service` decorator {#using-the-service-decorator}
+`@Service`デコレーターは、従来の`@Injectable({ providedIn: 'root' })`構文に代わる、モダンで扱いやすい短縮形です。
 
-For the common case of a singleton service available throughout your application, Angular provides the `@Service` decorator as a more ergonomic alternative to `@Injectable({providedIn: 'root'})`.
+どちらのデコレーターがシナリオに適しているかを判断するには、次のクイックリファレンスを使用してください。
 
-The earlier `BasicDataStore` example can be rewritten with `@Service`:
-
-```ts {header: "src/app/basic-data-store.ts"}
-import {Service} from '@angular/core';
-
-@Service()
-export class BasicDataStore {
-  private data: string[] = [];
-
-  addData(item: string): void {
-    this.data.push(item);
-  }
-
-  getData(): string[] {
-    return [...this.data];
-  }
-}
-```
-
-This behaves the same as the `@Injectable({providedIn: 'root'})` version above: Angular creates a single instance, makes it available everywhere, and tree-shakes it from the bundle if it is never injected.
+| 機能 / 要件                                     | `@Service` | `@Injectable`                           |
+| ------------------------------------------------ | ---------- | ---------------------------------------- |
+| **`inject()`関数のサポート**                     | Yes        | Yes                                      |
+| **コンストラクターベースのDI**                   | ❌ No      | Yes                                      |
+| **暗黙的なルートシングルトンプロバイダー**       | Yes        | ❌ No (`{providedIn: 'root'}`が必要)      |
+| **高度なプロバイダーキー (`useClass`など)**      | ❌ No      | Yes                                      |
+| **カスタム初期化ファクトリー**                   | Yes        | Yes                                      |
+| **ルート以外のスコープ (`platform`など)**        | ❌ No      | Yes                                      |
 
 ### Replacing the implementation with a factory {#replacing-the-implementation-with-a-factory}
 
diff --git a/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
index e41812c9c9..6d629f2823 100644
--- a/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
+++ b/adev-ja/src/content/guide/di/debugging-and-troubleshooting-di.md
@@ -440,7 +440,7 @@ TIP: Always export tokens from a shared file and import them everywhere they're
 
 When you define a TypeScript interface, it only exists during compilation for type checking. TypeScript erases all interface definitions when it compiles to JavaScript, so at runtime there's no object for Angular to use as an injection token. If you try to inject an interface type, Angular has nothing to match against the provider configuration.
 
-```angular-ts {avoid, header: 'Can't inject interface'}
+```angular-ts {avoid, header: "Can't inject interface"}
 interface UserConfig {
   name: string;
   email: string;
diff --git a/adev-ja/src/content/guide/di/defining-dependency-providers.md b/adev-ja/src/content/guide/di/defining-dependency-providers.md
index 0de69a6f02..580ba7b2a6 100644
--- a/adev-ja/src/content/guide/di/defining-dependency-providers.md
+++ b/adev-ja/src/content/guide/di/defining-dependency-providers.md
@@ -2,7 +2,7 @@
 
 Angular provides two ways to make services available for injection:
 
-1. **Automatic provision** - Using `providedIn` in the `@Injectable` decorator, the [`@Service`](guide/di/creating-and-using-services#using-the-service-decorator) decorator, or by providing a factory in the `InjectionToken` configuration
+1. **Automatic provision** - Using `providedIn` in the `@Injectable` decorator, the [`@Service`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator) decorator, or by providing a factory in the `InjectionToken` configuration
 2. **Manual provision** - Using the `providers` array in components, directives, routes, or application config
 
 In the [previous guide](/guide/di/creating-and-using-services), you learned how to create services using `providedIn: 'root'`, which handles most common use cases. This guide explores additional patterns for both automatic and manual provider configuration.
diff --git a/adev-ja/src/content/guide/di/lazy-loading-services.en.md b/adev-ja/src/content/guide/di/lazy-loading-services.en.md
index 3e5dbd4128..8425033f27 100644
--- a/adev-ja/src/content/guide/di/lazy-loading-services.en.md
+++ b/adev-ja/src/content/guide/di/lazy-loading-services.en.md
@@ -1,6 +1,6 @@
 # Lazy loading services
 
-IMPORTANT: For lazy loading to work, the service you load must be auto-provided. Decorate it with either `@Injectable({providedIn: 'root'})` or [`@Service()`](guide/di/creating-and-using-services#using-the-service-decorator). Without auto-provisioning, Angular has no way to construct the service after it loads.
+IMPORTANT: For lazy loading to work, the service you load must be auto-provided. Decorate it with either `@Injectable({providedIn: 'root'})` or [`@Service()`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator). Without auto-provisioning, Angular has no way to construct the service after it loads.
 
 Angular's `injectAsync` function lets you load a service on demand, only when it's actually needed. This is useful when a service depends on a large library or rarely used feature, and you don't want to pay for it on the initial page load.
 
diff --git a/adev-ja/src/content/guide/di/lazy-loading-services.md b/adev-ja/src/content/guide/di/lazy-loading-services.md
index ead9a59be3..79f64f79db 100644
--- a/adev-ja/src/content/guide/di/lazy-loading-services.md
+++ b/adev-ja/src/content/guide/di/lazy-loading-services.md
@@ -1,6 +1,6 @@
 # サービスの遅延読み込み
 
-IMPORTANT: 遅延読み込みを機能させるには、読み込むサービスが自動提供されている必要があります。`@Injectable({providedIn: 'root'})`または[`@Service()`](guide/di/creating-and-using-services#using-the-service-decorator)のいずれかで装飾してください。自動提供がない場合、Angularは読み込み後にサービスを構築する方法がありません。
+IMPORTANT: 遅延読み込みを機能させるには、読み込むサービスが自動提供されている必要があります。`@Injectable({providedIn: 'root'})`または[`@Service()`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator)のいずれかで装飾してください。自動提供がない場合、Angularは読み込み後にサービスを構築する方法がありません。
 
 Angularの`injectAsync`関数を使用すると、実際に必要なときにのみサービスを読み込むことができます。これは、サービスが大規模なライブラリやめったに使用されない機能に依存しており、初期ページ読み込み時にそのコストを払いたくない場合に便利です。
 
diff --git a/adev-ja/src/content/guide/di/overview.en.md b/adev-ja/src/content/guide/di/overview.en.md
index 313976fc8b..7142858bb1 100644
--- a/adev-ja/src/content/guide/di/overview.en.md
+++ b/adev-ja/src/content/guide/di/overview.en.md
@@ -62,7 +62,7 @@ export class AnalyticsLogger {
 
 NOTE: The `@Service` makes this service available throughout your entire application as a singleton. This is the recommended approach for most services.
 
-HELPFUL: The [`@Service`](guide/di/creating-and-using-services#using-the-service-decorator) decorator is an ergonomic shorthand for `@Injectable({providedIn: 'root'})`.
+HELPFUL: The [`@Service`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator) decorator is an ergonomic shorthand for `@Injectable({providedIn: 'root'})`.
 
 ## Injecting dependencies with `inject()`
 
@@ -96,9 +96,7 @@ export class Navbar {
 You can inject dependencies during construction of a component, directive, or service. The call to [`inject`](/api/core/inject) can appear in either the `constructor` or in a field initializer. Here are some common examples:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class MyComponent {
   // ✅ In class field initializer
   private service = inject(MyService);
diff --git a/adev-ja/src/content/guide/di/overview.md b/adev-ja/src/content/guide/di/overview.md
index d3d6634d01..26ca06a5d3 100644
--- a/adev-ja/src/content/guide/di/overview.md
+++ b/adev-ja/src/content/guide/di/overview.md
@@ -62,7 +62,7 @@ export class AnalyticsLogger {
 
 NOTE: `@Service` により、このサービスはシングルトンとしてアプリケーション全体で利用可能になります。これはほとんどのサービスで推奨されるアプローチです。
 
-HELPFUL: [`@Service`](guide/di/creating-and-using-services#using-the-service-decorator) デコレーターは、`@Injectable({providedIn: 'root'})` の人間工学的な短縮形です。
+HELPFUL: [`@Service`](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator) デコレーターは、`@Injectable({providedIn: 'root'})` の人間工学的な短縮形です。
 
 ## `inject()` による依存性の注入 {#injecting-dependencies-with-inject}
 
@@ -96,9 +96,7 @@ export class Navbar {
 コンポーネント、ディレクティブ、またはサービスの構築中に依存関係を注入できます。[`inject`](/api/core/inject) の呼び出しは、`constructor` またはフィールドイニシャライザーのいずれかに配置できます。一般的な例をいくつか示します。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class MyComponent {
   // ✅ クラスフィールドイニシャライザー内
   private service = inject(MyService);
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.en.md b/adev-ja/src/content/guide/directives/attribute-directives.en.md
deleted file mode 100644
index d6ac24320b..0000000000
--- a/adev-ja/src/content/guide/directives/attribute-directives.en.md
+++ /dev/null
@@ -1,159 +0,0 @@
-# Attribute directives
-
-Change the appearance or behavior of DOM elements and Angular components with attribute directives.
-
-## Building an attribute directive
-
-This section walks you through creating a highlight directive that sets the background color of the host element to yellow.
-
-1. To create a directive, use the CLI command [`ng generate directive`](tools/cli/schematics).
-
-   ```shell
-   ng generate directive highlight
-   ```
-
-   The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
-
-   ```angular-ts
-   import {Directive} from '@angular/core';
-
-   @Directive({
-     selector: '[appHighlight]',
-   })
-   export class HighlightDirective {}
-   ```
-
-   The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
-
-1. Import `ElementRef` and `inject` from `@angular/core`.
-   `ElementRef` grants direct access to the host DOM element through its `nativeElement` property.
-
-1. Use [`inject`](guide/di) to obtain a reference to the host DOM element, the element to which you apply `appHighlight`.
-
-1. Add logic to the `HighlightDirective` class that sets the background to yellow.
-
-   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>
-
-IMPORTANT: Directives _do not_ support namespaces.
-
-```angular-html {avoid}
-<p app:Highlight>This is invalid</p>
-```
-
-## Applying an attribute directive
-
-To use the `HighlightDirective`, add a `<p>` element to the HTML template with the directive as an attribute.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" region="applied"/>
-
-Angular creates an instance of the `HighlightDirective` class, which uses `inject(ElementRef)` to get a reference to the `<p>` element and set its background style to yellow.
-
-## Handling user events
-
-This section shows you how to detect when a user mouses into or out of the element and to respond by setting or clearing the highlight color.
-
-1. Configure host event bindings using the `host` property in the `@Directive()` decorator.
-
-   <docs-code header="src/app/highlight.directive.ts (decorator)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="decorator"/>
-
-1. Add two event handler methods, and map host element events to them via the `host` property.
-
-   <docs-code header="highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="mouse-methods"/>
-
-Subscribe to events of the DOM element that hosts an attribute directive (the `<p>` in this case) by configuring event listeners on the directive's [`host` property](guide/components/host-elements#binding-to-the-host-element).
-
-HELPFUL: The handlers delegate to a helper method, `highlight()`, that sets the color on the host DOM element, `el`.
-
-The complete directive is as follows:
-
-<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
-
-The background color appears when the pointer hovers over the paragraph element and disappears as the pointer moves out.
-
-<img alt="Second Highlight" src="assets/images/guide/attribute-directives/highlight-directive-anim.gif">
-
-## Passing values into an attribute directive
-
-This section walks you through setting the highlight color while applying the `HighlightDirective`.
-
-1. In `highlight.directive.ts`, import `input` from `@angular/core`.
-
-   <docs-code header="highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="imports"/>
-
-1. Add an `appHighlight` `input` property.
-
-   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="input"/>
-
-   The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding.
-
-1. In `app.component.ts`, add a `color` property to the `AppComponent`.
-
-   <docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" region="class"/>
-
-1. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`.
-
-   <docs-code header="app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="color"/>
-
-   The `[appHighlight]` attribute binding performs two tasks:
-   - Applies the highlighting directive to the `<p>` element
-   - Sets the directive's highlight color with a property binding
-
-### Setting the value with user input
-
-This section guides you through adding radio buttons to bind your color choice to the `appHighlight` directive.
-
-1. Add markup to `app.component.html` for choosing a color as follows:
-
-   <docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="v2"/>
-
-2. Revise the `AppComponent.color` so that it has no initial value.
-
-   <docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" region="class"/>
-
-3. In `highlight.directive.ts`, revise `onMouseEnter` method so that it first tries to highlight with `appHighlight` and falls back to `red` if `appHighlight` is `undefined`.
-   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="mouse-enter"/>
-
-4. Serve your application to verify that the user can choose the color with the radio buttons.
-
-   <img alt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects" src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
-
-## Binding to a second property
-
-This section guides you through configuring your application so the developer can set the default color.
-
-1. Add a second `input()` property to `HighlightDirective` called `defaultColor`.
-
-   <docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="defaultColor"/>
-
-2. Revise the directive's `onMouseEnter` so that it first tries to highlight with the `appHighlight`, then with the `defaultColor`, and falls back to `red` if both properties are `undefined`.
-
-   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>
-
-3. To bind to the `AppComponent.color` and fall back to "violet" as the default color, add the following HTML.
-   In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because the value is a static string, not a dynamic expression.
-
-   <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
-
-   As with components, you can add multiple directive property bindings to a host element.
-
-The default color is red if there is no default color binding.
-When the user chooses a color the selected color becomes the active highlight color.
-
-<img alt="Animated gif of final highlight directive that shows red color with no binding and violet with the default color set. When user selects color, the selection takes precedence." src="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif">
-
-## Deactivating Angular processing with `NgNonBindable`
-
-To prevent expression evaluation in the browser, add `ngNonBindable` to the host element.
-`ngNonBindable` deactivates interpolation, directives, and binding in templates.
-
-In the following example, the expression `{{ 1 + 1 }}` renders just as it does in your code editor, and does not display `2`.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable"/>
-
-Applying `ngNonBindable` to an element stops binding for that element's child elements.
-However, `ngNonBindable` still lets directives work on the element where you apply `ngNonBindable`.
-In the following example, the `appHighlight` directive is still active but Angular does not evaluate the expression `{{ 1 + 1 }}`.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable-with-directive"/>
-
-If you apply `ngNonBindable` to a parent element, Angular disables interpolation and binding of any sort, such as property binding or event binding, for the element's children.
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.md b/adev-ja/src/content/guide/directives/attribute-directives.md
index 35e3782c7a..ad50cc276f 100644
--- a/adev-ja/src/content/guide/directives/attribute-directives.md
+++ b/adev-ja/src/content/guide/directives/attribute-directives.md
@@ -1,159 +1,102 @@
-# 属性ディレクティブ
+# Attribute directives
 
-属性ディレクティブを使用して、DOM要素とAngularコンポーネントの外観や動作を変更します。
+Attribute directives change the appearance or behavior of DOM elements and Angular components.
 
-## 属性ディレクティブの作成
+## Use template bindings for one-off behavior
 
-このセクションでは、ホスト要素の背景色を黄色に設定するハイライトディレクティブを作成する方法について説明します。
+Angular's template syntax already covers changing a single element's classes, styles, properties, and events:
 
-1. ディレクティブを作成するには、CLIコマンド[`ng generate directive`](tools/cli/schematics)を使用します。
+- [Class and style bindings](guide/templates/binding#css-class-and-style-property-bindings) add and remove CSS classes and inline styles.
+- [Property and attribute bindings](guide/templates/binding) set DOM properties and HTML attributes.
+- [Event listeners](guide/templates/event-listeners) respond to user interaction.
 
-   ```shell
-   ng generate directive highlight
-   ```
+Attribute directives are useful when you want to package this kind of behavior into a reusable unit that you can apply to any element or component.
 
-   CLIは`src/app/highlight.directive.ts`と、対応するテストファイル`src/app/highlight.directive.spec.ts`を作成します。
+## Building an attribute directive
 
-   ```angular-ts
-   import {Directive} from '@angular/core';
+A custom attribute directive is a JavaScript class with the `@Directive()` decorator. The decorator's `selector` defines the attribute that applies the directive. The square brackets make this an attribute selector, so the directive matches elements that carry the attribute. By convention, use a prefix such as `app` to avoid naming collisions:
 
-   @Directive({
-     selector: '[appHighlight]',
-   })
-   export class HighlightDirective {}
-   ```
+```ts
+import {Directive} from '@angular/core';
 
-   `@Directive()`デコレーターの構成プロパティは、ディレクティブのCSS属性セレクター`[appHighlight]`を指定します。
-
-1. `@angular/core`から`ElementRef`と`inject`をインポートします。
-   `ElementRef`は、`nativeElement`プロパティを通じてホストDOM要素への直接アクセスを提供します。
+@Directive({
+  selector: '[appHighlight]',
+})
+export class HighlightDirective {}
+```
 
-1. [`inject`](guide/di)を使用して、`appHighlight`を適用する要素であるホストDOM要素への参照を取得します。
+HELPFUL: The CLI command [`ng generate directive`](tools/cli/schematics) scaffolds a directive along with its test file.
 
-1. 背景を黄色に設定するロジックを`HighlightDirective`クラスに追加します。
+A directive can change its host declaratively through host bindings or imperatively through a reference to the host element. This example [injects](guide/di) [`ElementRef`](api/core/ElementRef) and accesses the element through its `nativeElement` property to set the background to yellow:
 
-   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>
 
-IMPORTANT: ディレクティブは_ネームスペース_をサポートしていません。
+IMPORTANT: Directives _do not_ support namespaces.
 
 ```angular-html {avoid}
 <p app:Highlight>This is invalid</p>
 ```
 
-## 属性ディレクティブの適用
+## Applying an attribute directive
 
-`HighlightDirective`を使用するには、ディレクティブを属性として持つ`<p>`要素をHTMLテンプレートに追加します。
+To apply the directive, add its selector as an attribute on an element:
 
 <docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" region="applied"/>
 
-Angularは`HighlightDirective`クラスのインスタンスを作成し、`inject(ElementRef)`を使用して`<p>`要素への参照を取得し、その背景スタイルを黄色に設定します。
-
-## ユーザーイベントの処理
-
-このセクションでは、ユーザーが要素内または要素外にマウスを移動したときに検出する方法と、ハイライトカラーを設定またはクリアして応答する方法について説明します。
-
-1. `@Directive()`デコレーターの`host`プロパティを使用してホストイベントバインディングを構成します。
-
-   <docs-code header="src/app/highlight.directive.ts (decorator)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="decorator"/>
-
-1. 2つのイベントハンドラーメソッドを追加し、`host`プロパティを介してホスト要素イベントをそれらにマッピングします。
-
-   <docs-code header="highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="mouse-methods"/>
+Angular creates an instance of `HighlightDirective` for that `<p>` element, injects a reference to the element, and sets its background to yellow.
 
-属性ディレクティブをホストするDOM要素（この場合は`<p>`）のイベントを購読するには、ディレクティブの[`host`プロパティ](guide/components/host-elements#binding-to-the-host-element)でイベントリスナーを構成します。
+## Handling user events
 
-HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘルパーメソッド`highlight()`に委任します。
-
-完全なディレクティブは次のとおりです。
+To respond to user interaction, bind host element events to handler methods through the `host` property of the `@Directive()` decorator. The following directive highlights the host element while the pointer is over it and clears the highlight when the pointer leaves:
 
 <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
 
-ポインタが段落要素の上にホバーすると背景色が表示され、ポインタが外れると背景色が消えます。
-
-<img alt="Second Highlight" src="assets/images/guide/attribute-directives/highlight-directive-anim.gif">
-
-## 属性ディレクティブに値を渡す
-
-このセクションでは、`HighlightDirective`を適用するときにハイライトカラーを設定する方法について説明します。
-
-1. `highlight.directive.ts`で、`@angular/core`から`input`をインポートします。
-
-   <docs-code header="highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="imports"/>
-
-1. `appHighlight` `input`プロパティを追加します。
-
-   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="input"/>
+The `host` property maps the `mouseenter` and `mouseleave` events to the `onMouseEnter()` and `onMouseLeave()` methods, which delegate to a `highlight()` helper that sets the background color on the host element. For more on host event bindings, see [binding to the host element](guide/components/host-elements#binding-to-the-host-element).
 
-   `input()`関数は、ディレクティブの`appHighlight`プロパティをバインディングで使用できるようにするメタデータをクラスに追加します。
+## Accepting input values
 
-1. `app.component.ts`で、`AppComponent`に`color`プロパティを追加します。
+Like components, directives accept inputs through the [`input()`](guide/components/inputs) function. Give an input the same name as the selector so that a single binding both applies the directive and passes a value to it:
 
-   <docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" region="class"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="input"/>
 
-1. ディレクティブと色を同時に適用するには、`appHighlight`ディレクティブセレクターを使用してプロパティバインディングを使用し、それを`color`に設定します。
+Read the input by calling it as a signal, and fall back to a default when no color is set:
 
-   <docs-code header="app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="color"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="mouse-enter"/>
 
-   `[appHighlight]`属性バインディングは次の2つのタスクを実行します。
-   - `<p>`要素にハイライトディレクティブを適用する
-   - プロパティバインディングを使用してディレクティブのハイライトカラーを設定する
+In the template, bind the value to the selector. Because the input shares the selector's name, `[appHighlight]` both applies the directive and sets its value. Here the bound `color` is a property on the component:
 
-### ユーザー入力を使用して値を設定する
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="color"/>
 
-このセクションでは、カラー選択を`appHighlight`ディレクティブにバインドするラジオボタンを追加する方法について説明します。
+<docs-code header="app.component.ts" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" region="class"/>
 
-1. 色を選択するためのマークアップを`app.component.html`に追加します。
+A directive can declare more than one input. The following directive adds a `defaultColor` input, then falls back through `appHighlight`, `defaultColor`, and finally `red`:
 
-<docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="v2"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts"/>
 
-1. `AppComponent.color`を修正して、初期値を持たないようにします。
+Bind both inputs on the same element. Because `defaultColor` takes a static string rather than a dynamic expression, it doesn't need square brackets:
 
-<docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" region="class"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
 
-1. `highlight.directive.ts`で、`onMouseEnter`メソッドを修正して、最初に`appHighlight`でハイライトしようとします。`appHighlight`が`undefined`の場合は`red`にフォールバックします。
-   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="mouse-enter"/>
+## Deactivating Angular processing with `NgNonBindable`
 
-4. アプリケーションを起動して、ユーザーがラジオボタンで色を選択できることを確認します。
+To prevent expression evaluation in the browser, add `ngNonBindable` to the host element.
+`ngNonBindable` deactivates interpolation, directives, and binding in templates.
 
-   <img alt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects" src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
-
-## 2番目のプロパティにバインドする
-
-このセクションでは、開発者がデフォルトカラーを設定できるようにアプリケーションを構成する方法について説明します。
-
-1. `HighlightDirective`に`defaultColor`という名前の2番目の`input()`プロパティを追加します。
-
-   <docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="defaultColor"/>
-
-2. ディレクティブの`onMouseEnter`を修正して、最初に`appHighlight`でハイライトしようとします。次に`defaultColor`でハイライトしようとします。両方のプロパティが`undefined`の場合は`red`にフォールバックします。
-
-   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>
-
-3. `AppComponent.color`にバインドし、デフォルトカラーとして「violet」を使用するには、次のHTMLを追加します。
-   この場合、`defaultColor`バインディングは、動的な式ではなく静的な文字列であるため、角括弧`[]`を使用しません。
-
-   <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
-
-   コンポーネントと同様に、ホスト要素に複数のディレクティブプロパティバインディングを追加できます。
-
-デフォルトカラーは、デフォルトカラーバインディングがない場合は赤です。
-ユーザーが色を選択すると、選択した色がアクティブなハイライトカラーになります。
-
-<img alt="Animated gif of final highlight directive that shows red color with no binding and violet with the default color set. When user selects color, the selection takes precedence." src="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif">
-
-## `NgNonBindable`を使用してAngularの処理を無効にする
-
-ブラウザでの式評価を防ぐには、ホスト要素に`ngNonBindable`を追加します。
-`ngNonBindable`は、テンプレート内の補間、ディレクティブ、バインディングを無効にします。
-
-次の例では、式`{{ 1 + 1 }}`はコードエディタと同じようにレンダリングされ、`2`は表示されません。
+In the following example, the expression `{{ 1 + 1 }}` renders just as it does in your code editor, and does not display `2`.
 
 <docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable"/>
 
-`ngNonBindable`を要素に適用すると、その要素の子要素のバインディングが停止します。
-ただし、`ngNonBindable`は、`ngNonBindable`を適用した要素に対しては、ディレクティブを動作させます。
-次の例では、`appHighlight`ディレクティブはアクティブですが、Angularは式`{{ 1 + 1 }}`を評価しません。
+Applying `ngNonBindable` to an element stops binding for that element's child elements.
+However, `ngNonBindable` still lets directives work on the element where you apply `ngNonBindable`.
+In the following example, the `appHighlight` directive is still active but Angular does not evaluate the expression `{{ 1 + 1 }}`.
 
 <docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable-with-directive"/>
 
-`ngNonBindable`を親要素に適用すると、Angularは要素の子要素に対して、プロパティバインディングやイベントバインディングなどあらゆる種類の補間とバインディングを無効にします。
+If you apply `ngNonBindable` to a parent element, Angular disables interpolation and binding of any sort, such as property binding or event binding, for the element's children.
+
+## What's next
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/structural-directives" title="Structural directives"/>
+  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/attribute-directives.md.bak b/adev-ja/src/content/guide/directives/attribute-directives.md.bak
new file mode 100644
index 0000000000..35e3782c7a
--- /dev/null
+++ b/adev-ja/src/content/guide/directives/attribute-directives.md.bak
@@ -0,0 +1,159 @@
+# 属性ディレクティブ
+
+属性ディレクティブを使用して、DOM要素とAngularコンポーネントの外観や動作を変更します。
+
+## 属性ディレクティブの作成
+
+このセクションでは、ホスト要素の背景色を黄色に設定するハイライトディレクティブを作成する方法について説明します。
+
+1. ディレクティブを作成するには、CLIコマンド[`ng generate directive`](tools/cli/schematics)を使用します。
+
+   ```shell
+   ng generate directive highlight
+   ```
+
+   CLIは`src/app/highlight.directive.ts`と、対応するテストファイル`src/app/highlight.directive.spec.ts`を作成します。
+
+   ```angular-ts
+   import {Directive} from '@angular/core';
+
+   @Directive({
+     selector: '[appHighlight]',
+   })
+   export class HighlightDirective {}
+   ```
+
+   `@Directive()`デコレーターの構成プロパティは、ディレクティブのCSS属性セレクター`[appHighlight]`を指定します。
+
+1. `@angular/core`から`ElementRef`と`inject`をインポートします。
+   `ElementRef`は、`nativeElement`プロパティを通じてホストDOM要素への直接アクセスを提供します。
+
+1. [`inject`](guide/di)を使用して、`appHighlight`を適用する要素であるホストDOM要素への参照を取得します。
+
+1. 背景を黄色に設定するロジックを`HighlightDirective`クラスに追加します。
+
+   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.1.ts"/>
+
+IMPORTANT: ディレクティブは_ネームスペース_をサポートしていません。
+
+```angular-html {avoid}
+<p app:Highlight>This is invalid</p>
+```
+
+## 属性ディレクティブの適用
+
+`HighlightDirective`を使用するには、ディレクティブを属性として持つ`<p>`要素をHTMLテンプレートに追加します。
+
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" region="applied"/>
+
+Angularは`HighlightDirective`クラスのインスタンスを作成し、`inject(ElementRef)`を使用して`<p>`要素への参照を取得し、その背景スタイルを黄色に設定します。
+
+## ユーザーイベントの処理
+
+このセクションでは、ユーザーが要素内または要素外にマウスを移動したときに検出する方法と、ハイライトカラーを設定またはクリアして応答する方法について説明します。
+
+1. `@Directive()`デコレーターの`host`プロパティを使用してホストイベントバインディングを構成します。
+
+   <docs-code header="src/app/highlight.directive.ts (decorator)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="decorator"/>
+
+1. 2つのイベントハンドラーメソッドを追加し、`host`プロパティを介してホスト要素イベントをそれらにマッピングします。
+
+   <docs-code header="highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" region="mouse-methods"/>
+
+属性ディレクティブをホストするDOM要素（この場合は`<p>`）のイベントを購読するには、ディレクティブの[`host`プロパティ](guide/components/host-elements#binding-to-the-host-element)でイベントリスナーを構成します。
+
+HELPFUL: ハンドラーは、ホストDOM要素`el`に色を設定するヘルパーメソッド`highlight()`に委任します。
+
+完全なディレクティブは次のとおりです。
+
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
+
+ポインタが段落要素の上にホバーすると背景色が表示され、ポインタが外れると背景色が消えます。
+
+<img alt="Second Highlight" src="assets/images/guide/attribute-directives/highlight-directive-anim.gif">
+
+## 属性ディレクティブに値を渡す
+
+このセクションでは、`HighlightDirective`を適用するときにハイライトカラーを設定する方法について説明します。
+
+1. `highlight.directive.ts`で、`@angular/core`から`input`をインポートします。
+
+   <docs-code header="highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="imports"/>
+
+1. `appHighlight` `input`プロパティを追加します。
+
+   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="input"/>
+
+   `input()`関数は、ディレクティブの`appHighlight`プロパティをバインディングで使用できるようにするメタデータをクラスに追加します。
+
+1. `app.component.ts`で、`AppComponent`に`color`プロパティを追加します。
+
+   <docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" region="class"/>
+
+1. ディレクティブと色を同時に適用するには、`appHighlight`ディレクティブセレクターを使用してプロパティバインディングを使用し、それを`color`に設定します。
+
+   <docs-code header="app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="color"/>
+
+   `[appHighlight]`属性バインディングは次の2つのタスクを実行します。
+   - `<p>`要素にハイライトディレクティブを適用する
+   - プロパティバインディングを使用してディレクティブのハイライトカラーを設定する
+
+### ユーザー入力を使用して値を設定する
+
+このセクションでは、カラー選択を`appHighlight`ディレクティブにバインドするラジオボタンを追加する方法について説明します。
+
+1. 色を選択するためのマークアップを`app.component.html`に追加します。
+
+<docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="v2"/>
+
+1. `AppComponent.color`を修正して、初期値を持たないようにします。
+
+<docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" region="class"/>
+
+1. `highlight.directive.ts`で、`onMouseEnter`メソッドを修正して、最初に`appHighlight`でハイライトしようとします。`appHighlight`が`undefined`の場合は`red`にフォールバックします。
+   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" region="mouse-enter"/>
+
+4. アプリケーションを起動して、ユーザーがラジオボタンで色を選択できることを確認します。
+
+   <img alt="Animated gif of the refactored highlight directive changing color according to the radio button the user selects" src="assets/images/guide/attribute-directives/highlight-directive-v2-anim.gif">
+
+## 2番目のプロパティにバインドする
+
+このセクションでは、開発者がデフォルトカラーを設定できるようにアプリケーションを構成する方法について説明します。
+
+1. `HighlightDirective`に`defaultColor`という名前の2番目の`input()`プロパティを追加します。
+
+   <docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="defaultColor"/>
+
+2. ディレクティブの`onMouseEnter`を修正して、最初に`appHighlight`でハイライトしようとします。次に`defaultColor`でハイライトしようとします。両方のプロパティが`undefined`の場合は`red`にフォールバックします。
+
+   <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" region="mouse-enter"/>
+
+3. `AppComponent.color`にバインドし、デフォルトカラーとして「violet」を使用するには、次のHTMLを追加します。
+   この場合、`defaultColor`バインディングは、動的な式ではなく静的な文字列であるため、角括弧`[]`を使用しません。
+
+   <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="defaultColor"/>
+
+   コンポーネントと同様に、ホスト要素に複数のディレクティブプロパティバインディングを追加できます。
+
+デフォルトカラーは、デフォルトカラーバインディングがない場合は赤です。
+ユーザーが色を選択すると、選択した色がアクティブなハイライトカラーになります。
+
+<img alt="Animated gif of final highlight directive that shows red color with no binding and violet with the default color set. When user selects color, the selection takes precedence." src="assets/images/guide/attribute-directives/highlight-directive-final-anim.gif">
+
+## `NgNonBindable`を使用してAngularの処理を無効にする
+
+ブラウザでの式評価を防ぐには、ホスト要素に`ngNonBindable`を追加します。
+`ngNonBindable`は、テンプレート内の補間、ディレクティブ、バインディングを無効にします。
+
+次の例では、式`{{ 1 + 1 }}`はコードエディタと同じようにレンダリングされ、`2`は表示されません。
+
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable"/>
+
+`ngNonBindable`を要素に適用すると、その要素の子要素のバインディングが停止します。
+ただし、`ngNonBindable`は、`ngNonBindable`を適用した要素に対しては、ディレクティブを動作させます。
+次の例では、`appHighlight`ディレクティブはアクティブですが、Angularは式`{{ 1 + 1 }}`を評価しません。
+
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" region="ngNonBindable-with-directive"/>
+
+`ngNonBindable`を親要素に適用すると、Angularは要素の子要素に対して、プロパティバインディングやイベントバインディングなどあらゆる種類の補間とバインディングを無効にします。
diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.en.md b/adev-ja/src/content/guide/directives/directive-composition-api.en.md
index 8cacb56637..47b132a262 100644
--- a/adev-ja/src/content/guide/directives/directive-composition-api.en.md
+++ b/adev-ja/src/content/guide/directives/directive-composition-api.en.md
@@ -1,20 +1,16 @@
 # Directive composition API
 
-Angular directives offer a great way to encapsulate reusable behaviors— directives can apply
-attributes, CSS classes, and event listeners to an element.
+Angular directives offer a great way to encapsulate reusable behaviors. Directives can apply attributes, CSS classes, and event listeners to an element.
 
-The _directive composition API_ lets you apply directives to a component's host element from
-_within_ the component TypeScript class.
+The _directive composition API_ lets you apply directives to a component's host element from _within_ the component TypeScript class.
 
 ## Adding directives to a component
 
-You apply directives to a component by adding a `hostDirectives` property to a component's
-decorator. We call such directives _host directives_.
+You apply directives to a component by adding a `hostDirectives` property to a component's decorator. Such directives are called _host directives_.
 
-In this example, we apply the directive `MenuBehavior` to the host element of `AdminMenu`. This
-works similarly to applying the `MenuBehavior` to the `<admin-menu>` element in a template.
+In this example, the `MenuBehavior` directive is applied to the host element of `AdminMenu`. This works similarly to applying the `MenuBehavior` to the `<admin-menu>` element in a template.
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -23,25 +19,20 @@ works similarly to applying the `MenuBehavior` to the `<admin-menu>` element in
 export class AdminMenu {}
 ```
 
-When the framework renders a component, Angular also creates an instance of each host directive. The
-directives' host bindings apply to the component's host element. By default, host directive inputs
-and outputs are not exposed as part of the component's public API. See
-[Including inputs and outputs](#including-inputs-and-outputs) below for more information.
-
-**Angular applies host directives statically at compile time.** You cannot dynamically add
-directives at runtime.
+When the framework renders a component, Angular also creates an instance of each host directive. The directives' host bindings apply to the component's host element. By default, host directive inputs and outputs are not exposed as part of the component's public API. See [Including inputs and outputs](#including-inputs-and-outputs) below for more information.
 
-**Directives used in `hostDirectives` may not specify `standalone: false`.**
+Host directives come with the following constraints:
 
-**Angular ignores the `selector` of directives applied in the `hostDirectives` property.**
+- **Angular applies host directives statically at compile time.** You cannot dynamically add
+  directives at runtime.
+- **Directives used in `hostDirectives` may not specify `standalone: false`.**
+- **Angular ignores the `selector` of directives applied in the `hostDirectives` property.**
 
 ## Including inputs and outputs
 
-When you apply `hostDirectives` to your component, the inputs and outputs from the host directives
-are not included in your component's API by default. You can explicitly include inputs and outputs
-in your component's API by expanding the entry in `hostDirectives`:
+When you apply `hostDirectives` to your component, the inputs and outputs from the host directives are not included in your component's API by default. You can explicitly include inputs and outputs in your component's API by expanding the entry in `hostDirectives`:
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -56,17 +47,15 @@ in your component's API by expanding the entry in `hostDirectives`:
 export class AdminMenu {}
 ```
 
-By explicitly specifying the inputs and outputs, consumers of the component with `hostDirective` can
-bind them in a template:
+By explicitly specifying the inputs and outputs, consumers of the component with `hostDirectives` can bind them in a template:
 
 ```angular-html
 <admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()"></admin-menu>
 ```
 
-Furthermore, you can alias inputs and outputs from `hostDirective` to customize the API of your
-component:
+Furthermore, you can alias inputs and outputs from a host directive to customize the API of your component:
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -87,26 +76,17 @@ export class AdminMenu {}
 
 ## Adding directives to another directive
 
-You can also add `hostDirectives` to other directives, in addition to components. This enables the
-transitive aggregation of multiple behaviors.
+You can also add `hostDirectives` to other directives, in addition to components. This enables the transitive aggregation of multiple behaviors.
 
-In the following example, we define two directives, `Menu` and `Tooltip`. We then compose the behavior
-of these two directives in `MenuWithTooltip`. Finally, we apply `MenuWithTooltip`
-to `SpecializedMenuWithTooltip`.
+The following example defines two directives, `Menu` and `Tooltip`, then composes their behavior in `MenuWithTooltip`. Finally, it applies `MenuWithTooltip` to `SpecializedMenuWithTooltip`.
 
-When `SpecializedMenuWithTooltip` is used in a template, it creates instances of all of `Menu`
-, `Tooltip`, and `MenuWithTooltip`. Each of these directives' host bindings apply to the host
-element of `SpecializedMenuWithTooltip`.
+When `SpecializedMenuWithTooltip` is used in a template, it creates instances of all of `Menu`, `Tooltip`, and `MenuWithTooltip`. Each of these directives' host bindings apply to the host element of `SpecializedMenuWithTooltip`.
 
 ```ts
-@Directive({
-  /* ... */
-})
+@Directive({/* ... */})
 export class Menu {}
 
-@Directive({
-  /* ... */
-})
+@Directive({/* ... */})
 export class Tooltip {}
 
 // MenuWithTooltip can compose behaviors from multiple other directives
@@ -126,12 +106,11 @@ export class SpecializedMenuWithTooltip {}
 
 ### Directive execution order
 
-Host directives go through the same lifecycle as components and directives used directly in a
-template. However, host directives always execute their constructor, lifecycle hooks, and bindings _before_ the component or directive on which they are applied.
+Host directives go through the same lifecycle as components and directives used directly in a template. However, host directives always execute their constructor, lifecycle hooks, and bindings _before_ the component or directive on which they are applied.
 
 The following example shows minimal use of a host directive:
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -149,13 +128,11 @@ The order of execution here is:
 5. `MenuBehavior` applies host bindings
 6. `AdminMenu` applies host bindings
 
-This order of operations means that components with `hostDirectives` can override any host bindings
-specified by a host directive.
+This order of operations means that components with `hostDirectives` can override any host bindings specified by a host directive.
 
-This order of operations extends to nested chains of host directives, as shown in the following
-example.
+This order of operations extends to nested chains of host directives, as shown in the following example.
 
-```typescript
+```ts
 @Directive({...})
 export class Tooltip { }
 
@@ -184,15 +161,11 @@ In the example above, the order of execution is:
 
 ### Dependency injection
 
-A component or directive that specifies `hostDirectives` can inject the instances of those host
-directives and vice versa.
+A component or directive that specifies `hostDirectives` can inject the instances of those host directives and vice versa.
 
-When applying host directives to a component, both the component and host directives can define
-providers.
+When applying host directives to a component, both the component and host directives can define providers.
 
-If a component or directive with `hostDirectives` and those host directives both provide the same
-injection token, the providers defined by class with `hostDirectives` take precedence over providers
-defined by the host directives.
+If a component or directive with `hostDirectives` and those host directives both provide the same injection token, the providers defined by class with `hostDirectives` take precedence over providers defined by the host directives.
 
 ### Host directive de-duplication
 
@@ -200,17 +173,14 @@ When the same directive appears more than once in the resolved host directive tr
 
 #### Template match takes precedence
 
-If a directive matches an element once through a **template selector** and also appears as a
-**host directive**, Angular keeps only the template match and discards all host directive matches.
+If a directive matches an element once through a **template selector** and also appears as a **host directive**, Angular keeps only the template match and discards all host directive matches.
 
-The mental model is that a host directive match represents `Partial<YourDirective>` , a partial
-application where only the inputs and outputs explicitly listed in `hostDirectives` are exposed,
-while a template match represents the full directive with its complete public API.
+The mental model is that a host directive match represents `Partial<YourDirective>`, a partial application where only the inputs and outputs explicitly listed in `hostDirectives` are exposed, while a template match represents the full directive with its complete public API.
 
-```ts
 @Directive({selector: '[hoverable]'})
 export class Hoverable {}
 
+```ts
 @Component({
   selector: 'app-button',
   hostDirectives: [Hoverable],
@@ -226,10 +196,7 @@ export class Button {}
 
 #### Multiple host directive matches are merged
 
-If the same directive appears **more than once as a host directive** , for example, when two
-directives both declare a common dependency in their `hostDirectives` , Angular merges all
-instances into a single directive instance. The input and output mappings from all instances are
-combined.
+If the same directive appears **more than once as a host directive**, for example, when two directives both declare a common dependency in their `hostDirectives`, Angular merges all instances into a single directive instance. The input and output mappings from all instances are combined.
 
 This resolves the classic [diamond problem](https://en.wikipedia.org/wiki/Multiple_inheritance#The_diamond_problem) in host directive composition:
 
@@ -237,11 +204,11 @@ This resolves the classic [diamond problem](https://en.wikipedia.org/wiki/Multip
 // A shared behavior that both triggers need
 @Directive({
   host: {
-    '[attr.data-trigger-id]': 'triggerId',
+    '[attr.data-trigger-id]': 'triggerId()',
   },
 })
 export class TriggerRef {
-  readonly triggerId = `trigger-${crypto.randomUUID()}`;
+  readonly triggerId = input(`trigger-${crypto.randomUUID()}`);
 }
 
 // Two separate triggers, each declaring TriggerRef as a host directive
@@ -267,14 +234,13 @@ export class DropdownTrigger {
 <button popoverTrigger dropdownTrigger>Actions</button>
 ```
 
-HELPFUL: Because Angular produces only one instance of the shared directive, both `PopoverTrigger`
-and `DropdownTrigger` receive the same `TriggerRef` instance when they inject it.
+HELPFUL: Because Angular produces only one instance of the shared directive, both `PopoverTrigger` and `DropdownTrigger` receive the same `TriggerRef` instance when they inject it.
 
 #### Conflicting aliases
 
 When Angular merges duplicate host directive matches it also merges their input and output mappings.
-If two instances of the same host directive expose the **same input or output under different
-aliases**, Angular throws an error at compile time ([NG8024](errors/NG8024))
+
+If two instances of the same host directive expose the **same input or output under different aliases**, Angular throws an error at compile time ([NG8024](errors/NG8024)).
 
 ```ts
 @Directive({
@@ -297,5 +263,11 @@ export class DropdownTrigger {}
 <button popoverTrigger dropdownTrigger></button>
 ```
 
-To resolve this, ensure that both paths expose the shared input or output under the same alias, or
-do not expose it at all.
+To resolve this, ensure that both paths expose the shared input or output under the same alias, or do not expose it at all.
+
+## What's next
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/structural-directives" title="Structural directives"/>
+  <docs-pill href="guide/components/host-elements" title="Component host elements"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/directive-composition-api.md b/adev-ja/src/content/guide/directives/directive-composition-api.md
index 4e5a4f7270..f16adcf6ad 100644
--- a/adev-ja/src/content/guide/directives/directive-composition-api.md
+++ b/adev-ja/src/content/guide/directives/directive-composition-api.md
@@ -1,20 +1,16 @@
 # ディレクティブ合成API
 
-Angularディレクティブは、再利用可能な動作をカプセル化するすばらしい方法を提供します。
-ディレクティブは、属性、CSSクラス、およびイベントリスナーを要素に適用できます。
+Angularディレクティブは、再利用可能な動作をカプセル化するすばらしい方法を提供します。ディレクティブは、属性、CSSクラス、およびイベントリスナーを要素に適用できます。
 
-*ディレクティブ合成API* を使用すると、
-コンポーネントのTypeScriptクラスの*内部*からコンポーネントのホスト要素にディレクティブを適用できます。
+*ディレクティブ合成API* を使用すると、コンポーネントのTypeScriptクラスの*内部*からコンポーネントのホスト要素にディレクティブを適用できます。
 
-## コンポーネントにディレクティブを追加する
+## コンポーネントにディレクティブを追加する {#adding-directives-to-a-component}
 
-コンポーネントにディレクティブを適用するには、コンポーネントのデコレーターに `hostDirectives` プロパティを追加します。
-このようなディレクティブを*ホストディレクティブ*と呼びます。
+コンポーネントにディレクティブを適用するには、コンポーネントのデコレーターに `hostDirectives` プロパティを追加します。このようなディレクティブを*ホストディレクティブ*と呼びます。
 
-この例では、`MenuBehavior` ディレクティブを `AdminMenu` のホスト要素に適用します。
-これは、テンプレートの `<admin-menu>` 要素に `MenuBehavior` を適用するのと同じように機能します。
+この例では、`MenuBehavior` ディレクティブを `AdminMenu` のホスト要素に適用します。これは、テンプレートの `<admin-menu>` 要素に `MenuBehavior` を適用するのと同じように機能します。
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -23,25 +19,20 @@ Angularディレクティブは、再利用可能な動作をカプセル化す
 export class AdminMenu {}
 ```
 
-フレームワークがコンポーネントをレンダリングすると、Angularは各ホストディレクティブのインスタンスも作成します。
-ディレクティブのホストバインディングは、コンポーネントのホスト要素に適用されます。
-デフォルトでは、ホストディレクティブの入力と出力は、コンポーネントの公開APIの一部として公開されません。
-詳細については、以下の[入力と出力を含める](#including-inputs-and-outputs)を参照してください。
-
-**Angularはコンパイル時に静的にホストディレクティブを適用します。** 
-ランタイム時には動的にディレクティブを追加できません。
+フレームワークがコンポーネントをレンダリングすると、Angularは各ホストディレクティブのインスタンスも作成します。ディレクティブのホストバインディングは、コンポーネントのホスト要素に適用されます。デフォルトでは、ホストディレクティブの入力と出力は、コンポーネントの公開APIの一部として公開されません。詳細については、以下の[入力と出力を含める](#including-inputs-and-outputs)を参照してください。
 
-**`hostDirectives` で使用されるディレクティブは `standalone: false` を指定できません。**
+Host directives come with the following constraints:
 
-**Angularは `hostDirectives` プロパティで適用されたディレクティブの `selector` を無視します。**
+- **Angularはコンパイル時に静的にホストディレクティブを適用します。**
+  ランタイム時には動的にディレクティブを追加できません。
+- **`hostDirectives` で使用されるディレクティブは `standalone: false` を指定できません。**
+- **Angularは `hostDirectives` プロパティで適用されたディレクティブの `selector` を無視します。**
 
 ## 入力と出力を含める {#including-inputs-and-outputs}
 
-コンポーネントに `hostDirectives` を適用すると、
-ホストディレクティブからの入力と出力は、デフォルトではコンポーネントのAPIには含まれません。
-`hostDirectives` のエントリを拡張することで、コンポーネントのAPIに入力と出力を明示的に含めることができます。
+コンポーネントに `hostDirectives` を適用すると、ホストディレクティブからの入力と出力は、デフォルトではコンポーネントのAPIには含まれません。`hostDirectives` のエントリを拡張することで、コンポーネントのAPIに入力と出力を明示的に含めることができます。
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -56,17 +47,15 @@ export class AdminMenu {}
 export class AdminMenu {}
 ```
 
-入力と出力を明示的に指定することで、`hostDirective` を持つコンポーネントのコンシューマーは
-テンプレートでそれらにバインドできます。
+入力と出力を明示的に指定することで、`hostDirectives` を持つコンポーネントのコンシューマーはテンプレートでそれらにバインドできます。
 
 ```angular-html
 <admin-menu menuId="top-menu" (menuClosed)="logMenuClosed()"></admin-menu>
 ```
 
-さらに、`hostDirective` から入力と出力をエイリアスして、
-コンポーネントのAPIをカスタマイズできます。
+さらに、ホストディレクティブから入力と出力をエイリアスして、コンポーネントのAPIをカスタマイズできます。
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -85,28 +74,19 @@ export class AdminMenu {}
 <admin-menu id="top-menu" (closed)="logMenuClosed()"></admin-menu>
 ```
 
-## 別のディレクティブにディレクティブを追加する
+## 別のディレクティブにディレクティブを追加する {#adding-directives-to-another-directive}
 
-コンポーネントに加えて、他のディレクティブにも `hostDirectives` を追加できます。
-これにより、複数の動作を推移的に集約できます。
+コンポーネントに加えて、他のディレクティブにも `hostDirectives` を追加できます。これにより、複数の動作を推移的に集約できます。
 
-次の例では、`Menu` と `Tooltip` の2つのディレクティブを定義しています。
-次に、`MenuWithTooltip` でこれらの2つのディレクティブの動作を構成します。
-最後に、`SpecializedMenuWithTooltip` に `MenuWithTooltip` を適用します。
+次の例では、`Menu` と `Tooltip` の2つのディレクティブを定義しています。次に、`MenuWithTooltip` でこれらの2つのディレクティブの動作を構成します。最後に、`SpecializedMenuWithTooltip` に `MenuWithTooltip` を適用します。
 
-`SpecializedMenuWithTooltip` がテンプレートで使用されると、
-`Menu`、`Tooltip`、`MenuWithTooltip` のすべてをインスタンス化します。
-これらのディレクティブの各ホストバインディングは、`SpecializedMenuWithTooltip` のホスト要素に適用されます。
+`SpecializedMenuWithTooltip` がテンプレートで使用されると、`Menu`、`Tooltip`、`MenuWithTooltip` のすべてをインスタンス化します。これらのディレクティブの各ホストバインディングは、`SpecializedMenuWithTooltip` のホスト要素に適用されます。
 
 ```ts
-@Directive({
-  /* ... */
-})
+@Directive({/* ... */})
 export class Menu {}
 
-@Directive({
-  /* ... */
-})
+@Directive({/* ... */})
 export class Tooltip {}
 
 // MenuWithTooltip は、他の複数のディレクティブから動作を構成できます
@@ -122,16 +102,15 @@ export class MenuWithTooltip {}
 export class SpecializedMenuWithTooltip {}
 ```
 
-## ホストディレクティブのセマンティクス
+## ホストディレクティブのセマンティクス {#host-directive-semantics}
 
-### ディレクティブの実行順序
+### ディレクティブの実行順序 {#directive-execution-order}
 
-ホストディレクティブは、テンプレートで直接使用されるコンポーネントやディレクティブと同じライフサイクルを経ます。
-ただし、ホストディレクティブは常に適用されているコンポーネントまたはディレクティブの*前*に、コンストラクターやライフサイクルフックおよびバインディングを実行します。
+ホストディレクティブは、テンプレートで直接使用されるコンポーネントやディレクティブと同じライフサイクルを経ます。ただし、ホストディレクティブは常に適用されているコンポーネントまたはディレクティブの*前*に、コンストラクターやライフサイクルフックおよびバインディングを実行します。
 
 次の例は、ホストディレクティブの最小限の使用を示しています。
 
-```typescript
+```ts
 @Component({
   selector: 'admin-menu',
   templateUrl: './admin-menu.html',
@@ -149,13 +128,11 @@ export class AdminMenu {}
 5. `MenuBehavior` がホストバインディングを適用する
 6. `AdminMenu` がホストバインディングを適用する
 
-この動作順序により、`hostDirectives` を持つコンポーネントは、
-ホストディレクティブで指定されたホストバインディングをオーバーライドできます。
+この動作順序により、`hostDirectives` を持つコンポーネントは、ホストディレクティブで指定されたホストバインディングをオーバーライドできます。
 
-この動作順序は次の例のように、
-ホストディレクティブのネストされたチェーンにも適用されます。
+この動作順序は次の例のように、ホストディレクティブのネストされたチェーンにも適用されます。
 
-```typescript
+```ts
 @Directive({...})
 export class Tooltip { }
 
@@ -182,17 +159,13 @@ export class EvenMoreCustomTooltip { }
 8. `CustomTooltip` がホストバインディングを適用する
 9. `EvenMoreCustomTooltip` がホストバインディングを適用する
 
-### 依存性の注入
+### 依存性の注入 {#dependency-injection}
 
-`hostDirectives` を指定するコンポーネントまたはディレクティブは、
-それらのホストディレクティブのインスタンスを注入でき、その逆も可能です。
+`hostDirectives` を指定するコンポーネントまたはディレクティブは、それらのホストディレクティブのインスタンスを注入でき、その逆も可能です。
 
-ホストディレクティブをコンポーネントに適用する場合、
-コンポーネントとホストディレクティブの両方でプロバイダーを定義できます。
+ホストディレクティブをコンポーネントに適用する場合、コンポーネントとホストディレクティブの両方でプロバイダーを定義できます。
 
-`hostDirectives` を持つコンポーネントと、それらのホストディレクティブの両方が同じ注入トークンを提供する場合、
-`hostDirectives` を持つクラスで定義されたプロバイダーは
-ホストディレクティブで定義されたプロバイダーよりも優先されます。
+`hostDirectives` を持つコンポーネントと、それらのホストディレクティブの両方が同じ注入トークンを提供する場合、`hostDirectives` を持つクラスで定義されたプロバイダーはホストディレクティブで定義されたプロバイダーよりも優先されます。
 
 ### Host directive de-duplication
 
@@ -200,17 +173,14 @@ When the same directive appears more than once in the resolved host directive tr
 
 #### Template match takes precedence
 
-If a directive matches an element once through a **template selector** and also appears as a
-**host directive**, Angular keeps only the template match and discards all host directive matches.
+If a directive matches an element once through a **template selector** and also appears as a **host directive**, Angular keeps only the template match and discards all host directive matches.
 
-The mental model is that a host directive match represents `Partial<YourDirective>` , a partial
-application where only the inputs and outputs explicitly listed in `hostDirectives` are exposed,
-while a template match represents the full directive with its complete public API.
+The mental model is that a host directive match represents `Partial<YourDirective>`, a partial application where only the inputs and outputs explicitly listed in `hostDirectives` are exposed, while a template match represents the full directive with its complete public API.
 
-```ts
 @Directive({selector: '[hoverable]'})
 export class Hoverable {}
 
+```ts
 @Component({
   selector: 'app-button',
   hostDirectives: [Hoverable],
@@ -226,10 +196,7 @@ export class Button {}
 
 #### Multiple host directive matches are merged
 
-If the same directive appears **more than once as a host directive** , for example, when two
-directives both declare a common dependency in their `hostDirectives` , Angular merges all
-instances into a single directive instance. The input and output mappings from all instances are
-combined.
+If the same directive appears **more than once as a host directive**, for example, when two directives both declare a common dependency in their `hostDirectives`, Angular merges all instances into a single directive instance. The input and output mappings from all instances are combined.
 
 This resolves the classic [diamond problem](https://en.wikipedia.org/wiki/Multiple_inheritance#The_diamond_problem) in host directive composition:
 
@@ -237,11 +204,11 @@ This resolves the classic [diamond problem](https://en.wikipedia.org/wiki/Multip
 // A shared behavior that both triggers need
 @Directive({
   host: {
-    '[attr.data-trigger-id]': 'triggerId',
+    '[attr.data-trigger-id]': 'triggerId()',
   },
 })
 export class TriggerRef {
-  readonly triggerId = `trigger-${crypto.randomUUID()}`;
+  readonly triggerId = input(`trigger-${crypto.randomUUID()}`);
 }
 
 // Two separate triggers, each declaring TriggerRef as a host directive
@@ -267,14 +234,13 @@ export class DropdownTrigger {
 <button popoverTrigger dropdownTrigger>Actions</button>
 ```
 
-HELPFUL: Because Angular produces only one instance of the shared directive, both `PopoverTrigger`
-and `DropdownTrigger` receive the same `TriggerRef` instance when they inject it.
+HELPFUL: Because Angular produces only one instance of the shared directive, both `PopoverTrigger` and `DropdownTrigger` receive the same `TriggerRef` instance when they inject it.
 
 #### Conflicting aliases
 
 When Angular merges duplicate host directive matches it also merges their input and output mappings.
-If two instances of the same host directive expose the **same input or output under different
-aliases**, Angular throws an error at compile time ([NG8024](errors/NG8024))
+
+If two instances of the same host directive expose the **same input or output under different aliases**, Angular throws an error at compile time ([NG8024](errors/NG8024)).
 
 ```ts
 @Directive({
@@ -297,5 +263,11 @@ export class DropdownTrigger {}
 <button popoverTrigger dropdownTrigger></button>
 ```
 
-To resolve this, ensure that both paths expose the shared input or output under the same alias, or
-do not expose it at all.
+To resolve this, ensure that both paths expose the shared input or output under the same alias, or do not expose it at all.
+
+## What's next
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/structural-directives" title="Structural directives"/>
+  <docs-pill href="guide/components/host-elements" title="Component host elements"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/overview.en.md b/adev-ja/src/content/guide/directives/overview.en.md
deleted file mode 100644
index a30d7929df..0000000000
--- a/adev-ja/src/content/guide/directives/overview.en.md
+++ /dev/null
@@ -1,118 +0,0 @@
-<docs-decorative-header title="Built-in directives" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
-Directives are classes that add additional behavior to elements in your Angular applications.
-</docs-decorative-header>
-
-Use Angular's built-in directives to manage forms, lists, styles, and what users see.
-
-The different types of Angular directives are as follows:
-
-| Directive Types                                                  | Details                                                                           |
-| :--------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
-| [Components](guide/components)                                   | Used with a template. This type of directive is the most common directive type.   |
-| [Attribute directives](#built-in-attribute-directives)           | Change the appearance or behavior of an element, component, or another directive. |
-| [Structural directives](/guide/directives/structural-directives) | Change the DOM layout by adding and removing DOM elements.                        |
-
-This guide covers built-in [attribute directives](#built-in-attribute-directives).
-
-## Built-in attribute directives
-
-Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.
-
-The most common attribute directives are as follows:
-
-| Common directives                                      | Details                                            |
-| :----------------------------------------------------- | :------------------------------------------------- |
-| [`NgClass`](#adding-and-removing-classes-with-ngclass) | Adds and removes a set of CSS classes.             |
-| [`NgStyle`](#setting-inline-styles-with-ngstyle)       | Adds and removes a set of HTML styles.             |
-| [`NgModel`](guide/forms/template-driven-forms)         | Adds two-way data binding to an HTML form element. |
-
-HELPFUL: Built-in directives use only public APIs. They do not have special access to any private APIs that other directives can't access.
-
-## Adding and removing classes with `NgClass`
-
-Add or remove multiple CSS classes simultaneously with `ngClass`.
-
-HELPFUL: To add or remove a _single_ class, use [class binding](/guide/templates/binding#css-class-and-style-property-bindings) rather than `NgClass`.
-
-### Import `NgClass` in the component
-
-To use `NgClass`, add it to the component's `imports` list.
-
-```angular-ts
-import {NgClass} from '@angular/common';
-
-@Component({
-  /* ... */
-  imports: [NgClass],
-})
-export class AppComponent {}
-```
-
-### Using `NgClass` with an expression
-
-On the element you'd like to style, add `[ngClass]` and set it equal to an expression.
-In this case, `isSpecial` is a boolean set to `true` in `app.component.ts`.
-Because `isSpecial` is true, `ngClass` applies the class of `special` to the `<div>`.
-
-<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="special-div"/>
-
-### Using `NgClass` with a method
-
-1. To use `NgClass` with a method, add the method to the component class.
-   In the following example, `setCurrentClasses()` sets the property `currentClasses` with an object that adds or removes three classes based on the `true` or `false` state of three other component properties.
-
-   Each key of the object is a CSS class name.
-   If a key is `true`, `ngClass` adds the class.
-   If a key is `false`, `ngClass` removes the class.
-
-   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setClasses"/>
-
-1. In the template, add the `ngClass` property binding to `currentClasses` to set the element's classes:
-
-   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgClass-1"/>
-
-For this use case, Angular applies the classes on initialization and in case of changes caused by reassigning the `currentClasses` object.
-The full example calls `setCurrentClasses()` initially with `ngOnInit()` when the user clicks on the `Refresh currentClasses` button.
-These steps are not necessary to implement `ngClass`.
-
-## Setting inline styles with `NgStyle`
-
-HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates/binding#css-class-and-style-property-bindings) rather than `NgStyle`.
-
-### Import `NgStyle` in the component
-
-To use `NgStyle`, add it to the component's `imports` list.
-
-```angular-ts
-import {NgStyle} from '@angular/common';
-
-@Component({
-  /* ... */
-  imports: [NgStyle],
-})
-export class AppComponent {}
-```
-
-Use `NgStyle` to set multiple inline styles simultaneously, based on the state of the component.
-
-1. To use `NgStyle`, add a method to the component class.
-
-   In the following example, `setCurrentStyles()` sets the property `currentStyles` with an object that defines three styles, based on the state of three other component properties.
-
-   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setStyles"/>
-
-1. To set the element's styles, add an `ngStyle` property binding to `currentStyles`.
-
-   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgStyle-2"/>
-
-For this use case, Angular applies the styles upon initialization and in case of changes.
-To do this, the full example calls `setCurrentStyles()` initially with `ngOnInit()` and when the dependent properties change through a button click.
-However, these steps are not necessary to implement `ngStyle` on its own.
-
-## What's next
-
-<docs-pill-row>
-  <docs-pill href="guide/directives/attribute-directives" title="Attribute Directives"/>
-  <docs-pill href="guide/directives/structural-directives" title="Structural Directives"/>
-  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
-</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/overview.md b/adev-ja/src/content/guide/directives/overview.md
index e2e6df1b6a..0a9050dc48 100644
--- a/adev-ja/src/content/guide/directives/overview.md
+++ b/adev-ja/src/content/guide/directives/overview.md
@@ -1,118 +1,69 @@
-<docs-decorative-header title="組み込みディレクティブ" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
-ディレクティブは、Angularアプリケーションの要素に追加の動作を追加するクラスです。
+<docs-decorative-header title="Directives" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
+Directives add behavior to elements and components in your Angular applications.
 </docs-decorative-header>
 
-Angularの組み込みディレクティブを使用して、フォームやリスト、スタイルおよびユーザーに見えるものを管理します。
+A directive can change how an element looks, how it behaves, or how it fits into the DOM. Angular ships with several built-in directives, and you can write your own.
 
-Angularディレクティブの種類は以下のとおりです。
+## When to use a directive
 
-| ディレクティブの種類                                                  | 詳細                                                                           |
-| :--------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
-| [コンポーネント](guide/components)                                   | テンプレートで使用されます。このタイプのディレクティブは、最も一般的なディレクティブタイプです。   |
-| [属性ディレクティブ](#built-in-attribute-directives)           | 要素、コンポーネント、または他のディレクティブの外観や動作を変更します。 |
-| [構造ディレクティブ](/guide/directives/structural-directives) | DOM要素を追加または削除することによって、DOMレイアウトを変更します。                        |
+Directives are most effective when they encapsulate **reusable** behavior that you want to apply to an existing element or component.
 
-このガイドでは、組み込みの [属性ディレクティブ](#built-in-attribute-directives)を取り上げます。
+Common examples include:
 
-## 組み込み属性ディレクティブ {#built-in-attribute-directives}
+- Applying the same appearance or behavior across many elements, such as autofocus or a tooltip.
+- Reading from or writing to the host element's DOM, attributes, or classes.
+- Adding behavior to a component you don't own without changing its source.
 
-属性ディレクティブは、他のHTML要素、属性、プロパティ、およびコンポーネントの動作を監視して変更します。
+If you need to render your own markup or manage a piece of UI with its own template, reach for a [component](guide/components), a specialized directive with its own template.
 
-最も一般的な属性ディレクティブは以下のとおりです。
+## A quick example
 
-| 一般的なディレクティブ                                      | 詳細                                            |
-| :----------------------------------------------------- | :------------------------------------------------- |
-| [`NgClass`](#adding-and-removing-classes-with-ngclass) | CSS クラスのセットを追加および削除します。             |
-| [`NgStyle`](#setting-inline-styles-with-ngstyle)       | HTML スタイルのセットを追加および削除します。             |
-| [`NgModel`](guide/forms/template-driven-forms)         | HTML フォーム要素に双方向データバインディングを追加します。 |
+Suppose you want elements to highlight when the user hovers over them with a mouse, changing their background color to yellow. Rather than repeat the same event-handling logic on every element, you can package that behavior in a directive and apply it wherever you need it.
 
-HELPFUL: 組み込みディレクティブは、公開APIのみを使用します。他のディレクティブがアクセスできないプライベートAPIには、特別なアクセス権がありません。
+The following `appHighlight` directive sets the host element's background color when the mouse enters and clears it when the mouse leaves:
 
-## `NgClass` を使用してクラスを追加および削除する {#adding-and-removing-classes-with-ngclass}
+```ts
+import {Directive, signal} from '@angular/core';
 
-`ngClass` を使用して、複数のCSSクラスを同時に追加または削除します。
-
-HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](/guide/templates/binding#css-class-and-style-property-bindings) を使用します。
-
-### コンポーネントに `NgClass` をインポートする
-
-`NgClass` を使用するには、コンポーネントの `imports` リストに追加します。
-
-```angular-ts
-import {NgClass} from '@angular/common';
-
-@Component({
-  /* ... */
-  imports: [NgClass],
+@Directive({
+  selector: '[appHighlight]',
+  host: {
+    '(mouseenter)': 'isHovered.set(true)',
+    '(mouseleave)': 'isHovered.set(false)',
+    '[style.background-color]': 'isHovered() ? "yellow" : null',
+  },
 })
-export class AppComponent {}
+export class HighlightDirective {
+  protected isHovered = signal(false);
+}
 ```
 
-### 式を使用して `NgClass` を使用
-
-スタイルを設定する要素に、`[ngClass]` を追加して、式に等しく設定します。
-この場合、`isSpecial` はブール値であり、`app.component.ts` で `true` に設定されています。
-`isSpecial` がtrueのため、`ngClass` は `<div>` に `special` というクラスを適用します。
-
-<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="special-div"/>
-
-### メソッドを使用して `NgClass` を使用
-
-1. メソッドを使用して `NgClass` を使用するには、メソッドをコンポーネントクラスに追加します。
-   次の例では、`setCurrentClasses()` は3つの他のコンポーネントプロパティの `true` または `false` 状態に基づいて、3つのクラスを追加または削除するオブジェクトを使用して`currentClasses` プロパティを設定します。
-
-   オブジェクトの各キーは、CSSクラス名です。
-   キーが `true` の場合、`ngClass` はクラスを追加します。
-   キーが `false` の場合、`ngClass` はクラスを削除します。
-
-   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setClasses"/>
+The `host` metadata listens for mouse events to update the `isHovered` signal, and binds the host element's `background-color` style to the signal's value.
 
-1. テンプレートで、要素のクラスを設定するために、`currentClasses` に対する `ngClass` プロパティバインディングを追加します。
+Apply the directive by adding its selector as an attribute on an element:
 
-   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgClass-1"/>
-
-このユースケースでは、Angularは初期化時に、および `currentClasses` オブジェクトの再代入によって発生した変更が発生した場合に、クラスを適用します。
-完全な例では、ユーザーが `Refresh currentClasses` ボタンをクリックしたときに、`ngOnInit()` を使用して最初に `setCurrentClasses()` を呼び出します。
-これらの手順は、`ngClass` を実装するために必要ではありません。
-
-## `NgStyle` を使用してインラインスタイルを設定する {#setting-inline-styles-with-ngstyle}
-
-HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates/binding#css-class-and-style-property-bindings) rather than `NgStyle`.
-
-### コンポーネントに `NgStyle` をインポートする
-
-`NgStyle` を使用するには、コンポーネントの `imports` リストに追加します。
-
-```angular-ts
-import {NgStyle} from '@angular/common';
-
-@Component({
-  /* ... */
-  imports: [NgStyle],
-})
-export class AppComponent {}
+```angular-html
+<p appHighlight>Highlight me!</p>
 ```
 
-`NgStyle` を使用して、コンポーネントの状態に基づいて、複数のインラインスタイルを同時に設定します。
-
-1. `NgStyle` を使用するには、コンポーネントクラスにメソッドを追加します。
-
-   次の例では、`setCurrentStyles()` は3つの他のコンポーネントプロパティの状態に基づいて、3つのスタイルを定義するオブジェクトを使用して `currentStyles` プロパティを設定します。
+Every element that carries the `appHighlight` attribute gains the same hover behavior, with the logic defined in one place.
 
-   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setStyles"/>
+## Types of directives
 
-1. 要素のスタイルを設定するには、`currentStyles` に対する `ngStyle` プロパティバインディングを追加します。
+Angular has three primary types of directives:
 
-   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgStyle-2"/>
+| Directive type                                                  | Details                                                                           |
+| :-------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
+| [Components](guide/components)                                  | Define reusable UI with their own template.                                       |
+| [Attribute directives](guide/directives/attribute-directives)   | Change the appearance or behavior of an element, component, or another directive. |
+| [Structural directives](guide/directives/structural-directives) | Change the DOM layout by adding and removing DOM elements.                        |
 
-このユースケースでは、Angularは初期化時と、変更が発生した場合にスタイルを適用します。
-これを行うために、完全な例では、`ngOnInit()` を使用して最初に `setCurrentStyles()` を呼び出し、依存プロパティがボタンクリックを通じて変更されたときに呼び出します。
-ただし、これらの手順は、`ngStyle` 自体を実装するために必要ではありません。
+## What's next
 
-## 次のステップ
+Learn more about each type of directive in the following guides.
 
 <docs-pill-row>
-  <docs-pill href="guide/directives/attribute-directives" title="属性ディレクティブ"/>
-  <docs-pill href="guide/directives/structural-directives" title="構造ディレクティブ"/>
-  <docs-pill href="guide/directives/directive-composition-api" title="ディレクティブ合成API"/>
+  <docs-pill href="guide/directives/attribute-directives" title="Attribute directives"/>
+  <docs-pill href="guide/directives/structural-directives" title="Structural directives"/>
+  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
 </docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/overview.md.bak b/adev-ja/src/content/guide/directives/overview.md.bak
new file mode 100644
index 0000000000..e2e6df1b6a
--- /dev/null
+++ b/adev-ja/src/content/guide/directives/overview.md.bak
@@ -0,0 +1,118 @@
+<docs-decorative-header title="組み込みディレクティブ" imgSrc="adev/src/assets/images/directives.svg"> <!-- markdownlint-disable-line -->
+ディレクティブは、Angularアプリケーションの要素に追加の動作を追加するクラスです。
+</docs-decorative-header>
+
+Angularの組み込みディレクティブを使用して、フォームやリスト、スタイルおよびユーザーに見えるものを管理します。
+
+Angularディレクティブの種類は以下のとおりです。
+
+| ディレクティブの種類                                                  | 詳細                                                                           |
+| :--------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
+| [コンポーネント](guide/components)                                   | テンプレートで使用されます。このタイプのディレクティブは、最も一般的なディレクティブタイプです。   |
+| [属性ディレクティブ](#built-in-attribute-directives)           | 要素、コンポーネント、または他のディレクティブの外観や動作を変更します。 |
+| [構造ディレクティブ](/guide/directives/structural-directives) | DOM要素を追加または削除することによって、DOMレイアウトを変更します。                        |
+
+このガイドでは、組み込みの [属性ディレクティブ](#built-in-attribute-directives)を取り上げます。
+
+## 組み込み属性ディレクティブ {#built-in-attribute-directives}
+
+属性ディレクティブは、他のHTML要素、属性、プロパティ、およびコンポーネントの動作を監視して変更します。
+
+最も一般的な属性ディレクティブは以下のとおりです。
+
+| 一般的なディレクティブ                                      | 詳細                                            |
+| :----------------------------------------------------- | :------------------------------------------------- |
+| [`NgClass`](#adding-and-removing-classes-with-ngclass) | CSS クラスのセットを追加および削除します。             |
+| [`NgStyle`](#setting-inline-styles-with-ngstyle)       | HTML スタイルのセットを追加および削除します。             |
+| [`NgModel`](guide/forms/template-driven-forms)         | HTML フォーム要素に双方向データバインディングを追加します。 |
+
+HELPFUL: 組み込みディレクティブは、公開APIのみを使用します。他のディレクティブがアクセスできないプライベートAPIには、特別なアクセス権がありません。
+
+## `NgClass` を使用してクラスを追加および削除する {#adding-and-removing-classes-with-ngclass}
+
+`ngClass` を使用して、複数のCSSクラスを同時に追加または削除します。
+
+HELPFUL: _単一の_ クラスを追加または削除するには、`NgClass` ではなく [クラスバインディング](/guide/templates/binding#css-class-and-style-property-bindings) を使用します。
+
+### コンポーネントに `NgClass` をインポートする
+
+`NgClass` を使用するには、コンポーネントの `imports` リストに追加します。
+
+```angular-ts
+import {NgClass} from '@angular/common';
+
+@Component({
+  /* ... */
+  imports: [NgClass],
+})
+export class AppComponent {}
+```
+
+### 式を使用して `NgClass` を使用
+
+スタイルを設定する要素に、`[ngClass]` を追加して、式に等しく設定します。
+この場合、`isSpecial` はブール値であり、`app.component.ts` で `true` に設定されています。
+`isSpecial` がtrueのため、`ngClass` は `<div>` に `special` というクラスを適用します。
+
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="special-div"/>
+
+### メソッドを使用して `NgClass` を使用
+
+1. メソッドを使用して `NgClass` を使用するには、メソッドをコンポーネントクラスに追加します。
+   次の例では、`setCurrentClasses()` は3つの他のコンポーネントプロパティの `true` または `false` 状態に基づいて、3つのクラスを追加または削除するオブジェクトを使用して`currentClasses` プロパティを設定します。
+
+   オブジェクトの各キーは、CSSクラス名です。
+   キーが `true` の場合、`ngClass` はクラスを追加します。
+   キーが `false` の場合、`ngClass` はクラスを削除します。
+
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setClasses"/>
+
+1. テンプレートで、要素のクラスを設定するために、`currentClasses` に対する `ngClass` プロパティバインディングを追加します。
+
+   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgClass-1"/>
+
+このユースケースでは、Angularは初期化時に、および `currentClasses` オブジェクトの再代入によって発生した変更が発生した場合に、クラスを適用します。
+完全な例では、ユーザーが `Refresh currentClasses` ボタンをクリックしたときに、`ngOnInit()` を使用して最初に `setCurrentClasses()` を呼び出します。
+これらの手順は、`ngClass` を実装するために必要ではありません。
+
+## `NgStyle` を使用してインラインスタイルを設定する {#setting-inline-styles-with-ngstyle}
+
+HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates/binding#css-class-and-style-property-bindings) rather than `NgStyle`.
+
+### コンポーネントに `NgStyle` をインポートする
+
+`NgStyle` を使用するには、コンポーネントの `imports` リストに追加します。
+
+```angular-ts
+import {NgStyle} from '@angular/common';
+
+@Component({
+  /* ... */
+  imports: [NgStyle],
+})
+export class AppComponent {}
+```
+
+`NgStyle` を使用して、コンポーネントの状態に基づいて、複数のインラインスタイルを同時に設定します。
+
+1. `NgStyle` を使用するには、コンポーネントクラスにメソッドを追加します。
+
+   次の例では、`setCurrentStyles()` は3つの他のコンポーネントプロパティの状態に基づいて、3つのスタイルを定義するオブジェクトを使用して `currentStyles` プロパティを設定します。
+
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" region="setStyles"/>
+
+1. 要素のスタイルを設定するには、`currentStyles` に対する `ngStyle` プロパティバインディングを追加します。
+
+   <docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" region="NgStyle-2"/>
+
+このユースケースでは、Angularは初期化時と、変更が発生した場合にスタイルを適用します。
+これを行うために、完全な例では、`ngOnInit()` を使用して最初に `setCurrentStyles()` を呼び出し、依存プロパティがボタンクリックを通じて変更されたときに呼び出します。
+ただし、これらの手順は、`ngStyle` 自体を実装するために必要ではありません。
+
+## 次のステップ
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/attribute-directives" title="属性ディレクティブ"/>
+  <docs-pill href="guide/directives/structural-directives" title="構造ディレクティブ"/>
+  <docs-pill href="guide/directives/directive-composition-api" title="ディレクティブ合成API"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/structural-directives.en.md b/adev-ja/src/content/guide/directives/structural-directives.en.md
index b834cbb4cc..13ce47f57f 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.en.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.en.md
@@ -2,13 +2,15 @@
 
 Structural directives are directives applied to an `<ng-template>` element that conditionally or repeatedly render the content of that `<ng-template>`.
 
+For everyday conditional and repeated rendering, use Angular's built-in [control flow blocks](guide/templates/control-flow) (`@if`, `@for`, and `@switch`). Write a structural directive when you need reusable rendering behavior that control flow doesn't cover, such as gating content behind a permission check or providing a template with data from an external source.
+
 ## Example use case
 
-In this guide you'll build a structural directive which fetches data from a given data source and renders its template when that data is available. This directive is called `SelectDirective`, after the SQL keyword `SELECT`, and match it with an attribute selector `[select]`.
+This guide uses a directive called `SelectDirective` as its running example. The directive fetches data from a given data source and renders its template when that data is available. It is named after the SQL keyword `SELECT` and matched with an attribute selector, `[select]`.
 
-`SelectDirective` will have an input naming the data source to be used, which you will call `selectFrom`. The `select` prefix for this input is important for the [shorthand syntax](#structural-directive-shorthand). The directive will instantiate its `<ng-template>` with a template context providing the selected data.
+`SelectDirective` has an input naming the data source to use, called `selectFrom`. The `select` prefix for this input is important for the [shorthand syntax](#structural-directive-shorthand). The directive instantiates its `<ng-template>` with a template context providing the selected data.
 
-The following is an example of using this directive directly on an `<ng-template>` would look like:
+Using this directive directly on an `<ng-template>` looks like this:
 
 ```angular-html
 <ng-template select let-data [selectFrom]="source">
@@ -18,7 +20,7 @@ The following is an example of using this directive directly on an `<ng-template
 
 The structural directive can wait for the data to become available and then render its `<ng-template>`.
 
-HELPFUL: Note that Angular's `<ng-template>` element defines a template that doesn't render anything by default, if you just wrap elements in an `<ng-template>` without applying a structural directive those elements will not be rendered.
+HELPFUL: Angular's `<ng-template>` element defines a template that doesn't render anything by default. If you wrap elements in an `<ng-template>` without applying a structural directive, those elements are not rendered.
 
 For more information, see the [ng-template API](api/core/ng-template) documentation.
 
@@ -60,20 +62,12 @@ You can only apply one structural directive per element when using the shorthand
 
 ## Creating a structural directive
 
-This section guides you through creating the `SelectDirective`.
-
-<docs-workflow>
-<docs-step title="Generate the directive">
-Using the Angular CLI, run the following command, where `select` is the name of the directive:
+A structural directive is a directive class that injects two dependencies:
 
-```shell
-ng generate directive select
-```
+- [`TemplateRef`](api/core/TemplateRef) gives the directive access to the content of the `<ng-template>` it is applied to.
+- [`ViewContainerRef`](api/core/ViewContainerRef) represents the location in the DOM where the directive can render that template.
 
-Angular creates the directive class and specifies the CSS selector, `[select]`, that identifies the directive in a template.
-</docs-step>
-<docs-step title="Make the directive structural">
-Import `TemplateRef`, `ViewContainerRef`, and `input`. Inject `TemplateRef` and `ViewContainerRef` in the directive as private properties.
+The directive controls rendering by creating, or not creating, embedded views from the template in the view container. The complete `SelectDirective` looks like this:
 
 ```ts
 import {Directive, TemplateRef, ViewContainerRef, inject, input} from '@angular/core';
@@ -88,27 +82,9 @@ export interface DataSource<T> {
 export class SelectDirective {
   private templateRef = inject(TemplateRef);
   private viewContainerRef = inject(ViewContainerRef);
-}
-```
 
-</docs-step>
-<docs-step title="Add the 'selectFrom' input">
-Add a `selectFrom` `input()` property.
-
-```ts
-export class SelectDirective {
-  // ...
   selectFrom = input.required<DataSource<unknown>>();
-}
-```
-
-</docs-step>
-<docs-step title="Add the business logic">
-With `SelectDirective` now scaffolded as a structural directive with its input, you can now add the logic to fetch the data and render the template with it:
 
-```ts
-export class SelectDirective {
-  // ...
   async ngOnInit() {
     const data = await this.selectFrom().load();
     this.viewContainerRef.createEmbeddedView(this.templateRef, {
@@ -120,10 +96,15 @@ export class SelectDirective {
 }
 ```
 
-</docs-step>
-</docs-workflow>
+The `selectFrom` input names the data source the directive reads from. It uses [`input.required()`](guide/components/inputs#required-inputs) because the directive can't do anything useful without a data source.
+
+When Angular initializes the directive, it loads the data and then renders the template by calling `createEmbeddedView()`. The second argument is the template's _context object_: values the template can bind to with `let` declarations. Assigning the data to the `$implicit` key makes it the default value that `let-data` (or `let data` in shorthand) receives.
 
-That's it - `SelectDirective` is up and running. A follow-up step might be to [add template type-checking support](#typing-the-directives-context).
+NOTE: This example renders its template once, when the directive initializes. It does not re-render when the bound data source changes.
+
+Once the directive works, consider [adding template type-checking support](#typing-the-directives-context).
+
+HELPFUL: The CLI command [`ng generate directive`](tools/cli/schematics) scaffolds a directive along with its test file.
 
 ## Structural directive syntax reference
 
@@ -167,8 +148,8 @@ The following table provides shorthand examples:
 | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
 | `*myDir="let item of [1,2,3]"`                                        | `<ng-template myDir let-item [myDirOf]="[1, 2, 3]">`                                                          |
 | `*myDir="let item of [1,2,3] as items; trackBy: myTrack; index as i"` | `<ng-template myDir let-item [myDirOf]="[1,2,3]" let-items="myDirOf" [myDirTrackBy]="myTrack" let-i="index">` |
-| `*ngComponentOutlet="componentClass";`                                | `<ng-template [ngComponentOutlet]="componentClass">`                                                          |
-| `*ngComponentOutlet="componentClass; inputs: myInputs";`              | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
+| `*ngComponentOutlet="componentClass"`                                 | `<ng-template [ngComponentOutlet]="componentClass">`                                                          |
+| `*ngComponentOutlet="componentClass; inputs: myInputs"`               | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
 | `*myDir="exp as value"`                                               | `<ng-template [myDir]="exp" let-value="myDir">`                                                               |
 
 ## Improving template type checking for custom directives
@@ -251,3 +232,11 @@ export class SelectDirective<T> {
   }
 }
 ```
+
+## What's next
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
+  <docs-pill href="guide/templates/ng-template" title="ng-template"/>
+  <docs-pill href="guide/templates/control-flow" title="Control flow"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/directives/structural-directives.md b/adev-ja/src/content/guide/directives/structural-directives.md
index bfcba3bcfe..de764f436a 100644
--- a/adev-ja/src/content/guide/directives/structural-directives.md
+++ b/adev-ja/src/content/guide/directives/structural-directives.md
@@ -2,13 +2,15 @@
 
 構造ディレクティブは、`<ng-template>`要素に適用され、その`<ng-template>`の内容を条件付きまたは繰り返しでレンダリングするディレクティブです。
 
+日常的な条件付きレンダリングや繰り返しレンダリングには、Angular組み込みの[制御フローブロック](guide/templates/control-flow)(`@if`、`@for`、`@switch`)を使用してください。権限チェックによってコンテンツの表示を制限したり、外部ソースからのデータをテンプレートに提供したりするなど、制御フローでは対応できない再利用可能なレンダリング動作が必要な場合に、構造ディレクティブを作成します。
+
 ## 使用例
 
-このガイドでは、指定されたデータソースからデータを取得し、そのデータが利用可能になったときにテンプレートをレンダリングする構造ディレクティブを作成します。このディレクティブは、SQLキーワード`SELECT`にちなんで`SelectDirective`と呼ばれ、属性セレクター`[select]`と一致させます。
+このガイドでは、`SelectDirective`という名前のディレクティブを実例として使用します。このディレクティブは、指定されたデータソースからデータを取得し、そのデータが利用可能になったときにテンプレートをレンダリングします。SQLキーワード`SELECT`にちなんで名付けられ、属性セレクター`[select]`と一致させます。
 
-`SelectDirective`には、使用するデータソースの名前を指定する入力があり、`selectFrom`と呼びます。この入力の`select`プレフィックスは、[省略記法](#structural-directive-shorthand)にとって重要です。ディレクティブは、選択されたデータを提供するテンプレートコンテキストを使用して、`<ng-template>`をインスタンス化します。
+`SelectDirective`には、使用するデータソースの名前を指定する`selectFrom`という入力があります。この入力の`select`プレフィックスは、[省略記法](#structural-directive-shorthand)にとって重要です。ディレクティブは、選択されたデータを提供するテンプレートコンテキストを使用して、`<ng-template>`をインスタンス化します。
 
-以下は、`<ng-template>`に直接このディレクティブを適用した例です。
+このディレクティブを`<ng-template>`に直接使用すると、次のようになります。
 
 ```angular-html
 <ng-template select let-data [selectFrom]="source">
@@ -60,20 +62,12 @@ Angularは、構造ディレクティブの省略記法をサポートしてお
 
 ## 構造ディレクティブの作成
 
-このセクションでは、`SelectDirective`の作成について説明します。
-
-<docs-workflow>
-<docs-step title="ディレクティブを生成">
-Angular CLIを使用して、次のコマンドを実行します。ここで、`select`はディレクティブの名前です。
+構造ディレクティブは、2つの依存関係を注入するディレクティブクラスです。
 
-```shell
-ng generate directive select
-```
+- [`TemplateRef`](api/core/TemplateRef)は、ディレクティブが適用されている`<ng-template>`の内容へのアクセスを提供します。
+- [`ViewContainerRef`](api/core/ViewContainerRef)は、ディレクティブがそのテンプレートをレンダリングできるDOM上の位置を表します。
 
-Angularは、ディレクティブクラスを作成し、テンプレートでディレクティブを識別するCSSセレクター`[select]`を指定します。
-</docs-step>
-<docs-step title="ディレクティブを構造化">
-`TemplateRef`、`ViewContainerRef`、`input`をインポートし、ディレクティブ内で`TemplateRef`と`ViewContainerRef`をプライベートプロパティとしてインジェクトします。
+ディレクティブは、ビューコンテナ内のテンプレートから埋め込みビューを作成する、または作成しないことでレンダリングを制御します。完成した`SelectDirective`は次のようになります。
 
 ```ts
 import {Directive, TemplateRef, ViewContainerRef, inject, input} from '@angular/core';
@@ -88,27 +82,9 @@ export interface DataSource<T> {
 export class SelectDirective {
   private templateRef = inject(TemplateRef);
   private viewContainerRef = inject(ViewContainerRef);
-}
-```
 
-</docs-step>
-<docs-step title="'selectFrom'入力を追加">
-`selectFrom` `input()`プロパティを追加します。
-
-```ts
-export class SelectDirective {
-  // ...
   selectFrom = input.required<DataSource<unknown>>();
-}
-```
-
-</docs-step>
-<docs-step title="ビジネスロジックを追加">
-`SelectDirective`が、入力を持つ構造ディレクティブとしてスキャフォールディングされたので、データを取得し、テンプレートをデータと共にレンダリングするロジックを追加できます。
 
-```ts
-export class SelectDirective {
-  // ...
   async ngOnInit() {
     const data = await this.selectFrom().load();
     this.viewContainerRef.createEmbeddedView(this.templateRef, {
@@ -120,10 +96,15 @@ export class SelectDirective {
 }
 ```
 
-</docs-step>
-</docs-workflow>
+`selectFrom`入力は、ディレクティブが読み取るデータソースの名前を指定します。ディレクティブはデータソースなしでは何も役に立たないため、[`input.required()`](guide/components/inputs#required-inputs)を使用しています。
+
+Angularがディレクティブを初期化すると、データを読み込んでから`createEmbeddedView()`を呼び出してテンプレートをレンダリングします。2番目の引数はテンプレートの*コンテキストオブジェクト*であり、テンプレートが`let`宣言でバインドできる値です。データを`$implicit`キーに割り当てることで、`let-data`(または省略記法での`let data`)が受け取るデフォルト値になります。
 
-これで`SelectDirective`は起動して実行できるようになりました。次のステップとして、[テンプレートタイプチェックのサポートを追加](#typing-the-directives-context)できます。
+NOTE: この例では、ディレクティブが初期化されるときに一度だけテンプレートをレンダリングします。バインドされたデータソースが変更されても再レンダリングされません。
+
+ディレクティブが動作するようになったら、[テンプレートタイプチェックのサポートを追加](#typing-the-directives-context)することを検討してください。
+
+HELPFUL: CLIコマンド[`ng generate directive`](tools/cli/schematics)は、テストファイルとともにディレクティブをスキャフォールディングします。
 
 ## 構造ディレクティブの構文リファレンス {#structural-directive-syntax-reference}
 
@@ -167,8 +148,8 @@ Angularは、構造ディレクティブの省略記法を次の通常のバイ
 | :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
 | `*myDir="let item of [1,2,3]"`                                        | `<ng-template myDir let-item [myDirOf]="[1, 2, 3]">`                                                          |
 | `*myDir="let item of [1,2,3] as items; trackBy: myTrack; index as i"` | `<ng-template myDir let-item [myDirOf]="[1,2,3]" let-items="myDirOf" [myDirTrackBy]="myTrack" let-i="index">` |
-| `*ngComponentOutlet="componentClass";`                                | `<ng-template [ngComponentOutlet]="componentClass">`                                                          |
-| `*ngComponentOutlet="componentClass; inputs: myInputs";`              | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
+| `*ngComponentOutlet="componentClass"`                                 | `<ng-template [ngComponentOutlet]="componentClass">`                                                          |
+| `*ngComponentOutlet="componentClass; inputs: myInputs"`               | `<ng-template [ngComponentOutlet]="componentClass" [ngComponentOutletInputs]="myInputs">`                     |
 | `*myDir="exp as value"`                                               | `<ng-template [myDir]="exp" let-value="myDir">`                                                               |
 
 ## カスタムディレクティブのテンプレートタイプチェックを改善する {#improving-template-type-checking-for-custom-directives}
@@ -251,3 +232,11 @@ export class SelectDirective<T> {
   }
 }
 ```
+
+## What's next
+
+<docs-pill-row>
+  <docs-pill href="guide/directives/directive-composition-api" title="Directive composition API"/>
+  <docs-pill href="guide/templates/ng-template" title="ng-template"/>
+  <docs-pill href="guide/templates/control-flow" title="Control flow"/>
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/drag-drop.md b/adev-ja/src/content/guide/drag-drop.md
index 91769cd4b2..563cdcd96e 100644
--- a/adev-ja/src/content/guide/drag-drop.md
+++ b/adev-ja/src/content/guide/drag-drop.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-This page describes the drag and drop directives which lets you quickly create drag and drop interfaces with the following:
+This page describes the drag and drop directives which let you quickly create drag and drop interfaces with the following:
 
 - Free dragging
 - Create a list of reorderable draggable elements
@@ -227,7 +227,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update bo
 
 ### Restrict movement along an axis
 
-By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y"on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead.
+By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y" on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.ts">
   <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.html"/>
@@ -281,7 +281,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `l
 
 By default, the `cdkDropList` sorts the draggable elements by moving them around using a CSS transform. This allows for the sorting to be animated which provides a better user experience. However this also comes with the drawback that the drop list works only in one direction: vertically or horizontally.
 
-If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However the list can no longer animate the sorting action .
+If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However, the list can no longer animate the sorting action.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.ts">
   <docs-code header="app.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.html"/>
diff --git a/adev-ja/src/content/guide/elements.en.md b/adev-ja/src/content/guide/elements.en.md
index 44daf9eec7..065421c80e 100644
--- a/adev-ja/src/content/guide/elements.en.md
+++ b/adev-ja/src/content/guide/elements.en.md
@@ -39,7 +39,7 @@ The `createCustomElement()` function converts a component into a class that can
 After you register your configured class with the browser's custom-element registry, use the new element just like a built-in HTML element in content that you add directly into the DOM:
 
 ```html
-<my-popup message="Use Angular!"></my-popup>
+<my-popup message="Use Angular!" />
 ```
 
 When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM.
@@ -78,10 +78,10 @@ For more information, see Web Component documentation for [Creating custom event
 
 ## Example: A Popup Service
 
-Previously, when you wanted to add a component to an application at runtime, you had to define a _dynamic component_, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling.
+To add a component to an application at runtime, you can [render it programmatically](guide/components/programmatic-rendering) with the `createComponent` API.
+With this approach, you are responsible for the surrounding infrastructure: attaching the component's host view to the `ApplicationRef` so that change detection runs, setting its inputs, subscribing to its outputs, and detaching and cleaning up the view when the component is removed.
 
-Using an Angular custom element makes the process simpler and more transparent, by providing all the infrastructure and framework automatically —all you have to do is define the kind of event handling you want.
-\(You do still have to exclude the component from compilation, if you are not going to use it in your application.\)
+Using an Angular custom element makes the process simpler and more transparent, by providing all of this infrastructure automatically — all you have to do is define the kind of event handling you want.
 
 The following Popup Service example application defines a component that you can either load dynamically or convert to a custom element.
 
diff --git a/adev-ja/src/content/guide/elements.md b/adev-ja/src/content/guide/elements.md
index 6664502991..c7f0c86bb3 100644
--- a/adev-ja/src/content/guide/elements.md
+++ b/adev-ja/src/content/guide/elements.md
@@ -39,7 +39,7 @@ _Angular elements_ はAngularコンポーネントを _カスタム要素_（Web
 設定したクラスをブラウザのカスタム要素レジストリに登録した後、新しい要素を、DOMに直接追加するコンテンツ内で組み込みのHTML要素と同じように使用します。
 
 ```html
-<my-popup message="Use Angular!"></my-popup>
+<my-popup message="Use Angular!" />
 ```
 
 カスタム要素がページに配置されると、ブラウザは登録されたクラスのインスタンスを作成し、それをDOMに追加します。
@@ -78,10 +78,10 @@ IMPORTANT: コンポーネントのセレクターをカスタム要素のタグ
 
 ## 例: Popupサービス {#example-a-popup-service}
 
-以前は、実行時にコンポーネントをアプリケーションに追加したい場合、_動的コンポーネント_を定義し、それをロードしてDOMの要素にアタッチし、すべての依存関係、変更検知、イベント処理を配線する必要がありました。
+実行時にアプリケーションへコンポーネントを追加するには、`createComponent` APIを使用して[プログラムでレンダリング](guide/components/programmatic-rendering)できます。
+この方法では、変更検知が動作するようコンポーネントのホストビューを`ApplicationRef`にアタッチする、入力を設定する、出力を購読する、コンポーネントが削除されるときにビューをデタッチしてクリーンアップするといった、周辺のインフラストラクチャの管理をすべて自分で担う必要があります。
 
-Angularカスタム要素を使用すると、必要なインフラストラクチャとフレームワークをすべて自動的に提供することで、プロセスがよりシンプルかつ透過的になります。必要なのは、希望するイベント処理の種類を定義することだけです。
-(アプリケーションで使用しない場合は、コンポーネントをコンパイルから除外する必要はあります。)
+Angularカスタム要素を使用すると、このインフラストラクチャをすべて自動的に提供することで、プロセスがよりシンプルかつ透過的になります。必要なのは、希望するイベント処理の種類を定義することだけです。
 
 以下のPopupサービス例のアプリケーションは、動的にロードするかカスタム要素に変換できるコンポーネントを定義しています。
 
diff --git a/adev-ja/src/content/guide/forms/reactive-forms.en.md b/adev-ja/src/content/guide/forms/reactive-forms.en.md
index c1dc1aa74d..f706d5f7f0 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.en.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.en.md
@@ -466,9 +466,7 @@ import {
   FormGroup,
 } from '@angular/forms';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UnifiedEventsBasicComponent {
   form = new FormGroup({
     username: new FormControl(''),
diff --git a/adev-ja/src/content/guide/forms/reactive-forms.md b/adev-ja/src/content/guide/forms/reactive-forms.md
index 0224ed48f4..637e7436be 100644
--- a/adev-ja/src/content/guide/forms/reactive-forms.md
+++ b/adev-ja/src/content/guide/forms/reactive-forms.md
@@ -3,7 +3,7 @@
 リアクティブフォームは、時間の経過とともに値が変化するフォーム入力の処理に、モデル駆動型のアプローチを提供します。
 このガイドでは、基本的なフォームコントロールの作成と更新、複数のコントロールをグループで使用すること、フォーム値の検証、実行時にコントロールを追加または削除できる動的フォームの作成について説明します。
 
-## リアクティブフォームの概要
+## リアクティブフォームの概要 {#overview-of-reactive-forms}
 
 リアクティブフォームは、特定の時点におけるフォームの状態を管理するために、明示的で不変のアプローチを使用します。
 フォーム状態に対する各変更は、新しい状態を返します。この状態は、変更間でモデルの整合性を維持します。
@@ -60,7 +60,7 @@ Use the constructor of `FormControl` to set its initial value, which in this cas
 </docs-step>
 </docs-workflow>
 
-### フォームコントロール値の表示
+### フォームコントロール値の表示 {#displaying-a-form-control-value}
 
 値は、次の方法で表示できます。
 
@@ -78,7 +78,7 @@ Use the constructor of `FormControl` to set its initial value, which in this cas
 
 [API リファレンス](api/forms/FormControl "詳細な構文リファレンス") で、他の `FormControl` プロパティとメソッドについて説明します。
 
-### フォームコントロール値の置換
+### フォームコントロール値の置換 {#replacing-a-form-control-value}
 
 リアクティブフォームには、ユーザーの操作なしに値をプログラムで更新できる、コントロールの値をプログラムで変更するためのメソッドがあります。
 フォームコントロールインスタンスは、フォームコントロールの値を更新し、提供された値の構造をコントロールの構造に対して検証する `setValue()` メソッドを提供します。
@@ -207,7 +207,7 @@ Just as a form group contains a group of controls, the _profileForm_ `FormGroup`
 </docs-step>
 </docs-workflow>
 
-### データモデルの一部を更新する
+### データモデルの一部を更新する {#updating-parts-of-the-data-model}
 
 複数のコントロールを含むフォームグループインスタンスの値を更新する場合は、モデルの一部だけを更新する場合があります。
 このセクションでは、フォームコントロールデータモデルの特定の部分を更新する方法について説明します。
@@ -233,7 +233,7 @@ Just as a form group contains a group of controls, the _profileForm_ `FormGroup`
 これは、`patchValue()` メソッドが、モデル構造に対して更新を適用するためです。
 `patchValue()` は、フォームモデルで定義されているプロパティのみを更新します。
 
-## FormBuilder サービスを使用してコントロールを生成する
+## FormBuilder サービスを使用してコントロールを生成する {#using-the-formbuilder-service-to-generate-controls}
 
 複数のフォームを扱う場合は、手動でフォームコントロールインスタンスを作成すると、反復処理になる可能性があります。
 `FormBuilder` サービスは、コントロールを生成するための便利なメソッドを提供します。
@@ -401,7 +401,7 @@ export class ProfileEditor {
 
 </docs-step>
 
-### トップレベルフォーム配列での `FormArrayDirective` の使用
+### トップレベルフォーム配列での `FormArrayDirective` の使用 {#using-formarraydirective-for-top-level-form-arrays}
 
 `FormArrayDirective` を使用して、`FormArray` を `<form>` 要素に直接バインドできます。
 これは、フォームがトップレベルの `FormGroup` を使用せず、配列自体が完全なフォームモデルを表す場合に便利です。
@@ -466,9 +466,7 @@ import {
   FormGroup,
 } from '@angular/forms';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UnifiedEventsBasicComponent {
   form = new FormGroup({
     username: new FormControl(''),
@@ -539,7 +537,7 @@ control.events.subscribe((e) => {
 
 NOTE: 値の変更時、このコントロールの値が更新された直後に発行が発生します。親コントロールの値（たとえば、このFormControlがFormGroupの一部である場合）は後で更新されるため、このイベントのコールバックから親コントロールの値（`value` プロパティを使用）にアクセスすると、まだ更新されていない値を取得する可能性があります。代わりに親コントロールの `events` をサブスクライブしてください。
 
-## フォームコントロール状態の管理
+## フォームコントロール状態の管理 {#managing-form-control-state}
 
 リアクティブフォームは、**touched/untouched** と **pristine/dirty** を通じてコントロールの状態を追跡します。AngularはDOM操作中にこれらを自動的に更新しますが、プログラムで管理もできます。
 
@@ -608,11 +606,11 @@ onSubmit() {
 }
 ```
 
-## イベント発行と伝播の制御
+## イベント発行と伝播の制御 {#controlling-event-emission-and-propagation}
 
 フォームコントロールをプログラムで更新する場合、フォーム階層を通じて変更を伝播する方法と、イベントを発行するかどうかを正確に制御できます。
 
-### イベント発行の理解
+### イベント発行の理解 {#understanding-event-emission}
 
 デフォルトで `emitEvent: true` の場合、コントロールへの変更は `valueChanges` と `statusChanges` Observableを通じてイベントを発行します。`emitEvent: false` を設定すると、これらの発行が抑制されます。これは、自動保存のようなリアクティブな動作をトリガーせずにプログラムで値を設定する場合、コントロール間の循環更新を回避する場合、またはイベントが最後に一度だけ発行されるべき一括更新を実行する場合に便利です。
 
@@ -640,7 +638,7 @@ export class BlogPostEditor {
 }
 ```
 
-### 伝播制御の理解
+### 伝播制御の理解 {#understanding-propagation-control}
 
 デフォルトで `onlySelf: false` の場合、更新は親コントロールにカスケードし、値と検証ステータスを再計算します。`onlySelf: true` を設定すると、更新が現在のコントロールに分離され、親への通知が防止されます。これは、親の更新を一度だけ手動でトリガーしたいバッチ操作に便利です。
 
@@ -691,7 +689,7 @@ export function positiveValues(control: AbstractControl) {
 次の表は、リアクティブフォームコントロールの作成と管理に使用されるベースクラスとサービスをリストしています。
 構文の詳細については、[フォームパッケージ](api#forms "API リファレンス") のAPIリファレンスドキュメントを参照してください。
 
-### クラス
+### クラス {#classes}
 
 | クラス             | 詳細 |
 |:---               |:---     |
@@ -702,7 +700,7 @@ export function positiveValues(control: AbstractControl) {
 | `FormBuilder`     | コントロールインスタンスを作成するためのファクトリメソッドを提供する、注入可能なサービスです。                                                                                                     |
 | `FormRecord`      | 各々が同じ値タイプを持つ `FormControl` インスタンスのコレクションの値と有効性状態を追跡します。                                                                  |
 
-### ディレクティブ
+### ディレクティブ {#directives}
 
 | ディレクティブ              | 詳細 |
 |:---                    |:---     |
diff --git a/adev-ja/src/content/guide/forms/signals/async-operations.md b/adev-ja/src/content/guide/forms/signals/async-operations.md
index a0542c9489..95ce8f7a9e 100644
--- a/adev-ja/src/content/guide/forms/signals/async-operations.md
+++ b/adev-ja/src/content/guide/forms/signals/async-operations.md
@@ -180,6 +180,23 @@ onSuccess: (response: { usernameTaken: boolean; profanity: boolean }) => {
 } // prettier-ignore
 ```
 
+The type for `onSuccess` can be specified either directly in the parameter, or with the `parse` property of `validateHttp`'s `options`
+
+```ts
+onSuccess: (response: { usernameTaken: boolean; profanity: boolean }) => {
+  // ...
+} // prettier-ignore
+
+// or
+
+options: {
+  parse: (response) => response as {usernameTaken: boolean; profanity: boolean};
+}
+onSuccess: (response) => {
+  // ...
+} // prettier-ignore
+```
+
 The `onError` function handles request failures like network errors or HTTP errors:
 
 ```ts
diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
index 35507eeca2..ba2427a7d2 100644
--- a/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
+++ b/adev-ja/src/content/guide/forms/signals/custom-controls.en.md
@@ -6,6 +6,8 @@ The browser's built-in form controls (like input, select, textarea) handle commo
 
 Signal Forms works with any component that implements specific interfaces. A **control interface** defines the properties and signals that allow your component to communicate with the form system. When your component implements one of these interfaces, the `[formField]` directive automatically connects your control to form state, validation, and data binding.
 
+HELPFUL: Custom Signal Form Controls [can be used](guide/forms/signals/migration#custom-controls) with Signal, Reactive and Template-Driven Forms without any extra compatibility code.
+
 ## Creating a basic custom control
 
 Let's start with a minimal implementation and add features as needed.
@@ -245,7 +247,7 @@ The minimal controls shown above work, but they don't respond to form state. You
 Here's a comprehensive example that implements common state properties:
 
 ```angular-ts
-import {Component, model, input, ChangeDetectionStrategy} from '@angular/core';
+import {Component, model, input, output, ChangeDetectionStrategy} from '@angular/core';
 import {
   FormValueControl,
   WithOptionalFieldTree,
@@ -266,7 +268,7 @@ import {
           [readonly]="readonly()"
           [class.invalid]="invalid()"
           [attr.aria-invalid]="invalid()"
-          (blur)="touched.set(true)"
+          (blur)="touch.emit()"
         />
 
         @if (invalid()) {
@@ -293,7 +295,8 @@ export class StatefulInput implements FormValueControl<string> {
   value = model<string>('');
 
   // Writable interaction state - control updates these
-  touched = model<boolean>(false);
+  touched = input<boolean>(false);
+  touch = output<void>();
 
   // Read-only state - form system manages these
   disabled = input<boolean>(false);
@@ -335,9 +338,53 @@ export class Login {
 
 When the user types an invalid email, the FormField directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback.
 
-### Signal types for state properties
+### Working with `debounce('blur')`
+
+The [`debounce('blur')`](api/forms/signals/debounce) rule delays updates from the UI to the form model until the field is blurred, instead of applying them on every keystroke. Built-in controls report a blur to the form automatically. A custom control only participates if it emits its `touch` output in response to the native [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event):
+
+```angular-ts
+import {Component, model, output} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-custom-input',
+  template: `
+    <input
+      type="text"
+      [value]="value()"
+      (input)="value.set($event.target.value)"
+      (blur)="touch.emit()"
+    />
+  `,
+})
+export class CustomInput implements FormValueControl<string> {
+  value = model('');
+  touch = output<void>();
+}
+```
+
+With the `touch` output in place, `debounce('blur')` behaves the same for your control as it does for built-in inputs:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {debounce, form, FormField} from '@angular/forms/signals';
+import {CustomInput} from './custom-input';
+
+@Component({
+  selector: 'app-root',
+  imports: [CustomInput, FormField],
+  template: `<app-custom-input [formField]="userForm.name" />`,
+})
+export class App {
+  userModel = signal({name: ''});
+
+  userForm = form(this.userModel, (schemaPath) => {
+    debounce(schemaPath.name, 'blur');
+  });
+}
+```
 
-Most state properties use `input()` (read-only from the form). Use `model()` for `touched` when your control updates it on user interaction. The `touched` property uniquely supports `model()`, `input()`, or `OutputRef` depending on your needs.
+IMPORTANT: Emit `touch` on `blur` (when focus leaves the control), not on `focus`. Without the `touch` output the field never registers as blurred, so `debounce('blur')` has no effect on your control.
 
 ## Value transformation
 
@@ -418,6 +465,38 @@ accountForm = form(this.accountModel, (schemaPath) => {
 });
 ```
 
+## Making controls reusable
+
+A custom control often carries implicit expectations about validation. An email input needs `required` and `email` rules in every form that uses it. Instead of relying on each consumer to redeclare those rules, package a companion schema alongside the control and export both from the same module:
+
+```ts {header: 'email-input.ts'}
+import {schema, required, email} from '@angular/forms/signals';
+
+export const emailFieldSchema = schema<string>((path) => {
+  required(path, {message: 'Email is required'});
+  email(path, {message: 'Enter a valid email address'});
+});
+```
+
+A consumer imports the companion schema and composes it into their form with `apply()`:
+
+```ts {header: 'registration.ts'}
+import {form, apply} from '@angular/forms/signals';
+import {emailFieldSchema} from './email-input';
+
+registrationForm = form(this.registrationModel, (path) => {
+  apply(path.email, emailFieldSchema);
+});
+```
+
+`apply()` merges the companion schema's rules into the parent form at the specified path. The consumer can still add more rules to the same field because `apply()` composes with other rules rather than replacing them. See the [Schemas guide](guide/forms/signals/schemas) for complete coverage of `schema()`, `apply()`, and conditional composition with `applyWhen()`.
+
+### Design considerations
+
+The consumer's model must initialize every field with a defined value. In Signal Forms, `undefined` signifies the absence of a field and not an empty value. For a reusable email control, that means the consumer should use `''` as the initial value, and not leave the property undefined. See the [Form Models guide](guide/forms/signals/models) for details on choosing initial values.
+
+In addition, controls should not register their own effects for state management. The form system manages field state through internal effects. This means that your control receives state updates through input signals. If a control needs to transform values, use `linkedSignal()` as shown in the "[Value transformation](#value-transformation)" section rather than an `effect()`.
+
 ## Next steps
 
 This guide covered building custom controls that integrate with Signal Forms. Related guides explore other aspects of Signal Forms:
diff --git a/adev-ja/src/content/guide/forms/signals/custom-controls.md b/adev-ja/src/content/guide/forms/signals/custom-controls.md
index c22c25bfaf..dfc9dca05a 100644
--- a/adev-ja/src/content/guide/forms/signals/custom-controls.md
+++ b/adev-ja/src/content/guide/forms/signals/custom-controls.md
@@ -6,6 +6,8 @@ NOTE: このガイドは、[Signal Formsの基本](essentials/signal-forms)に
 
 シグナルフォームは、特定のインターフェースを実装するあらゆるコンポーネントと連携して動作します。**コントロールインターフェース**は、コンポーネントがフォームシステムと通信するためのプロパティとシグナルを定義します。コンポーネントがこれらのインターフェースのいずれかを実装すると、`[formField]`ディレクティブが自動的にコントロールをフォームの状態、バリデーション、データバインディングに接続します。
 
+HELPFUL: Custom Signal Form Controls [can be used](guide/forms/signals/migration#custom-controls) with Signal, Reactive and Template-Driven Forms without any extra compatibility code.
+
 ## 基本的なカスタムコントロールの作成 {#creating-a-basic-custom-control}
 
 最小限の実装から始めて、必要に応じて機能を追加していきましょう。
@@ -245,7 +247,7 @@ TIP: フォームモデルの作成と管理に関する完全な情報につい
 以下は、一般的な状態プロパティを実装する包括的な例です:
 
 ```angular-ts
-import {Component, model, input, ChangeDetectionStrategy} from '@angular/core';
+import {Component, model, input, output, ChangeDetectionStrategy} from '@angular/core';
 import {
   FormValueControl,
   WithOptionalFieldTree,
@@ -266,7 +268,7 @@ import {
           [readonly]="readonly()"
           [class.invalid]="invalid()"
           [attr.aria-invalid]="invalid()"
-          (blur)="touched.set(true)"
+          (blur)="touch.emit()"
         />
 
         @if (invalid()) {
@@ -293,7 +295,8 @@ export class StatefulInput implements FormValueControl<string> {
   value = model<string>('');
 
   // Writable interaction state - control updates these
-  touched = model<boolean>(false);
+  touched = input<boolean>(false);
+  touch = output<void>();
 
   // Read-only state - form system manages these
   disabled = input<boolean>(false);
@@ -335,9 +338,53 @@ export class Login {
 
 ユーザーが無効なメールアドレスを入力すると、`FormField`ディレクティブが自動的に`invalid()`と`errors()`を更新します。あなたのコントロールは、そのバリデーションフィードバックを表示できます。
 
-### 状態プロパティのシグナルタイプ {#signal-types-for-state-properties}
+### Working with `debounce('blur')`
+
+The [`debounce('blur')`](api/forms/signals/debounce) rule delays updates from the UI to the form model until the field is blurred, instead of applying them on every keystroke. Built-in controls report a blur to the form automatically. A custom control only participates if it emits its `touch` output in response to the native [`blur` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event):
+
+```angular-ts
+import {Component, model, output} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-custom-input',
+  template: `
+    <input
+      type="text"
+      [value]="value()"
+      (input)="value.set($event.target.value)"
+      (blur)="touch.emit()"
+    />
+  `,
+})
+export class CustomInput implements FormValueControl<string> {
+  value = model('');
+  touch = output<void>();
+}
+```
+
+With the `touch` output in place, `debounce('blur')` behaves the same for your control as it does for built-in inputs:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {debounce, form, FormField} from '@angular/forms/signals';
+import {CustomInput} from './custom-input';
+
+@Component({
+  selector: 'app-root',
+  imports: [CustomInput, FormField],
+  template: `<app-custom-input [formField]="userForm.name" />`,
+})
+export class App {
+  userModel = signal({name: ''});
+
+  userForm = form(this.userModel, (schemaPath) => {
+    debounce(schemaPath.name, 'blur');
+  });
+}
+```
 
-ほとんどの状態プロパティは`input()`（フォームからの読み取り専用）を使用します。コントロールがユーザーインタラクションに応じて更新する場合は、`touched`に`model()`を使用します。`touched`プロパティは、ニーズに応じて`model()`、`input()`、または`OutputRef`を一意にサポートします。
+IMPORTANT: Emit `touch` on `blur` (when focus leaves the control), not on `focus`. Without the `touch` output the field never registers as blurred, so `debounce('blur')` has no effect on your control.
 
 ## 値の変換 {#value-transformation}
 
@@ -418,6 +465,38 @@ accountForm = form(this.accountModel, (schemaPath) => {
 });
 ```
 
+## Making controls reusable
+
+A custom control often carries implicit expectations about validation. An email input needs `required` and `email` rules in every form that uses it. Instead of relying on each consumer to redeclare those rules, package a companion schema alongside the control and export both from the same module:
+
+```ts {header: 'email-input.ts'}
+import {schema, required, email} from '@angular/forms/signals';
+
+export const emailFieldSchema = schema<string>((path) => {
+  required(path, {message: 'Email is required'});
+  email(path, {message: 'Enter a valid email address'});
+});
+```
+
+A consumer imports the companion schema and composes it into their form with `apply()`:
+
+```ts {header: 'registration.ts'}
+import {form, apply} from '@angular/forms/signals';
+import {emailFieldSchema} from './email-input';
+
+registrationForm = form(this.registrationModel, (path) => {
+  apply(path.email, emailFieldSchema);
+});
+```
+
+`apply()` merges the companion schema's rules into the parent form at the specified path. The consumer can still add more rules to the same field because `apply()` composes with other rules rather than replacing them. See the [Schemas guide](guide/forms/signals/schemas) for complete coverage of `schema()`, `apply()`, and conditional composition with `applyWhen()`.
+
+### Design considerations
+
+The consumer's model must initialize every field with a defined value. In Signal Forms, `undefined` signifies the absence of a field and not an empty value. For a reusable email control, that means the consumer should use `''` as the initial value, and not leave the property undefined. See the [Form Models guide](guide/forms/signals/models) for details on choosing initial values.
+
+In addition, controls should not register their own effects for state management. The form system manages field state through internal effects. This means that your control receives state updates through input signals. If a control needs to transform values, use `linkedSignal()` as shown in the "[Value transformation](#value-transformation)" section rather than an `effect()`.
+
 ## 次のステップ {#next-steps}
 
 このガイドでは、シグナルフォームと連携するカスタムコントロールの構築について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します:
diff --git a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
index f851af4d4a..e4389576f2 100644
--- a/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
+++ b/adev-ja/src/content/guide/forms/signals/designing-your-form-model.md
@@ -380,7 +380,7 @@ class MyForm {
 
   handleSubmit() {
     submit(this.myForm, async () => {
-      await this.myDataService.update(formModelToDomainModel(this.myForm.value()));
+      await this.myDataService.update(formModelToDomainModel(this.myForm().value()));
     });
   };
 }
@@ -402,7 +402,7 @@ class MyForm {
     effect(() => {
       // When the form model changes to a valid value, update the domain model.
       if (this.myForm().valid()) {
-        this.domainModel.set(formModelToDomainModel(this.myForm.value()));
+        this.domainModel.set(formModelToDomainModel(this.myForm().value()));
       }
     });
   };
diff --git a/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md b/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md
new file mode 100644
index 0000000000..5076120b6e
--- /dev/null
+++ b/adev-ja/src/content/guide/forms/signals/dynamic-forms-with-json.md
@@ -0,0 +1,481 @@
+# Dynamic Forms with JSON
+
+Some forms can't define their structure at compile time. Server-driven forms, admin panels, multi-tenant applications, and CMS-managed content all need to render fields from configuration delivered at runtime, typically as JSON from a backend, an admin tool, or per-tenant settings.
+
+This guide shows how to build forms whose model, schema, validation, and rendering are all derived from a single runtime configuration.
+
+## When to use JSON-driven forms
+
+This pattern is a good choice when:
+
+- A backend defines which fields appear based on user role, feature flags, or business rules
+- Non-developers configure form structure through an admin panel or CMS
+- Each tenant in a multi-tenant application has its own form structure stored as configuration
+- Forms need to evolve without redeploying the frontend
+
+Use a static form (with fields defined directly in your component) when the structure is known at build time. Static forms get full TypeScript checking on every field, plus straightforward testing and tooling support.
+
+## Defining a typed field config
+
+When you want to render fields from runtime configuration, start with a TypeScript type that captures the shape of each field. A discriminated union by `kind` lets each variant declare its own validation options:
+
+```ts
+type FieldConfig =
+  | {kind: 'text'; name: string; label: string; required?: boolean}
+  | {kind: 'number'; name: string; label: string; required?: boolean; min?: number; max?: number};
+```
+
+Every variant has a name, label, and optional `required` flag. Number fields additionally accept `min` and `max` bounds. Add new variants by adding new `kind` branches.
+
+A concrete config might look like this:
+
+```ts
+const profileConfig: FieldConfig[] = [
+  {kind: 'text', name: 'fullName', label: 'Full Name', required: true},
+  {kind: 'number', name: 'age', label: 'Age', required: true, min: 18, max: 120},
+];
+```
+
+In practice this `FieldConfig[]` typically arrives from your backend, an admin panel, or a CMS. For brevity, the examples below use an in-component literal.
+
+## Building the model from config
+
+The form's model needs one entry per field with a default value matching the field's kind. A small helper handles this:
+
+```ts
+function buildModel(configs: FieldConfig[]): Record<string, string | number | null> {
+  const initial: Record<string, string | number | null> = {};
+  for (const config of configs) {
+    initial[config.name] = config.kind === 'number' ? null : '';
+  }
+  return initial;
+}
+```
+
+The model uses `Record<string, string | number | null>` because the keys are not known ahead of time.
+
+In addition, numeric fields initialize to `null` rather than `0` so an empty field reads as empty. With `0`, [`required()`](api/forms/signals/required) would treat the field as already filled, and any [`min()`](api/forms/signals/min) constraint above zero would flag the field invalid before the user enters anything.
+
+## Building the schema from config
+
+The schema is also derived from the config. You can loop through each entry and apply the validators that match its kind:
+
+```ts
+import {required, min, max, SchemaFn} from '@angular/forms/signals';
+
+function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | number | null>> {
+  return (path) => {
+    for (const config of configs) {
+      const fieldPath = path[config.name];
+
+      if (config.required) {
+        required(fieldPath);
+      }
+
+      if (config.kind === 'number') {
+        if (config.min !== undefined) min(fieldPath, config.min);
+        if (config.max !== undefined) max(fieldPath, config.max);
+      }
+    }
+  };
+}
+```
+
+The discriminated union narrows `config` inside each branch, so `config.min` and `config.max` are typed correctly when `config.kind === 'number'`.
+
+## Expressing conditional rules in config
+
+Some validation rules only make sense under certain conditions. For example, US state codes need validating only when the country is the US. Express these dependencies in the config by adding a `when` discriminator that names another field and the value it must equal:
+
+```ts
+type WhenCondition = {field: string; equals: string | number};
+
+type FieldConfig =
+  | {kind: 'text'; name: string; label: string; required?: boolean; when?: WhenCondition}
+  | {
+      kind: 'number';
+      name: string;
+      label: string;
+      required?: boolean;
+      min?: number;
+      max?: number;
+      when?: WhenCondition;
+    };
+```
+
+Update `buildSchema()` to translate `when` into an [`applyWhen()`](api/forms/signals/applyWhen) call. Shared rule application logic moves into a small closure so the conditional and unconditional branches both call the same function:
+
+```ts
+import {applyWhen, required, min, max, SchemaFn} from '@angular/forms/signals';
+
+function buildSchema(configs: FieldConfig[]): SchemaFn<Record<string, string | number | null>> {
+  return (rootPath) => {
+    for (const config of configs) {
+      const applyRules = (path: typeof rootPath) => {
+        const fieldPath = path[config.name];
+        if (config.required) required(fieldPath);
+        if (config.kind === 'number') {
+          if (config.min !== undefined) min(fieldPath, config.min);
+          if (config.max !== undefined) max(fieldPath, config.max);
+        }
+      };
+
+      if (config.when) {
+        const {field, equals} = config.when;
+        applyWhen(rootPath, ({valueOf}) => valueOf(rootPath[field]) === equals, applyRules);
+      } else {
+        applyRules(rootPath);
+      }
+    }
+  };
+}
+```
+
+When `applyWhen()`'s condition is true, the rules inside activate. When the condition becomes false, the rules deactivate and the field's validation state clears. Because the condition function reads through `valueOf(rootPath[field])`, the form re-evaluates the gate every time the referenced field changes.
+
+A config that uses `when` looks like this:
+
+```ts
+const addressConfig: FieldConfig[] = [
+  {kind: 'text', name: 'country', label: 'Country', required: true},
+  {
+    kind: 'text',
+    name: 'stateCode',
+    label: 'State',
+    required: true,
+    when: {field: 'country', equals: 'US'},
+  },
+];
+```
+
+The `stateCode` field only requires a value when `country` is `'US'`. Users entering any other country can leave `stateCode` blank without blocking submission.
+
+For more complex conditions (multiple fields, ranges, or non-equality checks), extend `WhenCondition` with additional discriminators (such as `in: string[]` or `notEquals: string | number`) and translate each variant inside `buildSchema()`. The principle is the same: the config carries the data, `buildSchema()` translates it to `applyWhen()` calls.
+
+To gate visibility instead of validation, follow the same pattern using [`hidden()`](api/forms/signals/hidden) on the field path. See [Configuring `hidden()` state on fields](guide/forms/signals/form-logic#configuring-hidden-state-on-fields) for details.
+
+## Expressing repeating fields in config
+
+Some configurations need fields that grow and shrink at runtime, like a list of phone numbers, tags, or invoice line items. Add an `array` kind to the config and translate it to [`applyEach()`](api/forms/signals/applyEach) so per-item rules apply uniformly as items come and go.
+
+Extend `FieldConfig` with an `array` variant. This example uses arrays of strings; the same approach scales to arrays of objects by replacing the item shape with a record:
+
+```ts
+type FieldConfig =
+  | {kind: 'text'; name: string; label: string; required?: boolean; when?: WhenCondition}
+  | {
+      kind: 'number';
+      name: string;
+      label: string;
+      required?: boolean;
+      min?: number;
+      max?: number;
+      when?: WhenCondition;
+    }
+  | {kind: 'array'; name: string; label: string; itemRequired?: boolean; when?: WhenCondition};
+```
+
+Update `buildModel()` to initialize array fields with an empty array. The model widens to include `string[]`:
+
+```ts
+function buildModel(configs: FieldConfig[]): Record<string, string | number | null | string[]> {
+  const initial: Record<string, string | number | null | string[]> = {};
+  for (const config of configs) {
+    if (config.kind === 'number') initial[config.name] = null;
+    else if (config.kind === 'array') initial[config.name] = [];
+    else initial[config.name] = '';
+  }
+  return initial;
+}
+```
+
+Update `buildSchema()` to apply per-item rules with `applyEach()`. The path coming from a `Record<string, string | number | null | string[]>` model is too broad for `applyEach()` (and for `min()` / `max()`) to type-check directly, so cast `fieldPath` to the appropriate shape inside each `kind` branch:
+
+```ts
+import {
+  applyEach,
+  applyWhen,
+  required,
+  min,
+  max,
+  SchemaFn,
+  SchemaPath,
+} from '@angular/forms/signals';
+
+function buildSchema(
+  configs: FieldConfig[],
+): SchemaFn<Record<string, string | number | null | string[]>> {
+  return (rootPath) => {
+    for (const config of configs) {
+      const applyRules = (path: typeof rootPath) => {
+        const fieldPath = path[config.name];
+
+        if (config.kind === 'array') {
+          const arrayPath = fieldPath as unknown as SchemaPath<string[]>;
+          if (config.itemRequired) {
+            applyEach(arrayPath, (item) => required(item));
+          }
+          return;
+        }
+
+        if (config.required) required(fieldPath);
+
+        if (config.kind === 'number') {
+          const numberPath = fieldPath as unknown as SchemaPath<number | null>;
+          if (config.min !== undefined) min(numberPath, config.min);
+          if (config.max !== undefined) max(numberPath, config.max);
+        }
+      };
+
+      if (config.when) {
+        const {field, equals} = config.when;
+        applyWhen(rootPath, ({valueOf}) => valueOf(rootPath[field]) === equals, applyRules);
+      } else {
+        applyRules(rootPath);
+      }
+    }
+  };
+}
+```
+
+The casts inside each branch are deliberate escape hatches: you're trading the compiler's structural guarantee for a runtime invariant the surrounding `kind` check enforces. Each cast is scoped to a `kind` block, so the assumption stays local and straightforward to audit.
+
+A config that uses the `array` kind looks like this:
+
+```ts
+const contactConfig: FieldConfig[] = [
+  {kind: 'text', name: 'fullName', label: 'Full name', required: true},
+  {kind: 'array', name: 'phoneNumbers', label: 'Phone numbers', itemRequired: true},
+];
+```
+
+To render an array field, iterate it with `@for` and let users add or remove items by updating the model signal. Add a typed accessor that returns a [`FieldTree`](api/forms/signals/FieldTree) so the iteration sees the array structure, and define methods to grow and shrink the model:
+
+```ts
+import {FieldTree} from '@angular/forms/signals';
+
+// inside the component class
+asArrayField(name: string): FieldTree<string[]> {
+  return this.dynamicForm[name] as unknown as FieldTree<string[]>;
+}
+
+addItem(name: string) {
+  this.model.update(current => ({
+    ...current,
+    [name]: [...(current[name] as string[]), ''],
+  }));
+}
+
+removeItem(name: string, index: number) {
+  this.model.update(current => ({
+    ...current,
+    [name]: (current[name] as string[]).filter((_, i) => i !== index),
+  }));
+}
+```
+
+`FieldTree<string[]>` is iterable, so `@for` can walk it; each item is a `FieldTree<string>` that satisfies `[formField]` directly. Leaf fields can use `Field<T>` accessors instead, since `Field<T>` is the callable signature without iteration.
+
+In the template, render an array case like this:
+
+```angular-html
+@case ('array') {
+  <fieldset>
+    <legend>{{ config.label }}</legend>
+    @for (item of asArrayField(config.name); track item) {
+      <input type="text" [formField]="item" />
+      <button type="button" (click)="removeItem(config.name, $index)">Remove</button>
+    }
+    <button type="button" (click)="addItem(config.name)">Add</button>
+  </fieldset>
+}
+```
+
+The `addItem()` method extends the model; the form re-derives the array's fields automatically. New items start with fresh validation state. `removeItem()` filters the model; the dropped item's field state goes with it.
+
+### Tracking item identity
+
+Signal Forms tracks each item in an array of objects by its identity. When you store a reference to a field at a specific position, that reference follows the underlying data, not the position. Reading state through the held reference returns the data even if it has moved:
+
+```ts
+const contactModel = signal([
+  {name: 'Alice', phone: '555-0001'},
+  {name: 'Bob', phone: '555-0002'},
+]);
+
+const contactForm = form(contactModel);
+
+// Hold a reference to the field that's currently at index 0 (Alice).
+const aliceField = contactForm[0];
+
+// Swap the array items so Bob is at index 0, Alice at index 1.
+contactModel.update(([alice, bob]) => [bob, alice]);
+
+// The held reference still points to Alice's field, even after the swap.
+console.log(aliceField().value().phone); // '555-0001' (Alice's number)
+console.log(contactForm[0]().value().phone); // '555-0002' (Bob, now at index 0)
+```
+
+This identity tracking prevents bugs when sorting, reordering, or filtering, as long as the referenced item remains in the array. Stored field references remain valid even when array order changes; removing the referenced item itself orphans the held reference.
+
+For arrays of primitives (the `phoneNumbers` example above), Signal Forms tracks items positionally instead: index 0 always refers to whatever value is currently at position 0.
+
+Identity here is by JavaScript object reference, not by a logical id like a database key. If you replace the array with freshly-deserialized objects (for example, after a server reload), field state doesn't follow the logical item even when each item's `id` is unchanged. The guarantee covers in-memory operations like sorting, reordering, and filtering, not data refresh.
+
+## Validating the config
+
+Configs from external sources need validation before the form is built. Several failure modes can hide in untrusted JSON:
+
+- Duplicate `name` values overwrite earlier model entries and break the `track config.name` expression in the template.
+- A `when` clause that names a non-existent field fails at runtime when the condition first evaluates.
+- A `when` clause that compares against an `array` field has no defined equality semantics.
+- A `when.equals` value whose type doesn't match the referenced field's kind silently never matches, hiding the conditional behavior as if the rule were never active.
+
+Catch all four at the boundary:
+
+```ts
+function validateConfigs(configs: FieldConfig[]): FieldConfig[] {
+  const knownNames = new Set<string>();
+
+  for (const config of configs) {
+    if (knownNames.has(config.name)) {
+      throw new Error(`Duplicate field name in config: "${config.name}"`);
+    }
+    knownNames.add(config.name);
+  }
+
+  for (const config of configs) {
+    if (!config.when) continue;
+    if (!knownNames.has(config.when.field)) {
+      throw new Error(
+        `Field "${config.name}" references unknown field "${config.when.field}" in its 'when' condition.`,
+      );
+    }
+    const referenced = configs.find((c) => c.name === config.when!.field)!;
+    if (referenced.kind === 'array') {
+      throw new Error(
+        `Field "${config.name}" cannot use 'when' to compare against array field "${config.when.field}".`,
+      );
+    }
+    const expected = referenced.kind === 'text' ? 'string' : 'number';
+    if (typeof config.when.equals !== expected) {
+      throw new Error(
+        `Field "${config.name}" compares ${referenced.kind} field "${config.when.field}" against a ${typeof config.when.equals} value; expected a ${expected}.`,
+      );
+    }
+  }
+
+  return configs;
+}
+```
+
+The first pass enforces uniqueness; the second pass walks each `when` clause to confirm the referenced field exists, isn't an array, and is being compared against a value of the right type. The function returns the configs unchanged on success, so it composes cleanly with the field initializer that holds the configs in the component. Failures surface at the boundary between your application and the upstream source rather than as opaque form misbehavior later.
+
+## Rendering the form dynamically
+
+In the component, use `@for` to iterate the configs and `@switch` on `kind` to pick the right input control:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {Field, FieldTree, form, FormField, FormRoot} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-dynamic-form',
+  imports: [FormField, FormRoot],
+  template: `
+    <form [formRoot]="dynamicForm">
+      @for (config of configs; track config.name) {
+        @switch (config.kind) {
+          @case ('text') {
+            <label>
+              {{ config.label }}
+              <input type="text" [formField]="asTextField(config.name)" />
+            </label>
+          }
+          @case ('number') {
+            <label>
+              {{ config.label }}
+              <input type="number" [formField]="asNumberField(config.name)" />
+            </label>
+          }
+          @case ('array') {
+            <fieldset>
+              <legend>{{ config.label }}</legend>
+              @for (item of asArrayField(config.name); track item; let i = $index) {
+                <input type="text" [formField]="item" />
+                <button type="button" (click)="removeItem(config.name, i)">Remove</button>
+              }
+              <button type="button" (click)="addItem(config.name)">Add</button>
+            </fieldset>
+          }
+        }
+      }
+    </form>
+  `,
+})
+export class DynamicForm {
+  configs: FieldConfig[] = validateConfigs([
+    {kind: 'text', name: 'fullName', label: 'Full Name', required: true},
+    {kind: 'number', name: 'age', label: 'Age', required: true, min: 18, max: 120},
+    {kind: 'array', name: 'phoneNumbers', label: 'Phone numbers', itemRequired: true},
+  ]);
+
+  model = signal(buildModel(this.configs));
+
+  dynamicForm = form(this.model, buildSchema(this.configs));
+
+  asTextField(name: string): Field<string> {
+    // <input type="text"> requires Field<string>.
+    return this.dynamicForm[name] as unknown as Field<string>;
+  }
+
+  asNumberField(name: string): Field<number | null> {
+    // <input type="number"> requires Field<number | null>.
+    return this.dynamicForm[name] as unknown as Field<number | null>;
+  }
+
+  asArrayField(name: string): FieldTree<string[]> {
+    // FieldTree (not Field) so @for can iterate the array.
+    return this.dynamicForm[name] as unknown as FieldTree<string[]>;
+  }
+
+  addItem(name: string) {
+    this.model.update((current) => ({
+      ...current,
+      [name]: [...(current[name] as string[]), ''],
+    }));
+  }
+
+  removeItem(name: string, index: number) {
+    this.model.update((current) => ({
+      ...current,
+      [name]: (current[name] as string[]).filter((_, i) => i !== index),
+    }));
+  }
+}
+```
+
+Template type-checking treats `dynamicForm[name]` as an independent expression, so the `@switch` narrowing on `config.kind` doesn't reach the indexed access. The accessors restate that narrowing as a cast at the binding site, and the matching `kind` branch guarantees the narrowed type is correct at runtime.
+
+Because the model and schema are both derived from the same `FieldConfig[]` at component construction, they can't drift apart for a given config. The example above assumes the config is available synchronously when the component is created.
+
+## Next steps
+
+JSON-driven forms keep their model and schema aligned by deriving both from the same `FieldConfig[]`. Each extension in this guide (conditional rules, repeating fields) widens the type and adds a translation step inside `buildSchema()` while preserving that alignment. The model and schema stay locked together, regardless of where the config comes from or how it grows.
+
+For related guides cover other aspects of Signal Forms, check out:
+
+<docs-pill-row>
+  <docs-pill href="guide/forms/signals/schemas" title="Schemas and schema composability" />
+  <docs-pill href="guide/forms/signals/validation" title="Validation" />
+  <docs-pill href="guide/forms/signals/form-logic" title="Adding form logic" />
+  <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
+</docs-pill-row>
+
+For detailed API documentation, see:
+
+- [`form()`](api/forms/signals/form) - Create a form from a model signal
+- [`applyWhen()`](api/forms/signals/applyWhen) - Apply a schema conditionally based on reactive state
+- [`applyEach()`](api/forms/signals/applyEach) - Apply a schema to each item in an array field
+- [`FieldTree`](api/forms/signals/FieldTree) - Navigable tree of fields exposed by `form()`
+- [`SchemaFn`](api/forms/signals/SchemaFn) - Type signature for schema functions
diff --git a/adev-ja/src/content/guide/forms/signals/field-metadata.md b/adev-ja/src/content/guide/forms/signals/field-metadata.md
index d2f5d7092f..a35a117a28 100644
--- a/adev-ja/src/content/guide/forms/signals/field-metadata.md
+++ b/adev-ja/src/content/guide/forms/signals/field-metadata.md
@@ -40,14 +40,16 @@ Calling `required(path.username)` contributes a value to the `REQUIRED` metadata
 
 Several built-in constraint validators follow this pattern:
 
-| Validator     | Metadata key | Type                  | `FieldState` getter |
-| ------------- | ------------ | --------------------- | ------------------- |
-| `required()`  | `REQUIRED`   | `boolean`             | `required`          |
-| `min()`       | `MIN`        | `number \| undefined` | `min`               |
-| `max()`       | `MAX`        | `number \| undefined` | `max`               |
-| `minLength()` | `MIN_LENGTH` | `number \| undefined` | `minLength`         |
-| `maxLength()` | `MAX_LENGTH` | `number \| undefined` | `maxLength`         |
-| `pattern()`   | `PATTERN`    | `RegExp[]`            | `pattern`           |
+| Validator     | Metadata key               | Type                  | `FieldState` getter |
+| ------------- | -------------------------- | --------------------- | ------------------- |
+| `required()`  | `REQUIRED`                 | `boolean`             | `required`          |
+| `min()`       | `MIN` selects `MIN_NUMBER` | `number \| undefined` | `min`               |
+| `max()`       | `MAX` selects `MAX_NUMBER` | `number \| undefined` | `max`               |
+| `minDate()`   | `MIN` selects `MIN_DATE`   | `Date \| undefined`   | `min`               |
+| `maxDate()`   | `MAX` selects `MAX_DATE`   | `Date \| undefined`   | `max`               |
+| `minLength()` | `MIN_LENGTH`               | `number \| undefined` | `minLength`         |
+| `maxLength()` | `MAX_LENGTH`               | `number \| undefined` | `maxLength`         |
+| `pattern()`   | `PATTERN`                  | `RegExp[]`            | `pattern`           |
 
 Non-constraint validators like `email()` and `validate()` do not contribute to metadata. They run their check and surface a validation error, but they do not publish a reactive value for templates to read.
 
@@ -217,16 +219,20 @@ While `MetadataReducer.min()` and `MetadataReducer.max()` are reducers, you may
 
 The built-in constraint keys pick their reducers based on what "strictest" means for the constraint, which is often the opposite of what the key's name suggests:
 
-| Key          | Reducer          | Reasoning                                                                                                                             |
-| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `REQUIRED`   | `or()`           | If any `required()` rule evaluates to `true`, the field is required.                                                                  |
-| `MIN`        | `max()`          | A minimum-value constraint is strictest when largest. If one rule requires `>= 5` and another `>= 10`, the effective minimum is `10`. |
-| `MAX`        | `min()`          | A maximum-value constraint is strictest when smallest. If one rule caps at `100` and another at `50`, the effective maximum is `50`.  |
-| `MIN_LENGTH` | `max()`          | Same logic as `MIN`: the longest required length wins.                                                                                |
-| `MAX_LENGTH` | `min()`          | Same logic as `MAX`: the shortest allowed length wins.                                                                                |
-| `PATTERN`    | `list<RegExp>()` | Each `pattern()` call contributes a regex; the value must match all of them.                                                          |
+| Key          | Reducer          | Reasoning                                                                                                                              |
+| ------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `REQUIRED`   | `or()`           | If any `required()` rule evaluates to `true`, the field is required.                                                                   |
+| `MIN_NUMBER` | `max()`          | A minimum-number constraint is strictest when largest. If one rule requires `>= 5` and another `>= 10`, the effective minimum is `10`. |
+| `MIN_DATE`   | `max()`          | Same logic as `MIN_NUMBER`: the latest required date wins.                                                                             |
+| `MAX_NUMBER` | `min()`          | A maximum-number constraint is strictest when smallest. If one rule caps at `100` and another at `50`, the effective maximum is `50`.  |
+| `MAX_DATE`   | `min()`          | Same logic as `MAX_NUMBER`: the earliest allowed date wins.                                                                            |
+| `MIN_LENGTH` | `max()`          | Same logic as `MIN_NUMBER`: the longest required length wins.                                                                          |
+| `MAX_LENGTH` | `min()`          | Same logic as `MAX_NUMBER`: the shortest allowed length wins.                                                                          |
+| `PATTERN`    | `list<RegExp>()` | Each `pattern()` call contributes a regex; the value must match all of them.                                                           |
 
-This pairing of "strictest wins" is why calling `min(path.age, 18)` and `min(path.age, 21)` in two composed schemas works correctly. Each call registers its own validator that enforces its specific bound (so a value below either bound fails validation). Separately, each call contributes to the public `MIN` key, and `state.metadata(MIN)!()` reports the aggregate (`21`) so UI and custom controls can read the effective minimum.
+`MIN` and `MAX` are selection keys. They point to the concrete key that matches the field's value type, such as `MIN_NUMBER` for `min()` and `MIN_DATE` for `minDate()`. This is why `field().min()` and `field().max()` work for both numeric and date fields.
+
+This pairing of "strictest wins" is why calling `min(path.age, 18)` and `min(path.age, 21)` in two composed schemas works correctly. Each call registers its own validator that enforces its specific bound (so a value below either bound fails validation). Separately, each call contributes to the `MIN_NUMBER` key, and `state.min!()` reports the aggregate (`21`) so UI and custom controls can read the effective minimum.
 
 ### Writing a custom reducer
 
diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
index ddcb60a2df..a879369d33 100644
--- a/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
+++ b/adev-ja/src/content/guide/forms/signals/field-state-management.en.md
@@ -166,7 +166,73 @@ Interaction state tracks whether users have interacted with fields, enabling pat
 
 ### Touched state
 
-The `touched()` signal tracks whether a user has focused and then blurred a field. It becomes `true` when a user focuses and then blurs a field through user interaction (not programmatically). Hidden, disabled, and readonly fields are non-interactive and don't become touched from user interactions.
+The `touched()` signal tracks whether a user has focused and then blurred a field, or whether the field has been marked as touched programmatically. Only interactive fields can become touched; hidden, disabled, and readonly fields don't become touched from user interactions or `markAsTouched()`.
+
+When you need a section-level action to reveal validation errors within that section, call `markAsTouched()` on the section field. The default value of `skipDescendants` is `false`, so the call marks the section field and each descendant field as touched.
+
+For example, a checkout flow can validate the shipping section before allowing the user to continue to the next step:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-checkout-shipping',
+  imports: [FormField],
+  template: `
+    <label>
+      Name
+      <input [formField]="checkoutForm.shipping.name" />
+    </label>
+    @if (checkoutForm.shipping.name().touched() && checkoutForm.shipping.name().invalid()) {
+      <p>{{ checkoutForm.shipping.name().errors()[0].message }}</p>
+    }
+
+    <label>
+      Address
+      <input [formField]="checkoutForm.shipping.address" />
+    </label>
+    @if (checkoutForm.shipping.address().touched() && checkoutForm.shipping.address().invalid()) {
+      <p>{{ checkoutForm.shipping.address().errors()[0].message }}</p>
+    }
+
+    <button type="button" (click)="continueToPayment()">Continue</button>
+
+    @if (showPayment() && checkoutForm.shipping().valid()) {
+      <p>Ready for payment.</p>
+    }
+  `,
+})
+export class CheckoutShipping {
+  checkoutModel = signal({
+    shipping: {
+      name: '',
+      address: '',
+    },
+  });
+
+  showPayment = signal(false);
+
+  checkoutForm = form(this.checkoutModel, (schemaPath) => {
+    required(schemaPath.shipping.name, {message: 'Enter a name'});
+    required(schemaPath.shipping.address, {message: 'Enter an address'});
+  });
+
+  continueToPayment() {
+    this.checkoutForm.shipping().markAsTouched();
+
+    if (this.checkoutForm.shipping().invalid()) {
+      return;
+    }
+
+    this.showPayment.set(true);
+  }
+}
+```
+
+When `continueToPayment()` calls `markAsTouched()` on `checkoutForm.shipping()`, it uses the default `skipDescendants: false` behavior. Angular marks `shipping`, `shipping.name`, and `shipping.address` as touched, so the child `touched() && invalid()` error messages become visible before the whole form is submitted.
+
+NOTE: Pass `{skipDescendants: true}` only when the field receiving the call should become touched without changing the touched state of its descendants.
 
 ### Dirty state
 
@@ -197,11 +263,11 @@ Use `dirty()` for "unsaved changes" warnings or to enable save buttons only when
 
 ### Touched vs dirty
 
-These signals track different user interactions:
+These signals track different kinds of interaction state:
 
 | Signal      | When it becomes true                                                                                                            |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `touched()` | User has focused and blurred an interactive field (even if they didn't change anything)                                         |
+| `touched()` | User has focused and blurred an interactive field, or the field was marked as touched programmatically                          |
 | `dirty()`   | User has modified an interactive field (even if they never blurred it, and even if the current value matches the initial value) |
 
 A field can be in different combinations:
@@ -381,7 +447,7 @@ Because the root form is a field, it has the same signals (such as `valid()`, `i
 | `valid()`   | All interactive fields are valid and no validators are pending |
 | `invalid()` | At least one interactive field has validation errors           |
 | `pending()` | At least one interactive field has pending async validation    |
-| `touched()` | User has touched at least one interactive field                |
+| `touched()` | The form, or at least one interactive descendant, is touched   |
 | `dirty()`   | User has modified at least one interactive field               |
 
 ### When to use form-level vs field-level
@@ -727,6 +793,89 @@ export class StyleExample {
 
 Checking both `touched()` and validation state ensures styles only appear after the user has interacted with the field.
 
+## Focus a form control bound to a form field
+
+Angular Signal Forms provide a `focusBoundControl()` method on field state that lets you programmatically move [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) to the form control associated with a given form field.
+
+A common use case is improving accessibility on form submission: when a form is invalid, display error messages and automatically move focus to the first invalid field, guiding the user to correct it.
+
+### Basic usage
+
+Given a registration form:
+
+```ts
+@Component({
+  /* ... */
+})
+export class Registration {
+  registrationModel = signal({username: '', email: '', password: ''});
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    required(schemaPath.username);
+    email(schemaPath.email);
+    required(schemaPath.password);
+  });
+}
+```
+
+To move focus to the control bound to the `email` field:
+
+```ts
+registrationForm.email().focusBoundControl();
+```
+
+### Preventing scroll
+
+If the target control is outside the viewport and you want to focus it without triggering a scroll, you can set the [preventScroll](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#preventscroll) option to `true` when calling the `focusBoundControl()` method.
+
+```ts
+registrationForm.email().focusBoundControl({preventScroll: true});
+```
+
+### Focusing the first invalid field on submission
+
+Use `errorSummary()` to locate the first invalid field and focus it when the user submits the form with errors:
+
+```ts
+onSubmit() {
+  const firstError = this.registrationForm().errorSummary()[0];
+  if (firstError?.fieldTree) {
+    firstError.fieldTree().focusBoundControl();
+  } else {
+    // proceed with submission
+  }
+}
+```
+
+### Custom controls
+
+By default, calling `focusBoundControl()` on a custom control has no effect because a custom control can contain multiple native inputs. For example, a date picker can contain separate day, month, and year fields. As a result, Angular cannot determine which element should receive focus or what action to perform.
+
+To support programmatic focus in a custom control, implement a `focus()` method. When `focusBoundControl()` is called on the field state associated with a custom control, Angular calls the control's `focus()` method if one is present.
+
+Consider a custom password input:
+
+```html
+<div class="password-block">
+  <input type="password" #passwordCtrl [value]="value()" (input)="value.set($event.target.value)" />
+</div>
+```
+
+```ts
+@Component({
+  /* ... */
+})
+export class PasswordInput implements FormValueControl<string> {
+  readonly value = model<string>('');
+  readonly passwordCtrl = viewChild.required<ElementRef<HTMLInputElement>>('passwordCtrl');
+
+  // Called automatically when focusBoundControl() is invoked
+  // on the field state associated with this custom control
+  focus(): void {
+    this.passwordCtrl().nativeElement.focus();
+  }
+}
+```
+
 ## Next steps
 
 This guide covered validation and availability status handling, interaction tracking and field state propagation. Related guides explore other aspects of Signal Forms:
diff --git a/adev-ja/src/content/guide/forms/signals/field-state-management.md b/adev-ja/src/content/guide/forms/signals/field-state-management.md
index 7483852538..ec723d0905 100644
--- a/adev-ja/src/content/guide/forms/signals/field-state-management.md
+++ b/adev-ja/src/content/guide/forms/signals/field-state-management.md
@@ -168,6 +168,72 @@ NOTE: `message`プロパティはオプションです。バリデーターは
 
 `touched()`シグナルは、ユーザーがフィールドにフォーカスし、その後ブラーしたかどうかを追跡します。ユーザー操作によって（プログラム的にではなく）フィールドにフォーカスし、その後ブラーすると`true`になります。非表示、無効、読み取り専用のフィールドは非インタラクティブであり、ユーザー操作によってtouchedになることはありません。
 
+When you need a section-level action to reveal validation errors within that section, call `markAsTouched()` on the section field. The default value of `skipDescendants` is `false`, so the call marks the section field and each descendant field as touched.
+
+For example, a checkout flow can validate the shipping section before allowing the user to continue to the next step:
+
+```angular-ts
+import {Component, signal} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-checkout-shipping',
+  imports: [FormField],
+  template: `
+    <label>
+      Name
+      <input [formField]="checkoutForm.shipping.name" />
+    </label>
+    @if (checkoutForm.shipping.name().touched() && checkoutForm.shipping.name().invalid()) {
+      <p>{{ checkoutForm.shipping.name().errors()[0].message }}</p>
+    }
+
+    <label>
+      Address
+      <input [formField]="checkoutForm.shipping.address" />
+    </label>
+    @if (checkoutForm.shipping.address().touched() && checkoutForm.shipping.address().invalid()) {
+      <p>{{ checkoutForm.shipping.address().errors()[0].message }}</p>
+    }
+
+    <button type="button" (click)="continueToPayment()">Continue</button>
+
+    @if (showPayment() && checkoutForm.shipping().valid()) {
+      <p>Ready for payment.</p>
+    }
+  `,
+})
+export class CheckoutShipping {
+  checkoutModel = signal({
+    shipping: {
+      name: '',
+      address: '',
+    },
+  });
+
+  showPayment = signal(false);
+
+  checkoutForm = form(this.checkoutModel, (schemaPath) => {
+    required(schemaPath.shipping.name, {message: 'Enter a name'});
+    required(schemaPath.shipping.address, {message: 'Enter an address'});
+  });
+
+  continueToPayment() {
+    this.checkoutForm.shipping().markAsTouched();
+
+    if (this.checkoutForm.shipping().invalid()) {
+      return;
+    }
+
+    this.showPayment.set(true);
+  }
+}
+```
+
+When `continueToPayment()` calls `markAsTouched()` on `checkoutForm.shipping()`, it uses the default `skipDescendants: false` behavior. Angular marks `shipping`, `shipping.name`, and `shipping.address` as touched, so the child `touched() && invalid()` error messages become visible before the whole form is submitted.
+
+NOTE: Pass `{skipDescendants: true}` only when the field receiving the call should become touched without changing the touched state of its descendants.
+
 ### Dirty状態 {#dirty-state}
 
 フォームでは、データが実際に変更されたかどうかを検出する必要があることがよくあります。たとえば、未保存の変更についてユーザーに警告したり、必要な場合にのみ保存ボタンを有効にしたりするためです。`dirty()`シグナルは、ユーザーがフィールドを変更したかどうかを追跡します。
@@ -727,6 +793,89 @@ export class StyleExample {
 
 `touched()`とバリデーション状態の両方をチェックすることで、ユーザーがフィールドを操作した後にのみスタイルが表示されるようになります。
 
+## Focus a form control bound to a form field
+
+Angular Signal Forms provide a `focusBoundControl()` method on field state that lets you programmatically move [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) to the form control associated with a given form field.
+
+A common use case is improving accessibility on form submission: when a form is invalid, display error messages and automatically move focus to the first invalid field, guiding the user to correct it.
+
+### Basic usage
+
+Given a registration form:
+
+```ts
+@Component({
+  /* ... */
+})
+export class Registration {
+  registrationModel = signal({username: '', email: '', password: ''});
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    required(schemaPath.username);
+    email(schemaPath.email);
+    required(schemaPath.password);
+  });
+}
+```
+
+To move focus to the control bound to the `email` field:
+
+```ts
+registrationForm.email().focusBoundControl();
+```
+
+### Preventing scroll
+
+If the target control is outside the viewport and you want to focus it without triggering a scroll, you can set the [preventScroll](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#preventscroll) option to `true` when calling the `focusBoundControl()` method.
+
+```ts
+registrationForm.email().focusBoundControl({preventScroll: true});
+```
+
+### Focusing the first invalid field on submission
+
+Use `errorSummary()` to locate the first invalid field and focus it when the user submits the form with errors:
+
+```ts
+onSubmit() {
+  const firstError = this.registrationForm().errorSummary()[0];
+  if (firstError?.fieldTree) {
+    firstError.fieldTree().focusBoundControl();
+  } else {
+    // proceed with submission
+  }
+}
+```
+
+### Custom controls
+
+By default, calling `focusBoundControl()` on a custom control has no effect because a custom control can contain multiple native inputs. For example, a date picker can contain separate day, month, and year fields. As a result, Angular cannot determine which element should receive focus or what action to perform.
+
+To support programmatic focus in a custom control, implement a `focus()` method. When `focusBoundControl()` is called on the field state associated with a custom control, Angular calls the control's `focus()` method if one is present.
+
+Consider a custom password input:
+
+```html
+<div class="password-block">
+  <input type="password" #passwordCtrl [value]="value()" (input)="value.set($event.target.value)" />
+</div>
+```
+
+```ts
+@Component({
+  /* ... */
+})
+export class PasswordInput implements FormValueControl<string> {
+  readonly value = model<string>('');
+  readonly passwordCtrl = viewChild.required<ElementRef<HTMLInputElement>>('passwordCtrl');
+
+  // Called automatically when focusBoundControl() is invoked
+  // on the field state associated with this custom control
+  focus(): void {
+    this.passwordCtrl().nativeElement.focus();
+  }
+}
+```
+
 ## 次のステップ {#next-steps}
 
 このガイドでは、バリデーションと可用性ステータスの処理、インタラクションの追跡、フィールド状態の伝播について説明しました。関連ガイドでは、シグナルフォームの他の側面について探求します:
diff --git a/adev-ja/src/content/guide/forms/signals/form-logic.md b/adev-ja/src/content/guide/forms/signals/form-logic.md
index 8ff94d7512..c5a5a87c8d 100644
--- a/adev-ja/src/content/guide/forms/signals/form-logic.md
+++ b/adev-ja/src/content/guide/forms/signals/form-logic.md
@@ -458,16 +458,16 @@ Don't use debouncing if:
 
 Metadata attaches reactive data to a field. Validation rules use this system internally, and you can publish your own keys for application-specific information like help text, configuration, or computed display values.
 
-Signal Forms provides six pre-defined metadata keys that built-in validators populate automatically:
-
-| Key          | Populated by  | Read via              |
-| ------------ | ------------- | --------------------- |
-| `REQUIRED`   | `required()`  | `field().required()`  |
-| `MIN`        | `min()`       | `field().min()`       |
-| `MAX`        | `max()`       | `field().max()`       |
-| `MIN_LENGTH` | `minLength()` | `field().minLength()` |
-| `MAX_LENGTH` | `maxLength()` | `field().maxLength()` |
-| `PATTERN`    | `pattern()`   | `field().pattern()`   |
+Signal Forms provides pre-defined metadata keys that built-in validators populate automatically:
+
+| Key          | Populated by         | Read via              |
+| ------------ | -------------------- | --------------------- |
+| `REQUIRED`   | `required()`         | `field().required()`  |
+| `MIN`        | `min()`, `minDate()` | `field().min()`       |
+| `MAX`        | `max()`, `maxDate()` | `field().max()`       |
+| `MIN_LENGTH` | `minLength()`        | `field().minLength()` |
+| `MAX_LENGTH` | `maxLength()`        | `field().maxLength()` |
+| `PATTERN`    | `pattern()`          | `field().pattern()`   |
 
 The `[formField]` directive automatically binds five of these (`REQUIRED`, `MIN`, `MAX`, `MIN_LENGTH`, and `MAX_LENGTH`) to the corresponding HTML attribute on a native form control. `PATTERN` is the exception, because Signal Forms supports multiple patterns per field but the HTML `pattern` attribute accepts only a single regular expression.
 
diff --git a/adev-ja/src/content/guide/forms/signals/migration.md b/adev-ja/src/content/guide/forms/signals/migration.md
index 0dcea029ee..8e592be1d2 100644
--- a/adev-ja/src/content/guide/forms/signals/migration.md
+++ b/adev-ja/src/content/guide/forms/signals/migration.md
@@ -449,3 +449,68 @@ bootstrapApplication(App, {
   ],
 });
 ```
+
+## Custom Controls
+
+Any [custom Signal Form Control](guide/forms/signals/custom-controls) can be
+used with Reactive (and Template-Driven) Forms as-is. This allows you to
+migrate existing `ControlValueAccessor` implementations to
+`FormValueControl`/`FormCheckboxControl` without breaking existing usages.
+
+IMPORTANT: Do **not** implement both `ControlValueAccessor` and
+`FormValueControl`/`FormCheckboxControl` on the same component. Implement one or
+the other.
+
+Given the following custom control:
+
+```angular-ts
+import {Component, model} from '@angular/core';
+import {FormValueControl} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-basic-input',
+  template: `
+    <div class="basic-input">
+      <input
+        type="text"
+        [value]="value()"
+        (input)="value.set($event.target.value)"
+        placeholder="Enter text..."
+      />
+    </div>
+  `,
+})
+export class BasicInput implements FormValueControl<string> {
+  /** The current input value */
+  value = model('');
+}
+```
+
+You can use this custom control with reactive forms as you would a native input
+or a custom control based on `ControlValueAccessor`. For example, consider this
+simple component with a Reactive Form.
+
+```angular-ts
+import {Component} from '@angular/core';
+import {FormGroup, FormControl, ReactiveFormsModule} from '@angular/forms';
+import {BasicInput} from './basic-input';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <form [formGroup]="reactiveFormGroup">
+      <app-basic-input formControlName="reactiveControlName" />
+    </form>
+    <p>Text: {{ reactiveFormGroup.value.reactiveControlName }}</p>
+  `,
+  imports: [ReactiveFormsModule],
+})
+export class ExampleComponent {
+  readonly reactiveFormGroup = new FormGroup({
+    reactiveControlName: new FormControl(''),
+  });
+}
+```
+
+Any change to the custom `app-basic-input` control will be reflected in the
+reactive `FormControl`.
diff --git a/adev-ja/src/content/guide/forms/signals/models.md b/adev-ja/src/content/guide/forms/signals/models.md
index 98b3c1c9e0..903be700e5 100644
--- a/adev-ja/src/content/guide/forms/signals/models.md
+++ b/adev-ja/src/content/guide/forms/signals/models.md
@@ -10,7 +10,7 @@ NOTE: フォームモデルは、コンポーネントの双方向バインデ
 
 フォームモデルは、フォームデータを単一の書き込み可能なシグナルに集約することで、この問題を解決します。モデルが更新されると、フォームは自動的にその変更を反映します。ユーザーがフォームを操作すると、モデルもそれに応じて更新されます。
 
-## モデルの作成
+## モデルの作成 {#creating-models}
 
 フォームモデルは、Angularの`signal()`関数で作成される書き込み可能なシグナルです。このシグナルは、フォームのデータ構造を表すオブジェクトを保持します。
 
diff --git a/adev-ja/src/content/guide/forms/signals/overview.en.md b/adev-ja/src/content/guide/forms/signals/overview.en.md
index f69e9747be..f9990a33b1 100644
--- a/adev-ja/src/content/guide/forms/signals/overview.en.md
+++ b/adev-ja/src/content/guide/forms/signals/overview.en.md
@@ -1,7 +1,7 @@
 <docs-decorative-header title="Forms with Angular Signals" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
 </docs-decorative-header>
 
-Signal Forms is an library that allows you to manage form state in Angular applications by building on the reactive foundation of signals. With automatic two-way binding, type-safe field access, and schema-based validation, Signal Forms help you create robust forms.
+Signal Forms is a library that allows you to manage form state in Angular applications by building on the reactive foundation of signals. With automatic two-way binding, type-safe field access, and schema-based validation, Signal Forms help you create robust forms.
 
 TIP: For a quick introduction to Signal Forms, see the [Signal Forms essentials guide](essentials/signal-forms).
 
diff --git a/adev-ja/src/content/guide/forms/signals/testing.md b/adev-ja/src/content/guide/forms/signals/testing.md
new file mode 100644
index 0000000000..2263a009ae
--- /dev/null
+++ b/adev-ja/src/content/guide/forms/signals/testing.md
@@ -0,0 +1,214 @@
+# Testing Signal Forms
+
+Forms are often critical to applications, and testing gives you confidence they behave correctly as the codebase changes. Signal Forms keeps most of its logic in the schema rather than the template, which means you can test the majority of form behavior without rendering a component.
+
+This guide walks through how to set up those tests, starting with isolated logic tests and then covering component-bound tests for cases where DOM interaction matters.
+
+## Testing form logic in isolation
+
+When you only need to verify validation, disabled state, required state, or error output, test the form directly instead of rendering a component. Isolated tests keep the setup small and let the test focus on the form's behavior.
+
+The key requirement is the injector. Signal Forms needs an injection context during form creation. If a test calls `form()` without one, the call throws before the test can assert anything about the form.
+
+The most direct way to satisfy this requirement is to pass an injector explicitly. The following test creates a form with a `required` rule and verifies that the field becomes valid after receiving a value:
+
+```ts {header: 'profile-form.spec.ts'}
+import {Injector, signal} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {form, required} from '@angular/forms/signals';
+import {describe, expect, it} from 'vitest';
+
+describe('profile form', () => {
+  it('marks required fields as invalid until they have a value', () => {
+    const model = signal({name: ''});
+
+    const profileForm = form(
+      model,
+      (path) => {
+        required(path.name);
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    expect(profileForm.name().valid()).toBe(false);
+    expect(profileForm.name().errors()).toEqual([expect.objectContaining({kind: 'required'})]);
+
+    profileForm.name().value.set('Ada');
+
+    expect(profileForm.name().valid()).toBe(true);
+    expect(profileForm.name().errors()).toEqual([]);
+  });
+});
+```
+
+This pattern works well for most isolated tests because the injector requirement stays visible at the call site. It also mirrors how Signal Forms unit tests in Angular's source create forms.
+
+When the code under test calls `form()` internally, you may not be able to pass the injector directly. In that case, wrap the call in an ambient injection context:
+
+```ts {header: 'profile-form.spec.ts'}
+import {signal} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {form, required} from '@angular/forms/signals';
+import {describe, expect, it} from 'vitest';
+
+describe('profile form', () => {
+  it('can create a form inside an injection context', () => {
+    const model = signal({name: ''});
+
+    TestBed.runInInjectionContext(() => {
+      const profileForm = form(model, (path) => {
+        required(path.name);
+      });
+
+      expect(profileForm.name().valid()).toBe(false);
+    });
+  });
+});
+```
+
+Both patterns produce the same kind of form. Passing `{injector}` is often the clearest choice when the test creates the form directly. `TestBed.runInInjectionContext()` is useful when the code under test calls `form()` internally and you need to supply the surrounding injection context.
+
+Once the form exists, test it through field state signals. Common assertions include `valid()`, `invalid()`, `disabled()`, `required()`, and `errors()`. For most form logic, that is enough to verify the behavior without involving the DOM.
+
+## Testing a form with multiple rules
+
+After the injector setup is in place, a good next step is a complete test that exercises a few pieces of form logic together. This kind of test is still isolated, but it looks much closer to a real application form.
+
+For example, this test verifies both a basic required rule and a conditional required rule that depends on another field:
+
+```ts {header: 'profile-form.spec.ts'}
+import {Injector, signal} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {form, required} from '@angular/forms/signals';
+import {describe, expect, it} from 'vitest';
+
+describe('profile form', () => {
+  it('updates validation state when related fields change', () => {
+    const model = signal({
+      name: '',
+      age: 5,
+    });
+
+    const profileForm = form(
+      model,
+      (path) => {
+        required(path.name);
+        required(path.name, {
+          error: (ctx) => ({kind: `required-${ctx.valueOf(path.age)}`}),
+          when: ({valueOf}) => valueOf(path.age) > 10,
+        });
+      },
+      {injector: TestBed.inject(Injector)},
+    );
+
+    expect(profileForm.name().invalid()).toBe(true);
+    expect(profileForm.name().errors()).toEqual([expect.objectContaining({kind: 'required'})]);
+
+    profileForm.age().value.set(15);
+
+    expect(profileForm.name().errors()).toEqual([
+      expect.objectContaining({kind: 'required'}),
+      expect.objectContaining({kind: 'required-15'}),
+    ]);
+
+    profileForm.name().value.set('Ada');
+
+    expect(profileForm.name().valid()).toBe(true);
+    expect(profileForm.name().errors()).toEqual([]);
+  });
+});
+```
+
+This example shows an important testing pattern: update one field, then assert against the state of another field. Because Signal Forms rules are reactive, a field's validation can depend on sibling values, parent values, or other derived conditions. Tests should verify those relationships directly instead of only checking the field that changed.
+
+For validation-focused tests, `errors()` is usually the most useful assertion. `valid()` and `invalid()` tell you whether the field currently passes validation, but `errors()` shows which rule produced the failure. That becomes especially useful once a field has multiple validators or conditional rules.
+
+The same structure works for most everyday form tests:
+
+1. Create a model signal with the smallest shape that reproduces the behavior.
+1. Build the form with an explicit injector.
+1. Assert the initial field state.
+1. Change a field with `.value.set(...)`, including sibling fields when testing cross-field rules.
+1. Assert the updated state signals, usually `errors()`, `valid()`, or `invalid()`.
+
+When a test is about schema behavior rather than rendering, default to this isolated style. It is faster than a component test and makes it easier to see which rule is responsible when the behavior changes.
+
+## Testing forms bound to components
+
+When you need to verify behavior that depends on template bindings, user interaction through `dispatchEvent`, or custom form controls that manage their own rendering, isolated tests are not enough. You need component-bound tests to render the template so that you can interact with actual DOM elements.
+
+### Setting up a component test
+
+Component-bound tests render the component so you can interact with actual DOM elements. Create the component with `TestBed.createComponent()` and wait for rendering to complete before asserting:
+
+```angular-ts {header: 'profile-form.ts'}
+import {Component, signal} from '@angular/core';
+import {form, FormField, required} from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-profile-form',
+  imports: [FormField],
+  template: `<input [formField]="profileForm.name" />`,
+})
+export class ProfileForm {
+  readonly model = signal({name: 'Ada'});
+  readonly profileForm = form(this.model, (path) => {
+    required(path.name);
+  });
+}
+```
+
+```ts {header: 'profile-form.spec.ts'}
+import {TestBed} from '@angular/core/testing';
+import {describe, expect, it} from 'vitest';
+import {ProfileForm} from './profile-form';
+
+describe('ProfileForm', () => {
+  it('reflects model values in the DOM and updates the model on user input', async () => {
+    const fixture = TestBed.createComponent(ProfileForm);
+    await fixture.whenStable();
+
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+
+    // Model → View: the input reflects the model's initial value
+    expect(input.value).toBe('Ada');
+
+    // View → Model: simulate the user clearing the field
+    input.value = '';
+    input.dispatchEvent(new Event('input'));
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.profileForm.name().value()).toBe('');
+    expect(fixture.componentInstance.profileForm.name().valid()).toBe(false);
+  });
+});
+```
+
+Notice that the component uses `form()` without an explicit injector because the component's own injection context provides it automatically. After each change, `await fixture.whenStable()` waits for rendering and effects to complete before asserting.
+
+The same pattern works for async operations such as async validators or server calls. Call `await fixture.whenStable()` after the async work resolves.
+
+## When to use each approach
+
+| What you need to verify                              | Approach        |
+| ---------------------------------------------------- | --------------- |
+| Validation rules, `errors()`, `valid()`, `invalid()` | Isolated        |
+| Disabled, required, or readonly state                | Isolated        |
+| Cross-field reactive dependencies                    | Isolated        |
+| Conditional schemas (`applyWhen`, `applyWhenValue`)  | Isolated        |
+| Input values rendering in the DOM                    | Component-bound |
+| User typing updating the model                       | Component-bound |
+| Custom form controls with their own templates        | Component-bound |
+| Focus management or accessibility attributes         | Component-bound |
+
+Most forms only need isolated tests. The form's logic (such as validation, disabled state, cross-field rules) lives in the schema, and schemas do not need a template to run. Component-bound tests add value when the behavior you care about crosses the boundary between the form and the DOM.
+
+## Next steps
+
+This guide covered testing Signal Forms in isolation and with component templates. Here are related guides that explore other aspects of Signal Forms:
+
+<docs-pill-row>
+  <docs-pill href="guide/forms/signals/validation" title="Validation" />
+  <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
+  <docs-pill href="guide/forms/signals/form-submission" title="Form submission" />
+</docs-pill-row>
diff --git a/adev-ja/src/content/guide/forms/signals/validation.en.md b/adev-ja/src/content/guide/forms/signals/validation.en.md
index 050d69bc62..5f3b293eb8 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.en.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.en.md
@@ -21,8 +21,8 @@ The schema function receives a `SchemaPathTree` object that lets you define your
 <docs-code
   header="app.ts"
   path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.ts"
-  visibleLines="[21,22,23,24,25,26,27]"
-  highlight="[23,24,26]"
+  visibleLines="[29,30,31,32,33,34]"
+  highlight="[30,31,33]"
 />
 
 The schema function runs once during form initialization. Validation rules bind to fields using the schema path parameter (such as `schemaPath.email`, `schemaPath.password`), and validation runs automatically whenever field values change.
@@ -52,6 +52,20 @@ Synchronous validation rules (like `required()`, `email()`) complete immediately
 
 All validation rules run on every change - validation doesn't short-circuit after the first error. If a field has both `required()` and `email()` validation rules, both run, and both can produce errors simultaneously.
 
+### Native HTML validation
+
+Signal Forms **does not** use the browser's built-in [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation) to run validation rules. This is by design: Signal Forms allows any component to act as a form control, not just native form elements.
+
+Instead, your validation rules run entirely in Angular, and validation state is exposed through field state signals such as `valid()`, `invalid()`, and `errors()` rather than through the element's native validity state. The [`FormRoot` directive](guide/forms/signals/form-submission) also sets the `novalidate` attribute on the form element so the browser does not block submission.
+
+When a field is bound to a native form element, some built-in validation rules mirror their constraint to the corresponding native attribute: `required()`, `min()`, `max()`, `minLength()`, and `maxLength()` set the `required`, `min`, `max`, `minlength`, and `maxlength` attributes when the element supports them. An exception is `pattern()`, which does not set the native `pattern` attribute. Signal Forms sets these attributes to control input behavior and to improve accessibility, **not to trigger native validation**.
+
+NOTE: There is one case where Signal Forms reads native validity state: when the browser cannot parse a native input's value (for example, a partially typed date), Signal Forms reports it as a parse error. Even then, the error surfaces through the field's `errors()` signal like any other validation error. See [Value transformation](guide/forms/signals/custom-controls#value-transformation) for details.
+
+IMPORTANT: Do not rely on native validity features such as the `:valid` and `:invalid` CSS pseudo-classes, the element's `validity` property, or `validationMessage`. The browser may report some inputs as invalid as a side effect of the mirrored attributes (for example, a number input whose value is below its `min`), but this behavior varies by validation rule and input type and is not a supported way to observe validation state.
+
+To style controls based on validation state, bind classes to field state signals (see [Field state management](guide/forms/signals/field-state-management#conditional-error-display)) or configure automatic status classes (see [Automatic status classes](guide/forms/signals/migration#automatic-status-classes)).
+
 ## Built-in validation rules
 
 Signal Forms provides validation rules for common validation scenarios. All built-in validation rules accept an options object for custom error messages and conditional logic.
@@ -116,7 +130,7 @@ registrationForm = form(this.registrationModel, (schemaPath) => {
 
 The validation rule only runs when the `when` function returns `true`.
 
-NOTE: `required` will return `true` for empty array. Use [`minLength()`](#minlength-and-maxlength) to validate arrays.
+Note: `required` treats an empty array as present (valid), so use [`minLength()`](#minlength-and-maxlength) to enforce a minimum number of array items; it treats `false` as missing (invalid), matching `<input type="checkbox" required>`.
 
 ### email()
 
diff --git a/adev-ja/src/content/guide/forms/signals/validation.md b/adev-ja/src/content/guide/forms/signals/validation.md
index 2b31a47531..f3d28edbee 100644
--- a/adev-ja/src/content/guide/forms/signals/validation.md
+++ b/adev-ja/src/content/guide/forms/signals/validation.md
@@ -21,8 +21,8 @@
 <docs-code
   header="app.ts"
   path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.ts"
-  visibleLines="[21,22,23,24,25,26,27]"
-  highlight="[23,24,26]"
+  visibleLines="[29,30,31,32,33,34]"
+  highlight="[30,31,33]"
 />
 
 スキーマ関数はフォームの初期化中に一度だけ実行されます。バリデーションルールはスキーマパスパラメータ（`schemaPath.email`や`schemaPath.password`など）を使用してフィールドにバインドされ、フィールドの値が変更されるたびにバリデーションが自動的に実行されます。
@@ -52,6 +52,20 @@ NOTE: スキーマのコールバックパラメータ（この例では`schemaP
 
 すべてのバリデーションルールは変更のたびに実行されます - バリデーションは最初のエラーで中断されません。フィールドに`required()`と`email()`の両方のバリデーションルールがある場合、両方が実行され、両方が同時にエラーを生成する可能性があります。
 
+### ネイティブHTMLバリデーション {#native-html-validation}
+
+シグナルフォームは、バリデーションルールの実行にブラウザ組み込みの[制約バリデーション](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation)を**使用しません**。これは意図的な設計です。シグナルフォームは、ネイティブのフォーム要素だけでなく、任意のコンポーネントをフォームコントロールとして扱えるようにするためです。
+
+代わりに、バリデーションルールはすべてAngular内で実行され、バリデーションの状態は要素のネイティブなvalidity状態ではなく、`valid()`、`invalid()`、`errors()`などのフィールド状態シグナルを通じて公開されます。[`FormRoot`ディレクティブ](guide/forms/signals/form-submission)は、フォーム要素に`novalidate`属性も設定するため、ブラウザが送信をブロックすることはありません。
+
+フィールドがネイティブのフォーム要素にバインドされている場合、一部の組み込みバリデーションルールは、その制約を対応するネイティブ属性にミラーリングします。`required()`、`min()`、`max()`、`minLength()`、`maxLength()`は、要素がサポートしていれば`required`、`min`、`max`、`minlength`、`maxlength`属性を設定します。例外は`pattern()`で、これはネイティブの`pattern`属性を設定しません。シグナルフォームがこれらの属性を設定するのは、入力の挙動を制御し、アクセシビリティを向上させるためであり、**ネイティブのバリデーションをトリガーするためではありません**。
+
+NOTE: シグナルフォームがネイティブのvalidity状態を読み取るケースが1つだけあります。ブラウザがネイティブの入力値をパースできない場合（たとえば、日付の途中入力など）、シグナルフォームはそれをパースエラーとして報告します。この場合も、エラーは他のバリデーションエラーと同様にフィールドの`errors()`シグナルを通じて公開されます。詳細は[値の変換](guide/forms/signals/custom-controls#value-transformation)を参照してください。
+
+IMPORTANT: `:valid`や`:invalid`のCSS疑似クラス、要素の`validity`プロパティ、`validationMessage`といったネイティブのvalidity機能に依存しないでください。ミラーリングされた属性の副作用として、ブラウザが一部の入力を無効と報告することがあります（たとえば、`min`を下回る値を持つnumber入力など）が、この挙動はバリデーションルールと入力タイプによって異なり、バリデーション状態を観測するためにサポートされた方法ではありません。
+
+バリデーション状態に基づいてコントロールをスタイリングするには、フィールド状態シグナルにクラスをバインドする（[フィールド状態管理](guide/forms/signals/field-state-management#conditional-error-display)を参照）か、自動ステータスクラスを設定してください（[自動ステータスクラス](guide/forms/signals/migration#automatic-status-classes)を参照）。
+
 ## 組み込みのバリデーションルール {#built-in-validation-rules}
 
 シグナルフォームは、一般的なバリデーションシナリオのためのバリデーションルールを提供します。すべての組み込みバリデーションルールは、カスタムエラーメッセージと条件付きロジックのためのオプションオブジェクトを受け入れます。
@@ -116,7 +130,7 @@ registrationForm = form(this.registrationModel, (schemaPath) => {
 
 バリデーションルールは、`when`関数が`true`を返す場合にのみ実行されます。
 
-NOTE: `required`は空の配列に対して`true`を返します。配列のバリデーションには[`minLength()`](#minlength-and-maxlength)を使用してください。
+Note: `required`は空の配列を「存在する（有効）」として扱うため、配列の最小要素数を強制するには[`minLength()`](#minlength-and-maxlength)を使用してください。また、`<input type="checkbox" required>`と同様に、`false`は「未入力（無効）」として扱われます。
 
 ### email() {#email}
 
@@ -332,7 +346,7 @@ export class OrderComponent {
 }
 ```
 
-## バリデーションエラー
+## バリデーションエラー {#validation-errors}
 
 バリデーションルールが失敗すると、何が問題だったかを説明するエラーオブジェクトが生成されます。エラーの構造を理解することは、ユーザーに明確なフィードバックを提供するのに役立ちます。
 
@@ -707,7 +721,7 @@ export class UsernameFormComponent {
 
 `valid()`シグナルは、まだエラーがない場合でも、バリデーションがペンディング中の間は`false`を返します。`invalid()`シグナルは、エラーが存在する場合にのみ`true`を返します。
 
-## スキーマバリデーションライブラリとの統合
+## スキーマバリデーションライブラリとの統合 {#integration-with-schema-validation-libraries}
 
 シグナルフォームは、[Zod](https://zod.dev/)や[Valibot](https://valibot.dev/)のような[Standard Schema](https://standardschema.dev/)に準拠したライブラリに対する組み込みサポートを提供しています。統合は`validateStandardSchema`関数によって提供されます。これにより、シグナルフォームのリアクティブなバリデーションの利点を維持しながら、既存のスキーマを使用できます。
 
diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.en.md b/adev-ja/src/content/guide/forms/template-driven-forms.en.md
index de2a4a9312..c6aa2cb1c3 100644
--- a/adev-ja/src/content/guide/forms/template-driven-forms.en.md
+++ b/adev-ja/src/content/guide/forms/template-driven-forms.en.md
@@ -196,7 +196,7 @@ To see how the classes are added and removed by the framework, open the browser'
 1. When you first bring it up, the classes indicate that it has a valid value, that the value has not been changed since initialization or reset, and that the control has not been visited since initialization or reset.
 
    ```html
-   <input class="form-control ng-untouched ng-pristine ng-valid" />;
+   <input class="form-control ng-untouched ng-pristine ng-valid" />
    ```
 
 1. Take the following actions on the **Name** `<input>` box, and observe which classes appear.
diff --git a/adev-ja/src/content/guide/forms/template-driven-forms.md b/adev-ja/src/content/guide/forms/template-driven-forms.md
index 291df5ec4a..36e5e0c7fb 100644
--- a/adev-ja/src/content/guide/forms/template-driven-forms.md
+++ b/adev-ja/src/content/guide/forms/template-driven-forms.md
@@ -196,7 +196,7 @@ Angularは、`form`要素に`ng-submitted`クラスを適用しますが、`form
 1. 最初に表示すると、クラスは、値が有効であり、初期化またはリセット以降値が変更されていないこと、初期化またはリセット以降コントロールが訪問されていないことを示しています。
 
    ```html
-   <input class="form-control ng-untouched ng-pristine ng-valid" />;
+   <input class="form-control ng-untouched ng-pristine ng-valid" />
    ```
 
 1. **Name** `<input>`ボックスで次のように操作し、表示されるクラスを観察します。
diff --git a/adev-ja/src/content/guide/forms/typed-forms.md b/adev-ja/src/content/guide/forms/typed-forms.md
index 0a3201978a..cb2a693ced 100644
--- a/adev-ja/src/content/guide/forms/typed-forms.md
+++ b/adev-ja/src/content/guide/forms/typed-forms.md
@@ -4,7 +4,7 @@ Angular 14から、リアクティブフォームはデフォルトで厳密に
 
 このガイドの背景として、[Angular リアクティブフォーム](guide/forms/reactive-forms) に既に精通している必要があります。
 
-## 型付きフォームの概要
+## 型付きフォームの概要 {#overview-of-typed-forms}
 
 <docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Angular の型付きフォーム" />
 
@@ -31,7 +31,7 @@ const emailDomain = login.value.email.domain;
 
 これらの改善は、現時点では _リアクティブ_ フォーム（[_テンプレート駆動_ フォーム](guide/forms/template-driven-forms) ではありません）のみに適用されます。
 
-## 型なしフォーム
+## 型なしフォーム {#untyped-forms}
 
 型なしフォームは引き続きサポートされており、これまでどおり動作します。それらを使用するには、`@angular/forms` から `Untyped` シンボルをインポートする必要があります。
 
@@ -44,7 +44,7 @@ const login = new UntypedFormGroup({
 
 各 `Untyped` シンボルは、以前のバージョンのAngularとまったく同じ意味を持ちます。`Untyped` プレフィックスを削除することで、段階的に型を有効にできます。
 
-## `FormControl`: はじめに
+## `FormControl`: はじめに {#formcontrol-getting-started}
 
 最も単純なフォームは、単一のコントロールで構成されます。
 
@@ -54,7 +54,7 @@ const email = new FormControl('angularrox@gmail.com');
 
 このコントロールは、自動的に `FormControl<string|null>` 型であると推測されます。TypeScriptは、`email.value`、`email.valueChanges`、および `email.setValue(...)` のような [`FormControl` API](api/forms/FormControl) 全体にわたってこの型を自動的に強制します。
 
-### ヌラビリティ
+### ヌラビリティ {#nullability}
 
 疑問に思うかもしれません。なぜこのコントロールの型には `null` が含まれているのでしょうか? これは、コントロールがいつでも `reset` を呼び出すことで `null` になる可能性があるためです。
 
@@ -74,7 +74,7 @@ console.log(email.value); // angularrox@gmail.com
 
 繰り返しますが、このオプションは `.reset()` が呼び出されたときのフォームのランタイム動作に影響を与え、注意深く切り替える必要があります。
 
-### 明示的な型の指定
+### 明示的な型の指定 {#specifying-an-explicit-type}
 
 推測に頼るのではなく、型を指定できます。初期値が `null` であるコントロールを考えてみましょう。初期値が `null` であるため、TypeScriptは `FormControl<null>` を推測し、これは私たちが望むよりも狭いです。
 
@@ -90,7 +90,7 @@ const email = new FormControl<string | null>(null);
 email.setValue('angularrox@gmail.com');
 ```
 
-## `FormArray`: 動的な同種コレクション
+## `FormArray`: 動的な同種コレクション {#formarray-dynamic-homogenous-collections}
 
 `FormArray` は、コントロールのオープンエンドリストを含んでいます。型パラメーターは、各内部コントロールの型に対応します。
 
@@ -118,11 +118,11 @@ aliases.clear();
 console.log(aliases.length); // 0
 ```
 
-## `FormGroup` と `FormRecord`
+## `FormGroup` と `FormRecord` {#formgroup-and-formrecord}
 
 Angularは、列挙されたキーセットを持つフォームに `FormGroup` 型を提供し、オープンエンドまたは動的なグループに `FormRecord` という型を提供します。
 
-### 部分的な値
+### 部分的な値 {#partial-values}
 
 再びログインフォームを考えてみましょう。
 
@@ -141,7 +141,7 @@ const login = new FormGroup({
 
 無効なコントロールを_含む_値にアクセスしたい場合、つまり `undefined` である可能性のあるフィールドをバイパスしたい場合は、`login.getRawValue()` を使用できます。
 
-### オプションのコントロールと動的グループ
+### オプションのコントロールと動的グループ {#optional-controls-and-dynamic-groups}
 
 一部のフォームには、存在する可能性がある場合とない場合があるコントロールが含まれており、実行時に追加または削除できます。これらのコントロールは、_オプションフィールド_ を使用して表すことができます。
 
@@ -180,7 +180,7 @@ addresses.addControl('Andrew', new FormControl('2340 Folsom St'));
 const addresses = fb.record({'Andrew': '2340 Folsom St'});
 ```
 
-## `FormBuilder` と `NonNullableFormBuilder`
+## `FormBuilder` と `NonNullableFormBuilder` {#formbuilder-and-nonnullableformbuilder}
 
 `FormBuilder` クラスは、上記の例と同じように、新しい型をサポートするようにアップグレードされました。
 
diff --git a/adev-ja/src/content/guide/http/http-resource.md b/adev-ja/src/content/guide/http/http-resource.md
index a20d691991..bb045cc23b 100644
--- a/adev-ja/src/content/guide/http/http-resource.md
+++ b/adev-ja/src/content/guide/http/http-resource.md
@@ -6,7 +6,7 @@ For more about Angular's `resource` pattern, see [Async reactivity with `resourc
 
 ## `Using httpResource`
 
-TIP: Make sure to include `provideHttpClient` in your application providers. See [Setting up HttpClient](/guide/http/setup) for details.
+TIP: `httpResource` uses the globally available `HttpClient`. Use `provideHttpClient(...)` only when you need to configure HTTP features, such as interceptors or XSRF options. See [Setting up HttpClient](/guide/http/setup) for details.
 
 You can define an HTTP resource by returning a url:
 
@@ -16,7 +16,7 @@ userId = input.required<string>();
 user = httpResource(() => `/api/user/${userId()}`); // A reactive function as argument
 ```
 
-`httpResource` is reactive, meaning that whenever one of the signal it depends on changes (like `userId`), the resource will emit a new http request.
+`httpResource` is reactive, meaning that whenever one of the signals it depends on changes (like `userId`), the resource will emit a new http request.
 If a request is already pending, the resource cancels the outstanding request before issuing a new one.
 
 HELPFUL: `httpResource` differs from the `HttpClient` as it initiates the request _eagerly_. In contrast, the `HttpClient` only initiates requests upon subscription to the returned `Observable`.
@@ -53,8 +53,8 @@ TIP: Avoid using `httpResource` for _mutations_ like `POST` or `PUT`. Instead, p
 The signals of the `httpResource` can be used in the template to control which elements should be displayed.
 
 ```angular-html
-@if(user.hasValue()) {
-  <user-details [user]="user.value()">
+@if (user.hasValue()) {
+  <user-details [user]="user.value()" />
 } @else if (user.error()) {
   <div>Could not load user information</div>
 } @else if (user.isLoading()) {
@@ -66,7 +66,7 @@ HELPFUL: Reading the `value` signal on a `resource` that is in error state throw
 
 ### Response types
 
-By default, `httpResource` returns and parses the response as JSON. However, you can specify alternate return with additional functions on `httpResource`:
+By default, `httpResource` returns and parses the response as JSON. However, you can specify an alternate return type with additional functions on `httpResource`:
 
 ```ts
 httpResource.text(() => ({ … })); // returns a string in value()
@@ -107,7 +107,7 @@ The following example shows a unit test for code using `httpResource`.
 
 ```ts
 TestBed.configureTestingModule({
-  providers: [provideHttpClient(), provideHttpClientTesting()],
+  providers: [provideHttpClientTesting()],
 });
 
 const id = signal(0);
diff --git a/adev-ja/src/content/guide/http/interceptors.en.md b/adev-ja/src/content/guide/http/interceptors.en.md
index 32c2113dc0..908a31d184 100644
--- a/adev-ja/src/content/guide/http/interceptors.en.md
+++ b/adev-ja/src/content/guide/http/interceptors.en.md
@@ -18,7 +18,7 @@ You can use interceptors to implement a variety of common patterns, such as:
 - Customizing the parsing of responses.
 - Measuring server response times and logging them.
 - Driving UI elements such as a loading spinner while network operations are in progress.
-- Collecting and batch requests made within a certain timeframe.
+- Collecting and batching requests made within a certain timeframe.
 - Automatically failing requests after a configurable deadline or timeout.
 - Regularly polling the server and refreshing results.
 
diff --git a/adev-ja/src/content/guide/http/interceptors.md b/adev-ja/src/content/guide/http/interceptors.md
index 4c421790d8..d7f9695f99 100644
--- a/adev-ja/src/content/guide/http/interceptors.md
+++ b/adev-ja/src/content/guide/http/interceptors.md
@@ -6,7 +6,7 @@ TLDR: インターセプターは、再試行、キャッシュ、ロギング
 
 `HttpClient` は、関数型インターセプターとDIベースのインターセプターの2種類のインターセプターをサポートしています。複雑な設定では特に、関数型インターセプターの方が動作が予測しやすいので、関数型インターセプターの使用をお勧めします。このガイドの例では、関数型インターセプターを使用しており、[DI ベースのインターセプター](#di-based-interceptors)については、最後に別のセクションで説明します。
 
-## インターセプター
+## インターセプター {#interceptors}
 
 インターセプターは、一般的には各リクエストに対して実行できる関数であり、リクエストとレスポンスの内容と全体的なフローに影響を与える幅広い機能を持っています。複数のインターセプターをインストールできます。インストールしたインターセプターはインターセプターチェーンを形成します。各インターセプターは、リクエストまたはレスポンスをチェーン内の次のインターセプターに転送する前に処理します。
 
@@ -22,7 +22,7 @@ TLDR: インターセプターは、再試行、キャッシュ、ロギング
 - 設定可能な期限またはタイムアウト後にリクエストを自動的に失敗させる。
 - サーバーを定期的にポーリングして結果を更新する。
 
-## インターセプターの定義
+## インターセプターの定義 {#defining-an-interceptor}
 
 インターセプターの基本的な形式は、送信される `HttpRequest` と、インターセプターチェーン内の次の処理ステップを表す `next` 関数を受け取る関数です。
 
@@ -40,7 +40,7 @@ export function loggingInterceptor(
 
 このインターセプターが実際にリクエストをインターセプトするためには、`HttpClient` がインターセプターを使用するように構成する必要があります。
 
-## インターセプターの構成
+## インターセプターの構成 {#configuring-interceptors}
 
 `HttpClient` を構成するときに使用するインターセプターのセットは、`withInterceptors` 機能を使用して、依存性の注入によって宣言します。
 
@@ -52,7 +52,7 @@ bootstrapApplication(App, {
 
 構成したインターセプターは、プロバイダーにリストした順序でチェーンされます。上記の例では、`loggingInterceptor` がリクエストを処理し、`cachingInterceptor` に転送します。
 
-### レスポンスイベントのインターセプト
+### レスポンスイベントのインターセプト {#intercepting-response-events}
 
 インターセプターは、`next` から返される `HttpEvent` の `Observable` ストリームを変換して、レスポンスにアクセスしたり、レスポンスを操作したりできます。このストリームにはすべてのレスポンスイベントが含まれているため、最終的なレスポンスオブジェクトを識別するためには、各イベントの `.type` を調べる必要がある場合があります。
 
@@ -73,7 +73,7 @@ export function loggingInterceptor(
 
 TIP: インターセプターは、レスポンスストリームをリクエストオブジェクトをキャプチャするクロージャー内で変換するため、レスポンスを送信リクエストに自然に関連付けます。
 
-## リクエストの変更
+## リクエストの変更 {#modifying-requests}
 
 `HttpRequest` と `HttpResponse` インスタンスのほとんどの側面は _変更不可能_ であり、インターセプターは直接変更できません。代わりに、インターセプターは `.clone()` 操作を使用してこれらのオブジェクトを複製し、新しいインスタンスでどのプロパティを変更するべきかを指定することによって、変更を適用します。これには、値自体（`HttpHeaders` や `HttpParams` など）に対しては変更不可能な更新が含まれる場合があります。
 
@@ -89,7 +89,7 @@ const reqWithHeader = req.clone({
 
 CRITICAL: リクエストまたはレスポンスの本文は、深い変更から **保護されません**。インターセプターが本文を変更する必要がある場合は、同じリクエストに対して複数回実行される場合の処理に注意してください。
 
-## インターセプターでの依存性の注入
+## インターセプターでの依存性の注入 {#dependency-injection-in-interceptors}
 
 インターセプターは、インターセプターを登録したインジェクターの _注入コンテキスト_ で実行され、Angularの[`inject`](/api/core/inject) APIを使用して依存関係を取得できます。
 
@@ -108,13 +108,13 @@ export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn)
 }
 ```
 
-## リクエストとレスポンスのメタデータ
+## リクエストとレスポンスのメタデータ {#request-and-response-metadata}
 
 多くの場合、バックエンドに送信されないリクエストに情報を含めたり、インターセプター専用の情報をリクエストに含めたりすると便利です。`HttpRequest` には、`.context` オブジェクトがあり、このオブジェクトは、この種のメタデータを `HttpContext` のインスタンスとして格納します。このオブジェクトは型付きマップとして機能し、キーは `HttpContextToken` 型です。
 
 このシステムの動作を説明するために、メタデータを使用して、特定のリクエストに対してキャッシュインターセプターを有効にするかどうかを制御します。
 
-### コンテキストトークンの定義
+### コンテキストトークンの定義 {#defining-context-tokens}
 
 特定のリクエストの `.context` マップに、キャッシュインターセプターがリクエストをキャッシュするかどうかを格納するには、キーとして機能する新しい `HttpContextToken` を定義します。
 
@@ -124,7 +124,7 @@ export const CACHING_ENABLED = new HttpContextToken<boolean>(() => true);
 
 提供される関数は、明示的に値が設定されていないリクエストのトークンのデフォルト値を作成します。関数を用いることで、トークンの値がオブジェクトまたは配列である場合、各リクエストが独自のインスタンスを取得することが保証されます。
 
-### インターセプターでのトークンの読み込み
+### インターセプターでのトークンの読み込み {#reading-the-token-in-an-interceptor}
 
 インターセプターは、トークンを読み取り、その値に基づいてキャッシュロジックを適用するかどうかを選択できます。
 
@@ -140,7 +140,7 @@ export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
 }
 ```
 
-### リクエストの作成時のコンテキストトークンの設定
+### リクエストの作成時のコンテキストトークンの設定 {#setting-context-tokens-when-making-a-request}
 
 `HttpClient` APIを介してリクエストを作成する際には、`HttpContextToken` の値を指定できます。
 
@@ -152,11 +152,11 @@ const data$ = http.get('/sensitive/data', {
 
 インターセプターは、リクエストの `HttpContext` からこれらの値を読み取ることができます。
 
-### リクエストコンテキストは変更可能
+### リクエストコンテキストは変更可能 {#the-request-context-is-mutable}
 
 `HttpRequest` の他のプロパティとは異なり、関連付けられた `HttpContext` は _変更可能_ です。インターセプターが後で再試行されるリクエストのコンテキストを変更した場合、同じインターセプターは、再度実行されるときに、コンテキストの変更を認識します。これは、必要に応じて、複数回の再試行にわたって状態を渡す場合に便利です。
 
-## 合成レスポンス
+## 合成レスポンス {#synthetic-responses}
 
 ほとんどのインターセプターは、リクエストまたはレスポンスを変換しながら、単に `next` ハンドラーを呼び出すだけです。しかし、これは厳密には必須ではありません。このセクションでは、インターセプターがより高度な動作を組み込むことができるいくつかの方法について説明します。
 
@@ -170,7 +170,7 @@ const resp = new HttpResponse({
 });
 ```
 
-## リダイレクト情報の操作
+## リダイレクト情報の操作 {#working-with-redirect-information}
 
 `HttpClient` がfetchバックエンドを使用する場合、レスポンスには、そのレスポンスがリダイレクトの結果であるかどうかを示す `redirected` プロパティが含まれます。このプロパティはネイティブのFetch API仕様に沿っており、リダイレクトシナリオを処理するインターセプターで有用です。
 
diff --git a/adev-ja/src/content/guide/http/making-requests.en.md b/adev-ja/src/content/guide/http/making-requests.en.md
index c98257cbf0..8b388a35da 100644
--- a/adev-ja/src/content/guide/http/making-requests.en.md
+++ b/adev-ja/src/content/guide/http/making-requests.en.md
@@ -267,7 +267,7 @@ Sometimes transient errors such as network interruptions can cause a request to
 
 ### Timeouts
 
-To set a timeout for a request, you can set the `timeout` option to a number of milliseconds along other request options. If the backend request does not complete within the specified time, the request will be aborted and an error will be emitted.
+To set a timeout for a request, you can set the `timeout` option to a number of milliseconds along with other request options. If the backend request does not complete within the specified time, the request will be aborted and an error will be emitted.
 
 NOTE: The timeout will only apply to the backend HTTP request itself. It is not a timeout for the entire request handling chain. Therefore, this option is not affected by any delay introduced by interceptors.
 
@@ -419,7 +419,9 @@ Available `mode` values:
 - `'cors'`: Allow cross-origin requests with CORS (default)
 - `'no-cors'`: Allow simple cross-origin requests without CORS, response is opaque
 
-TIP: Use `mode: 'same-origin'` for sensitive requests that should never go cross-origin.
+TIP: In the browser, use `mode: 'same-origin'` for sensitive requests that should never go cross-origin.
+
+IMPORTANT: During SSR on Node.js, `HttpClient` uses Node.js's [Undici-based Fetch implementation](https://nodejs.org/api/globals.html#fetch). [Undici does not enforce browser CORS checks](https://undici.nodejs.org/#cors), so `mode: 'same-origin'` does not restrict server-side requests. Validate user-influenced URLs against an allowlist.
 
 #### Redirect handling
 
@@ -529,6 +531,8 @@ Available `credentials` values:
 
 TIP: Use `credentials: 'include'` when you need to send authentication cookies or headers to a different domain that supports CORS. Avoid mixing `credentials` and `withCredentials` options to prevent confusion.
 
+IMPORTANT: During SSR on Node.js, `credentials: 'include'` does not automatically forward cookies from the incoming browser request. The `credentials` option does not remove `Cookie` or `Authorization` headers that you add explicitly. [Undici permits some headers that browsers forbid](https://undici.nodejs.org/#forbidden-and-safelisted-header-names), so only forward credential headers to trusted origins.
+
 #### Referrer
 
 The `referrer` option allows you to control what referrer information is sent with the request. This is important for privacy and security considerations.
@@ -563,7 +567,7 @@ TIP: Use `referrer: ''` for sensitive requests where you don't want to leak the
 
 #### Referrer policy
 
-The `referrerPolicy` option controls how much referrer information , the URL of the page making the request is sent along with an HTTP request. This setting affects both privacy and analytics, allowing you to balance data visibility with security considerations.
+The `referrerPolicy` option controls how much referrer information—the URL of the page making the request—is sent along with an HTTP request. This setting affects both privacy and analytics, allowing you to balance data visibility with security considerations.
 
 ```ts
 // Send no referrer information regardless of the current page
@@ -590,7 +594,7 @@ The `referrerPolicy` option accepts:
 - `'same-origin'` Sends the full URL for same-origin requests and no referrer for cross-origin requests.
 - `'strict-origin'` Sends only the origin, and only if the protocol security level is not downgraded (e.g., HTTPS→HTTPS). Omits the referrer on downgrade.
 - `'strict-origin-when-cross-origin'` Default browser behavior. Sends the full URL for same-origin requests, the origin for cross-origin requests when not downgraded, and omits the referrer on downgrade.
-- `'unsafe-url'`Always sends the full URL (including path and query). This can expose sensitive data and should be used with caution.
+- `'unsafe-url'` Always sends the full URL (including path and query). This can expose sensitive data and should be used with caution.
 
 TIP: Prefer conservative values such as `'no-referrer'`, `'origin'`, or `'strict-origin-when-cross-origin'` for privacy-sensitive requests.
 
diff --git a/adev-ja/src/content/guide/http/making-requests.md b/adev-ja/src/content/guide/http/making-requests.md
index 0ee409cca6..4e736cc0bf 100644
--- a/adev-ja/src/content/guide/http/making-requests.md
+++ b/adev-ja/src/content/guide/http/making-requests.md
@@ -419,7 +419,9 @@ http
 - `'cors'`: CORSでクロスオリジンリクエストを許可（デフォルト）
 - `'no-cors'`: CORSなしでシンプルなクロスオリジンリクエストを許可、レスポンスは不透明
 
-TIP: クロスオリジンに行くべきでない機密リクエストには `mode: 'same-origin'` を使用してください。
+TIP: ブラウザ環境では、クロスオリジンに行くべきでない機密リクエストには `mode: 'same-origin'` を使用してください。
+
+IMPORTANT: Node.js上でのSSR中、`HttpClient` はNode.jsの[UndiciベースのFetch実装](https://nodejs.org/api/globals.html#fetch)を使用します。[UndiciはブラウザのCORSチェックを強制しません](https://undici.nodejs.org/#cors)。そのため `mode: 'same-origin'` はサーバーサイドのリクエストを制限しません。ユーザーの入力に影響されるURLは、許可リストと照合して検証してください。
 
 #### リダイレクト処理 {#redirect-handling}
 
@@ -529,6 +531,8 @@ IMPORTANT: `withCredentials` オプションは `credentials` オプションよ
 
 TIP: CORSをサポートする異なるドメインに認証Cookieやヘッダーを送信する必要がある場合は `credentials: 'include'` を使用してください。混乱を避けるため、`credentials` と `withCredentials` オプションを混在させることは避けてください。
 
+IMPORTANT: Node.js上でのSSR中、`credentials: 'include'` は受信したブラウザリクエストのCookieを自動的に転送しません。`credentials` オプションは、明示的に追加した `Cookie` や `Authorization` ヘッダーを削除するものでもありません。[Undiciはブラウザが禁止する一部のヘッダーを許可します](https://undici.nodejs.org/#forbidden-and-safelisted-header-names)。そのため、認証情報を含むヘッダーは信頼できるオリジンにのみ転送してください。
+
 #### Referrer {#referrer}
 
 `referrer` オプションを使用すると、リクエストと一緒に送信されるリファラー情報を制御できます。これは、プライバシーとセキュリティを考慮する上で重要です。
diff --git a/adev-ja/src/content/guide/http/setup.en.md b/adev-ja/src/content/guide/http/setup.en.md
index 10386e6ce6..378cf849e0 100644
--- a/adev-ja/src/content/guide/http/setup.en.md
+++ b/adev-ja/src/content/guide/http/setup.en.md
@@ -1,22 +1,22 @@
 # Setting up `HttpClient`
 
-Before you can use `HttpClient` in your app, you must configure it using [dependency injection](guide/di).
+`HttpClient` is available for injection by default in Angular v21 and later.
 
 ## Providing `HttpClient` through dependency injection
 
-`HttpClient` is provided using the `provideHttpClient` helper function, which most apps include in the application `providers` in `app.config.ts`.
+You can use the `provideHttpClient` helper function to configure the default HTTP feature set or add features in the application `providers` in `app.config.ts`.
 
 ```ts
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient()],
+  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
 };
 ```
 
-If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's NgModule:
+If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's NgModule to configure the default HTTP feature set or add features:
 
 ```ts
 @NgModule({
-  providers: [provideHttpClient()],
+  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
   // ... other application configuration
 })
 export class AppModule {}
@@ -48,6 +48,12 @@ By default, `HttpClient` uses the [`fetch`](https://developer.mozilla.org/docs/W
 
 `fetch` is a more modern API and is available in a few environments where `XMLHttpRequest` is not supported. It does have a few limitations, such as not producing upload progress events.
 
+<docs-callout critical title="Do not use `withXhr` in server-side rendering (SSR) environments">
+
+XHR support on the server is **deprecated** and is intended to be removed in Angular 23. The underlying `xhr2` library does not safely handle redirects: it can forward `Authorization` headers on cross-origin redirects and is susceptible to denial-of-service (DoS) via redirect loops. For SSR applications, use the default `fetch` backend instead.
+
+</docs-callout>
+
 ### `withInterceptors(...)`
 
 `withInterceptors` configures the set of interceptor functions which will process requests made through `HttpClient`. See the [interceptor guide](guide/http/interceptors) for more information.
diff --git a/adev-ja/src/content/guide/http/setup.md b/adev-ja/src/content/guide/http/setup.md
index b78c709b4b..1438a932c8 100644
--- a/adev-ja/src/content/guide/http/setup.md
+++ b/adev-ja/src/content/guide/http/setup.md
@@ -1,22 +1,22 @@
 # `HttpClient` の設定
 
-`HttpClient` をアプリケーションで使用するには、まず [依存性の注入](guide/di) を使って設定する必要があります。
+`HttpClient` は、Angular v21以降ではデフォルトで注入可能です。
 
 ## 依存性の注入による `HttpClient` の提供
 
-`HttpClient` は `provideHttpClient` ヘルパー関数を使って提供されます。ほとんどのアプリケーションは、`app.config.ts` のアプリケーション `providers` にこれを含めます。
+`provideHttpClient` ヘルパー関数を使うと、`app.config.ts` のアプリケーション `providers` で、デフォルトのHTTP機能セットを設定したり、機能を追加したりできます。
 
 ```ts
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient()],
+  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
 };
 ```
 
-アプリケーションがNgModuleベースのブートストラップを使用している場合は、アプリケーションのNgModuleのプロバイダーに `provideHttpClient` を含めることができます。
+アプリケーションがNgModuleベースのブートストラップを使用している場合は、アプリケーションのNgModuleのプロバイダーに `provideHttpClient` を含めて、デフォルトのHTTP機能セットを設定したり、機能を追加したりできます。
 
 ```ts
 @NgModule({
-  providers: [provideHttpClient()],
+  providers: [provideHttpClient(/* add features here, such as withInterceptors(...) */)],
   // ...その他のアプリケーション設定
 })
 export class AppModule {}
@@ -48,6 +48,12 @@ export const appConfig: ApplicationConfig = {
 
 `fetch` はより新しいAPIであり、`XMLHttpRequest` がサポートされていないいくつかの環境で使用できます。アップロードの進行状況イベントを生成しないなど、いくつかの制限があります。
 
+<docs-callout critical title="サーバーサイドレンダリング（SSR）環境では `withXhr` を使用しないでください">
+
+サーバー上でのXHRサポートは**非推奨**であり、Angular 23で削除される予定です。基盤となる `xhr2` ライブラリはリダイレクトを安全に処理しません。クロスオリジンのリダイレクトで `Authorization` ヘッダーを転送してしまう可能性があり、リダイレクトループによるサービス拒否（DoS）攻撃の影響も受けます。SSRアプリケーションでは、代わりにデフォルトの `fetch` バックエンドを使用してください。
+
+</docs-callout>
+
 ### `withInterceptors(...)`
 
 `withInterceptors` は、`HttpClient` を介して行われたリクエストを処理する、インターセプター関数のセットを設定します。詳細については、[インターセプターガイド](guide/http/interceptors) を参照してください。
diff --git a/adev-ja/src/content/guide/hydration.en.md b/adev-ja/src/content/guide/hydration.en.md
index 3bc7b5a36d..5c2ac8d91f 100644
--- a/adev-ja/src/content/guide/hydration.en.md
+++ b/adev-ja/src/content/guide/hydration.en.md
@@ -6,7 +6,7 @@ Hydration is the process that restores the server-side rendered application on t
 
 ## Why is hydration important?
 
-Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the applications structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First Input Delay ([FID](https://web.dev/fid/)) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.
+Hydration improves application performance by avoiding extra work to re-create DOM nodes. Instead, Angular tries to match existing DOM elements to the application's structure at runtime and reuses DOM nodes when possible. This results in a performance improvement that can be measured using [Core Web Vitals (CWV)](https://web.dev/learn-core-web-vitals/) statistics, such as reducing the First Input Delay ([FID](https://web.dev/fid/)) and Largest Contentful Paint ([LCP](https://web.dev/lcp/)), as well as Cumulative Layout Shift ([CLS](https://web.dev/cls/)). Improving these numbers also affects things like SEO performance.
 
 Without hydration enabled, server-side rendered Angular applications will destroy and re-render the application's DOM, which may result in a visible UI flicker. This re-rendering can negatively impact [Core Web Vitals](https://web.dev/learn-core-web-vitals/) like [LCP](https://web.dev/lcp/) and cause a layout shift. Enabling hydration allows the existing DOM to be re-used and prevents a flicker.
 
@@ -90,9 +90,7 @@ The Event Replay is divided into three main phases:
 
 Event replay supports _native browser events_, for example `click`, `mouseover`, and `focusin`. If you'd like to learn more about JSAction, the library that powers event replay, you can read more [on the readme](https://github.com/angular/angular/tree/main/packages/core/primitives/event-dispatch#readme).
 
----
-
-This feature ensures a consistent user experience, preventing user actions performed before Hydration from being ignored.
+This feature ensures a consistent user experience, preventing user actions performed before hydration from being ignored.
 
 NOTE: If you have [incremental hydration](guide/incremental-hydration) enabled, event replay is automatically enabled under the hood.
 
@@ -142,7 +140,7 @@ Providing a custom or a "noop" Zone.js implementation may lead to a different ti
 
 ## Errors
 
-There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case you may encounter this type of error was mentioned in the [Valid HTML structure](#valid-html-structure) section earlier. So, make sure the HTML in your templates is using valid structure, and you'll avoid that error case.
+There are several hydration related errors you may encounter ranging from node mismatches to cases when the `ngSkipHydration` was used on an invalid host node. The most common error case that may occur is due to direct DOM manipulation using native APIs that results in hydration being unable to find or match the expected DOM tree structure on the client that was rendered by the server. The other case where you may encounter this type of error was mentioned in the [Valid HTML structure](#valid-html-structure) section earlier. So, make sure the HTML in your templates is using valid structure, and you'll avoid that error case.
 
 For a full reference on hydration related errors, visit the [Errors Reference Guide](/errors).
 
diff --git a/adev-ja/src/content/guide/hydration.md b/adev-ja/src/content/guide/hydration.md
index 402b1d9f08..32f9c29f96 100644
--- a/adev-ja/src/content/guide/hydration.md
+++ b/adev-ja/src/content/guide/hydration.md
@@ -90,8 +90,6 @@ bootstrapApplication(App, {
 
 イベントリプレイは、`click`、`mouseover`、`focusin` などの _ネイティブブラウザイベント_ をサポートしています。イベントリプレイを強化するライブラリであるJSActionについて詳しく知りたい場合は、[readme](https://github.com/angular/angular/tree/main/packages/core/primitives/event-dispatch#readme) を参照してください。
 
----
-
 この機能は、ハイドレーションの前に実行されたユーザーアクションが無視されるのを防ぎ、一貫したユーザー体験を保証します。
 
 NOTE: [インクリメンタルハイドレーション](guide/incremental-hydration)を有効にしている場合、イベントリプレイは内部的に自動で有効になります。
@@ -142,7 +140,7 @@ HELPFUL: この設定が、サーバーの `tsconfig.server.json` とブラウ
 
 ## エラー {#errors}
 
-ノードの不一致から、`ngSkipHydration` が無効なホストノードで使用されたケースまで、ハイドレーション関連のいくつかのエラーに遭遇する可能性があります。最も一般的なエラーケースは、ネイティブAPIを使用したDOMの直接操作が原因で発生するもので、ハイドレーションがサーバーによってレンダリングされたクライアント上の期待されるDOMツリー構造を見つけたり一致させたりできないというものです。この種のエラーに遭遇するもう1つのケースは、以前の[有効なHTML構造](#valid-html-structure)セクションで述べました。したがって、テンプレート内のHTMLが有効な構造を使用していることを確認すれば、そのエラーケースを回避できます。
+ノードの不一致から、`ngSkipHydration` が無効なホストノードで使用されたケースまで、ハイドレーション関連のいくつかのエラーに遭遇する可能性があります。最も一般的なエラーケースは、ネイティブAPIを使用したDOMの直接操作が原因で発生するもので、ハイドレーションがサーバーによってレンダリングされたクライアント上の期待されるDOMツリー構造を見つけたり一致させたりできないというものです。この種のエラーに遭遇するもう1つのケースについては、前述の[有効なHTML構造](#valid-html-structure)セクションで説明しました。したがって、テンプレート内のHTMLが有効な構造を使用していることを確認すれば、そのエラーケースを回避できます。
 
 ハイドレーション関連のエラーの完全なリファレンスについては、[エラーリファレンスガイド](/errors)を参照してください。
 
diff --git a/adev-ja/src/content/guide/i18n/format-data-locale.md b/adev-ja/src/content/guide/i18n/format-data-locale.md
index 3565cf2efc..122f32b6fe 100644
--- a/adev-ja/src/content/guide/i18n/format-data-locale.md
+++ b/adev-ja/src/content/guide/i18n/format-data-locale.md
@@ -25,7 +25,7 @@ Add the `locale` parameter to the pipe to override the current value of `LOCALE_
 To force the currency to use American English \(`en-US`\), use the following format for the `CurrencyPipe`
 
 ```angular-html
-{{ amount | currency: 'en-US' }}
+{{ amount | currency: 'USD' : 'symbol' : '1.2-2' : 'en-US' }}
 ```
 
 HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCALE_ID` token of your application.
diff --git a/adev-ja/src/content/guide/i18n/prepare.md b/adev-ja/src/content/guide/i18n/prepare.md
index b2fc6175ba..225e130d4d 100644
--- a/adev-ja/src/content/guide/i18n/prepare.md
+++ b/adev-ja/src/content/guide/i18n/prepare.md
@@ -403,5 +403,5 @@ The following code example shows nested clauses based on the `gender` and `minut
 [GithubAngularAngularBlobEcffc3557fe1bff9718c01277498e877ca44588dPackagesCoreSrcI18nLocaleEnTsL14L18]: https://github.com/angular/angular/blob/ecffc3557fe1bff9718c01277498e877ca44588d/packages/core/src/i18n/locale_en.ts#L14-L18 'Line 14 to 18 - angular/packages/core/src/i18n/locale_en.ts | angular/angular | GitHub'
 [GithubUnicodeOrgIcuUserguideFormatParseMessages]: https://unicode-org.github.io/icu/userguide/format_parse/messages 'ICU Message Format - ICU Documentation | Unicode | GitHub'
 [UnicodeCldrMain]: https://cldr.unicode.org 'Unicode CLDR Project'
-[UnicodeCldrIndexCldrSpecPluralRules]: http://cldr.unicode.org/index/cldr-spec/plural-rules 'Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
-[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: http://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names 'Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
+[UnicodeCldrIndexCldrSpecPluralRules]: https://cldr.unicode.org/index/cldr-spec/plural-rules 'Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
+[UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames]: https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Choosing-Plural-Category-Names 'Choosing Plural Category Names - Plural Rules | CLDR - Unicode Common Locale Data Repository | Unicode'
diff --git a/adev-ja/src/content/guide/i18n/translation-files.md b/adev-ja/src/content/guide/i18n/translation-files.md
index 45782f9b44..e684539b08 100644
--- a/adev-ja/src/content/guide/i18n/translation-files.md
+++ b/adev-ja/src/content/guide/i18n/translation-files.md
@@ -238,6 +238,6 @@ The following example displays both translation units after translating.
 [GithubUnicodeOrgCldrStagingChartsLatestSupplementalLanguagePluralRulesHtml]: https://cldr.unicode.org/index/cldr-spec/plural-rules 'Language Plural Rules - CLDR Charts | Unicode | GitHub'
 [JsonMain]: https://www.json.org 'Introducing JSON | JSON'
 [OasisOpenDocsXliffXliffCoreXliffCoreHtml]: https://docs.oasis-open.org/xliff/v1.2/os/xliff-core.html 'XLIFF Version 1.2 Specification | Oasis Open Docs'
-[OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html]: http://docs.oasis-open.org/xliff/xliff-core/v2.0/cos01/xliff-core-v2.0-cos01.html 'XLIFF Version 2.0 | Oasis Open Docs'
-[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: http://cldr.unicode.org/development/development-process/design-proposals/xmb 'XMB | CLDR - Unicode Common Locale Data Repository | Unicode'
+[OasisOpenDocsXliffXliffCoreV20Cos01XliffCoreV20Cose01Html]: https://docs.oasis-open.org/xliff/xliff-core/v2.0/cos01/xliff-core-v2.0-cos01.html 'XLIFF Version 2.0 | Oasis Open Docs'
+[UnicodeCldrDevelopmentDevelopmentProcessDesignProposalsXmb]: https://cldr.unicode.org/development/development-process/design-proposals/xmb 'XMB | CLDR - Unicode Common Locale Data Repository | Unicode'
 [WikipediaWikiXliff]: https://en.wikipedia.org/wiki/XLIFF 'XLIFF | Wikipedia'
diff --git a/adev-ja/src/content/guide/image-optimization.en.md b/adev-ja/src/content/guide/image-optimization.en.md
index a098714047..4adbbcad99 100644
--- a/adev-ja/src/content/guide/image-optimization.en.md
+++ b/adev-ja/src/content/guide/image-optimization.en.md
@@ -2,7 +2,7 @@
 
 The `NgOptimizedImage` directive makes it easy to adopt performance best practices for loading images.
 
-The directive ensures that the loading of the [Largest Contentful Paint (LCP)](http://web.dev/lcp) image is prioritized by:
+The directive ensures that the loading of the [Largest Contentful Paint (LCP)](https://web.dev/lcp) image is prioritized by:
 
 - Automatically setting the `fetchpriority` attribute on the `<img>` tag
 - Lazy loading other images by default
diff --git a/adev-ja/src/content/guide/image-optimization.md b/adev-ja/src/content/guide/image-optimization.md
index a0ac18467e..24cf3c29ef 100644
--- a/adev-ja/src/content/guide/image-optimization.md
+++ b/adev-ja/src/content/guide/image-optimization.md
@@ -2,7 +2,7 @@
 
 `NgOptimizedImage` ディレクティブは、画像の読み込みにおけるパフォーマンスのベストプラクティスを簡単に採用できるようにします。
 
-このディレクティブは、[Largest Contentful Paint (LCP)](http://web.dev/lcp) 画像の読み込みが以下の方法で優先されるようにします。
+このディレクティブは、[Largest Contentful Paint (LCP)](https://web.dev/lcp) 画像の読み込みが以下の方法で優先されるようにします。
 
 - `<img>` タグに `fetchpriority` 属性を自動的に設定する
 - デフォルトで他の画像を遅延読み込みする
diff --git a/adev-ja/src/content/guide/routing/common-router-tasks.md b/adev-ja/src/content/guide/routing/common-router-tasks.md
index 3d7a3e6e71..5698ce40f3 100644
--- a/adev-ja/src/content/guide/routing/common-router-tasks.md
+++ b/adev-ja/src/content/guide/routing/common-router-tasks.md
@@ -2,7 +2,7 @@
 
 このガイドでは、アプリケーションでAngularルーターを使用する際によくあるその他のタスクについて説明します。
 
-## ルート情報の取得
+## ルート情報の取得 {#getting-route-information}
 
 多くの場合、ユーザーがアプリケーションをナビゲートするときに、一方のコンポーネントからもう一方のコンポーネントに情報を渡す必要があります。
 たとえば、食料品のショッピングリストを表示するアプリケーションを考えてみてください。
diff --git a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
index 0fe020987a..181f1cb83b 100644
--- a/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
+++ b/adev-ja/src/content/guide/routing/customizing-route-behavior.en.md
@@ -37,7 +37,7 @@ This is useful when you want repeated clicks on a list filter, left-nav item, or
 provideRouter(routes, withRouterConfig({onSameUrlNavigation: 'reload'}));
 ```
 
-You can also control this behavior on individual navigations rather than globally. This allows you to keep the keep the default of `'ignore'` while selectively enabling reload behavior for specific use cases:
+You can also control this behavior on individual navigations rather than globally. This allows you to keep the default of `'ignore'` while selectively enabling reload behavior for specific use cases:
 
 ```ts
 router.navigate(['/some-path'], {onSameUrlNavigation: 'reload'});
diff --git a/adev-ja/src/content/guide/routing/define-routes.en.md b/adev-ja/src/content/guide/routing/define-routes.en.md
index d9f6a33fec..215e1d54e2 100644
--- a/adev-ja/src/content/guide/routing/define-routes.en.md
+++ b/adev-ja/src/content/guide/routing/define-routes.en.md
@@ -28,7 +28,7 @@ A collection of routes looks like this:
 ```ts
 import {Routes} from '@angular/router';
 import {HomePage} from './home-page';
-import {AdminPage} from './about-page';
+import {AdminPage} from './admin-page';
 
 export const routes: Routes = [
   {
diff --git a/adev-ja/src/content/guide/routing/define-routes.md b/adev-ja/src/content/guide/routing/define-routes.md
index ecfacb0dc0..807780d5c2 100644
--- a/adev-ja/src/content/guide/routing/define-routes.md
+++ b/adev-ja/src/content/guide/routing/define-routes.md
@@ -28,7 +28,7 @@ const adminPage = {
 ```ts
 import {Routes} from '@angular/router';
 import {HomePage} from './home-page';
-import {AdminPage} from './about-page';
+import {AdminPage} from './admin-page';
 
 export const routes: Routes = [
   {
diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
index 0a21c80490..d177ed5631 100644
--- a/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
+++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.en.md
@@ -35,9 +35,7 @@ When you want to run code during specific navigation lifecycle events, you can d
 import {Component, inject, signal, effect} from '@angular/core';
 import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class RouterEvents {
   private readonly router = inject(Router);
 
diff --git a/adev-ja/src/content/guide/routing/lifecycle-and-events.md b/adev-ja/src/content/guide/routing/lifecycle-and-events.md
index f59db0d214..4ab33b4a0d 100644
--- a/adev-ja/src/content/guide/routing/lifecycle-and-events.md
+++ b/adev-ja/src/content/guide/routing/lifecycle-and-events.md
@@ -35,9 +35,7 @@ Angularルーターは、ナビゲーションライフサイクルを追跡す
 import {Component, inject, signal, effect} from '@angular/core';
 import {Event, Router, NavigationStart, NavigationEnd} from '@angular/router';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class RouterEvents {
   private readonly router = inject(Router);
 
diff --git a/adev-ja/src/content/guide/routing/read-route-state.en.md b/adev-ja/src/content/guide/routing/read-route-state.en.md
index 5f14761cae..4694115fe6 100644
--- a/adev-ja/src/content/guide/routing/read-route-state.en.md
+++ b/adev-ja/src/content/guide/routing/read-route-state.en.md
@@ -44,9 +44,7 @@ Here’s an example of how you’d access a route snapshot:
 ```angular-ts
 import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   readonly userId: string;
   private route = inject(ActivatedRoute);
diff --git a/adev-ja/src/content/guide/routing/read-route-state.md b/adev-ja/src/content/guide/routing/read-route-state.md
index be4580385f..1ba52af5a8 100644
--- a/adev-ja/src/content/guide/routing/read-route-state.md
+++ b/adev-ja/src/content/guide/routing/read-route-state.md
@@ -44,9 +44,7 @@ export class Product {
 ```angular-ts
 import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';
 
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile {
   readonly userId: string;
   private route = inject(ActivatedRoute);
diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
index c161a28f1d..2b31a13281 100644
--- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
+++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.en.md
@@ -5,7 +5,7 @@ This matching strategy supports static routes, variable routes with parameters,
 Also, build your own custom pattern matching for situations in which the URLs are more complicated.
 
 In this tutorial, you'll build a custom route matcher using Angular's `UrlMatcher`.
-This matcher looks for a Twitter handle in the URL.
+This matcher looks for an X (formerly Twitter) handle in the URL.
 
 ## Objectives
 
@@ -46,7 +46,7 @@ In addition to the default Angular application framework, you will also create a
 ## Configure your routes for your application
 
 With your application framework in place, you next need to add routing capabilities to the `app.config.ts` file.
-As a part of this process, you will create a custom URL matcher that looks for a Twitter handle in the URL.
+As a part of this process, you will create a custom URL matcher that looks for an X handle in the URL.
 This handle is identified by a preceding `@` symbol.
 
 1. In your code editor, open your `app.config.ts` file.
@@ -113,4 +113,4 @@ To learn more about the Angular Router, see the following topics:
   <docs-pill href="api/router/Router" title="Router API"/>
 </docs-pill-row>
 
-HELPFUL: This content is based on [Custom Route Matching with the Angular Router](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483), by [Brandon Roberts](https://twitter.com/brandontroberts).
+HELPFUL: This content is based on [Custom Route Matching with the Angular Router](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483), by [Brandon Roberts](https://x.com/brandontroberts).
diff --git a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
index de32a56e8c..40b50dda55 100644
--- a/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
+++ b/adev-ja/src/content/guide/routing/routing-with-urlmatcher.md
@@ -5,7 +5,7 @@ Angular Routerは、アプリケーションのナビゲーションを支援す
 また、URLがより複雑な状況で独自のカスタムパターンマッチを作成できます。
 
 このチュートリアルでは、Angularの`UrlMatcher`を使用してカスタムルートマッチャーを作成します。
-このマッチャーは、URL内のTwitterハンドルを検索します。
+このマッチャーは、URL内のX（旧Twitter）ハンドルを検索します。
 
 ## 目標
 
@@ -46,7 +46,7 @@ Angular CLIを使用して、新しいアプリケーション_angular-custom-ro
 ## アプリケーションのルートを構成する
 
 アプリケーションフレームワークが整ったら、次に`app.config.ts`ファイルにルーティング機能を追加する必要があります。
-このプロセスの一環として、URL内のTwitterハンドルを検索するカスタムURLマッチャーを作成します。
+このプロセスの一環として、URL内のXハンドルを検索するカスタムURLマッチャーを作成します。
 このハンドルは、先行する`@`シンボルによって識別されます。
 
 1. コードエディタで`app.config.ts`ファイルを開きます。
@@ -113,4 +113,4 @@ Angular Routerの詳細については、以下のトピックを参照してく
   <docs-pill href="api/router/Router" title="Router API"/>
 </docs-pill-row>
 
-HELPFUL: このコンテンツは、[Brandon Roberts](https://twitter.com/brandontroberts)による[Angular Routerを使用したカスタムルートマッチング](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483)に基づいています。
+HELPFUL: このコンテンツは、[Brandon Roberts](https://x.com/brandontroberts)による[Angular Routerを使用したカスタムルートマッチング](https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483)に基づいています。
diff --git a/adev-ja/src/content/guide/security.en.md b/adev-ja/src/content/guide/security.en.md
index d4854d6d89..1a21c9c05f 100644
--- a/adev-ja/src/content/guide/security.en.md
+++ b/adev-ja/src/content/guide/security.en.md
@@ -150,7 +150,7 @@ When serving your Angular application, the server should include a randomly-gene
 You must provide this nonce to Angular so that the framework can render `<style>` elements.
 You can set the nonce for Angular in one of the following ways:
 
-1. Set the `autoCsp` option to `true` the [workspace configuration](reference/configs/workspace-config#extra-build-and-test-options).
+1. Set the `autoCsp` option to `true` in the [workspace configuration](reference/configs/workspace-config#extra-build-and-test-options).
 1. Set the `ngCspNonce` attribute on the root application element as `<app ngCspNonce="randomNonceGoesHere"></app>`. Use this approach if you have access to server-side templating that can add the nonce both to the header and the `index.html` when constructing the response.
 1. Provide the nonce using the `CSP_NONCE` injection token. Use this approach if you have access to the nonce at runtime and you want to be able to cache the `index.html`.
 
@@ -369,17 +369,17 @@ For more information, see the XSSI section of this [Google web security blog pos
 
 ## Preventing Server-Side Request Forgery (SSRF)
 
-Angular includes strict validation for `Host`, `X-Forwarded-Host`, `X-Forwarded-Proto`, `X-Forwarded-Prefix` and `X-Forwarded-Port` headers in the request handling pipeline to prevent header-based [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF).
+Angular includes strict validation for `Host`, `Forwarded`, `X-Forwarded-Host`, `X-Forwarded-Proto`, `X-Forwarded-Prefix`, and `X-Forwarded-Port` headers in the request handling pipeline to prevent header-based [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF).
 
 The validation rules are:
 
-- `Host` and `X-Forwarded-Host` headers are validated against a strict allowlist and cannot contain path separators.
+- `Host`, `X-Forwarded-Host`, and the `host` parameter of the `Forwarded` header are validated against a strict allowlist and cannot contain path separators.
 - `X-Forwarded-Port` header must be numeric.
-- `X-Forwarded-Proto` header must be `http` or `https`.
+- `X-Forwarded-Proto` header and the `proto` parameter of the `Forwarded` header must be `http` or `https`.
 - `X-Forwarded-Prefix` header must start with `/` and contain only alphanumeric characters, hyphens, and underscores, separated by single slashes.
-- By default, all `X-Forwarded-*` headers are treated as untrusted and are removed from the request. To retain them, they must be explicitly allowed by configuring `trustProxyHeaders`.
+- By default, the `Forwarded` header and all `X-Forwarded-*` headers are treated as untrusted and are removed from the request. To retain them, they must be explicitly allowed by configuring `trustProxyHeaders`.
 
-Invalid headers trigger an error log, and unallowed proxy headers are removed from the request. Requests with unrecognized hostnames will result in a `400 Bad Request` is issued.
+Invalid headers trigger an error log, and unallowed proxy headers are removed from the request. Requests with unrecognized hostnames will result in a `400 Bad Request`.
 
 NOTE: Most cloud providers and CDN providers perform automatic validation of these headers before a request ever reaches the application origin. This inherent filtering significantly reduces the practical attack surface.
 
@@ -436,21 +436,27 @@ IMPORTANT: You can use `*` as a value in `allowedHosts` to allow all hostnames,
 
 ### Configuring trusted proxy headers
 
-By default, Angular ignores all `X-Forwarded-*` headers. If your application is behind a trusted reverse proxy (like a load balancer) that sets these headers, you can configure Angular to trust them.
+By default, Angular ignores the standard `Forwarded` header and all `X-Forwarded-*` headers. If your application is behind a trusted reverse proxy (like a load balancer) that sets these headers, you can configure Angular to trust them.
+
+If the `Forwarded` header is trusted, its `host` and `proto` parameters are extracted and take precedence over the corresponding `x-forwarded-host` and `x-forwarded-proto` headers.
 
 You can configure `trustProxyHeaders` when initializing the application engine:
 
 ```typescript
 const appEngine = new AngularAppEngine({
-  trustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto'], // Trust specific headers
+  trustProxyHeaders: ['forwarded'], // Trust the standard Forwarded header
+});
+
+const appEngine = new AngularAppEngine({
+  trustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto'], // Trust non-standard headers
 });
 
 const nodeAppEngine = new AngularNodeAppEngine({
-  trustProxyHeaders: true, // Trust all X-Forwarded-* headers
+  trustProxyHeaders: true, // Trust standard Forwarded and all X-Forwarded-* headers
 });
 ```
 
-For the Node.js variant `AngularNodeAppEngine`, you can also provide the `NG_TRUST_PROXY_HEADERS` environment variable (with comma-separated list of headers as a value) to allow the usage of these headers.
+For the Node.js variant `AngularNodeAppEngine`, you can also provide the `NG_TRUST_PROXY_HEADERS` environment variable (with a comma-separated list of headers as a value) to allow the usage of these headers.
 
 ```bash {hideDollar}
 export NG_TRUST_PROXY_HEADERS="X-FORWARDED-HOST,X-FORWARDED-PREFIX"
diff --git a/adev-ja/src/content/guide/security.md b/adev-ja/src/content/guide/security.md
index 396bf078e4..97f7b5e1fd 100644
--- a/adev-ja/src/content/guide/security.md
+++ b/adev-ja/src/content/guide/security.md
@@ -49,7 +49,7 @@ Angularは、XSSのバグを体系的に阻止するために、すべての値
 これらのWebプラットフォーム機能は、DOMレベルで動作するため、XSSの問題を防ぐための最も効果的な手段です。これにより、他の低レベルAPIを使用したバイパスはできません。
 そのため、これらの機能を活用することを強くお勧めします。これを行うには、アプリケーションの[コンテンツセキュリティポリシー](#content-security-policy)を構成し、[Trusted Typesの強制](#enforcing-trusted-types)を有効にします。
 
-### サニタイズとセキュリティコンテキスト {#sanitization-and-security-context}
+### サニタイズとセキュリティコンテキスト {#sanitization-and-security-contexts}
 
 _サニタイズ_とは、信頼されていない値を検査して、DOMに挿入しても安全な値に変換することです。
 多くの場合、サニタイズは値をまったく変更しません。
@@ -68,7 +68,7 @@ Angularは、次のセキュリティコンテキストを定義しています
 Angularは、信頼されていない値をHTMLとURLに対してサニタイズします。リソースURLのサニタイズは、リソースURLに任意のコードが含まれているため、不可能です。
 開発モードでは、Angularはサニタイズ中に値を変更する必要がある場合、コンソールに警告を表示します。
 
-### サニタイズの例
+### サニタイズの例 {#sanitization-example}
 
 次のテンプレートは、`htmlSnippet`の値をバインディングします。1つは要素の内容に補間して、もう1つは要素の`innerHTML`プロパティにバインディングします。
 
@@ -86,7 +86,7 @@ Angularは、値を安全ではないと認識し、自動的にサニタイズ
 
 <img alt="補間されたHTML値とバインディングされたHTML値を示すスクリーンショット" src="assets/images/guide/security/binding-inner-html.png#small">
 
-### DOM APIの直接使用と明示的なサニタイズ呼び出し
+### DOM APIの直接使用と明示的なサニタイズ呼び出し {#direct-use-of-the-dom-apis-and-explicit-sanitization-calls}
 
 信頼済みタイプを強制しない限り、組み込みのブラウザDOM APIは、セキュリティの脆弱性から自動的に保護しません。
 たとえば、`document`、`ElementRef`を通じてアクセスできるノード、および多くのサードパーティAPIには、安全ではないメソッドが含まれています。
@@ -369,17 +369,17 @@ Angularの`HttpClient`ライブラリは、この規則を認識し、さらに
 
 ## Preventing Server-Side Request Forgery (SSRF)
 
-Angular includes strict validation for `Host`, `X-Forwarded-Host`, `X-Forwarded-Proto`, `X-Forwarded-Prefix` and `X-Forwarded-Port` headers in the request handling pipeline to prevent header-based [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF).
+Angular includes strict validation for `Host`, `Forwarded`, `X-Forwarded-Host`, `X-Forwarded-Proto`, `X-Forwarded-Prefix`, and `X-Forwarded-Port` headers in the request handling pipeline to prevent header-based [Server-Side Request Forgery (SSRF)](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/SSRF).
 
 The validation rules are:
 
-- `Host` and `X-Forwarded-Host` headers are validated against a strict allowlist and cannot contain path separators.
+- `Host`, `X-Forwarded-Host`, and the `host` parameter of the `Forwarded` header are validated against a strict allowlist and cannot contain path separators.
 - `X-Forwarded-Port` header must be numeric.
-- `X-Forwarded-Proto` header must be `http` or `https`.
+- `X-Forwarded-Proto` header and the `proto` parameter of the `Forwarded` header must be `http` or `https`.
 - `X-Forwarded-Prefix` header must start with `/` and contain only alphanumeric characters, hyphens, and underscores, separated by single slashes.
-- By default, all `X-Forwarded-*` headers are treated as untrusted and are removed from the request. To retain them, they must be explicitly allowed by configuring `trustProxyHeaders`.
+- By default, the `Forwarded` header and all `X-Forwarded-*` headers are treated as untrusted and are removed from the request. To retain them, they must be explicitly allowed by configuring `trustProxyHeaders`.
 
-Invalid headers trigger an error log, and unallowed proxy headers are removed from the request. Requests with unrecognized hostnames will result in a `400 Bad Request` is issued.
+Invalid headers trigger an error log, and unallowed proxy headers are removed from the request. Requests with unrecognized hostnames will result in a `400 Bad Request`.
 
 NOTE: Most cloud providers and CDN providers perform automatic validation of these headers before a request ever reaches the application origin. This inherent filtering significantly reduces the practical attack surface.
 
@@ -436,21 +436,27 @@ IMPORTANT: You can use `*` as a value in `allowedHosts` to allow all hostnames,
 
 ### Configuring trusted proxy headers
 
-By default, Angular ignores all `X-Forwarded-*` headers. If your application is behind a trusted reverse proxy (like a load balancer) that sets these headers, you can configure Angular to trust them.
+By default, Angular ignores the standard `Forwarded` header and all `X-Forwarded-*` headers. If your application is behind a trusted reverse proxy (like a load balancer) that sets these headers, you can configure Angular to trust them.
+
+If the `Forwarded` header is trusted, its `host` and `proto` parameters are extracted and take precedence over the corresponding `x-forwarded-host` and `x-forwarded-proto` headers.
 
 You can configure `trustProxyHeaders` when initializing the application engine:
 
 ```typescript
 const appEngine = new AngularAppEngine({
-  trustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto'], // Trust specific headers
+  trustProxyHeaders: ['forwarded'], // Trust the standard Forwarded header
+});
+
+const appEngine = new AngularAppEngine({
+  trustProxyHeaders: ['x-forwarded-host', 'x-forwarded-proto'], // Trust non-standard headers
 });
 
 const nodeAppEngine = new AngularNodeAppEngine({
-  trustProxyHeaders: true, // Trust all X-Forwarded-* headers
+  trustProxyHeaders: true, // Trust standard Forwarded and all X-Forwarded-* headers
 });
 ```
 
-For the Node.js variant `AngularNodeAppEngine`, you can also provide the `NG_TRUST_PROXY_HEADERS` environment variable (with comma-separated list of headers as a value) to allow the usage of these headers.
+For the Node.js variant `AngularNodeAppEngine`, you can also provide the `NG_TRUST_PROXY_HEADERS` environment variable (with a comma-separated list of headers as a value) to allow the usage of these headers.
 
 ```bash {hideDollar}
 export NG_TRUST_PROXY_HEADERS="X-FORWARDED-HOST,X-FORWARDED-PREFIX"
diff --git a/adev-ja/src/content/guide/signals/debounced.md b/adev-ja/src/content/guide/signals/debounced.md
index 146b798e02..0d424d9648 100644
--- a/adev-ja/src/content/guide/signals/debounced.md
+++ b/adev-ja/src/content/guide/signals/debounced.md
@@ -35,7 +35,7 @@ export class Search {
 
 ## Status during debounce
 
-While the debounce timer is counting down, `status()` is `'loading'` and `value()` returns the previously resolved value. When the timer expires, the resource settles to `'resolved'`. If the source signal throws, the resource enters `'error'` immediately no timer runs.
+While the debounce timer is counting down, `status()` is `'loading'` and `value()` returns the previously resolved value. When the timer expires, the resource settles to `'resolved'`. If the source signal throws, the resource enters `'error'` immediately; no timer runs.
 
 See [Resource status](/guide/signals/resource#resource-status) for the full list of statuses and their `value()` behavior.
 
diff --git a/adev-ja/src/content/guide/signals/effect.md b/adev-ja/src/content/guide/signals/effect.md
index 0f02c35587..0acefd12ea 100644
--- a/adev-ja/src/content/guide/signals/effect.md
+++ b/adev-ja/src/content/guide/signals/effect.md
@@ -21,7 +21,7 @@ Effects should be the last API you reach for. Always prefer `computed()` for der
 TIP: There are no situations where effect is good, only situations where it is appropriate.
 
 - Logging signal values, either for analytics or as a debugging tool.
-- Keeping data in sync with different kind of storages: `window.localStorage`, session storage, cookies etc.
+- Keeping data in sync with different kinds of storage: `window.localStorage`, session storage, cookies, etc.
 - Adding custom DOM behavior that can't be expressed with template syntax.
 - Performing custom rendering to a `<canvas>` element, charting library, or other third party UI library.
 
@@ -36,9 +36,7 @@ Instead, use `computed` signals to model state that depends on other state.
 By default, you can only create an `effect()` within an [injection context](guide/di/dependency-injection-context) (where you have access to the `inject` function). The easiest way to satisfy this requirement is to call `effect` within a component, directive, or service `constructor`:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class EffectiveCounter {
   readonly count = signal(0);
 
@@ -54,9 +52,7 @@ export class EffectiveCounter {
 To create an effect outside the constructor, you can pass an `Injector` to `effect` via its options:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class EffectiveCounter {
   readonly count = signal(0);
   private injector = inject(Injector);
@@ -123,9 +119,7 @@ The `effect` function is a general-purpose tool for running code in reaction to
 For these situations, you can use `afterRenderEffect`. It functions like `effect`, but runs after Angular has finished rendering and committed its changes to the DOM.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class MyFancyChart {
   chartData = input.required<ChartData>();
   canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
diff --git a/adev-ja/src/content/guide/signals/linked-signal.en.md b/adev-ja/src/content/guide/signals/linked-signal.en.md
index e8169d3f9d..cfa963c668 100644
--- a/adev-ja/src/content/guide/signals/linked-signal.en.md
+++ b/adev-ja/src/content/guide/signals/linked-signal.en.md
@@ -133,3 +133,65 @@ const activeUserEditCopy = linkedSignal({
   equal: (a, b) => a.id === b.id,
 });
 ```
+
+## Customizing the set operation
+
+Sometimes you may want the `set` and `update` operations of a `linkedSignal` to write back to the source of truth instead of updating the `linkedSignal`'s value directly. You can customize this behavior by passing a `set` function in the options.
+
+The custom `set` function receives two arguments:
+
+1. The new value being set.
+2. A `rawSet` function, which you can invoke to update the `linkedSignal`'s internal state directly (matching the default behavior).
+
+NOTE: Using `rawSet` allows you to update the `linkedSignal`'s value directly. This can be useful to prevent the computation from running, for example if it is an expensive derivation and you already know the result.
+
+### Writing back to a source signal
+
+Consider a component that displays and allows editing temperature in Fahrenheit, but uses a Celsius signal as its source of truth:
+
+```typescript
+const tempC = signal(0);
+const tempF = linkedSignal(() => (tempC() * 9) / 5 + 32, {
+  set: (valF) => tempC.set(((valF - 32) * 5) / 9),
+});
+
+console.log(tempF()); // 32
+
+// Setting Fahrenheit updates Celsius, which reactively updates Fahrenheit
+tempF.set(212);
+console.log(tempC()); // 100
+console.log(tempF()); // 212
+```
+
+### Updating a property inside a parent object
+
+Another common scenario is updating a specific property inside a parent object. The parent is held in a signal, and you link to a nested property:
+
+```typescript
+interface Order {
+  id: number;
+  shippingMethod: string;
+}
+
+const order = signal<Order>({
+  id: 42,
+  shippingMethod: 'Ground',
+});
+
+const shippingMethod = linkedSignal(() => order().shippingMethod, {
+  set: (newMethod) => {
+    // Perform an immutable update to write the change back to the order
+    order.update((currentOrder) => ({
+      ...currentOrder,
+      shippingMethod: newMethod,
+    }));
+  },
+});
+
+console.log(shippingMethod()); // 'Ground'
+
+// Updating the shippingMethod updates the parent order object
+shippingMethod.set('Air');
+console.log(order()); // { id: 42, shippingMethod: 'Air' }
+console.log(shippingMethod()); // 'Air'
+```
diff --git a/adev-ja/src/content/guide/signals/linked-signal.md b/adev-ja/src/content/guide/signals/linked-signal.md
index c38e77388f..3f087f58f5 100644
--- a/adev-ja/src/content/guide/signals/linked-signal.md
+++ b/adev-ja/src/content/guide/signals/linked-signal.md
@@ -133,3 +133,65 @@ const activeUserEditCopy = linkedSignal({
   equal: (a, b) => a.id === b.id,
 });
 ```
+
+## Customizing the set operation
+
+Sometimes you may want the `set` and `update` operations of a `linkedSignal` to write back to the source of truth instead of updating the `linkedSignal`'s value directly. You can customize this behavior by passing a `set` function in the options.
+
+The custom `set` function receives two arguments:
+
+1. The new value being set.
+2. A `rawSet` function, which you can invoke to update the `linkedSignal`'s internal state directly (matching the default behavior).
+
+NOTE: Using `rawSet` allows you to update the `linkedSignal`'s value directly. This can be useful to prevent the computation from running, for example if it is an expensive derivation and you already know the result.
+
+### Writing back to a source signal
+
+Consider a component that displays and allows editing temperature in Fahrenheit, but uses a Celsius signal as its source of truth:
+
+```typescript
+const tempC = signal(0);
+const tempF = linkedSignal(() => (tempC() * 9) / 5 + 32, {
+  set: (valF) => tempC.set(((valF - 32) * 5) / 9),
+});
+
+console.log(tempF()); // 32
+
+// Setting Fahrenheit updates Celsius, which reactively updates Fahrenheit
+tempF.set(212);
+console.log(tempC()); // 100
+console.log(tempF()); // 212
+```
+
+### Updating a property inside a parent object
+
+Another common scenario is updating a specific property inside a parent object. The parent is held in a signal, and you link to a nested property:
+
+```typescript
+interface Order {
+  id: number;
+  shippingMethod: string;
+}
+
+const order = signal<Order>({
+  id: 42,
+  shippingMethod: 'Ground',
+});
+
+const shippingMethod = linkedSignal(() => order().shippingMethod, {
+  set: (newMethod) => {
+    // Perform an immutable update to write the change back to the order
+    order.update((currentOrder) => ({
+      ...currentOrder,
+      shippingMethod: newMethod,
+    }));
+  },
+});
+
+console.log(shippingMethod()); // 'Ground'
+
+// Updating the shippingMethod updates the parent order object
+shippingMethod.set('Air');
+console.log(order()); // { id: 42, shippingMethod: 'Air' }
+console.log(shippingMethod()); // 'Air'
+```
diff --git a/adev-ja/src/content/guide/signals/overview.en.md b/adev-ja/src/content/guide/signals/overview.en.md
index a61c43a074..a45a24a58e 100644
--- a/adev-ja/src/content/guide/signals/overview.en.md
+++ b/adev-ja/src/content/guide/signals/overview.en.md
@@ -40,7 +40,7 @@ Writable signals have the type `WritableSignal`.
 
 #### Converting writable signals to readonly
 
-`WritableSignal` provide a `asReadonly()` method that returns a readonly version of the signal. This is useful when you want to expose a signal's value to consumers without allowing them to modify it directly:
+`WritableSignal` provides an `asReadonly()` method that returns a readonly version of the signal. This is useful when you want to expose a signal's value to consumers without allowing them to modify it directly:
 
 ```ts
 @Service()
@@ -224,7 +224,7 @@ All signal APIs are synchronous— `signal`, `computed`, `input`, etc. However,
 
 ## Executing side effects on non-reactive APIs
 
-Synchronous or asynchronous derivations are recommended when we want to react to state changes. However, this doesn't cover all the possible use cases, and you'll sometimes find yourself in a situation where you need to react to signal changes on non-reactive apis. Use `effect` or `afterRenderEffect` for those specific usecases. For more information see [Side effects for non-reactive APIs](/guide/signals/effect) guide.
+Synchronous or asynchronous derivations are recommended when we want to react to state changes. However, this doesn't cover all the possible use cases, and you'll sometimes find yourself in a situation where you need to react to signal changes on non-reactive APIs. Use `effect` or `afterRenderEffect` for those specific use cases. For more information see [Side effects for non-reactive APIs](/guide/signals/effect) guide.
 
 ## Reading signals in `OnPush` components
 
diff --git a/adev-ja/src/content/guide/signals/overview.md b/adev-ja/src/content/guide/signals/overview.md
index c698cd35c0..111c86615f 100644
--- a/adev-ja/src/content/guide/signals/overview.md
+++ b/adev-ja/src/content/guide/signals/overview.md
@@ -4,7 +4,7 @@ Angularシグナルは、アプリケーション全体で状態がどのよう
 
 TIP: この包括的なガイドを読む前に、Angularの[基本概念](essentials/signals)をご覧ください。
 
-## シグナルとは何か？
+## シグナルとは何か？ {#what-are-signals}
 
 **シグナル**は、値が変更されたときに興味のあるコンシューマーに通知する、値をラップしたものです。シグナルは、プリミティブから複雑なデータ構造まで、あらゆる値を含めることができます。
 
@@ -12,7 +12,7 @@ TIP: この包括的なガイドを読む前に、Angularの[基本概念](essen
 
 シグナルは、*書き込み可能*または*読み取り専用*のいずれかになります。
 
-### 書き込み可能なシグナル
+### 書き込み可能なシグナル {#writable-signals}
 
 書き込み可能なシグナルは、値を直接更新するためのAPIを提供します。書き込み可能なシグナルは、シグナルの初期値を指定して`signal`関数を呼び出すことで作成します。
 
@@ -38,7 +38,7 @@ count.update((value) => value + 1);
 
 書き込み可能なシグナルは、`WritableSignal`という型になります。
 
-#### 書き込み可能なシグナルを読み取り専用に変換する
+#### 書き込み可能なシグナルを読み取り専用に変換する {#converting-writable-signals-to-readonly}
 
 `WritableSignal`は、シグナルの読み取り専用バージョンを返す`asReadonly()`メソッドを提供します。これは、シグナルの値をコンシューマーに公開したいが、直接変更できないようにしたい場合に便利です。
 
@@ -84,7 +84,7 @@ const doubleCount: Signal<number> = computed(() => count() * 2);
 
 `doubleCount` シグナルは、`count` シグナルに依存しています。`count`が更新されるたびに、Angularは`doubleCount`も更新する必要があることを認識します。
 
-#### 算出シグナルは、遅延評価とメモ化が行われる
+#### 算出シグナルは、遅延評価とメモ化が行われる {#computed-signals-are-both-lazily-evaluated-and-memoized}
 
 `doubleCount`の派生関数は、最初に`doubleCount`を読み取るまで、その値を計算するために実行されません。計算された値はキャッシュされ、`doubleCount`を再び読み取ると、再計算せずにキャッシュされた値が返されます。
 
@@ -92,7 +92,7 @@ const doubleCount: Signal<number> = computed(() => count() * 2);
 
 その結果、配列のフィルタリングなど、計算量が多い派生を算出シグナルで安全に実行できます。
 
-#### 算出シグナルは、書き込み可能なシグナルではない
+#### 算出シグナルは、書き込み可能なシグナルではない {#computed-signals-are-not-writable-signals}
 
 算出シグナルに値を直接割り当てることはできません。つまり、
 
@@ -102,7 +102,7 @@ doubleCount.set(3);
 
 はコンパイルエラーになります。なぜなら、`doubleCount`は`WritableSignal`ではないからです。
 
-#### 算出シグナルの依存関係は動的である
+#### 算出シグナルの依存関係は動的である {#computed-signal-dependencies-are-dynamic}
 
 派生中に実際に読み取られたシグナルのみが追跡されます。たとえば、この`computed`では、`count` シグナルは`showCount` シグナルが真の場合にのみ読み取られます。
 
@@ -138,7 +138,7 @@ Angularは次の場合に自動的にリアクティブコンテキストに入
 
 これらの操作中、Angularは_ライブ_接続を作成します。追跡されたシグナルが変更されると、Angularは_最終的に_コンシューマーを再実行します。
 
-### リアクティブコンテキストをアサートする
+### リアクティブコンテキストをアサートする {#asserts-the-reactive-context}
 
 Angularは、コードがリアクティブコンテキスト内で実行されていないことをアサートするための`assertNotInReactiveContext`ヘルパー関数を提供します。呼び出し元の関数への参照を渡すことで、アサーションが失敗した場合、エラーメッセージが正しいAPIエントリポイントを指すようにします。これにより、一般的なリアクティブコンテキストエラーよりも明確でアクションにつながるエラーメッセージが生成されます。
 
@@ -151,7 +151,7 @@ function subscribeToEvents() {
 }
 ```
 
-### 依存関係を追跡せずに読み取る
+### 依存関係を追跡せずに読み取る {#reading-without-tracking-dependencies}
 
 まれに、`computed`や`effect`などのリアクティブ関数内でシグナルを読み取るコードを実行する必要があり、依存関係を作成しない場合があります。
 
@@ -232,7 +232,7 @@ effect(async () => {
 
 ## 詳細なトピック {#advanced-topics}
 
-### シグナルの等価関数
+### シグナルの等価関数 {#signal-equality-functions}
 
 シグナルを作成する際には、オプションで等価関数を指定できます。これは、新しい値が前の値と実際に異なるかどうかを確認するために使用されます。
 
@@ -251,7 +251,7 @@ data.set(['test']);
 
 HELPFUL: デフォルトでは、シグナルは参照の等価性（[`Object.is()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 比較）を使用します。
 
-### シグナルの型チェック
+### シグナルの型チェック {#type-checking-signals}
 
 `isSignal`を使用して、値が`Signal`かどうかをチェックできます:
 
@@ -274,6 +274,6 @@ isWritableSignal(count); // true
 isWritableSignal(doubled); // false
 ```
 
-## RxJSとシグナルを併用する
+## RxJSとシグナルを併用する {#using-signals-with-rxjs}
 
 シグナルとRxJSの相互運用性の詳細については、[RxJSとAngularシグナルの相互運用](ecosystem/rxjs-interop) を参照してください。
diff --git a/adev-ja/src/content/guide/signals/resource.en.md b/adev-ja/src/content/guide/signals/resource.en.md
index ff9f0ae27d..5768aca455 100644
--- a/adev-ja/src/content/guide/signals/resource.en.md
+++ b/adev-ja/src/content/guide/signals/resource.en.md
@@ -7,7 +7,7 @@ You can use a `Resource` to perform any kind of async operation, but the most co
 The easiest way to create a `Resource` is the `resource` function.
 
 ```typescript
-import {resource, Signal} from '@angular/core';
+import {computed, resource, Signal} from '@angular/core';
 
 const userId: Signal<string> = getUserId();
 
@@ -57,6 +57,25 @@ The `ResourceLoaderParams` object contains three properties: `params`, `previous
 
 If the `params` computation returns `undefined`, the loader function does not run and the resource status becomes `'idle'`.
 
+### Streaming resources
+
+Some asynchronous data sources produce multiple values over time instead of returning a single result. Examples include WebSockets, Server-Sent Events (SSE), and Firestore `onSnapshot` listeners.
+
+Use `stream` for these continuously updating data sources. Unlike `loader`, which resolves once for each request, `stream` returns a signal whose value can continue to update as new data becomes available.
+
+Use `loader` for one-time asynchronous operations, such as fetching data from an HTTP endpoint.
+
+```typescript
+const userUpdates = signal({value: 'Alice'});
+
+const userResource = resource({
+  stream: () => userUpdates,
+});
+
+// Later, when new data arrives:
+userUpdates.set({value: 'Bob'});
+```
+
 ### Aborting requests
 
 A resource aborts an outstanding loading operation if the `params` computation changes while the resource is loading.
@@ -120,6 +139,73 @@ The `status` signal provides a specific `ResourceStatus` that describes the stat
 
 You can use this status information to conditionally display user interface elements, such as loading indicators and error messages.
 
+## Caching `resource` data with SSR
+
+When an application renders on the server, a resource loader runs once to produce the initial HTML. During hydration, the browser normally runs the same loader again.
+
+To reuse the server result, provide an `id` for the resource. Angular stores the resolved value in `TransferState` on the server and uses it on the client to initialize the resource in a `'resolved'` state.
+
+```ts
+const userId: Signal<string> = getUserId();
+
+const userResource = resource({
+  params: () => ({id: userId()}),
+  loader: ({params}) => fetchUser(params),
+  id: 'user-unique-id',
+});
+```
+
+The `id` value must be unique within your application and identical on the server and the client so that Angular can match the cached entry to the resource that requested it.
+
+IMPORTANT: Because the cached value is serialized into the page's HTML, avoid setting `id` on resources that load data specific to the user who triggered the server-side render, especially if the rendered HTML can be cached or shared between users.
+
+## Chaining resources
+
+Sometimes one resource depends on the result of another. You can express this dependency using the `chain` function available in the `params` context object.
+
+```typescript
+import {resource} from '@angular/core';
+
+const userResource = resource({
+  params: () => ({id: getUserId()}),
+  loader: ({params}) => fetchUser(params),
+});
+
+const companyResource = resource({
+  params: ({chain}) => chain(userResource)?.companyId,
+  loader: ({params: companyId}) => fetchCompany(companyId),
+});
+```
+
+Here `companyResource` depends on the user's `companyId`, which is only known once `userResource` has loaded. `chain(userResource)` reads the value of `userResource` and automatically propagates its status to `companyResource`:
+
+- If `userResource` is **idle**, `companyResource` also becomes `idle`.
+- If `userResource` is **loading** or **reloading**, `companyResource` enters the `loading` state and its loader does not run. Note that during `reloading`, `chain` does not return the previously resolved value.
+- If `userResource` is in an **error** state, `companyResource` also enters the `error` state.
+- If `userResource` is **resolved** or **local**, `chain` returns its current value, which `companyResource` then uses as its params.
+
+When `chain` propagates a status from `userResource` (`idle`, `loading`, `reloading`, or `error`), the params function does not continue. When `userResource` is `resolved` or `local`, `chain` returns its value, which can itself be `undefined`. The example handles this with `chain(userResource)?.companyId`, so an `undefined` value results in `undefined` params and `companyResource` becomes `idle`.
+
+NOTE: Pass the chained value directly as the params value rather than wrapping it in an object. A params value like `{companyId: undefined}` is still a defined value, so the loader would run with an `undefined` `companyId` instead of the resource becoming `idle`.
+
+### Chaining vs. reading resource values directly
+
+You might be tempted to read a resource's value directly inside `params`:
+
+```typescript {avoid, header: 'reads value() directly without status propagation'}
+const companyResource = resource({
+  params: () => {
+    const user = userResource.value(); // may be undefined
+    return user ? {companyId: user.companyId} : undefined;
+  },
+  loader: ({params}) => fetchCompany(params.companyId),
+});
+```
+
+While this works, returning `undefined` from `params` makes the resource go `idle` rather than reflecting the actual state of the upstream resource. Using `chain` is preferred because it correctly mirrors `loading` and `error` states.
+
+Reach for `chain` only when the downstream resource performs its own async work that depends on the upstream value. If you only need to derive a value synchronously from a resource, use `computed` instead.
+
 ## Reactive data fetching with `httpResource`
 
 [`httpResource`](/guide/http/http-resource) is a wrapper around `HttpClient` that gives you the request status and response as signals. It makes HTTP requests through the Angular HTTP stack, including interceptors.
diff --git a/adev-ja/src/content/guide/signals/resource.md b/adev-ja/src/content/guide/signals/resource.md
index 2f2c2ceacd..7ebbfb6dc1 100644
--- a/adev-ja/src/content/guide/signals/resource.md
+++ b/adev-ja/src/content/guide/signals/resource.md
@@ -7,7 +7,7 @@
 `Resource`を作成する最も簡単な方法は、`resource`関数を使用することです。
 
 ```typescript
-import {resource, Signal} from '@angular/core';
+import {computed, resource, Signal} from '@angular/core';
 
 const userId: Signal<string> = getUserId();
 
@@ -57,6 +57,25 @@ const firstName = computed(() => {
 
 `params`の計算が`undefined`を返す場合、ローダー関数は実行されず、リソースの状態は`Idle`になります。
 
+### Streaming resources
+
+Some asynchronous data sources produce multiple values over time instead of returning a single result. Examples include WebSockets, Server-Sent Events (SSE), and Firestore `onSnapshot` listeners.
+
+Use `stream` for these continuously updating data sources. Unlike `loader`, which resolves once for each request, `stream` returns a signal whose value can continue to update as new data becomes available.
+
+Use `loader` for one-time asynchronous operations, such as fetching data from an HTTP endpoint.
+
+```typescript
+const userUpdates = signal({value: 'Alice'});
+
+const userResource = resource({
+  stream: () => userUpdates,
+});
+
+// Later, when new data arrives:
+userUpdates.set({value: 'Bob'});
+```
+
 ### リクエストの中断 {#aborting-requests}
 
 リソースが読み込み中の場合に`params`計算が変更されると、リソースは未処理の読み込み処理を中断します。
@@ -120,6 +139,73 @@ userResource.reload();
 
 この状態情報を使用して、ローディングインジケーターやエラーメッセージなどのユーザーインターフェース要素を条件付きで表示できます。
 
+## Caching `resource` data with SSR
+
+When an application renders on the server, a resource loader runs once to produce the initial HTML. During hydration, the browser normally runs the same loader again.
+
+To reuse the server result, provide an `id` for the resource. Angular stores the resolved value in `TransferState` on the server and uses it on the client to initialize the resource in a `'resolved'` state.
+
+```ts
+const userId: Signal<string> = getUserId();
+
+const userResource = resource({
+  params: () => ({id: userId()}),
+  loader: ({params}) => fetchUser(params),
+  id: 'user-unique-id',
+});
+```
+
+The `id` value must be unique within your application and identical on the server and the client so that Angular can match the cached entry to the resource that requested it.
+
+IMPORTANT: Because the cached value is serialized into the page's HTML, avoid setting `id` on resources that load data specific to the user who triggered the server-side render, especially if the rendered HTML can be cached or shared between users.
+
+## Chaining resources
+
+Sometimes one resource depends on the result of another. You can express this dependency using the `chain` function available in the `params` context object.
+
+```typescript
+import {resource} from '@angular/core';
+
+const userResource = resource({
+  params: () => ({id: getUserId()}),
+  loader: ({params}) => fetchUser(params),
+});
+
+const companyResource = resource({
+  params: ({chain}) => chain(userResource)?.companyId,
+  loader: ({params: companyId}) => fetchCompany(companyId),
+});
+```
+
+Here `companyResource` depends on the user's `companyId`, which is only known once `userResource` has loaded. `chain(userResource)` reads the value of `userResource` and automatically propagates its status to `companyResource`:
+
+- If `userResource` is **idle**, `companyResource` also becomes `idle`.
+- If `userResource` is **loading** or **reloading**, `companyResource` enters the `loading` state and its loader does not run. Note that during `reloading`, `chain` does not return the previously resolved value.
+- If `userResource` is in an **error** state, `companyResource` also enters the `error` state.
+- If `userResource` is **resolved** or **local**, `chain` returns its current value, which `companyResource` then uses as its params.
+
+When `chain` propagates a status from `userResource` (`idle`, `loading`, `reloading`, or `error`), the params function does not continue. When `userResource` is `resolved` or `local`, `chain` returns its value, which can itself be `undefined`. The example handles this with `chain(userResource)?.companyId`, so an `undefined` value results in `undefined` params and `companyResource` becomes `idle`.
+
+NOTE: Pass the chained value directly as the params value rather than wrapping it in an object. A params value like `{companyId: undefined}` is still a defined value, so the loader would run with an `undefined` `companyId` instead of the resource becoming `idle`.
+
+### Chaining vs. reading resource values directly
+
+You might be tempted to read a resource's value directly inside `params`:
+
+```typescript {avoid, header: 'reads value() directly without status propagation'}
+const companyResource = resource({
+  params: () => {
+    const user = userResource.value(); // may be undefined
+    return user ? {companyId: user.companyId} : undefined;
+  },
+  loader: ({params}) => fetchCompany(params.companyId),
+});
+```
+
+While this works, returning `undefined` from `params` makes the resource go `idle` rather than reflecting the actual state of the upstream resource. Using `chain` is preferred because it correctly mirrors `loading` and `error` states.
+
+Reach for `chain` only when the downstream resource performs its own async work that depends on the upstream value. If you only need to derive a value synchronously from a resource, use `computed` instead.
+
 ## `httpResource` を使用したリアクティブデータ取得 {#reactive-data-fetching-with-httpresource}
 
 [`httpResource`](/guide/http/http-resource) は `HttpClient` のラッパーで、リクエストの状態とレスポンスをシグナルとして提供します。これはインターセプターを含むAngular HTTPスタックを通してHTTPリクエストを行います。
diff --git a/adev-ja/src/content/guide/ssr.en.md b/adev-ja/src/content/guide/ssr.en.md
index a0cc7686cd..5f20d64482 100644
--- a/adev-ja/src/content/guide/ssr.en.md
+++ b/adev-ja/src/content/guide/ssr.en.md
@@ -328,9 +328,7 @@ const serverConfig: ApplicationConfig = {
 Inject and use the service in your components:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class Checkout {
   private analytics = inject(AnalyticsService);
 
@@ -427,12 +425,38 @@ To configure this, update your `angular.json` file as follows:
 
 `HttpClient` caches outgoing network requests when running on the server. This information is serialized and transferred to the browser as part of the initial HTML sent from the server. In the browser, `HttpClient` checks whether it has data in the cache and if so, reuses it instead of making a new HTTP request during initial application rendering. `HttpClient` stops using the cache once an application becomes [stable](api/core/ApplicationRef#isStable) while running in a browser.
 
+### Configuring the response body size limit
+
+When `HttpClient` uses the default fetch backend during server-side rendering, Angular limits each response body to 1 MB. This limit prevents the server from buffering unexpectedly large responses during rendering. If a response exceeds the configured limit, the request fails with the [NG02825](errors/NG02825) error.
+
+If your application needs to fetch larger responses during server rendering, set `maxResponseBodySize` in the `provideServerRendering` options:
+
+```ts
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {serverRoutes} from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(
+      {
+        maxResponseBodySize: 5 * 1024 * 1024, // 5MB
+      },
+      withRoutes(serverRoutes),
+    ),
+  ],
+};
+```
+
+`maxResponseBodySize` is configured in bytes and applies globally to server-side `HttpClient` requests that use the fetch backend.
+
+IMPORTANT: Keep this limit as small as your application allows. Increasing it lets server-side requests buffer larger response bodies, which can increase memory use and denial-of-service risk. Prefer moving large downloads outside server rendering.
+
 ### Configuring the caching options
 
 You can customize how Angular caches HTTP responses during server‑side rendering (SSR) and reuses them during hydration by configuring `HttpTransferCacheOptions`.  
 This configuration is provided globally using `withHttpTransferCacheOptions` inside `provideClientHydration()`.
 
-By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization`, `Proxy-Authorization`, or `Cookie` headers and are not sent with `withCredentials`. You can override those settings by using `withHttpTransferCacheOptions` to the hydration configuration.
+By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization`, `Proxy-Authorization`, or `Cookie` headers and are not sent with `withCredentials` or Fetch API `credentials` modes that can send credentials. Angular also skips transfer cache when a request or response includes `Cache-Control` directives that forbid caching (`no-store`, `no-cache`, or `private`), or when the Fetch API `cache` option is set to `no-store` or `no-cache`. Responses that carry a `Set-Cookie` header are also skipped. You can override the request filtering settings by using `withHttpTransferCacheOptions` in the hydration configuration.
 
 ```ts
 import {bootstrapApplication} from '@angular/platform-browser';
@@ -452,8 +476,6 @@ bootstrapApplication(App, {
 });
 ```
 
----
-
 ### `includeHeaders`
 
 Specifies which headers from the server response should be included in cached entries.  
@@ -467,7 +489,7 @@ withHttpTransferCacheOptions({
 
 IMPORTANT: Avoid including sensitive headers like authentication tokens. These can leak user‑specific data between requests.
 
----
+Including `Cache-Control` in `includeHeaders` only makes that header available on the hydrated response. Angular already evaluates `Cache-Control` headers automatically when deciding whether a request or response is eligible for transfer cache.
 
 ### `includePostRequests`
 
@@ -482,12 +504,10 @@ withHttpTransferCacheOptions({
 
 Use this only when `POST` requests are **idempotent** and safe to reuse between server and client renders.
 
----
-
 ### `includeRequestsWithAuthHeaders`
 
 Determines whether requests containing `Authorization`, `Proxy‑Authorization`, or `Cookie` headers are eligible for caching.  
-By default, these are excluded to prevent caching user‑specific responses. Requests sent with `withCredentials` are also excluded by default.
+By default, these are excluded to prevent caching user‑specific responses.
 
 ```ts
 withHttpTransferCacheOptions({
@@ -497,6 +517,32 @@ withHttpTransferCacheOptions({
 
 Enable only when authentication headers do **not** affect the response content (for example, public tokens for analytics APIs).
 
+### `includeRequestsWithCredentials`
+
+Determines whether requests sent using `withCredentials` or Fetch API `credentials` modes (`include` or `same-origin`) are eligible for caching.  
+By default, these are excluded to prevent caching user‑specific responses.
+
+```ts
+withHttpTransferCacheOptions({
+  includeRequestsWithCredentials: true,
+});
+```
+
+Enable only when credentialed requests return responses that are safe to cache.
+
+### `includeNonCacheableRequests`
+
+Determines whether requests and responses containing `Cache-Control` directives that forbid caching (`no-store`, `no-cache`, or `private`), responses with a `Set-Cookie` header, or requests using Fetch API `cache` options (`no-store` or `no-cache`), are eligible for caching.  
+By default, these are excluded to respect HTTP caching controls.
+
+```ts
+withHttpTransferCacheOptions({
+  includeNonCacheableRequests: true,
+});
+```
+
+Enable only when you need to bypass cache-control restrictions for transfer caching.
+
 ### Per‑request overrides
 
 You can override caching behavior for a specific request using the `transferCache` request option.
@@ -558,6 +604,8 @@ To disable caching for an individual request, you can specify the [`transferCach
 httpClient.get('/api/sensitive-data', {transferCache: false});
 ```
 
+`HttpTransferCache` does not cache requests or responses that explicitly opt out of caching. Angular skips transfer cache entries when a request includes a `Cache-Control` header with `no-store`, `no-cache`, or `private`, or when the request uses the Fetch API `cache` option set to `no-store` or `no-cache`. Responses with `Cache-Control: no-store`, `Cache-Control: no-cache`, or `Cache-Control: private` are also not stored in the transfer cache. Responses that include a `Set-Cookie` header are likewise not stored, as they typically carry user-specific state.
+
 NOTE: If your application uses different HTTP origins to make API calls on the server and on the client, the `HTTP_TRANSFER_CACHE_ORIGIN_MAP` token allows you to establish a mapping between those origins, so that `HttpTransferCache` feature can recognize those requests as the same ones and reuse the data cached on the server during hydration on the client.
 
 ## Configuring a server
diff --git a/adev-ja/src/content/guide/ssr.md b/adev-ja/src/content/guide/ssr.md
index d4c6c4255d..57b7a101d6 100644
--- a/adev-ja/src/content/guide/ssr.md
+++ b/adev-ja/src/content/guide/ssr.md
@@ -328,9 +328,7 @@ const serverConfig: ApplicationConfig = {
 コンポーネントでサービスを注入して使用します。
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class Checkout {
   private analytics = inject(AnalyticsService);
 
@@ -427,6 +425,32 @@ IMPORTANT: 上記のトークンは、次のシナリオでは `null` になり
 
 `HttpClient` は、サーバーで実行されているときに送信ネットワークリクエストをキャッシュします。この情報はシリアル化され、サーバーから送信される初期HTMLの一部としてブラウザに転送されます。ブラウザでは、`HttpClient` はキャッシュにデータがあるかどうかを確認し、ある場合は、初期アプリケーションレンダリング中に新しいHTTPリクエストを行う代わりにそれを再利用します。`HttpClient` は、ブラウザで実行中にアプリケーションが[安定](api/core/ApplicationRef#isStable)すると、キャッシュの使用を停止します。
 
+### Configuring the response body size limit
+
+When `HttpClient` uses the default fetch backend during server-side rendering, Angular limits each response body to 1 MB. This limit prevents the server from buffering unexpectedly large responses during rendering. If a response exceeds the configured limit, the request fails with the [NG02825](errors/NG02825) error.
+
+If your application needs to fetch larger responses during server rendering, set `maxResponseBodySize` in the `provideServerRendering` options:
+
+```ts
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {serverRoutes} from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(
+      {
+        maxResponseBodySize: 5 * 1024 * 1024, // 5MB
+      },
+      withRoutes(serverRoutes),
+    ),
+  ],
+};
+```
+
+`maxResponseBodySize` is configured in bytes and applies globally to server-side `HttpClient` requests that use the fetch backend.
+
+IMPORTANT: Keep this limit as small as your application allows. Increasing it lets server-side requests buffer larger response bodies, which can increase memory use and denial-of-service risk. Prefer moving large downloads outside server rendering.
+
 ### キャッシュオプションの設定 {#configuring-the-caching-options}
 
 サーバーサイドレンダリング (SSR) 中にAngularがHTTPレスポンスをキャッシュし、ハイドレーション中にそれらを再利用する方法を、`HttpTransferCacheOptions` を設定することでカスタマイズできます。
@@ -452,8 +476,6 @@ bootstrapApplication(App, {
 });
 ```
 
----
-
 ### `includeHeaders` {#includeheaders}
 
 サーバーレスポンスのどのヘッダーをキャッシュエントリに含めるかを指定します。
@@ -467,7 +489,7 @@ withHttpTransferCacheOptions({
 
 IMPORTANT: 認証トークンのような機密性の高いヘッダーを含めることは避けてください。これらはリクエスト間でユーザー固有のデータを漏洩させる可能性があります。
 
----
+Including `Cache-Control` in `includeHeaders` only makes that header available on the hydrated response. Angular already evaluates `Cache-Control` headers automatically when deciding whether a request or response is eligible for transfer cache.
 
 ### `includePostRequests` {#includepostrequests}
 
@@ -482,12 +504,10 @@ withHttpTransferCacheOptions({
 
 これは、`POST` リクエストが**冪等**であり、サーバーとクライアントのレンダリング間で再利用しても安全な場合にのみ使用してください。
 
----
-
 ### `includeRequestsWithAuthHeaders` {#includerequestswithauthheaders}
 
 `Authorization`、`Proxy‑Authorization`、または `Cookie` ヘッダーを含むリクエストをキャッシュ対象とするかどうかを決定します。
-デフォルトでは、ユーザー固有のレスポンスのキャッシュを防ぐために、これらは除外されます。`withCredentials` で送信されるリクエストもデフォルトで除外されます。
+デフォルトでは、ユーザー固有のレスポンスのキャッシュを防ぐために、これらは除外されます。
 
 ```ts
 withHttpTransferCacheOptions({
@@ -497,6 +517,32 @@ withHttpTransferCacheOptions({
 
 認証ヘッダーがレスポンス内容に影響を**与えない**場合(例: 分析API用のパブリックトークン)のみ有効にしてください。
 
+### `includeRequestsWithCredentials`
+
+Determines whether requests sent using `withCredentials` or Fetch API `credentials` modes (`include` or `same-origin`) are eligible for caching.  
+By default, these are excluded to prevent caching user‑specific responses.
+
+```ts
+withHttpTransferCacheOptions({
+  includeRequestsWithCredentials: true,
+});
+```
+
+Enable only when credentialed requests return responses that are safe to cache.
+
+### `includeNonCacheableRequests`
+
+Determines whether requests and responses containing `Cache-Control` directives that forbid caching (`no-store`, `no-cache`, or `private`), responses with a `Set-Cookie` header, or requests using Fetch API `cache` options (`no-store` or `no-cache`), are eligible for caching.  
+By default, these are excluded to respect HTTP caching controls.
+
+```ts
+withHttpTransferCacheOptions({
+  includeNonCacheableRequests: true,
+});
+```
+
+Enable only when you need to bypass cache-control restrictions for transfer caching.
+
 ### リクエストごとのオーバーライド {#perrequest-overrides}
 
 `transferCache` リクエストオプションを使用して、特定のリクエストのキャッシュ動作をオーバーライドできます。
@@ -558,6 +604,8 @@ bootstrapApplication(App, {
 httpClient.get('/api/sensitive-data', {transferCache: false});
 ```
 
+`HttpTransferCache` does not cache requests or responses that explicitly opt out of caching. Angular skips transfer cache entries when a request includes a `Cache-Control` header with `no-store`, `no-cache`, or `private`, or when the request uses the Fetch API `cache` option set to `no-store` or `no-cache`. Responses with `Cache-Control: no-store`, `Cache-Control: no-cache`, or `Cache-Control: private` are also not stored in the transfer cache. Responses that include a `Set-Cookie` header are likewise not stored, as they typically carry user-specific state.
+
 NOTE: アプリケーションがサーバーとクライアントで異なるHTTPオリジンを使用してAPIコールを行う場合、`HTTP_TRANSFER_CACHE_ORIGIN_MAP`トークンを使用してそれらのオリジン間のマッピングを確立できます。これにより、`HttpTransferCache`機能がそれらのリクエストを同じものとして認識し、クライアントでのハイドレーション中にサーバーでキャッシュされたデータを再利用できます。
 
 ## サーバーの設定 {#configuring-a-server}
diff --git a/adev-ja/src/content/guide/templates/binding.en.md b/adev-ja/src/content/guide/templates/binding.en.md
index 3fe72f50a2..08d576cd3e 100644
--- a/adev-ja/src/content/guide/templates/binding.en.md
+++ b/adev-ja/src/content/guide/templates/binding.en.md
@@ -1,4 +1,4 @@
-# Binding dynamic text, properties and attributes
+# Binding dynamic text, properties and attributes
 
 In Angular, a **binding** creates a dynamic connection between a component's template and its data. This connection ensures that changes to the component's data automatically update the rendered template.
 
diff --git a/adev-ja/src/content/guide/templates/control-flow.en.md b/adev-ja/src/content/guide/templates/control-flow.en.md
index cb88c26490..32af8cbe42 100644
--- a/adev-ja/src/content/guide/templates/control-flow.en.md
+++ b/adev-ja/src/content/guide/templates/control-flow.en.md
@@ -128,7 +128,7 @@ The value of the conditional expression is compared to the case expression using
 
 **`@switch` does not have a fallthrough**, so you do not need an equivalent to a `break` or `return` statement in the block.
 
-You can specify multiple conditions for a single block by have consecutive `@case` statements.
+You can specify multiple conditions for a single block by having consecutive `@case` statements.
 
 You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
 
@@ -140,6 +140,8 @@ If no `@case` matches the expression and there is no `@default` block, nothing i
 
 By using `@default never;`, you explicitly declare that no remaining cases should exist. If the union type is later extended and a new case is not covered by an @case, Angular’s template type checker will report an error, helping you catch missing branches early.
 
+NOTE: Exhaustiveness checking relies on TypeScript's type narrowing, which only works on variables. It will not work if the switch condition is a function call or a signal (for example, `@switch (state())`). To work around this, assign the signal to a `@let` variable, e.g.: `@let mySignal = this.mySignal()`.
+
 ```angular-html
 @Component({
   template: `
@@ -163,11 +165,14 @@ export class AppComponent {
 
 When the switched expression is nested within a union, you must explicitly specify the expression to check for exhaustiveness.
 
+<!-- prettier-ignore -->
 ```angular-ts
 @Component({
   template: `
     @switch (state.mode) {
-      @case ('show') { {{ state.menu }}; }
+      @case ('show') {
+        {{ state.menu }};
+      }
       @case ('hide') {}
       @default never(state);
     }
diff --git a/adev-ja/src/content/guide/templates/control-flow.md b/adev-ja/src/content/guide/templates/control-flow.md
index c96c3eb117..5b9059f288 100644
--- a/adev-ja/src/content/guide/templates/control-flow.md
+++ b/adev-ja/src/content/guide/templates/control-flow.md
@@ -140,6 +140,8 @@ NOTE: `*ngFor`とは異なり、`@for`ブロックはビューの再利用を優
 
 `@default never;` を使用することで、残りのケースが存在しないことを明示的に宣言します。ユニオン型が後で拡張され、新しいケースが `@case` でカバーされていない場合、Angularのテンプレート型チェッカーはエラーを報告し、見落としたブランチを早期に検出できます。
 
+NOTE: 網羅性チェックはTypeScriptの型の絞り込みに依存しており、これは変数に対してのみ機能します。switchの条件が関数呼び出しやシグナルの場合（たとえば `@switch (state())`）は機能しません。これを回避するには、シグナルを`@let`変数に代入します。例: `@let mySignal = this.mySignal()`。
+
 ```angular-html
 @Component({
   template: `
@@ -163,11 +165,14 @@ export class AppComponent {
 
 switchの対象式がユニオン内にネストされている場合は、網羅性チェックの対象とする式を明示的に指定する必要があります。
 
+<!-- prettier-ignore -->
 ```angular-ts
 @Component({
   template: `
     @switch (state.mode) {
-      @case ('show') { {{ state.menu }}; }
+      @case ('show') {
+        {{ state.menu }};
+      }
       @case ('hide') {}
       @default never(state);
     }
diff --git a/adev-ja/src/content/guide/templates/defer.en.md b/adev-ja/src/content/guide/templates/defer.en.md
index 3e37dcb0cf..ad714f3ee0 100644
--- a/adev-ja/src/content/guide/templates/defer.en.md
+++ b/adev-ja/src/content/guide/templates/defer.en.md
@@ -237,7 +237,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched for interactions. This variable is passed in as a parameter on the viewport trigger.
+Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched for interactions. This variable is passed in as a parameter on the interaction trigger.
 
 ```angular-html
 <div #greeting>Hello!</div>
@@ -260,7 +260,7 @@ By default, the placeholder acts as the interaction element. Placeholders used t
 }
 ```
 
-Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is watched to enter the viewport. This variable is passed in as a parameter on the viewport trigger.
+Alternatively, you can specify a [template reference variable](/guide/templates/variables) in the same template as the `@defer` block as the element that is hovered over. This variable is passed in as a parameter on the hover trigger.
 
 ```angular-html
 <div #greeting>Hello!</div>
diff --git a/adev-ja/src/content/guide/templates/defer.md b/adev-ja/src/content/guide/templates/defer.md
index 97eb622c36..db03fceaad 100644
--- a/adev-ja/src/content/guide/templates/defer.md
+++ b/adev-ja/src/content/guide/templates/defer.md
@@ -237,7 +237,7 @@ bootstrapApplication(App, {
 }
 ```
 
-または、`@defer`ブロックと同じテンプレート内に、対話が監視される要素として[テンプレート参照変数](/guide/templates/variables)を指定できます。この変数は、viewportトリガーのパラメータとして渡されます。
+または、`@defer`ブロックと同じテンプレート内に、対話が監視される要素として[テンプレート参照変数](/guide/templates/variables)を指定できます。この変数は、interactionトリガーのパラメータとして渡されます。
 
 ```angular-html
 <div #greeting>こんにちは！</div>
@@ -260,7 +260,7 @@ bootstrapApplication(App, {
 }
 ```
 
-または、`@defer`ブロックと同じテンプレート内に、ビューポートに入っているかどうかが監視される要素として[テンプレート参照変数](/guide/templates/variables)を指定できます。この変数は、ビューポートトリガーのパラメータとして渡されます。
+または、`@defer`ブロックと同じテンプレート内に、ホバーされる要素として[テンプレート参照変数](/guide/templates/variables)を指定できます。この変数は、hoverトリガーのパラメータとして渡されます。
 
 ```angular-html
 <div #greeting>こんにちは！</div>
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.en.md b/adev-ja/src/content/guide/templates/expression-syntax.en.md
index 298f5e40fa..b7e9663eaf 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.en.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.en.md
@@ -91,7 +91,20 @@ Angular expressions additionally also support the following non-standard operato
 | Optional chaining\*             | `someObj.someProp?.nestedProp` |
 | Non-null assertion (TypeScript) | `someObj!.someProp`            |
 
-NOTE: Optional chaining behaves differently from the standard JavaScript version in that if the left side of Angular’s optional chaining operator is `null` or `undefined`, it returns `null` instead of `undefined`.
+### Safe navigation migration
+
+Prior to Angular 22, the optional chaining operator (`?.`) returned `null` when the left-hand side is `null` or `undefined`, whereas standard JavaScript's `?.` returns `undefined`.
+Since Angular 22, the optional chaining operator behavior in angular expressions is alligned with the standard Javascript's behavior.
+
+During the migration to v22, the `ng update` schematics added a `$safeNavigationMigration` magic function to existing expressions to preserve the previous `null`-returning behavior.
+
+```html
+{{ $safeNavigationMigration(foo?.bar) }}
+```
+
+`$safeNavigationMigration` is a **temporary migration aid only**. It instructs the compiler to compile the wrapped safe-navigation expression using the legacy null-returning semantics rather than the standard JavaScript `?.` semantics. It is not a real function and cannot be called from TypeScript.
+
+NOTE: Prefer migrating expressions to no longer rely on `null` vs `undefined` distinctions so that `$safeNavigationMigration` can be removed. This function may be removed in a future version of Angular.
 
 ### Unsupported operators
 
@@ -120,9 +133,9 @@ Generally speaking, declarations are not supported in Angular expressions. This
 | Arrow Functions | `() => { }`                                 |
 | Classes         | `class Rectangle { }`                       |
 
-# Event listener statements
+## Event listener statements
 
 Event handlers are **statements** rather than expressions. While they support all of the same syntax as Angular expressions, there are two key differences:
 
-1. Statements **do support** assignment operators (but not destructing assignments)
+1. Statements **do support** assignment operators (but not destructuring assignments)
 1. Statements **do not support** pipes
diff --git a/adev-ja/src/content/guide/templates/expression-syntax.md b/adev-ja/src/content/guide/templates/expression-syntax.md
index 1ba1db71ce..f1a983055b 100644
--- a/adev-ja/src/content/guide/templates/expression-syntax.md
+++ b/adev-ja/src/content/guide/templates/expression-syntax.md
@@ -91,7 +91,20 @@ Angular式は、さらに次の非標準の演算子もサポートしていま
 | オプショナルチェーン\*             | `someObj.someProp?.nestedProp` |
 | 非nullアサーション（TypeScript） | `someObj!.someProp`            |
 
-NOTE: オプショナルチェーンは、標準JavaScriptバージョンとは異なる動作をします。Angularのオプショナルチェーン演算子の左辺が`null`または`undefined`の場合、`undefined`ではなく`null`を返します。
+### セーフナビゲーションの移行 {#safe-navigation-migration}
+
+Angular 22より前は、オプショナルチェーン演算子（`?.`）は、左辺が`null`または`undefined`の場合に`null`を返していましたが、標準JavaScriptの`?.`は`undefined`を返します。
+Angular 22以降、Angular式におけるオプショナルチェーン演算子の動作は、標準JavaScriptの動作に合わせられました。
+
+v22への移行中、`ng update`のスキマティクスは、以前の`null`を返す動作を保持するために、既存の式に`$safeNavigationMigration`というマジック関数を追加しました。
+
+```html
+{{ $safeNavigationMigration(foo?.bar) }}
+```
+
+`$safeNavigationMigration`は**一時的な移行支援のためだけ**のものです。これは、ラップされたセーフナビゲーション式を、標準JavaScriptの`?.`のセマンティクスではなく、レガシーな`null`を返すセマンティクスでコンパイルするようコンパイラに指示します。これは実際の関数ではなく、TypeScriptから呼び出すことはできません。
+
+NOTE: `$safeNavigationMigration`を削除できるように、`null`と`undefined`の区別に依存しない式へ移行することを推奨します。この関数は将来のAngularのバージョンで削除される可能性があります。
 
 ### サポートされていない演算子
 
@@ -120,7 +133,7 @@ Angular式は、コンポーネントクラスのコンテキストと、関連
 | アロー関数       | `() => { }`                                 |
 | クラス          | `class Rectangle { }`                       |
 
-# イベントリスナー文
+## イベントリスナー文
 
 イベントハンドラーは、**式**ではなく**文**です。Angular式と同じ構文をすべてサポートしていますが、2つの重要な違いがあります。
 
diff --git a/adev-ja/src/content/guide/templates/ng-container.en.md b/adev-ja/src/content/guide/templates/ng-container.en.md
index 5697e7854d..fefbea4216 100644
--- a/adev-ja/src/content/guide/templates/ng-container.en.md
+++ b/adev-ja/src/content/guide/templates/ng-container.en.md
@@ -1,4 +1,4 @@
-# Grouping elements with ng-container
+# Grouping elements with ng-container
 
 `<ng-container>` is a special element in Angular that groups multiple elements together or marks a location in a template without rendering a real element in the DOM.
 
diff --git a/adev-ja/src/content/guide/templates/ng-template.md b/adev-ja/src/content/guide/templates/ng-template.md
index b188d6afa4..d89451fbdc 100644
--- a/adev-ja/src/content/guide/templates/ng-template.md
+++ b/adev-ja/src/content/guide/templates/ng-template.md
@@ -2,7 +2,7 @@
 
 [ネイティブの `<template>` 要素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) に触発されて、`<ng-template>` 要素を使用すると、**テンプレートフラグメント**、つまり動的またはプログラムによってレンダリングできるコンテンツのセクションを宣言できます。
 
-## テンプレートフラグメントの作成
+## テンプレートフラグメントの作成 {#creating-a-template-fragment}
 
 `<ng-template>` 要素を使用して、コンポーネントテンプレート内のどこにでもテンプレートフラグメントを作成できます。
 
@@ -16,7 +16,7 @@
 
 上記のコードをレンダリングすると、`<ng-template>` 要素の内容はページにレンダリングされません。代わりに、テンプレートフラグメントへの参照を取得して、コードを記述して動的にレンダリングできます。
 
-### フラグメントのコンテキストの結合
+### フラグメントのコンテキストの結合 {#binding-context-for-fragments}
 
 テンプレートフラグメントには、動的な式を含む結合を含めることができます。
 
@@ -32,7 +32,7 @@ export class ItemCounter {
 
 テンプレートフラグメント内の式またはステートメントは、フラグメントがレンダリングされる場所とは関係なく、フラグメントが宣言されているコンポーネントに対して評価されます。
 
-## テンプレートフラグメントへの参照の取得
+## テンプレートフラグメントへの参照の取得 {#getting-a-reference-to-a-template-fragment}
 
 テンプレートフラグメントへの参照は、次のいずれかの方法で取得できます。
 
@@ -42,7 +42,7 @@ export class ItemCounter {
 
 これらのすべての場合において、フラグメントは [TemplateRef](/api/core/TemplateRef) オブジェクトによって表されます。
 
-### テンプレート参照変数を使用したテンプレートフラグメントへの参照
+### テンプレート参照変数を使用したテンプレートフラグメントへの参照 {#referencing-a-template-fragment-with-a-template-reference-variable}
 
 テンプレート参照変数を `<ng-template>` 要素に追加することで、同じテンプレートファイル内の他の部分でそのテンプレートフラグメントを参照できます。
 
@@ -56,7 +56,7 @@ export class ItemCounter {
 
 その後、`myFragment` 変数を使用して、テンプレート内の他の場所でこのフラグメントを参照できます。
 
-### クエリを使用したテンプレートフラグメントへの参照
+### クエリを使用したテンプレートフラグメントへの参照 {#referencing-a-template-fragment-with-queries}
 
 [コンポーネントまたはディレクティブクエリAPI](/guide/components/queries) を使用して、テンプレートフラグメントへの参照を取得できます。
 
@@ -105,7 +105,7 @@ export class ComponentWithFragment {
 
 繰り返しますが、他のクラスメンバーと同様に、コンポーネントコードまたはコンポーネントのテンプレート内でこれらのフラグメントを参照できます。
 
-### テンプレートフラグメントの注入
+### テンプレートフラグメントの注入 {#injecting-a-template-fragment}
 
 ディレクティブは、そのディレクティブが `<ng-template>` 要素に直接適用されている場合、`TemplateRef` を注入できます。
 
@@ -126,11 +126,11 @@ export class MyDirective {
 
 その後、他のクラスメンバーと同様に、ディレクティブコード内でこのフラグメントを参照できます。
 
-## テンプレートフラグメントのレンダリング
+## テンプレートフラグメントのレンダリング {#rendering-a-template-fragment}
 
 `TemplateRef` オブジェクトへの参照を取得したら、`NgTemplateOutlet` ディレクティブを使用してテンプレート内でフラグメントをレンダリングするか、`ViewContainerRef` を使用してTypeScriptコード内でフラグメントをレンダリングできます。
 
-### `NgTemplateOutlet` の使用
+### `NgTemplateOutlet` の使用 {#using-ngtemplateoutlet}
 
 `@angular/common` の `NgTemplateOutlet` ディレクティブは、`TemplateRef` を受け取り、アウトレットに要素を持つ要素の**兄弟**としてフラグメントをレンダリングします。通常、`NgTemplateOutlet` は [`<ng-container>` 要素](/guide/templates/ng-container) で使用する必要があります。
 
@@ -159,7 +159,7 @@ import {NgTemplateOutlet} from '@angular/common';
 <p>これはフラグメントです</p>
 ```
 
-### `ViewContainerRef` の使用
+### `ViewContainerRef` の使用 {#using-viewcontainerref}
 
 **ビューコンテナ**は、Angularのコンポーネントツリー内の、コンテンツを含めることができるノードです。コンポーネントまたはディレクティブはすべて、`ViewContainerRef` を注入して、そのコンポーネントまたはディレクティブのDOM内の位置に対応するビューコンテナへの参照を取得できます。
 
@@ -210,7 +210,7 @@ export class MyOutlet {
 </component-with-fragment>
 ```
 
-## テンプレートフラグメントのレンダリング時のパラメータの受け渡し
+## テンプレートフラグメントのレンダリング時のパラメータの受け渡し {#passing-parameters-when-rendering-a-template-fragment}
 
 `<ng-template>` を使用してテンプレートフラグメントを宣言する際、さらにフラグメントで受け入れられるパラメータを宣言できます。フラグメントをレンダリングする際には、これらのパラメータに対応する `context` オブジェクトを最適に渡すことができます。このコンテキストオブジェクトのデータは、結合式やステートメント内で使用できます。また、フラグメントが宣言されているコンポーネントからのデータも参照できます。
 
@@ -242,7 +242,7 @@ export class MyOutlet {
 this.viewContainer.createEmbeddedView(this.myFragment, {topping: '玉ねぎ'});
 ```
 
-## テンプレートフラグメントへのインジェクターの提供
+## テンプレートフラグメントへのインジェクターの提供 {#providing-injectors-to-template-fragments}
 
 テンプレートフラグメントをレンダリングする際、そのインジェクターコンテキストは、レンダリング場所からではなく、**テンプレート宣言の場所**から取得されます。カスタムインジェクターを提供することで、この動作をオーバーライドできます。
 
@@ -280,7 +280,7 @@ export class Root {
 }
 ```
 
-#### アウトレットのインジェクターの継承
+#### アウトレットのインジェクターの継承 {#inheriting-the-outlets-injector}
 
 `ngTemplateOutletInjector` を文字列 `'outlet'` に設定することで、埋め込まれたビューがテンプレートが宣言された場所からではなく、DOM内のアウトレットの場所からインジェクターを継承するようにできます。
 
@@ -312,7 +312,7 @@ this.viewContainer.createEmbeddedView(this.myFragment, context, {
 });
 ```
 
-## 構造ディレクティブ
+## 構造ディレクティブ {#structural-directives}
 
 **構造ディレクティブ**とは、次のいずれかの条件を満たすディレクティブです。
 
@@ -341,7 +341,7 @@ Angularは、構造ディレクティブ向けの特別な便利な構文をサ
 
 詳細については、[構造ディレクティブ](/guide/directives/structural-directives) を参照してください。
 
-## さらなるリソース
+## さらなるリソース {#additional-resources}
 
 `ng-template` が他のライブラリで使用される方法の例については、以下を確認してください。
 
diff --git a/adev-ja/src/content/guide/templates/pipes.en.md b/adev-ja/src/content/guide/templates/pipes.en.md
index 396af6103b..739b5c3971 100644
--- a/adev-ja/src/content/guide/templates/pipes.en.md
+++ b/adev-ja/src/content/guide/templates/pipes.en.md
@@ -289,3 +289,95 @@ export class JoinNamesImpurePipe implements PipeTransform {
 ```
 
 Angular developers often adopt the convention of including `Impure` in the pipe `name` and class name to indicate the potential performance pitfall to other developers.
+
+## Using pipe logic outside templates
+
+Pipes are template operators designed to transform data declaratively in templates. When you need the same transformation logic in a service, a utility class, or any other non-template context, **avoid injecting the pipe class**. Pipes are not designed as injectable services.
+
+### Extract the logic from custom pipes
+
+When you create a custom pipe, extract the transformation into a standalone function. Have the pipe's `transform()` method delegate to that function, and import the function directly wherever else you need it.
+
+```ts {header: "kebab-case.ts"}
+export function toKebabCase(value: string): string {
+  return value.toLowerCase().replace(/ /g, '-');
+}
+```
+
+```ts {header: "kebab-case.pipe.ts" , prefer}
+import {Pipe, PipeTransform} from '@angular/core';
+import {toKebabCase} from './kebab-case';
+
+@Pipe({name: 'kebabCase'})
+export class KebabCasePipe implements PipeTransform {
+  transform(value: string): string {
+    return toKebabCase(value);
+  }
+}
+```
+
+```ts {header: "formatter.service.ts" , prefer}
+import {Service} from '@angular/core';
+import {toKebabCase} from './kebab-case';
+
+@Service()
+export class FormatterService {
+  formatSlug(title: string): string {
+    return toKebabCase(title);
+  }
+}
+```
+
+```ts {header: "formatter.service.ts" , avoid}
+import {Service} from '@angular/core';
+import {KebabCasePipe} from './kebab-case.pipe';
+
+@Service()
+export class FormatterService {
+  // Avoid injecting the pipe class into services or other classes.
+  private kebabCasePipe = inject(KebabCasePipe);
+
+  formatSlug(title: string): string {
+    return this.kebabCasePipe.transform(title);
+  }
+}
+```
+
+### Use formatting functions for built-in pipes
+
+Angular's built-in locale-aware pipes each have a corresponding standalone formatting function exported from `@angular/common`. Use these functions instead of injecting the pipe class.
+
+| Pipe           | Standalone function |
+| -------------- | ------------------- |
+| `DatePipe`     | `formatDate`        |
+| `CurrencyPipe` | `formatCurrency`    |
+| `DecimalPipe`  | `formatNumber`      |
+| `PercentPipe`  | `formatPercent`     |
+
+```ts {prefer}
+import {Service, LOCALE_ID, inject} from '@angular/core';
+import {formatNumber} from '@angular/common';
+
+@Service()
+export class PriceService {
+  private locale = inject(LOCALE_ID);
+
+  format(value: number) {
+    return formatNumber(value, this.locale, '1.2-2');
+  }
+}
+```
+
+```ts {avoid}
+import {Service} from '@angular/core';
+import {DecimalPipe} from '@angular/common';
+
+@Service()
+export class PriceService {
+  private decimalPipe = inject(DecimalPipe);
+
+  format(value: number) {
+    return this.decimalPipe.transform(value, '1.2-2');
+  }
+}
+```
diff --git a/adev-ja/src/content/guide/templates/pipes.md b/adev-ja/src/content/guide/templates/pipes.md
index 9c94cd98db..a5ae00405c 100644
--- a/adev-ja/src/content/guide/templates/pipes.md
+++ b/adev-ja/src/content/guide/templates/pipes.md
@@ -1,6 +1,6 @@
 # パイプ
 
-## 概要
+## 概要 {#overview}
 
 パイプは、Angularテンプレート式で、テンプレート内のデータを宣言的に変換することを可能にする特別な演算子です。パイプを使用すると、変換関数を一度宣言し、その変換を複数のテンプレートで使用できます。Angularのパイプは、[Unixパイプ](<https://en.wikipedia.org/wiki/Pipeline_(Unix)>)に着想を得て、縦棒文字(`|`)を使用します。
 
@@ -44,7 +44,7 @@ Angularがコンポーネントをレンダリングすると、ユーザーの
 
 Angularによる値のローカリゼーションの詳細については、[i18nに関する詳細ガイド](/guide/i18n)を参照してください。
 
-### 組み込みパイプ
+### 組み込みパイプ {#built-in-pipes}
 
 Angularには、`@angular/common`パッケージに組み込みパイプのセットが含まれています。
 
@@ -64,7 +64,7 @@ Angularには、`@angular/common`パッケージに組み込みパイプのセ
 | [`TitleCasePipe`](api/common/TitleCasePipe)   | テキストをタイトルケースに変換します。                                                                |
 | [`UpperCasePipe`](api/common/UpperCasePipe)   | テキストをすべて大文字に変換します。                                                            |
 
-## パイプの使用
+## パイプの使用 {#using-pipes}
 
 Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)を使用します。パイプ演算子は二項演算子です。左側のオペランドは変換関数に渡される値であり、右側のオペランドはパイプの名前とその後の追加の引数（下記参照）です。
 
@@ -74,7 +74,7 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 
 この例では、`amount`の値は、パイプ名が`currency`である`CurrencyPipe`に渡されます。その後、ユーザーのロケールに対するデフォルトの通貨がレンダリングされます。
 
-### 同じ式で複数のパイプを組み合わせる
+### 同じ式で複数のパイプを組み合わせる {#combining-multiple-pipes-in-the-same-expression}
 
 複数のパイプ演算子を使用することで、値に複数の変換を適用できます。Angularはパイプを左から右に実行します。
 
@@ -84,7 +84,7 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 <p>The event will occur on {{ scheduledOn | date | uppercase }}.</p>
 ```
 
-### パイプにパラメータを渡す
+### パイプにパラメータを渡す {#passing-parameters-to-pipes}
 
 一部のパイプは、変換を構成するためのパラメータを受け入れます。パラメータを指定するには、パイプ名の後にコロン(`:`)とパラメータ値を付けます。
 
@@ -102,7 +102,7 @@ Angularのパイプ演算子は、テンプレート式内で縦棒文字(`|`)
 <p>The event will occur at {{ scheduledOn | date: 'hh:mm' : 'UTC' }}.</p>
 ```
 
-## パイプの動作
+## パイプの動作 {#how-pipes-work}
 
 概念的には、パイプは入力値を受け取り、変換された値を返す関数です。
 
@@ -130,7 +130,7 @@ export class AppComponent {
 1. `CurrencyPipe`は`imports`配列に追加されます
 1. `amount`データは`currency`パイプに渡されます
 
-### パイプ演算子の優先順位
+### パイプ演算子の優先順位 {#pipe-operator-precedence}
 
 パイプ演算子は、`+`, `-`, `*`, `/`, `%`, `&&`, `||`, `??`などの他の二項演算子よりも優先順位が低くなっています。
 
@@ -160,7 +160,7 @@ export class AppComponent {
 
 演算子の優先順位が不明確な場合は、常に式に括弧を使用してください。
 
-### パイプによる変更検知
+### パイプによる変更検知 {#change-detection-with-pipes}
 
 デフォルトでは、すべてのパイプは`pure`とみなされます。これは、プリミティブな入力値（`String`、`Number`、`Boolean`、`Symbol`など）またはオブジェクト参照（`Array`、`Object`、`Function`、`Date`など）が変更されたときにのみ実行されることを意味します。Pureなパイプは、渡された値が変更されていない場合にAngularが変換関数の呼び出しを回避できるため、パフォーマンス上の利点があります。
 
@@ -191,7 +191,7 @@ export class KebabCasePipe implements PipeTransform {
 }
 ```
 
-### `@Pipe`デコレーターの使用
+### `@Pipe`デコレーターの使用 {#using-the-pipe-decorator}
 
 カスタムパイプを作成する際は、`@angular/core`パッケージから`Pipe`をインポートし、TypeScriptクラスのデコレーターとして使用します。
 
@@ -206,14 +206,14 @@ export class MyCustomTransformationPipe {}
 
 `@Pipe` デコレーターは `name` を必要とします。この `name` は、テンプレート内でパイプをどのように使用するかを制御します。
 
-### カスタムパイプの名前付け規則
+### カスタムパイプの名前付け規則 {#naming-convention-for-custom-pipes}
 
 カスタムパイプの名前付け規則は、次の2つの規則で構成されます。
 
 - `name` - camelCaseが推奨されます。ハイフンは使用しないでください。
 - `クラス名` - `name`のPascalCaseバージョンに`Pipe`を追加したもの
 
-### `PipeTransform`インターフェースの実装
+### `PipeTransform`インターフェースの実装 {#implement-the-pipetransform-interface}
 
 `@Pipe`デコレーターに加えて、カスタムパイプは常に`@angular/core`の`PipeTransform`インターフェースを実装する必要があります。
 
@@ -228,7 +228,7 @@ export class MyCustomTransformationPipe implements PipeTransform {}
 
 このインターフェースを実装することで、パイプクラスが正しい構造を持つことが保証されます。
 
-### パイプの値を変換する
+### パイプの値を変換する {#transforming-the-value-of-a-pipe}
 
 すべての変換は、最初の引数が渡される値で、戻り値が変換された値である`transform`メソッドによって呼び出されます。
 
@@ -245,7 +245,7 @@ export class MyCustomTransformationPipe implements PipeTransform {
 }
 ```
 
-### カスタムパイプにパラメータを追加する
+### カスタムパイプにパラメータを追加する {#adding-parameters-to-a-custom-pipe}
 
 `transform`メソッドにadditional parametersを追加することで、変換にパラメータを追加できます。
 
@@ -289,3 +289,95 @@ export class JoinNamesImpurePipe implements PipeTransform {
 ```
 
 Angular開発者は、パイプの`name`とクラス名に`Impure`を含めるという慣習を採用して、他の開発者に潜在的なパフォーマンス上の問題を知らせます。
+
+## Using pipe logic outside templates
+
+Pipes are template operators designed to transform data declaratively in templates. When you need the same transformation logic in a service, a utility class, or any other non-template context, **avoid injecting the pipe class**. Pipes are not designed as injectable services.
+
+### Extract the logic from custom pipes
+
+When you create a custom pipe, extract the transformation into a standalone function. Have the pipe's `transform()` method delegate to that function, and import the function directly wherever else you need it.
+
+```ts {header: "kebab-case.ts"}
+export function toKebabCase(value: string): string {
+  return value.toLowerCase().replace(/ /g, '-');
+}
+```
+
+```ts {header: "kebab-case.pipe.ts" , prefer}
+import {Pipe, PipeTransform} from '@angular/core';
+import {toKebabCase} from './kebab-case';
+
+@Pipe({name: 'kebabCase'})
+export class KebabCasePipe implements PipeTransform {
+  transform(value: string): string {
+    return toKebabCase(value);
+  }
+}
+```
+
+```ts {header: "formatter.service.ts" , prefer}
+import {Service} from '@angular/core';
+import {toKebabCase} from './kebab-case';
+
+@Service()
+export class FormatterService {
+  formatSlug(title: string): string {
+    return toKebabCase(title);
+  }
+}
+```
+
+```ts {header: "formatter.service.ts" , avoid}
+import {Service} from '@angular/core';
+import {KebabCasePipe} from './kebab-case.pipe';
+
+@Service()
+export class FormatterService {
+  // Avoid injecting the pipe class into services or other classes.
+  private kebabCasePipe = inject(KebabCasePipe);
+
+  formatSlug(title: string): string {
+    return this.kebabCasePipe.transform(title);
+  }
+}
+```
+
+### Use formatting functions for built-in pipes
+
+Angular's built-in locale-aware pipes each have a corresponding standalone formatting function exported from `@angular/common`. Use these functions instead of injecting the pipe class.
+
+| Pipe           | Standalone function |
+| -------------- | ------------------- |
+| `DatePipe`     | `formatDate`        |
+| `CurrencyPipe` | `formatCurrency`    |
+| `DecimalPipe`  | `formatNumber`      |
+| `PercentPipe`  | `formatPercent`     |
+
+```ts {prefer}
+import {Service, LOCALE_ID, inject} from '@angular/core';
+import {formatNumber} from '@angular/common';
+
+@Service()
+export class PriceService {
+  private locale = inject(LOCALE_ID);
+
+  format(value: number) {
+    return formatNumber(value, this.locale, '1.2-2');
+  }
+}
+```
+
+```ts {avoid}
+import {Service} from '@angular/core';
+import {DecimalPipe} from '@angular/common';
+
+@Service()
+export class PriceService {
+  private decimalPipe = inject(DecimalPipe);
+
+  format(value: number) {
+    return this.decimalPipe.transform(value, '1.2-2');
+  }
+}
+```
diff --git a/adev-ja/src/content/guide/templates/two-way-binding.md b/adev-ja/src/content/guide/templates/two-way-binding.md
index 8ed33025e3..b8d2ea06c0 100644
--- a/adev-ja/src/content/guide/templates/two-way-binding.md
+++ b/adev-ja/src/content/guide/templates/two-way-binding.md
@@ -2,11 +2,11 @@
 
 **双方向バインディング**は、要素に値をバインドすると同時に、その要素が変更をバインディングを通じて伝播できるようにする、簡潔な方法です。
 
-## 構文
+## 構文 {#syntax}
 
 双方向バインディングの構文は、角括弧`[]`と丸括弧`()`を組み合わせた`[()]`です。これはプロパティバインディングの構文`[]`とイベントバインディングの構文`()`を組み合わせたものです。Angularコミュニティでは、この構文を非公式に「バナナインボックス」と呼んでいます。
 
-## フォームコントロールでの双方向バインディング
+## フォームコントロールでの双方向バインディング {#two-way-binding-with-form-controls}
 
 開発者は、ユーザーがコントロールを操作したときに、コンポーネントデータとフォームコントロールを同期させるため、双方向バインディングを頻繁に使用します。例えば、ユーザーがテキスト入力に入力すると、コンポーネントの状態が更新されます。
 
@@ -40,7 +40,7 @@ export class App {
 
 [`NgModel`](/api/forms/NgModel)の詳細については、公式ドキュメントを参照してください。
 
-## コンポーネント間の双方向バインディング
+## コンポーネント間の双方向バインディング {#two-way-binding-between-components}
 
 親コンポーネントと子コンポーネント間の双方向バインディングを活用するには、フォーム要素と比較して、より多くの設定が必要です。
 
@@ -85,7 +85,7 @@ export class Counter {
 }
 ```
 
-### コンポーネント間の双方向バインディングを有効にする
+### コンポーネント間の双方向バインディングを有効にする {#enabling-two-way-binding-between-components}
 
 上記の例をコアに分解すると、コンポーネントの双方向バインディングごとに、次のものが必要です。
 
diff --git a/adev-ja/src/content/guide/templates/variables.md b/adev-ja/src/content/guide/templates/variables.md
index fff925e72a..9c7563a496 100644
--- a/adev-ja/src/content/guide/templates/variables.md
+++ b/adev-ja/src/content/guide/templates/variables.md
@@ -4,11 +4,11 @@ Angularには、テンプレート内で2種類の変数宣言があります。
 
 HELPFUL: In this guide, “template” does not mean the entire HTML template file. It refers only to a specific template construct or expression within the file.
 
-## `@let` を使ったローカルテンプレート変数
+## `@let` を使ったローカルテンプレート変数 {#local-template-variables-with-let}
 
 Angularの `@let` 構文を使用すると、ローカル変数を定義し、テンプレート全体で再利用できます。これは、[JavaScriptの`let`構文](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)に似ています。
 
-### `@let` の使用方法
+### `@let` の使用方法 {#using-let}
 
 `@let` を使用して、テンプレート式の結果に基づいた値を持つ変数を宣言します。 Angularは、[バインディング](/guide/templates/binding)と同様に、指定された式を使用して変数の値を自動的に最新の状態に保ちます。
 
@@ -26,7 +26,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 
 各`@let`ブロックでは、ちょうど1つの変数を宣言できます。コンマを使用して同じブロックに複数の変数の宣言はできません。
 
-### `@let` の値を参照する
+### `@let` の値を参照する {#referencing-the-value-of-let}
 
 `@let` で変数を宣言したら、同じテンプレート内で再利用できます。
 
@@ -47,7 +47,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 }
 ```
 
-### 代入可能性
+### 代入可能性 {#assignability}
 
 `@let` とJavaScriptの `let` の主な違いは、`@let` は宣言後に再代入できないことです。ただし、Angularは指定された式を使用して変数の値を自動的に最新の状態に保ちます。
 
@@ -58,7 +58,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 <button (click)="value = value + 1">Increment the value</button>
 ```
 
-### 変数のスコープ
+### 変数のスコープ {#variable-scope}
 
 `@let` 宣言は、現在のビューとその子孫にスコープされます。 Angularは、コンポーネントの境界と、テンプレートに動的なコンテンツ（制御フローブロック、`@defer`ブロック、または構造ディレクティブなど）が含まれる可能性がある場所に新しいビューを作成します。
 
@@ -92,7 +92,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 {{ nested }}
 ```
 
-### 構文全体
+### 構文全体 {#full-syntax}
 
 `@let`構文は正式には次のように定義されています。
 
@@ -124,7 +124,7 @@ Angularの `@let` 構文を使用すると、ローカル変数を定義し、
 <input #taskInput placeholder="Enter task name" />
 ```
 
-### テンプレート参照変数に値を代入する
+### テンプレート参照変数に値を代入する {#assigning-values-to-template-reference-variables}
 
 Angularは、変数が宣言されている要素に基づいて、テンプレート変数に値を代入します。
 
@@ -151,7 +151,7 @@ Angularは、変数が宣言されている要素に基づいて、テンプレ
 <input #taskInput placeholder="Enter task name" />
 ```
 
-#### Angularディレクティブへの参照を代入する
+#### Angularディレクティブへの参照を代入する {#assigning-a-reference-to-an-angular-directive}
 
 Angularディレクティブには、テンプレートでディレクティブを参照できる名前を定義する `exportAs` プロパティがある場合があります。
 
@@ -174,7 +174,7 @@ export class DropZone {
 
 `exportAs` 名を指定していないディレクティブは参照できません。
 
-### クエリでのテンプレート参照変数の使用
+### クエリでのテンプレート参照変数の使用 {#using-template-reference-variables-with-queries}
 
 テンプレート参照変数は、同じテンプレートの別の部分から値を読み取るだけでなく、[コンポーネントとディレクティブのクエリ](/guide/components/queries)のために要素を「マーク」するためにも使用できます。
 
@@ -197,7 +197,7 @@ export class AppComponent {
 
 クエリの詳細については、[クエリによる子の参照](/guide/components/queries)を参照してください。
 
-### Template variable scope
+### Template variable scope {#template-variable-scope}
 
 Just like variables in JavaScript or TypeScript code, template variables are scoped to the template that declares them.
 
diff --git a/adev-ja/src/content/guide/templates/whitespace.en.md b/adev-ja/src/content/guide/templates/whitespace.en.md
index ac258facec..101524fe74 100644
--- a/adev-ja/src/content/guide/templates/whitespace.en.md
+++ b/adev-ja/src/content/guide/templates/whitespace.en.md
@@ -18,7 +18,7 @@ Most developers prefer to format their templates with newlines and indentation t
 
 This template contains whitespace between all of the elements. The following snippet shows the same HTML with each whitespace character replaced with the hash (`#`) character to highlight how much whitespace is present:
 
-<!-- prettier-ignore>
+<!-- prettier-ignore -->
 ```html
 <!-- Total Whitespace: 20 -->
 <section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
diff --git a/adev-ja/src/content/guide/templates/whitespace.md b/adev-ja/src/content/guide/templates/whitespace.md
index b0178e84ce..b9787e7a76 100644
--- a/adev-ja/src/content/guide/templates/whitespace.md
+++ b/adev-ja/src/content/guide/templates/whitespace.md
@@ -18,7 +18,7 @@
 
 このテンプレートには、すべての要素間に空白が含まれています。次のスニペットは、同じHTMLで、存在する空白をすべてハッシュ（`#`）文字に置き換えたもので、どのくらいの空白が存在するかを示しています。
 
-<!-- prettier-ignore>
+<!-- prettier-ignore -->
 ```html
 <!-- Total Whitespace: 20 -->
 <section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
diff --git a/adev-ja/src/content/guide/testing/attribute-directives.en.md b/adev-ja/src/content/guide/testing/attribute-directives.en.md
index 1613929010..439c7ce9c2 100644
--- a/adev-ja/src/content/guide/testing/attribute-directives.en.md
+++ b/adev-ja/src/content/guide/testing/attribute-directives.en.md
@@ -154,3 +154,35 @@ A few techniques are noteworthy:
   The test for the default color uses the injector of the second `<h2>` to get its `Highlight` instance and its `defaultColor`.
 
 - `DebugElement.properties` affords access to the artificial custom property that is set by the directive
+
+## Testing a directive in isolation
+
+A directive can't be constructed through TestBed; it must be rendered through a component's template to behave correctly.
+The `Highlight` directive can be tested this way, using a local test component's input to control the directive.
+
+```ts
+@Component({
+  imports: [Highlight],
+  template: `<p [highlight]="color()">{{ color() }}</p>`,
+})
+class Test {
+  readonly color = input('');
+}
+
+describe('Highlight', () => {
+  let fixture: ComponentFixture<Test>;
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(Test);
+    await fixture.whenStable();
+  });
+
+  it('should use the specified color once an input is provided', async () => {
+    fixture.componentRef.setInput('color', 'blue');
+    await fixture.whenStable();
+
+    const p = fixture.nativeElement.querySelector('p');
+    expect(p.style.backgroundColor).toBe('blue');
+  });
+});
+```
diff --git a/adev-ja/src/content/guide/testing/attribute-directives.md b/adev-ja/src/content/guide/testing/attribute-directives.md
index 5b2ac20ccd..783c9eed97 100644
--- a/adev-ja/src/content/guide/testing/attribute-directives.md
+++ b/adev-ja/src/content/guide/testing/attribute-directives.md
@@ -61,6 +61,7 @@ it('should have skyblue <h2>', () => {
   const bgColor = h2.style.backgroundColor;
   expect(bgColor).toBe('skyblue');
 });
+```
 
 しかし、単一のユースケースをテストしても、ディレクティブの機能のすべてを調べられるとは限りません。
 ディレクティブを使用するすべてのコンポーネントを見つけてテストすることは、面倒で壊れやすく、完全なカバレッジを実現する可能性もほとんどありません。
@@ -154,3 +155,34 @@ it('bare <h2> should not have a backgroundColor', () => {
 
 - `DebugElement.properties`は、ディレクティブによって設定された人工的なカスタムプロパティにアクセスできます。
 
+## Testing a directive in isolation
+
+A directive can't be constructed through TestBed; it must be rendered through a component's template to behave correctly.
+The `Highlight` directive can be tested this way, using a local test component's input to control the directive.
+
+```ts
+@Component({
+  imports: [Highlight],
+  template: `<p [highlight]="color()">{{ color() }}</p>`,
+})
+class Test {
+  readonly color = input('');
+}
+
+describe('Highlight', () => {
+  let fixture: ComponentFixture<Test>;
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(Test);
+    await fixture.whenStable();
+  });
+
+  it('should use the specified color once an input is provided', async () => {
+    fixture.componentRef.setInput('color', 'blue');
+    await fixture.whenStable();
+
+    const p = fixture.nativeElement.querySelector('p');
+    expect(p.style.backgroundColor).toBe('blue');
+  });
+});
+```
diff --git a/adev-ja/src/content/guide/testing/creating-component-harnesses.en.md b/adev-ja/src/content/guide/testing/creating-component-harnesses.en.md
index 6d0456e7bc..5cfb2455a0 100644
--- a/adev-ja/src/content/guide/testing/creating-component-harnesses.en.md
+++ b/adev-ja/src/content/guide/testing/creating-component-harnesses.en.md
@@ -30,7 +30,7 @@ The `hostSelector` property identifies elements in the DOM that match this harne
   template: `
     <button (click)="toggle()">{{ triggerText() }}</button>
     @if (isOpen()) {
-      <div class="my-popup-content"><ng-content></ng-content></div>
+      <div class="my-popup-content"><ng-content /></div>
     }
   `,
 })
diff --git a/adev-ja/src/content/guide/testing/creating-component-harnesses.md b/adev-ja/src/content/guide/testing/creating-component-harnesses.md
index 73b917b0ac..c79f4abfee 100644
--- a/adev-ja/src/content/guide/testing/creating-component-harnesses.md
+++ b/adev-ja/src/content/guide/testing/creating-component-harnesses.md
@@ -30,7 +30,7 @@ ng add @angular/cdk
   template: `
     <button (click)="toggle()">{{ triggerText() }}</button>
     @if (isOpen()) {
-      <div class="my-popup-content"><ng-content></ng-content></div>
+      <div class="my-popup-content"><ng-content /></div>
     }
   `,
 })
diff --git a/adev-ja/src/content/guide/testing/karma.en.md b/adev-ja/src/content/guide/testing/karma.en.md
index 95293d793c..272b58b39c 100644
--- a/adev-ja/src/content/guide/testing/karma.en.md
+++ b/adev-ja/src/content/guide/testing/karma.en.md
@@ -117,7 +117,7 @@ If you want to customize Karma, you can create a `karma.conf.js` by running the
 ng generate config karma
 ```
 
-HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
+HELPFUL: Read more about Karma configuration in the [Karma configuration guide](https://karma-runner.github.io/6.4/config/configuration-file.html).
 
 ### Setting the Test Runner in `angular.json`
 
diff --git a/adev-ja/src/content/guide/testing/karma.md b/adev-ja/src/content/guide/testing/karma.md
index 901b9fd072..434d6fc4ee 100644
--- a/adev-ja/src/content/guide/testing/karma.md
+++ b/adev-ja/src/content/guide/testing/karma.md
@@ -117,7 +117,7 @@ Karmaをカスタマイズしたい場合は、次のコマンドを実行して
 ng generate config karma
 ```
 
-HELPFUL: Karmaの設定については、[Karma設定ガイド](http://karma-runner.github.io/6.4/config/configuration-file.html)で詳しく説明されています。
+HELPFUL: Karmaの設定については、[Karma設定ガイド](https://karma-runner.github.io/6.4/config/configuration-file.html)で詳しく説明されています。
 
 ### `angular.json`でのテストランナーの設定 {#setting-the-test-runner-in-angularjson}
 
diff --git a/adev-ja/src/content/guide/testing/overview.en.md b/adev-ja/src/content/guide/testing/overview.en.md
index 7ed2e0866c..623532abf0 100644
--- a/adev-ja/src/content/guide/testing/overview.en.md
+++ b/adev-ja/src/content/guide/testing/overview.en.md
@@ -84,7 +84,7 @@ HELPFUL: When creating new TypeScript files for test setup or providers, like `s
 
 ### Advanced Vitest configuration
 
-For advanced use cases, you can provide a custom Vitest configuration file using the `configFile` option in `angular.json`.
+For advanced use cases, you can provide a custom Vitest configuration file using the `runnerConfig` option in `angular.json`.
 
 IMPORTANT: While using a custom configuration enables advanced options, the Angular team does not provide support for the contents of the configuration file or for any third-party plugins. The CLI will also override certain properties (`test.projects`, `test.include`) to ensure proper integration.
 
diff --git a/adev-ja/src/content/guide/testing/overview.md b/adev-ja/src/content/guide/testing/overview.md
index 33c1b4bf73..f7a1a2c0ef 100644
--- a/adev-ja/src/content/guide/testing/overview.md
+++ b/adev-ja/src/content/guide/testing/overview.md
@@ -84,7 +84,7 @@ HELPFUL: テスト設定やプロバイダー用に`src/test-providers.ts`のよ
 
 ### 高度なVitest設定 {#advanced-vitest-configuration}
 
-高度なユースケースでは、`angular.json`の`configFile`オプションを使用してカスタムVitest設定ファイルを提供できます。
+高度なユースケースでは、`angular.json`の`runnerConfig`オプションを使用してカスタムVitest設定ファイルを提供できます。
 
 IMPORTANT: カスタム設定を使用すると高度なオプションが有効になりますが、Angularチームは設定ファイルの内容やサードパーティプラグインについてサポートを提供していません。また、CLIは適切な統合を保証するために特定のプロパティ（`test.projects`、`test.include`）を上書きします。
 
diff --git a/adev-ja/src/content/guide/testing/services.md b/adev-ja/src/content/guide/testing/services.md
index 1da612b18f..99ea128299 100644
--- a/adev-ja/src/content/guide/testing/services.md
+++ b/adev-ja/src/content/guide/testing/services.md
@@ -151,6 +151,10 @@ describe('OrderTotal', () => {
     service = TestBed.inject(OrderTotal);
   });
 
+  afterEach(() => {
+    taxCalculatorStub.calculate.mockClear();
+  });
+
   it('adds tax to the subtotal', () => {
     expect(service.total(100)).toBe(105);
   });
@@ -158,7 +162,7 @@ describe('OrderTotal', () => {
   // Verify the interaction with a spy
   it('calls the tax calculator', () => {
     service.total(100);
-    expect(taxCalculatorStub.calculate).toHaveBeenCalledExactlyOnce();
+    expect(taxCalculatorStub.calculate).toHaveBeenCalledExactlyOnceWith(100);
   });
 });
 ```
diff --git a/adev-ja/src/content/guide/testing/utility-apis.en.md b/adev-ja/src/content/guide/testing/utility-apis.en.md
index 65aae0ebb8..2cc556f3df 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.en.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.en.md
@@ -51,21 +51,18 @@ Call `TestBed` methods _within_ a `beforeEach()` to ensure a fresh start before
 
 Here are the most important static methods, in order of likely utility.
 
-| Methods                  | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `configureTestingModule` | The testing shims establish the [initial test environment](guide/testing) and a default testing module. The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs. <br /> Call `configureTestingModule` to refine the testing module configuration for a particular set of tests by adding and removing imports, declarations \(of components, directives, and pipes\), and providers. |
-| `compileComponents`      | Compile the testing module asynchronously after you've finished configuring it. You **must** call this method if _any_ of the testing module components have asynchronously loaded resources (like @defer blocks). <br /> After calling `compileComponents`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                   |
-| `createComponent<T>`     | Create an instance of a component of type `T` based on the current `TestBed` configuration. After calling `createComponent`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                                                   |
-| `overrideComponent`      | Replace metadata for the given component class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                       |
-| `overrideDirective`      | Replace metadata for the given directive class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                       |
-| `overridePipe`           | Replace metadata for the given pipe class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                            |
-| `overrideModule`         | Replace metadata for the given `NgModule`. Recall that modules can import other modules. The `overrideModule` method can reach deeply into the current testing module to modify one of these inner modules.                                                                                                                                                                                                                                                |
-
-|
-`inject` | Retrieve a service from the current `TestBed` injector. The `inject` function is often adequate for this purpose. But `inject` throws an error if it can't provide the service. <br /> What if the service is optional? <br /> The `TestBed.inject()` method takes an optional second parameter, the object to return if Angular can't find the provider \(`null` in this example\): `expect(TestBed.inject(NotProvided, null)).toBeNull();` After calling `TestBed.inject`, the `TestBed` configuration is frozen for the duration of the current spec. |
-|
-`initTestEnvironment` | Initialize the testing environment for the entire test run. <br /> The testing shims call it for you so there is rarely a reason for you to call it yourself. <br /> Call this method _exactly once_. To change this default in the middle of a test run, call `resetTestEnvironment` first. <br /> Specify the Angular compiler factory, a `PlatformRef`, and a default Angular testing module. Alternatives for non-browser platforms are available in the general form `@angular/platform-<platform_name>/testing/<platform_name>`. |
-| `resetTestEnvironment` | Reset the initial test environment, including the default testing module. |
+| Methods                  | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `configureTestingModule` | The testing shims establish the [initial test environment](guide/testing) and a default testing module. The default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs. <br /> Call `configureTestingModule` to refine the testing module configuration for a particular set of tests by adding and removing imports, declarations \(of components, directives, and pipes\), and providers.                                                                                               |
+| `compileComponents`      | Compile the testing module asynchronously after you've finished configuring it. You **must** call this method if _any_ of the testing module components have asynchronously loaded resources (like @defer blocks). <br /> After calling `compileComponents`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                 |
+| `createComponent<T>`     | Create an instance of a component of type `T` based on the current `TestBed` configuration. After calling `createComponent`, the `TestBed` configuration is frozen for the duration of the current spec.                                                                                                                                                                                                                                                                                                                                                 |
+| `overrideComponent`      | Replace metadata for the given component class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `overrideDirective`      | Replace metadata for the given directive class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `overridePipe`           | Replace metadata for the given pipe class, which could be nested deeply within an inner module.                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `overrideModule`         | Replace metadata for the given `NgModule`. Recall that modules can import other modules. The `overrideModule` method can reach deeply into the current testing module to modify one of these inner modules.                                                                                                                                                                                                                                                                                                                                              |
+| `inject`                 | Retrieve a service from the current `TestBed` injector. The `inject` function is often adequate for this purpose. But `inject` throws an error if it can't provide the service. <br /> What if the service is optional? <br /> The `TestBed.inject()` method takes an optional second parameter, the object to return if Angular can't find the provider \(`null` in this example\): `expect(TestBed.inject(NotProvided, null)).toBeNull();` After calling `TestBed.inject`, the `TestBed` configuration is frozen for the duration of the current spec. |
+| `initTestEnvironment`    | Initialize the testing environment for the entire test run. <br /> The testing shims call it for you so there is rarely a reason for you to call it yourself. <br /> Call this method _exactly once_. To change this default in the middle of a test run, call `resetTestEnvironment` first. <br /> Specify the Angular compiler factory, a `PlatformRef`, and a default Angular testing module. Alternatives for non-browser platforms are available in the general form `@angular/platform-<platform_name>/testing/<platform_name>`.                   |
+| `resetTestEnvironment`   | Reset the initial test environment, including the default testing module.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 
 A few of the `TestBed` instance methods are not covered by static `TestBed` _class_ methods.
 These are rarely needed.
@@ -90,7 +87,7 @@ Here are the most important properties for testers, in order of likely utility.
 ### `ComponentFixture` methods
 
 The _fixture_ methods cause Angular to perform certain tasks on the component tree.
-Call these method to trigger Angular behavior in response to simulated user action.
+Call these methods to trigger Angular behavior in response to simulated user action.
 
 Here are the most useful methods for testers.
 
diff --git a/adev-ja/src/content/guide/testing/utility-apis.md b/adev-ja/src/content/guide/testing/utility-apis.md
index 1c41f460d6..6b9c8905c4 100644
--- a/adev-ja/src/content/guide/testing/utility-apis.md
+++ b/adev-ja/src/content/guide/testing/utility-apis.md
@@ -60,12 +60,9 @@ type MetadataOverride<T> = {
 | `overrideDirective`      | 指定されたディレクティブクラスのメタデータを置き換えます。これは、内部モジュールの中に深くネストされている可能性があります。                                                                                                                                                                                                                                                   |
 | `overridePipe`           | 指定されたパイプクラスのメタデータを置き換えます。これは、内部モジュールの中に深くネストされている可能性があります。                                                                                                                                                                                                                                                          |
 | `overrideModule`         | 指定された `NgModule` のメタデータを置き換えます。モジュールは他のモジュールをインポートできることに注意してください。`overrideModule` メソッドは、現在のテストモジュールを深く掘り下げて、これらの内部モジュールのいずれかを変更できます。                                                                                                                            |
-
-|
-`inject` | 現在の `TestBed` インジェクターからサービスを取得します。`inject` 関数は、この目的には多くの場合で十分です。ただし、`inject` は、サービスを提供できない場合にエラーをスローします。 <br /> サービスがオプションの場合どうすればよいですか？ <br /> `TestBed.inject()` メソッドは、オプションの第2パラメーターとして、Angularがプロバイダーを見つけられない場合に返すオブジェクト（この例では `null`）を取ります。 `expect(TestBed.inject(NotProvided, null)).toBeNull();` `TestBed.inject` を呼び出すと、現在の仕様の期間中、`TestBed` の構成は固定されます。 |
-|
-`initTestEnvironment` | テストの実行全体でテスト環境を初期化します。 <br /> テストシムはこれを実行するため、自分で呼び出す必要はほとんどありません。 <br /> このメソッドは _ちょうど 1 回_ 呼び出します。テストの実行中にこのデフォルトを変更するには、最初に `resetTestEnvironment` を呼び出します。 <br /> Angularコンパイラーファクトリ、`PlatformRef`、およびデフォルトのAngularテストモジュールを指定します。ブラウザ以外のプラットフォームの代替手段は、`@angular/platform-<platform_name>/testing/<platform_name>` という一般的な形式で利用できます。 |
-| `resetTestEnvironment` | デフォルトのテストモジュールを含む、初期テスト環境をリセットします。 |
+| `inject`                 | 現在の `TestBed` インジェクターからサービスを取得します。`inject` 関数は、この目的には多くの場合で十分です。ただし、`inject` は、サービスを提供できない場合にエラーをスローします。 <br /> サービスがオプションの場合どうすればよいですか？ <br /> `TestBed.inject()` メソッドは、オプションの第2パラメーターとして、Angularがプロバイダーを見つけられない場合に返すオブジェクト（この例では `null`）を取ります。 `expect(TestBed.inject(NotProvided, null)).toBeNull();` `TestBed.inject` を呼び出すと、現在の仕様の期間中、`TestBed` の構成は固定されます。                                                       |
+| `initTestEnvironment`    | テストの実行全体でテスト環境を初期化します。 <br /> テストシムはこれを実行するため、自分で呼び出す必要はほとんどありません。 <br /> このメソッドは _ちょうど 1 回_ 呼び出します。テストの実行中にこのデフォルトを変更するには、最初に `resetTestEnvironment` を呼び出します。 <br /> Angularコンパイラーファクトリ、`PlatformRef`、およびデフォルトのAngularテストモジュールを指定します。ブラウザ以外のプラットフォームの代替手段は、`@angular/platform-<platform_name>/testing/<platform_name>` という一般的な形式で利用できます。                                     |
+| `resetTestEnvironment`   | デフォルトのテストモジュールを含む、初期テスト環境をリセットします。                                                                                                                                                                                                                                                                                              |
 
 `TestBed` インスタンスのメソッドのいくつかは、静的な `TestBed` _クラス_ メソッドではカバーされていません。
 これらは、めったに必要ありません。
diff --git a/adev-ja/src/content/guide/zoneless.en.md b/adev-ja/src/content/guide/zoneless.en.md
index fcca8e208a..d78773e81b 100644
--- a/adev-ja/src/content/guide/zoneless.en.md
+++ b/adev-ja/src/content/guide/zoneless.en.md
@@ -5,9 +5,9 @@
 The main advantages to removing ZoneJS as a dependency are:
 
 - **Improved performance**: ZoneJS uses DOM events and async tasks as indicators of when application state _might_ have updated and subsequently triggers application synchronization to run change detection on the application's views. ZoneJS does not have any insight into whether application state actually changed and so this synchronization is triggered more frequently than necessary.
-- **Improved Core Web Vitals**: ZoneJS brings a fair amount of overhead, both in payload size and in startup time cost.
+- **Improved Core Web Vitals**: ZoneJS brings a fair amount of overhead, both in payload size and startup time.
 - **Improved debugging experience**: ZoneJS makes debugging code more difficult. Stack traces are harder to understand with ZoneJS. It's also difficult to understand when code breaks as a result of being outside the Angular Zone.
-- **Better ecosystem compatibility**: ZoneJS works by patching browser APIs but does not automatically have patches for every new browser API. Some APIs cannot be patched effectively, such as `async`/`await`, and have to be downleveled to work with ZoneJS. Sometimes libraries in the ecosystem are also incompatible with the way ZoneJS patches the native APIs. Removing ZoneJS as a dependency ensures better long-term compatibility by removing a source of complexity, monkey patching, and ongoing maintenance.
+- **Better ecosystem compatibility**: ZoneJS works by patching browser APIs but does not automatically have patches for every new browser API. Some APIs, such as `async`/`await`, cannot be patched effectively and must be downleveled to work with ZoneJS. Sometimes libraries in the ecosystem are also incompatible with the way ZoneJS patches the native APIs. Removing ZoneJS as a dependency ensures better long-term compatibility by removing a source of complexity, monkey patching, and ongoing maintenance.
 
 ## Enabling Zoneless in an application
 
@@ -64,7 +64,7 @@ Being a host for a user component means using an API such as `ViewContainerRef.c
 
 ### Remove `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, `NgZone.isStable`, or `NgZone.onStable`
 
-Applications and libraries need to remove uses of `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable` and `NgZone.onStable`.
+Applications and libraries need to remove uses of `NgZone.onMicrotaskEmpty`, `NgZone.onUnstable`, and `NgZone.onStable`.
 These observables will never emit when an Application enables zoneless change detection.
 Similarly, `NgZone.isStable` will always be `true` and should not be used as a condition for code execution.
 
@@ -120,12 +120,11 @@ the application remains unstable until the observable emits, completes, errors,
 readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 ```
 
-The framework uses this service internally as well to prevent serialization until asynchronous tasks are complete. These include, but are not limited to,
-an ongoing Router navigation and an incomplete `HttpClient` request.
+The framework uses this service internally as well to prevent serialization until asynchronous tasks are complete. These include, but are not limited to, an ongoing Router navigation and an incomplete `HttpClient` request.
 
 ### Reactive forms in zoneless applications
 
-Reactive forms model updates (`setValue`, `patchValue`, `FormArray.push`, and similar APIs) update form state and emit forms observables, but they do not automatically schedule component change detection.
+Reactive forms model updates (`setValue`, `patchValue`, `FormArray.push`, and similar APIs) update form state and emit form observables, but they do not automatically schedule component change detection.
 
 If a template depends on reactive forms state, connect forms observables to a change-detection notification (for example `ChangeDetectorRef.markForCheck()`), or reflect the data through signals consumed by the template.
 
diff --git a/adev-ja/src/content/guide/zoneless.md b/adev-ja/src/content/guide/zoneless.md
index 3641f7ded2..3bd28c20c3 100644
--- a/adev-ja/src/content/guide/zoneless.md
+++ b/adev-ja/src/content/guide/zoneless.md
@@ -1,6 +1,6 @@
 # ZoneJSを使わないAngular (Zoneless)
 
-## なぜZonelessを使うのか？
+## なぜZonelessを使うのか？ {#why-use-zoneless}
 
 ZoneJSを依存関係として削除する主な利点は次のとおりです。
 
@@ -9,7 +9,7 @@ ZoneJSを依存関係として削除する主な利点は次のとおりです
 - **デバッグ体験の向上**: ZoneJSは、コードのデバッグをより困難にします。スタックトレースはZoneJSでは理解しにくくなります。また、コードがAngular Zoneの外部にあるために壊れた場合も理解しにくいです。
 - **より良いエコシステム互換性**: ZoneJSはブラウザAPIをパッチ適用することで動作しますが、すべての新しいブラウザAPIに対して自動的にパッチが適用されるわけではありません。一部のAPIは、`async`/`await`のように効果的にパッチを適用できず、ZoneJSで動作するようにダウンレベルする必要があります。場合によっては、エコシステム内のライブラリも、ZoneJSがネイティブAPIにパッチを適用する方法と互換性がないことがあります。ZoneJSを依存関係として削除すると、複雑さ、モンキーパッチ、および継続的なメンテナンスのソースが削除されるため、長期的な互換性が向上します。
 
-## アプリケーションでZonelessを有効にする
+## アプリケーションでZonelessを有効にする {#enabling-zoneless-in-an-application}
 
 Angular v21以降、Zonelessがデフォルトなので、有効にするための特別な操作は不要です。デフォルト設定を上書きする`provideZoneChangeDetection`がどこでも使用されていないことを確認してください。
 
@@ -28,7 +28,7 @@ platformBrowser().bootstrapModule(AppModule);
 export class AppModule {}
 ```
 
-## ZoneJSの削除
+## ZoneJSの削除 {#removing-zonejs}
 
 Zonelessアプリケーションは、バンドルサイズを削減するために、ビルドからZoneJSを完全に削除する必要があります。ZoneJSは通常、
 `angular.json`の`polyfills`オプションを介して、`build`と`test`の両方のターゲットでロードされます。ビルドから削除するには、
@@ -42,7 +42,7 @@ Zonelessアプリケーションは、バンドルサイズを削減するため
 npm uninstall zone.js
 ```
 
-## Zoneless互換性の要件
+## Zoneless互換性の要件 {#requirements-for-zoneless-compatibility}
 
 Angularは、変更検知をいつ、どのビューで実行するかを判断するために、コアAPIからの通知に依存しています。
 これらの通知には次のものが含まれます。
@@ -53,7 +53,7 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
 - バインドされたホストまたはテンプレートリスナーのコールバック
 - 上記のいずれかによってダーティーとしてマークされたビューのアタッチ
 
-### `OnPush`互換コンポーネント
+### `OnPush`互換コンポーネント {#onpush-compatible-components}
 
 コンポーネントが上記の正しい通知メカニズムを使用していることを確認する1つの方法は、
 [ChangeDetectionStrategy.OnPush](/best-practices/skipping-subtrees#using-onpush)を使用することです。
@@ -62,7 +62,7 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
 ライブラリコンポーネントが`ChangeDetectionStrategy.Eager`/`Default`を使用する可能性のあるユーザーコンポーネントのホストである場合、子コンポーネントが`OnPush`互換ではなく、ZoneJSに依存して変更検知をトリガーする場合、子コンポーネントが更新されなくなるため、`OnPush`を使用できません。コンポーネントは、変更検知を実行する必要があるときにAngularに通知する限り（`markForCheck`の呼び出し、シグナルの使用、`AsyncPipe`など）、`Default`戦略を使用できます。
 ユーザーコンポーネントのホストとは、`ViewContainerRef.createComponent`のようなAPIを使用することを意味し、ユーザーコンポーネントのテンプレートの一部（コンテンツプロジェクションやテンプレートref入力の使用）をホストするだけではありません。
 
-### `NgZone.onMicrotaskEmpty`、`NgZone.onUnstable`、`NgZone.isStable`、または`NgZone.onStable`の削除
+### `NgZone.onMicrotaskEmpty`、`NgZone.onUnstable`、`NgZone.isStable`、または`NgZone.onStable`の削除 {#remove-ngzoneonmicrotaskempty-ngzoneonunstable-ngzoneisstable-or-ngzoneonstable}
 
 アプリケーションとライブラリは、`NgZone.onMicrotaskEmpty`、`NgZone.onUnstable`、および`NgZone.onStable`の使用を削除する必要があります。
 アプリケーションがZoneless変更検知を有効にすると、これらのObservableは発行されません。
@@ -82,7 +82,7 @@ Angularは、変更検知をいつ、どのビューで実行するかを判断
 パフォーマンスが低下する可能性があります。
 </docs-callout>
 
-### サーバーサイドレンダリング（SSR）の`PendingTasks`
+### サーバーサイドレンダリング（SSR）の`PendingTasks` {#pendingtasks-for-server-side-rendering-ssr}
 
 If you are using SSR with Angular, you may know that it relies on ZoneJS to help determine when the application
 is "stable" and can be serialized. If there are asynchronous tasks that should prevent serialization, an application
@@ -120,8 +120,7 @@ the application remains unstable until the observable emits, completes, errors,
 readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 ```
 
-フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、
-進行中のルーターナビゲーションや未完了の`HttpClient`リクエストが含まれますが、これらに限定されません。
+フレームワークは、非同期タスクが完了するまでシリアライズを防ぐために、このサービスを内部的にも使用します。これには、進行中のルーターナビゲーションや未完了の`HttpClient`リクエストが含まれますが、これらに限定されません。
 
 ### Zonelessアプリケーションにおけるリアクティブフォーム {#reactive-forms-in-zoneless-applications}
 
@@ -129,9 +128,9 @@ readonly myObservableState = someObservable.pipe(pendingUntilEvent());
 
 テンプレートがリアクティブフォームの状態に依存している場合、フォームのObservableを変更検知の通知（例: `ChangeDetectorRef.markForCheck()`）に接続するか、テンプレートが使用するシグナルを通じてデータを反映させてください。
 
-## テストとデバッグ
+## テストとデバッグ {#testing-and-debugging}
 
-### `TestBed`でZonelessを使用する
+### `TestBed`でZonelessを使用する {#using-zoneless-in-testbed}
 
 `TestBed`は、`polyfills`経由で`zone.js`がロードされている場合、デフォルトでZoneベースの変更検知を使用します。
 
@@ -166,7 +165,7 @@ the component to use signals for state or call `ChangeDetectorRef.markForCheck()
 If the component is only used as a test wrapper and never used in an application,
 it is acceptable to use `fixture.changeDetectorRef.markForCheck()`.
 
-### 更新が検出されることを確認するためのデバッグモードチェック
+### 更新が検出されることを確認するためのデバッグモードチェック {#debug-mode-check-to-ensure-updates-are-detected}
 
 Angular also provides an additional tool to help verify that an application is making
 updates to state in a zoneless-compatible way. `provideCheckNoChangesConfig({exhaustive: true, interval: <milliseconds>})`
diff --git a/adev-ja/src/content/introduction/essentials/components.en.md b/adev-ja/src/content/introduction/essentials/components.en.md
index 78e873578c..520306668a 100644
--- a/adev-ja/src/content/introduction/essentials/components.en.md
+++ b/adev-ja/src/content/introduction/essentials/components.en.md
@@ -8,7 +8,7 @@ Components are the main building blocks of Angular applications. Each component
 
 Every component has a few main parts:
 
-1. A `@Component`[decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration used by Angular.
+1. A `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) that contains some configuration used by Angular.
 2. An HTML template that controls what renders into the DOM.
 3. A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML.
 4. A TypeScript class with behaviors, such as handling user input or making requests to a server.
diff --git a/adev-ja/src/content/introduction/essentials/components.md b/adev-ja/src/content/introduction/essentials/components.md
index c47e4d7207..2f002c5b0d 100644
--- a/adev-ja/src/content/introduction/essentials/components.md
+++ b/adev-ja/src/content/introduction/essentials/components.md
@@ -8,7 +8,7 @@ Angularアプリケーションを作成するための基本的な構成要素
 
 すべてのコンポーネントには、いくつかの主要な部分があります。
 
-1. Angularによって使用されるいくつかの設定を含む`@Component`[デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html)。
+1. Angularによって使用されるいくつかの設定を含む`@Component` [デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html)。
 2. DOMにレンダリングされる内容を制御するHTMLテンプレート。
 3. HTMLでコンポーネントがどのように使用されるかを定義する[CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)。
 4. ユーザー入力の処理やサーバーへのリクエストの実行など、動作を定義するTypeScriptクラス。
diff --git a/adev-ja/src/content/introduction/essentials/signal-forms.en.md b/adev-ja/src/content/introduction/essentials/signal-forms.en.md
index 9c1715185c..d1423fbb0f 100644
--- a/adev-ja/src/content/introduction/essentials/signal-forms.en.md
+++ b/adev-ja/src/content/introduction/essentials/signal-forms.en.md
@@ -24,14 +24,15 @@ const loginModel = signal<LoginData>({
 
 ### 2. Pass the form model to `form()` to create a `FieldTree`
 
-Then, you pass your form model into the `form()` function to create a **field tree** - an object structure that mirrors your model's shape, allowing you to access fields with dot notation:
+Then, you pass your form model into the `form()` function to create a **field tree** - an object structure that mirrors your model's shape, allowing you to access fields with dot notation.
+
+Both the root form object and its nested properties are `FieldTree` nodes:
 
 ```ts
 const loginForm = form(loginModel);
 
-// Access fields directly by property name
-loginForm.email;
-loginForm.password;
+loginForm; // is a FieldTree
+loginForm.email; // is also a FieldTree
 ```
 
 ### 3. Bind HTML inputs with `[formField]` directive
@@ -47,18 +48,20 @@ As a result, user changes (such as typing in the field) automatically updates th
 
 NOTE: The `[formField]` directive also syncs field state for attributes like `required`, `disabled`, and `readonly` when appropriate.
 
-### 4. Read field values with `value()`
+### 4. Read state with `FieldTree` signals
 
-You can access field state by calling the field as a function. This returns a `FieldState` object containing reactive signals for the field's value, validation status, and interaction state:
+You can access state for any part of the tree by calling the `FieldTree` node as a function. This returns a state object containing reactive signals for the value, validation status, and interaction state:
 
 ```ts
-loginForm.email(); // Returns FieldState with value(), valid(), touched(), etc.
+loginForm(); // Returns state for the whole form
+loginForm.email(); // Returns state for the email field
 ```
 
-To read the field's current value, access the `value()` signal:
+To read the current value, access the `value()` signal:
 
 ```html
-<!-- Render form value that updates automatically as user types -->
+<!-- Render values that update automatically as user types -->
+<p>Form value: {{ loginForm().value() | json }}</p>
 <p>Email: {{ loginForm.email().value() }}</p>
 ```
 
@@ -67,9 +70,9 @@ To read the field's current value, access the `value()` signal:
 const currentEmail = loginForm.email().value();
 ```
 
-### 5. Update field values with `set()`
+### 5. Update values with `set()`
 
-You can programmatically update a field's value using the `value.set()` method. This updates both the field and the underlying model signal:
+You can programmatically update values using the `value.set()` method on any node. This updates both the `FieldTree` and the underlying model signal:
 
 ```ts
 // Update the value programmatically
@@ -83,7 +86,7 @@ As a result, both the field value and the model signal are updated automatically
 console.log(loginModel().email); // 'alice@wonderland.com'
 ```
 
-Here's a complete example:
+### Complete example
 
 <docs-code-multifile preview path="adev/src/content/examples/signal-forms/src/login-simple/app/app.ts">
   <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/login-simple/app/app.ts"/>
@@ -235,9 +238,24 @@ required(schemaPath.email, {message: 'Email is required'});
 email(schemaPath.email, {message: 'Please enter a valid email address'});
 ```
 
-Each form field exposes its validation state through signals. For example, you can check `field().valid()` to see if validation passes, `field().touched()` to see if the user has interacted with it, and `field().errors()` to get the list of validation errors.
+Each node in the `FieldTree` exposes its validation and interaction state through reactive signals.
+
+### FieldTree State Signals
+
+Every node in the tree, including the root form object, provides the same signals to track its state. Since every node is a `FieldTree`, the API for monitoring validity and interaction is identical at every level.
+
+| State        | Description                                                                     |
+| ------------ | ------------------------------------------------------------------------------- |
+| `valid()`    | Returns `true` if the node passes all validation rules                          |
+| `invalid()`  | Returns `true` if there are validation errors                                   |
+| `pending()`  | Returns `true` if async validation is in progress                               |
+| `touched()`  | Returns `true` if the user has focused and blurred the field or any child field |
+| `dirty()`    | Returns `true` if the value has been changed by the user                        |
+| `disabled()` | Returns `true` if the node is disabled                                          |
+| `readonly()` | Returns `true` if the node is readonly                                          |
+| `errors()`   | Returns an array of validation errors with `kind` and `message` properties      |
 
-Here's a complete example:
+### Complete example
 
 <docs-code-multifile preview path="adev/src/content/examples/signal-forms/src/login-validation/app/app.ts">
   <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/login-validation/app/app.ts"/>
@@ -245,20 +263,6 @@ Here's a complete example:
   <docs-code header="app.css" path="adev/src/content/examples/signal-forms/src/login-validation/app/app.css"/>
 </docs-code-multifile>
 
-### Field State Signals
-
-Every `field()` provides these state signals:
-
-| State        | Description                                                                |
-| ------------ | -------------------------------------------------------------------------- |
-| `valid()`    | Returns `true` if the field passes all validation rules                    |
-| `touched()`  | Returns `true` if the user has focused and blurred the field               |
-| `dirty()`    | Returns `true` if the user has changed the value                           |
-| `disabled()` | Returns `true` if the field is disabled                                    |
-| `readonly()` | Returns `true` if the field is readonly                                    |
-| `pending()`  | Returns `true` if async validation is in progress                          |
-| `errors()`   | Returns an array of validation errors with `kind` and `message` properties |
-
 ## Next steps
 
 To learn more about Signal Forms and how it works, check out the in-depth guides:
diff --git a/adev-ja/src/content/introduction/essentials/signal-forms.md b/adev-ja/src/content/introduction/essentials/signal-forms.md
index cfceeb4a68..9a66bd4852 100644
--- a/adev-ja/src/content/introduction/essentials/signal-forms.md
+++ b/adev-ja/src/content/introduction/essentials/signal-forms.md
@@ -24,14 +24,15 @@ const loginModel = signal<LoginData>({
 
 ### 2. フォームモデルを`form()`に渡して`FieldTree`を作成する {#2-pass-the-form-model-to-form-to-create-a-fieldtree}
 
-次に、フォームモデルを`form()`関数に渡して**フィールドツリー**を作成します。これはモデルの形状を反映したオブジェクト構造で、ドット記法でフィールドにアクセスできます:
+次に、フォームモデルを`form()`関数に渡して**フィールドツリー**を作成します。これはモデルの形状を反映したオブジェクト構造で、ドット記法でフィールドにアクセスできます。
+
+Both the root form object and its nested properties are `FieldTree` nodes:
 
 ```ts
 const loginForm = form(loginModel);
 
-// Access fields directly by property name
-loginForm.email;
-loginForm.password;
+loginForm; // is a FieldTree
+loginForm.email; // is also a FieldTree
 ```
 
 ### 3. `[formField]`ディレクティブでHTML入力をバインドする {#3-bind-html-inputs-with-field-directive}
@@ -47,18 +48,20 @@ loginForm.password;
 
 NOTE: `[formField]`ディレクティブは、必要に応じて`required`、`disabled`、`readonly`などの属性のフィールドの状態も同期します。
 
-### 4. `value()`でフィールドの値を読み取る {#4-read-field-values-with-value}
+### 4. `FieldTree`シグナルで状態を読み取る {#4-read-state-with-fieldtree-signals}
 
-フィールドを関数として呼び出すことで、フィールドの状態にアクセスできます。これにより、フィールドの値、バリデーションステータス、インタラクションの状態に対するリアクティブなシグナルを含む`FieldState`オブジェクトが返されます:
+ツリーの任意の部分の状態には、`FieldTree`ノードを関数として呼び出すことでアクセスできます。これにより、値、バリデーションステータス、インタラクションの状態に対するリアクティブなシグナルを含む状態オブジェクトが返されます:
 
 ```ts
-loginForm.email(); // Returns FieldState with value(), valid(), touched(), etc.
+loginForm(); // Returns state for the whole form
+loginForm.email(); // Returns state for the email field
 ```
 
 フィールドの現在の値を読み取るには、`value()`シグナルにアクセスします:
 
 ```html
-<!-- Render form value that updates automatically as user types -->
+<!-- Render values that update automatically as user types -->
+<p>Form value: {{ loginForm().value() | json }}</p>
 <p>Email: {{ loginForm.email().value() }}</p>
 ```
 
@@ -67,9 +70,9 @@ loginForm.email(); // Returns FieldState with value(), valid(), touched(), etc.
 const currentEmail = loginForm.email().value();
 ```
 
-### 5. `set()`でフィールドの値を更新する {#5-update-field-values-with-set}
+### 5. `set()`で値を更新する {#5-update-values-with-set}
 
-`value.set()`メソッドを使用して、プログラムからフィールドの値を更新できます。これにより、フィールドと基になるモデルシグナルの両方が更新されます:
+任意のノードで`value.set()`メソッドを使用して、プログラムから値を更新できます。これにより、`FieldTree`と基になるモデルシグナルの両方が更新されます:
 
 ```ts
 // Update the value programmatically
@@ -83,7 +86,7 @@ loginForm.email().value.set('alice@wonderland.com');
 console.log(loginModel().email); // 'alice@wonderland.com'
 ```
 
-完全な例は次のとおりです:
+### Complete example
 
 <docs-code-multifile preview path="adev/src/content/examples/signal-forms/src/login-simple/app/app.ts">
   <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/login-simple/app/app.ts"/>
@@ -235,9 +238,24 @@ required(schemaPath.email, {message: 'Email is required'});
 email(schemaPath.email, {message: 'Please enter a valid email address'});
 ```
 
-各フォームフィールドは、シグナルを通じてそのバリデーション状態を公開します。たとえば、`field().valid()`をチェックしてバリデーションが成功したか、`field().touched()`をチェックしてユーザーが操作したかを確認し、`field().errors()`をチェックしてバリデーションエラーのリストを取得できます。
+各`FieldTree`のノードは、リアクティブなシグナルを通じてそのバリデーションおよびインタラクションの状態を公開します。
+
+### `FieldTree`の状態シグナル {#fieldtree-state-signals}
+
+Every node in the tree, including the root form object, provides the same signals to track its state. Since every node is a `FieldTree`, the API for monitoring validity and interaction is identical at every level.
+
+| State        | Description                                                                     |
+| ------------ | ------------------------------------------------------------------------------- |
+| `valid()`    | Returns `true` if the node passes all validation rules                          |
+| `invalid()`  | Returns `true` if there are validation errors                                   |
+| `pending()`  | Returns `true` if async validation is in progress                               |
+| `touched()`  | Returns `true` if the user has focused and blurred the field or any child field |
+| `dirty()`    | Returns `true` if the value has been changed by the user                        |
+| `disabled()` | Returns `true` if the node is disabled                                          |
+| `readonly()` | Returns `true` if the node is readonly                                          |
+| `errors()`   | Returns an array of validation errors with `kind` and `message` properties      |
 
-以下に完全な例を示します:
+### Complete example
 
 <docs-code-multifile preview path="adev/src/content/examples/signal-forms/src/login-validation/app/app.ts">
   <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/login-validation/app/app.ts"/>
@@ -245,20 +263,6 @@ email(schemaPath.email, {message: 'Please enter a valid email address'});
   <docs-code header="app.css" path="adev/src/content/examples/signal-forms/src/login-validation/app/app.css"/>
 </docs-code-multifile>
 
-### フィールドの状態シグナル {#field-state-signals}
-
-すべての`field()`は、これらの状態シグナルを提供します:
-
-| 状態         | 説明                                                                       |
-| ------------ | -------------------------------------------------------------------------- |
-| `valid()`    | フィールドがすべてのバリデーションルールをパスした場合に`true`を返します     |
-| `touched()`  | ユーザーがフィールドにフォーカスしてぼかした場合に`true`を返します           |
-| `dirty()`    | ユーザーが値を変更した場合に`true`を返します                               |
-| `disabled()` | フィールドが無効になっている場合に`true`を返します                           |
-| `readonly()` | フィールドが読み取り専用になっている場合に`true`を返します                   |
-| `pending()`  | 非同期バリデーションが進行中の場合に`true`を返します                         |
-| `errors()`   | `kind`と`message`プロパティを持つバリデーションエラーの配列を返します       |
-
 ## 次のステップ {#next-steps}
 
 シグナルフォームとその仕組みについてさらに詳しく学ぶには、詳細なガイドをご覧ください:
diff --git a/adev-ja/src/content/introduction/installation.en.md b/adev-ja/src/content/introduction/installation.en.md
index b8051f5120..824e2e8ca7 100644
--- a/adev-ja/src/content/introduction/installation.en.md
+++ b/adev-ja/src/content/introduction/installation.en.md
@@ -17,7 +17,7 @@ If you're starting a new project, you'll most likely want to create a local proj
 
 ### Prerequisites
 
-- **Node.js** - [v20.19.0 or newer](/reference/versions)
+- **Node.js** - [v22.22.3 or newer](/reference/versions)
 - **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/)
 - **Terminal** - Required for running [Angular CLI](/tools/cli) commands
 - **Development Tool** - To improve your development workflow, we recommend the [Angular Language Service](/tools/language-service)
@@ -55,7 +55,6 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
     >
     bun install -g @angular/cli
     </docs-code>
-
 </docs-code-multifile>
 
 If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli) for more info.
diff --git a/adev-ja/src/content/introduction/installation.md b/adev-ja/src/content/introduction/installation.md
index 002f5255f2..e89a4185d0 100644
--- a/adev-ja/src/content/introduction/installation.md
+++ b/adev-ja/src/content/introduction/installation.md
@@ -17,7 +17,7 @@ Angularアプリを試す最速の方法です。設定は不要です。
 
 ### 前提条件 {#prerequisites}
 
-- **Node.js** - [v20.19.0以降](/reference/versions)
+- **Node.js** - [v22.22.3以降](/reference/versions)
 - **テキストエディタ** - [Visual Studio Code](https://code.visualstudio.com/)を推奨
 - **ターミナル** - [Angular CLI](/tools/cli)コマンドを実行するために必要
 - **開発ツール** - 開発ワークフローを改善するために、[Angular Language Service](/tools/language-service) をおすすめします
@@ -55,7 +55,6 @@ Angularアプリを試す最速の方法です。設定は不要です。
     >
     bun install -g @angular/cli
     </docs-code>
-
 </docs-code-multifile>
 
 WindowsまたはUnixでこのコマンドを実行する際に問題が発生した場合は、[CLIドキュメント](/tools/cli/setup-local#install-the-angular-cli)を参照してください。
diff --git a/adev-ja/src/content/reference/configs/angular-compiler-options.md b/adev-ja/src/content/reference/configs/angular-compiler-options.md
index 88ab09179d..b141b3547c 100644
--- a/adev-ja/src/content/reference/configs/angular-compiler-options.md
+++ b/adev-ja/src/content/reference/configs/angular-compiler-options.md
@@ -201,8 +201,7 @@ When `true`, enables [strict template type checking](tools/cli/template-typechec
 
 The strictness flags that this option enables allow you to turn on and off specific types of strict template type checking.
 See [troubleshooting template errors](tools/cli/template-typecheck#troubleshooting-template-errors).
-
-When you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration.
+Default is `true`.
 
 ### `strictStandalone`
 
diff --git a/adev-ja/src/content/reference/configs/workspace-config.md b/adev-ja/src/content/reference/configs/workspace-config.md
index 322310abd8..d8c51180d9 100644
--- a/adev-ja/src/content/reference/configs/workspace-config.md
+++ b/adev-ja/src/content/reference/configs/workspace-config.md
@@ -245,6 +245,7 @@ For details of those options and their possible values, see the [Angular CLI Ref
 | `assets`                   | An object containing paths to static assets to serve with the application. The default paths point to the project's `public` directory. See more in the [Assets configuration](#assets-configuration) section.                                                           |
 | `styles`                   | An array of CSS files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                      |
 | `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                                                                                   |
+| `inlineStyleLanguage`      | The stylesheet language to use for the application's inline component styles. Accepts `css`, `less`, `sass`, or `scss`, and defaults to `css`.                                                                                                                           |
 | `scripts`                  | An object containing JavaScript files to add to the application. The scripts are loaded exactly as if you had added them in a `<script>` tag inside `index.html`. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.         |
 | `budgets`                  | Default size-budget type and thresholds for all or parts of your application. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See [Configure size budgets](tools/cli/build#configuring-size-budgets). |
 | `fileReplacements`         | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](tools/cli/environments#configure-environment-specific-defaults).                                                                               |
@@ -278,7 +279,7 @@ An asset specification object can have the following fields.
 
 | Fields           | Details                                                                                                                                   |
 | :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
-| `glob`           | A [node-glob](https://github.com/isaacs/node-glob/blob/master/README.md) using `input` as base directory.                                 |
+| `glob`           | A [node-glob](https://github.com/isaacs/node-glob/blob/main/README.md) using `input` as base directory.                                   |
 | `input`          | A path relative to the workspace root.                                                                                                    |
 | `output`         | A path relative to `outDir`. Because of the security implications, the Angular CLI never writes files outside of the project output path. |
 | `ignore`         | A list of globs to exclude.                                                                                                               |
diff --git a/adev-ja/src/content/reference/errors/NG0100.en.md b/adev-ja/src/content/reference/errors/NG0100.en.md
index 7ec50c020a..4f79fe5849 100644
--- a/adev-ja/src/content/reference/errors/NG0100.en.md
+++ b/adev-ja/src/content/reference/errors/NG0100.en.md
@@ -16,4 +16,4 @@ Ensure that there are no changes to the bindings in the template after change de
 
 If you are binding to methods in the view, ensure that the invocation does not update any of the other bindings in the template.
 
-Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
+Read more about which solution is right for you in ['Everything you need to know about the "ExpressionChangedAfterItHasBeenCheckedError" error'](https://medium.com/angular-in-depth/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) and why this is useful at ['Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)'](https://blog.angular-university.io/angular-debugging).
diff --git a/adev-ja/src/content/reference/errors/NG0100.md b/adev-ja/src/content/reference/errors/NG0100.md
index d6fedee216..15985d00c4 100644
--- a/adev-ja/src/content/reference/errors/NG0100.md
+++ b/adev-ja/src/content/reference/errors/NG0100.md
@@ -16,4 +16,4 @@ CLIによって生成された[ソースマップ](https://developer.mozilla.org
 
 ビューでメソッドにバインディングしている場合、呼び出しがテンプレート内の他のバインディングを更新しないことを確認してください。
 
-どのソリューションが自分に適しているかについては、['「ExpressionChangedAfterItHasBeenCheckedError」エラーに関するすべて'](https://angularindepth.com/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error)と、これがなぜ役立つのかについては、['Angularデバッグ「Expression has changed after it was checked」: 簡単な説明（と修正）'](https://blog.angular-university.io/angular-debugging)をご覧ください。
+どのソリューションが自分に適しているかについては、['「ExpressionChangedAfterItHasBeenCheckedError」エラーに関するすべて'](https://medium.com/angular-in-depth/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4)と、これがなぜ役立つのかについては、['Angularデバッグ「Expression has changed after it was checked」: 簡単な説明（と修正）'](https://blog.angular-university.io/angular-debugging)をご覧ください。
diff --git a/adev-ja/src/content/reference/errors/NG0205.md b/adev-ja/src/content/reference/errors/NG0205.md
index f3b3b23155..5b1f5064ea 100644
--- a/adev-ja/src/content/reference/errors/NG0205.md
+++ b/adev-ja/src/content/reference/errors/NG0205.md
@@ -9,9 +9,7 @@ This error occurs when you attempt to retrieve a service from an injector that h
 When a component is destroyed, its injector is also destroyed. If an async callback later tries to access services, this error occurs:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile implements OnInit {
   private userClient = inject(UserClient);
 
@@ -30,9 +28,7 @@ export class UserProfile implements OnInit {
 Similar issues occur with observables if cleanup happens in the wrong order:
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class DataView implements OnDestroy {
   private dataStore = inject(DataStore);
 
@@ -55,9 +51,7 @@ To fix this error:
 3. **Guard against destroyed state** — For operations that might outlive the component, check if the component is still active before accessing services.
 
 ```ts
-@Component({
-  /*...*/
-})
+@Component(/* ... */)
 export class UserProfile implements OnInit {
   private destroyRef = inject(DestroyRef);
   private userClient = inject(UserClient);
diff --git a/adev-ja/src/content/reference/errors/NG02825.md b/adev-ja/src/content/reference/errors/NG02825.md
new file mode 100644
index 0000000000..3c9f7a7541
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG02825.md
@@ -0,0 +1,37 @@
+# Fetch response body exceeds the configured limit
+
+Angular produces this error when `HttpClient` uses the fetch backend during server-side rendering and the bytes buffered for a response body exceed the configured `maxResponseBodySize` limit. By default, Angular limits each buffered response body to 1 MB to prevent the server from buffering unexpectedly large responses during rendering.
+
+## Fixing the error
+
+Set `maxResponseBodySize` in the `provideServerRendering` options to increase the limit:
+
+```ts
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {serverRoutes} from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(
+      {
+        maxResponseBodySize: 5 * 1024 * 1024, // 5MB
+      },
+      withRoutes(serverRoutes),
+    ),
+  ],
+};
+```
+
+`maxResponseBodySize` configures the maximum number of response body bytes Angular buffers for each server-side `HttpClient` request that uses the fetch backend. The value is configured in bytes and applies globally.
+
+IMPORTANT: Keep this limit as small as your application allows. Increasing it lets server-side requests buffer larger response bodies, which can increase memory use and denial-of-service risk. Prefer moving large downloads outside server rendering.
+
+## Debugging the error
+
+The error message includes the configured `maxResponseBodySize` limit in bytes. To identify which HTTP request is returning a large response, check your network logs or the SSR server console for the failing request URL.
+
+If the large response is only needed on the client and not required for server-side rendering, you can disable the transfer cache for that specific request:
+
+```ts
+httpClient.get('/api/large-data', {transferCache: false});
+```
diff --git a/adev-ja/src/content/reference/errors/NG0318.md b/adev-ja/src/content/reference/errors/NG0318.md
new file mode 100644
index 0000000000..a44a598eaa
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG0318.md
@@ -0,0 +1,28 @@
+# Invalid style property binding value
+
+Angular detected a value with an unsupported type in a style property binding. This can occur in
+an individual binding such as `[style.width]` or in a property of a `[style]` map.
+
+Style property values accept strings, numbers, style `SafeValue` objects, `null`, and `undefined`.
+Other values, including `SafeValue` objects created for a non-style security context, produce this
+warning in development mode.
+
+For example, the following binding passes a boolean instead of a CSS value:
+
+```angular-html
+<div [style.display]="isVisible"></div>
+```
+
+## Debugging the error
+
+Use the property name and value in the error message to locate the binding. Convert the value to a
+valid CSS string or number, or use `null` or `undefined` to remove the style.
+
+When using a unit suffix such as `[style.width.px]`, bind the numeric portion of the value:
+
+```angular-html
+<div [style.width.px]="width"></div>
+```
+
+Do not pass a `SafeValue` created for another security context, such as trusted HTML, to a style
+property binding.
diff --git a/adev-ja/src/content/reference/errors/NG05101.md b/adev-ja/src/content/reference/errors/NG05101.md
new file mode 100644
index 0000000000..1459c4ecb4
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05101.md
@@ -0,0 +1,26 @@
+# No event manager plugin found for event
+
+This error occurs when Angular tries to set up a listener for an event but none of the registered event manager plugins recognizes the event name.
+
+## Debugging the error
+
+The error message includes the unrecognized event name, which is usually enough to spot the problem. The most common cause is a typo in the event binding:
+
+```html
+<!-- 'keyup.ente' is not recognized -->
+<input (keyup.ente)="onEnter()" />
+
+<!-- Correct -->
+<input (keyup.enter)="onEnter()" />
+```
+
+If the event name is intentional and belongs to a third-party plugin (for example, a Hammer.js gesture event), make sure the plugin is provided via the `EVENT_MANAGER_PLUGINS` token:
+
+```typescript
+import {ApplicationConfig} from '@angular/core';
+import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [{provide: EVENT_MANAGER_PLUGINS, useClass: MyCustomPlugin, multi: true}],
+};
+```
diff --git a/adev-ja/src/content/reference/errors/NG05102.md b/adev-ja/src/content/reference/errors/NG05102.md
new file mode 100644
index 0000000000..666e320edb
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05102.md
@@ -0,0 +1,44 @@
+# Unsupported event target
+
+Angular only recognizes three string values as global event targets: `'window'`, `'document'`, and `'body'`. If you pass anything else as a string target when registering a global event listener, Angular can't resolve it and throws this error.
+
+## Debugging the error
+
+Check for a typo in the target name used with `@HostListener` or `Renderer2.listen()`. A small mistake like `'windw'` instead of `'window'` is enough to trigger this:
+
+```angular-ts
+@Component({
+  selector: 'app-example',
+  template: '<button>Click me</button>',
+})
+export class Example {
+  @HostListener('windw:resize') // typo — should be 'window'
+  onResize() {}
+}
+```
+
+The same applies when calling `Renderer2.listen()` directly with a string that Angular doesn't know about:
+
+```typescript
+this.renderer.listen('global', 'click', handler); // 'global' is not supported
+```
+
+## Fixing the error
+
+Correct the target to one of the three supported strings, or pass an actual DOM element instead of a string:
+
+```angular-ts
+@Component({
+  selector: 'app-example',
+  template: '<button>Click me</button>',
+})
+export class Example {
+  @HostListener('window:resize')
+  onResize() {}
+}
+```
+
+```typescript
+// Use an element reference when you need to target something more specific
+this.renderer.listen(this.elementRef.nativeElement, 'click', handler);
+```
diff --git a/adev-ja/src/content/reference/errors/NG05201.md b/adev-ja/src/content/reference/errors/NG05201.md
new file mode 100644
index 0000000000..6c81b9292c
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05201.md
@@ -0,0 +1,53 @@
+# Unsafe value used in a resource URL context
+
+Angular throws this error when you bind a value to an attribute that loads an external resource — like `<iframe src>`, or `<link href>` — and that value hasn't been explicitly marked as trusted.
+
+Resource URLs are treated differently from regular URLs. Angular can sanitize a plain URL (stripping `javascript:` schemes and so on), but it can't make an arbitrary resource URL safe because these attributes cause the browser to fetch and execute external content. So Angular rejects untrusted values rather than trying to sanitize them.
+
+The attributes that trigger this check are:
+
+| Element    | Attribute(s)       |
+| ---------- | ------------------ |
+| `<base>`   | `href`             |
+| `<embed>`  | `src`              |
+| `<frame>`  | `src`              |
+| `<iframe>` | `src`              |
+| `<link>`   | `href`             |
+| `<object>` | `codebase`, `data` |
+
+## Debugging the error
+
+This error can also be thrown when calling `DomSanitizer.sanitize()` directly with `SecurityContext.RESOURCE_URL` and a plain string:
+
+```typescript
+inject(DomSanitizer).sanitize(SecurityContext.RESOURCE_URL, 'https://example.com'); // throws NG05201
+```
+
+`sanitize()` cannot make an arbitrary string safe in a resource URL context. Either use `bypassSecurityTrustResourceUrl` if the value is fully under your control, or bind the value to a regular URL attribute that Angular can sanitize.
+
+Look for a binding to one of the attributes above or a direct `sanitize()` call:
+
+```html
+<iframe [src]="userUrl"></iframe>
+```
+
+If the URL comes from a trusted, controlled source, mark it safe using `DomSanitizer.bypassSecurityTrustResourceUrl`:
+
+```typescript
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+
+@Component({
+  selector: 'my-app',
+})
+export class App {
+  safeUrl: SafeResourceUrl = inject(DomSanitizer).bypassSecurityTrustResourceUrl(
+    'https://example.com/embed',
+  );
+}
+```
+
+```html
+<iframe [src]="safeUrl"></iframe>
+```
+
+`bypassSecurityTrustResourceUrl` is an escape hatch, not a sanitizer. Never pass user-supplied URLs through it — that would allow an attacker to load arbitrary content, including malicious scripts. Only use it when the value is fully under your control.
diff --git a/adev-ja/src/content/reference/errors/NG05703.md b/adev-ja/src/content/reference/errors/NG05703.md
new file mode 100644
index 0000000000..e91fdaafd6
--- /dev/null
+++ b/adev-ja/src/content/reference/errors/NG05703.md
@@ -0,0 +1,25 @@
+# Suspicious URL Origin Change
+
+This error occurs in Server-Side Rendering (SSR) environments when a URL resolution results in an unexpected origin change. This check is a security feature in `@angular/platform-server` designed to protect your application from Server-Side Request Forgery (SSRF) and security bypasses.
+
+## Description
+
+To perform HTTP requests and process route states during SSR, Angular must resolve relative URLs to absolute URLs.
+
+During this resolution process, Angular validates that the resolved URL does not unexpectedly point to an external or untrusted origin. If a URL behaves like a relative path but resolves to a different origin, Angular throws `NG05703` and blocks the request/navigation.
+
+### Common causes
+
+- **Backslash-prefixed hijack attempts (open redirects / SSRF bypass):** Relative paths beginning with slashes and backslashes (such as `/\\attacker.com/path` or `\\\\attacker.com/path`) can be interpreted differently by browsers and server-side URL parsers. In some parser implementations, these resolve to an absolute URL pointing to `attacker.com`. Angular detects this mismatch and blocks the resolution.
+- **Disallowed state changes to different origins:** Navigation or URL updates (e.g. using `location.replaceState` or `location.pushState`) that change the origin of the application when the environment is configured to restrict URL changes to the current origin only.
+- **SSR bootstrap URL mismatch:** In server-side rendering, if the `url` passed to the renderer does not align with the base origin configured for the application (such as `APP_BASE_HREF`), the router might attempt to synchronize the location on startup, causing a disallowed origin change.
+- **Obfuscated protocol schemes:** Absolute URLs with obfuscated or malformed protocols (e.g. `ht\ntp://evil.com/path`) that attempt to bypass origin checks.
+
+## Debugging the error
+
+Check the URL that triggered the error. Ensure it does not contain unexpected backslashes, line breaks, or other characters that could trigger parsing anomalies:
+
+- Avoid using backslashes (`\`) in relative URLs or routing paths.
+- Make sure any user-supplied URLs or query parameters are properly validated and sanitized before being processed in SSR.
+- **Align SSR bootstrap URL with configured base URL:** If the error occurs on startup in an SSR environment, ensure that the `url` passed to the renderer matches the expected base origin/host (e.g. `APP_BASE_HREF`). Avoid using dynamic URLs from raw request headers (like `X-Forwarded-Host`) if they do not match the trusted application origin.
+- If you intentionally want to make requests to a different domain via a protocol-relative URL (`//other-domain.com/path`), ensure it is allowed by the configuration or use an explicit scheme (`http://` or `https://`).
diff --git a/adev-ja/src/content/reference/errors/NG0910.en.md b/adev-ja/src/content/reference/errors/NG0910.en.md
index 9c6ef1ec4a..afab92bc9a 100644
--- a/adev-ja/src/content/reference/errors/NG0910.en.md
+++ b/adev-ja/src/content/reference/errors/NG0910.en.md
@@ -8,6 +8,7 @@ You see this error when Angular detects an attribute binding or a property bindi
 - referrerPolicy
 - csp
 - fetchPriority
+- credentialless
 
 The mentioned attributes affect the security model setup for `<iframe>`s
 and it's important to apply them before setting the `src` or `srcdoc` attributes.
diff --git a/adev-ja/src/content/reference/errors/NG0910.md b/adev-ja/src/content/reference/errors/NG0910.md
index 205bf0e491..f01381d9d0 100644
--- a/adev-ja/src/content/reference/errors/NG0910.md
+++ b/adev-ja/src/content/reference/errors/NG0910.md
@@ -8,6 +8,7 @@
 - referrerPolicy
 - csp
 - fetchPriority
+- credentialless
 
 これらの属性は `<iframe>` のセキュリティモデル設定に影響を与え、
 `src` または `srcdoc` 属性を設定する前に適用することが重要です。
diff --git a/adev-ja/src/content/reference/errors/NG0912.en.md b/adev-ja/src/content/reference/errors/NG0912.en.md
index 71a14b2127..b5b06baac4 100644
--- a/adev-ja/src/content/reference/errors/NG0912.en.md
+++ b/adev-ja/src/content/reference/errors/NG0912.en.md
@@ -35,21 +35,21 @@ The problem can be resolved using one of the solutions below:
 
 1. Change the selector of one of the two components. For example by using a pseudo-selector with no effect like `:not()` and a different tag name.
 
-```typescript
-@Component({
-  selector: 'my-component:not(p)',
-  template: 'empty-template',
-})
-class SomeMocked {}
-```
+   ```typescript
+   @Component({
+     selector: 'my-component:not(p)',
+     template: 'empty-template',
+   })
+   class SomeMocked {}
+   ```
 
 1. Add an extra host attribute to one of the components.
 
-```typescript
-@Component({
-  selector: 'my-component',
-  template: 'complex-template',
-  host: {'some-binding': 'some-value'},
-})
-class Some {}
-```
+   ```typescript
+   @Component({
+     selector: 'my-component',
+     template: 'complex-template',
+     host: {'some-binding': 'some-value'},
+   })
+   class Some {}
+   ```
diff --git a/adev-ja/src/content/reference/errors/NG0912.md b/adev-ja/src/content/reference/errors/NG0912.md
index 624a12dfdf..94be0856eb 100644
--- a/adev-ja/src/content/reference/errors/NG0912.md
+++ b/adev-ja/src/content/reference/errors/NG0912.md
@@ -35,21 +35,21 @@ class SomeMocked {}
 
 1. 2つのコンポーネントのいずれかのセレクターを変更します。たとえば、効果のない疑似セレクター`：not（）`と異なるタグ名を使用します。
 
-```typescript
-@Component({
-  selector: 'my-component:not(p)',
-  template: 'empty-template',
-})
-class SomeMocked {}
-```
+   ```typescript
+   @Component({
+     selector: 'my-component:not(p)',
+     template: 'empty-template',
+   })
+   class SomeMocked {}
+   ```
 
 1. コンポーネントのいずれかに追加のホスト属性を追加します。
 
-```typescript
-@Component({
-  selector: 'my-component',
-  template: 'complex-template',
-  host: {'some-binding': 'some-value'},
-})
-class Some {}
-```
+   ```typescript
+   @Component({
+     selector: 'my-component',
+     template: 'complex-template',
+     host: {'some-binding': 'some-value'},
+   })
+   class Some {}
+   ```
diff --git a/adev-ja/src/content/reference/errors/overview.en.md b/adev-ja/src/content/reference/errors/overview.en.md
index 6fc26ddaf3..58bfa16088 100644
--- a/adev-ja/src/content/reference/errors/overview.en.md
+++ b/adev-ja/src/content/reference/errors/overview.en.md
@@ -15,6 +15,7 @@
 | `NG0300`  | [Selector Collision](errors/NG0300)                                                  |
 | `NG0301`  | [Export Not Found](errors/NG0301)                                                    |
 | `NG0302`  | [Pipe Not Found](errors/NG0302)                                                      |
+| `NG0318`  | [Invalid style property binding value](errors/NG0318)                                |
 | `NG0401`  | [Missing platform](errors/NG0401)                                                    |
 | `NG0403`  | [Bootstrapped NgModule doesn't specify which component to initialize](errors/NG0403) |
 | `NG0500`  | [Hydration Node Mismatch](errors/NG0500)                                             |
@@ -43,8 +44,10 @@
 | `NG02200` | [Missing Iterable Differ](errors/NG02200)                                            |
 | `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800)                          |
 | `NG02802` | [Headers not transferred by HttpTransferCache](errors/NG02802)                       |
+| `NG02825` | [Fetch response body exceeds the configured limit](errors/NG02825)                   |
 | `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000)                       |
 | `NG05104` | [Root element was not found.](errors/NG05104)                                        |
+| `NG05703` | [Suspicious URL origin change during SSR](errors/NG05703)                            |
 
 ## Compiler errors
 
diff --git a/adev-ja/src/content/reference/errors/overview.md b/adev-ja/src/content/reference/errors/overview.md
index 67b33b06f5..b24a8068be 100644
--- a/adev-ja/src/content/reference/errors/overview.md
+++ b/adev-ja/src/content/reference/errors/overview.md
@@ -15,6 +15,7 @@
 | `NG0300`  | [Selector Collision](errors/NG0300)                                                  |
 | `NG0301`  | [Export Not Found](errors/NG0301)                                                    |
 | `NG0302`  | [Pipe Not Found](errors/NG0302)                                                      |
+| `NG0318`  | [Invalid style property binding value](errors/NG0318)                                |
 | `NG0401`  | [Missing platform](errors/NG0401)                                                    |
 | `NG0403`  | [Bootstrapped NgModule doesn't specify which component to initialize](errors/NG0403) |
 | `NG0500`  | [Hydration Node Mismatch](errors/NG0500)                                             |
@@ -43,8 +44,10 @@
 | `NG02200` | [Missing Iterable Differ](errors/NG02200)                                            |
 | `NG02800` | [JSONP support in HttpClient configuration](errors/NG02800)                          |
 | `NG02802` | [Headers not transferred by HttpTransferCache](errors/NG02802)                       |
-| `NG05000`  | [Hydration with unsupported Zone.js instance.](errors/NG05000)                      |
+| `NG02825` | [Fetch response body exceeds the configured limit](errors/NG02825)                   |
+| `NG05000` | [Hydration with unsupported Zone.js instance.](errors/NG05000)                       |
 | `NG05104` | [Root element was not found.](errors/NG05104)                                        |
+| `NG05703` | [Suspicious URL origin change during SSR](errors/NG05703)                            |
 
 ## コンパイラエラー
 
diff --git a/adev-ja/src/content/reference/press-kit.md b/adev-ja/src/content/reference/press-kit.md
index da70fcc080..457cc5f86e 100644
--- a/adev-ja/src/content/reference/press-kit.md
+++ b/adev-ja/src/content/reference/press-kit.md
@@ -14,6 +14,10 @@ The logo graphics available for download on this page are provided under [CC BY
     Our brand guidelines folders contain the design files, guidance and community examples for how the brand can be adapted.
     Read more about adapting the logo in the section below.
   </docs-card>
+  <docs-card title="Angular mascot" href="https://drive.google.com/drive/folders/1uX4H3exWWpwPqh52Bxig3GLS736gBEAf?usp=drive_link" link="Download from Google Drive">
+    ![Angular mascot cheerful](assets/images/press-kit/angular_mascot_cheerful.png "Angular mascot cheerful")
+    Angie is the official mascot of the Angular framework. The mascot folders contain different file formats and poses of our friendly companion for use in your community assets and presentations.
+  </docs-card>
 </docs-card-container>
 
 ## Press and Media
diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md
index c07b09d76b..5c6f65c53a 100644
--- a/adev-ja/src/content/reference/releases.en.md
+++ b/adev-ja/src/content/reference/releases.en.md
@@ -60,33 +60,36 @@ HELPFUL: Dates are offered as general guidance and are subject to change.
 
 In general, expect the following release cycle:
 
-- A major release every 6 months
-- 1-3 minor releases for each major release
+- A major release every 12 months
+- 4-6 minor releases for each major release
 - A patch release and pre-release \(`next` or `rc`\) build almost every week
 
 This cadence of releases gives eager developers access to new features as soon as they are fully developed and pass through our code review and integration testing processes, while maintaining the stability and reliability of the platform for production users that prefer to receive features after they have been validated by Google and other developers that use the pre-release builds.
 
+HELPFUL: Until Angular v22, Angular had a 6-month major release cycle, with 1-3 minor releases for each major release
+
 ## Support policy and schedule
 
 HELPFUL: Approximate dates are offered as general guidance and are subject to change.
 
 ### Release schedule
 
-<!-- Release schedule for upcoming versions is TBA. -->
-
 | Version | Date               |
 | :------ | :----------------- |
-| v21.1   | Week of 2026-01-12 |
-| v21.2   | Week of 2026-02-23 |
-| v22.0   | Week of 2026-06-01 |
+| v22.1   | Week of 2026-07-27 |
+| v22.2   | ~ September 2026   |
+| v22.3   | ~ November 2026    |
+| v22.4   | ~ January 2027     |
+| v22.5   | ~ March 2027       |
+| v23.0   | ~ June 2027        |
 
 ### Support window
 
-All major releases are typically supported for 18 months.
+All major releases are typically supported for 24 months.
 
 | Support stage     | Support Timing | Details                                                             |
 | :---------------- | :------------- | :------------------------------------------------------------------ |
-| Active            | 6 months       | Regularly-scheduled updates and patches are released                |
+| Active            | 12 months      | Regularly-scheduled updates and patches are released                |
 | Long-term \(LTS\) | 12 months      | Only [critical fixes and security patches](#lts-fixes) are released |
 
 ### Actively supported versions
@@ -95,7 +98,8 @@ The following table provides the status for Angular versions under support.
 
 | Version | Status | Released   | Active ends | LTS ends   |
 | :------ | :----- | :--------- | :---------- | :--------- |
-| ^21.0.0 | Active | 2025-11-19 | 2026-05-19  | 2027-05-19 |
+| ^22.0.0 | Active | 2026-06-03 | 2027-06     | 2028-06    |
+| ^21.0.0 | LTS    | 2025-11-19 | 2026-06-03  | 2027-06    |
 | ^20.0.0 | LTS    | 2025-05-28 | 2025-11-19  | 2026-11-28 |
 
 Angular versions v2 to v19 are no longer supported.
@@ -109,14 +113,14 @@ As a general rule, a fix is considered for an LTS version if it resolves one of:
 
 ## Deprecation policy
 
-When the Angular team intends to remove an API or feature, it will be marked as _deprecated_. This occurs when an API is obsolete, superseded by another API, or otherwise discontinued. Deprecated API remain available through their deprecated phase, which lasts a minimum two major versions (approximately one year).
+When the Angular team intends to remove an API or feature, it will be marked as _deprecated_. This occurs when an API is obsolete, superseded by another API, or otherwise discontinued. Deprecated API remain available through their deprecated phase, which lasts a minimum one major version (approximately one year).
 
 To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
 
 | Deprecation stages | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Announcement       | We announce deprecated APIs and features in the [change log](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log'). Deprecated APIs appear in the [documentation](api?status=8) with ~~strikethrough~~. When we announce a deprecation, we also announce a recommended update path. Additionally, all deprecated APIs are annotated with `@deprecated` in the corresponding documentation, which enables text editors and IDEs to provide hints if your project depends on them. |
-| Deprecation period | When an API or a feature is deprecated, it is still present in at least the next two major releases (period of at least 12 months). After that, deprecated APIs and features are candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature happens only in major release. Until a deprecated API or feature is removed, it is maintained according to the LTS support policy, meaning that only critical and security issues are fixed.        |
+| Deprecation period | When an API or a feature is deprecated, it is still present in at least the next major release (period of at least 12 months). After that, deprecated APIs and features are candidates for removal. A deprecation can be announced in any release, but the removal of a deprecated API or feature happens only in major release. Until a deprecated API or feature is removed, it is maintained according to the LTS support policy, meaning that only critical and security issues are fixed.             |
 | npm dependencies   | We only make npm dependency updates that require changes to your applications in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. This means that during minor Angular releases, npm dependency updates within Angular applications and libraries are optional.                                                                                              |
 
 ## Compatibility policy
diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md
index 8f309ee12e..6ea377db64 100644
--- a/adev-ja/src/content/reference/releases.md
+++ b/adev-ja/src/content/reference/releases.md
@@ -60,33 +60,36 @@ HELPFUL: 日付は一般的なガイダンスとして提供されており、
 
 一般的に、次のリリースサイクルが期待されます。
 
-- 6か月ごとにメジャーリリース
-- 各メジャーリリースに対して1～3回のマイナーリリース
+- 12か月ごとにメジャーリリース
+- 各メジャーリリースに対して4～6回のマイナーリリース
 - ほぼ毎週、パッチリリースとプレリリース（`next` または `rc`）のビルド
 
 このリリースの頻度は、熱心な開発者にとっては、新機能が完全に開発されコードレビューと統合テストプロセスを通過した時点で新機能にアクセスできます。一方で、Googleやプレリリースビルドを使用する他の開発者によって検証された後に機能を受け取ることを好む開発者にとっては、プラットフォームの安定性と信頼性を維持します。
 
+HELPFUL: Angular v22までは、Angularは6か月ごとのメジャーリリースサイクルで、各メジャーリリースに対して1～3回のマイナーリリースがありました
+
 ## サポートポリシーとスケジュール {#support-policy-and-schedule}
 
 HELPFUL: 概算の日付は一般的なガイダンスとして提供されており、変更される可能性があります。
 
 ### リリーススケジュール {#release-schedule}
 
-<!-- 今後のバージョンのリリーススケジュールは未定です。 -->
-
 | バージョン | 日付               |
 | :--------- | :----------------- |
-| v21.1      | Week of 2026-01-12 |
-| v21.2      | Week of 2026-02-23 |
-| v22.0      | Week of 2026-06-01 |
+| v22.1      | Week of 2026-07-27 |
+| v22.2      | ~ September 2026   |
+| v22.3      | ~ November 2026    |
+| v22.4      | ~ January 2027     |
+| v22.5      | ~ March 2027       |
+| v23.0      | ~ June 2027        |
 
 ### サポート期間 {#support-window}
 
-すべてのメジャーリリースは通常、18か月間サポートされます。
+すべてのメジャーリリースは通常、24か月間サポートされます。
 
 | サポートステージ      | サポートタイミング | 詳細                                                                    |
 | :-------------------- | :----------------- | :---------------------------------------------------------------------- |
-| アクティブ            | 6か月              | 定期的にスケジュールされた更新とパッチがリリースされます                |
+| アクティブ            | 12か月             | 定期的にスケジュールされた更新とパッチがリリースされます                |
 | 長期（LTS） | 12か月             | [重大な修正とセキュリティパッチのみ](#lts-fixes)がリリースされます |
 
 ### アクティブにサポートされているバージョン {#actively-supported-versions}
@@ -95,7 +98,8 @@ HELPFUL: 概算の日付は一般的なガイダンスとして提供されて
 
 | バージョン | ステータス | リリース済み | アクティブ終了 | LTS終了    |
 | :--------- | :--------- | :----------- | :------------- | :--------- |
-| ^21.0.0    | Active     | 2025-11-19   | 2026-05-19     | 2027-05-19 |
+| ^22.0.0    | Active     | 2026-06-03   | 2027-06        | 2028-06    |
+| ^21.0.0    | LTS        | 2025-11-19   | 2026-06-03     | 2027-06    |
 | ^20.0.0    | LTS        | 2025-05-28   | 2025-11-19     | 2026-11-28 |
 
 Angularバージョンv2からv19はサポートされなくなりました。
@@ -109,14 +113,14 @@ Angularバージョンv2からv19はサポートされなくなりました。
 
 ## 非推奨化ポリシー {#deprecation-policy}
 
-AngularチームがAPIや機能を削除する場合は、_非推奨_ とマークされます。これは、APIが陳腐化している、別のAPIに置き換えられている、またはその他の理由で廃止されている場合に発生します。非推奨のAPIは、非推奨フェーズの間は使用できます。非推奨フェーズは、少なくとも2つのメジャーバージョン（約1年）続きます。
+AngularチームがAPIや機能を削除する場合は、_非推奨_ とマークされます。これは、APIが陳腐化している、別のAPIに置き換えられている、またはその他の理由で廃止されている場合に発生します。非推奨のAPIは、非推奨フェーズの間は使用できます。非推奨フェーズは、少なくとも1つのメジャーバージョン（約1年）続きます。
 
 更新するための十分な時間と明確なパスがあることを確認するために、これが非推奨化ポリシーです。
 
 | 非推奨のステージ | 詳細                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 発表             | [変更ログ](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular 変更ログ')で、非推奨のAPIと機能を発表します。非推奨のAPIは、[ドキュメント](api?status=8)に~~取り消し線~~で表示されます。非推奨をアナウンスするときは、推奨される更新パスもアナウンスします。さらに、すべての非推奨のAPIには、対応するドキュメントに`@deprecated`が注釈付きで付けられています。これにより、テキストエディターやIDEは、プロジェクトがそれらに依存している場合にヒントを提供できます。 |
-| 非推奨期間       | APIや機能が非推奨になると、少なくとも次の2つのメジャーリリース（少なくとも12か月間）は引き続き存在します。その後、非推奨のAPIと機能は削除の対象となります。非推奨はどのリリースでも発表できますが、非推奨のAPIや機能の削除は、メジャーリリースでのみ行われます。非推奨のAPIや機能が削除されるまでは、LTSサポートポリシーに従って維持されます。つまり、重要な問題とセキュリティ問題のみが修正されます。                                             |
+| 非推奨期間       | APIや機能が非推奨になると、少なくとも次の1つのメジャーリリース（少なくとも12か月間）は引き続き存在します。その後、非推奨のAPIと機能は削除の対象となります。非推奨はどのリリースでも発表できますが、非推奨のAPIや機能の削除は、メジャーリリースでのみ行われます。非推奨のAPIや機能が削除されるまでは、LTSサポートポリシーに従って維持されます。つまり、重要な問題とセキュリティ問題のみが修正されます。                                             |
 | npm依存関係      | アプリケーションを変更する必要があるnpm依存関係の更新は、メジャーリリースでのみ行います。マイナーリリースでは、サポートされるバージョンを拡張することによってピア依存関係を更新しますが、将来のメジャーバージョンまでプロジェクトでこれらの依存関係を更新する必要はありません。つまり、マイナーなAngularリリース中は、Angularアプリケーションとライブラリ内のnpm依存関係の更新はオプションです。                                                       |
 
 ## 互換性ポリシー {#compatibility-policy}
diff --git a/adev-ja/src/content/reference/roadmap.en.md b/adev-ja/src/content/reference/roadmap.en.md
index 232a03153f..d41c809471 100644
--- a/adev-ja/src/content/reference/roadmap.en.md
+++ b/adev-ja/src/content/reference/roadmap.en.md
@@ -20,12 +20,13 @@ Start developing with the latest Angular features from our roadmap. This list re
 
 ### Available to experiment with
 
-- [Signal Forms](/guide/forms/signals/overview)
-- [Resource API](/guide/signals/resource)
-- [httpResource](/api/common/http/httpResource)
+- [Web MCP](/ai/webmcp)
 
 ### Production ready
 
+- [Signal Forms](/guide/forms/signals/overview)
+- [Resource API](/guide/signals/resource)
+- [httpResource](/api/common/http/httpResource)
 - [Zoneless change detection](/guide/zoneless)
 - [Linked Signal API](/guide/signals/linked-signal)
 - [Incremental hydration](/guide/incremental-hydration)
@@ -70,18 +71,8 @@ As part of this project, we'll explore the requirement space of cross framework
 
   </docs-card>
 
-  <docs-card title="Signal Forms" href="/guide/forms/signals/overview">
-  In Angular v21, we landed an experimental version of Signal Forms. This new approach allows developers to manage form state using signals, providing an ergonomic forms creation experience. Next, our plans include promoting Signal Forms to stable and enhancing interoperability with reactive forms - enabling teams to progressively migrate large forms at their own pace.
-  </docs-card>
-  <docs-card title="Reactivity">
-  We introduced experimental signal APIs, resource() and httpResource(), for flexible asynchronous data handling. We plan to promote these APIs to developer preview/stable based on community feedback.
-  We are also evaluating new APIs for unhandled use cases, considering community benefits and tradeoffs before implementation after careful consideration.
-  </docs-card>
-  <docs-card title="Change Detection">
-  With Zoneless being stable and default, we are also planning to shift the default change detection strategy to OnPush, to follow current best practices. [See the RFC discussion for details](https://github.com/angular/angular/discussions/66779).
-  </docs-card>
   <docs-card title="Components">
-  In Angular v21, we launched Angular Aria in developer preview, providing eight patterns for accessible, headless components. We're planning to promote these patterns to stable and introduce new patterns where needed . We want to provide developers with a solid foundation for developing their own components using Angular Aria - we provide the interactions and you bring the style that matches your design systems. Developers will have the choice of developing custom components with Angular Aria, use interaction patterns from the CDK, or use ready-made styled Material Components.
+  In Angular v21, we launched Angular Aria in developer preview, providing eight patterns for accessible, headless components. We're planning to promote these patterns to stable and introduce new patterns where needed. We want to provide developers with a solid foundation for developing their own components using Angular Aria - we provide the interactions and you bring the style that matches your design systems. Developers will have the choice of developing custom components with Angular Aria, use interaction patterns from the CDK, or use ready-made styled Material Components.
 
 For accessibility, we are continuously evaluating the components and patterns against accessibility standards such as WCAG and are working to fix any issues that arise from this process.
 </docs-card>
@@ -98,14 +89,29 @@ For accessibility, we are continuously evaluating the components and patterns ag
 ## Completed projects
 
 <docs-card-container>
-  <docs-card title="Signal debugging in Angular DevTools" link="Completed in 2025">
-  With the evolution of Signals in Angular, we are working on a better tooling for debugging them. High on the priority list is a UI for inspecting and debugging signals.
+
+  <docs-card title="Signal Forms" href="/guide/forms/signals/overview" link="Completed in 2026">
+  Signal Forms are now stable. This new approach allows developers to manage form state using signals, providing an ergonomic forms creation experience. We promoted Signal Forms to stable and enhanced interoperability with reactive forms - enabling teams to progressively migrate large forms at their own pace.
+  </docs-card>
+
+  <docs-card title="Reactivity" href="/guide/signals" link="Completed in 2026">
+  We introduced new signal APIs, `resource()` and `httpResource()`, for flexible asynchronous data handling. We promoted these APIs to developer stable.
+  </docs-card>
+
+  <docs-card title="Change Detection" href="/api/core/ChangeDetectionStrategy" link="Completed in 2026">
+  With Zoneless being stable and default, we set the default change detection strategy to `OnPush`, to follow current best practices. We also renamed `ChangeDetectionStrategy.Default` to `ChangeDetectionStrategy.Eager`.
+
+[See the RFC discussion for details](https://github.com/angular/angular/discussions/66779).
+</docs-card>
+
+  <docs-card title="Signal debugging in Angular DevTools" link="Completed in 2026">
+  We've added better tooling for debugging Signals using Angular DevTools. This change includes a new UI for inspecting and debugging signals.
   </docs-card>
-  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306" link="Completed in 2025">
-  We're working towards faster edit/refresh cycle by enabling hot module replacement.
 
-In Angular v19 we shipped initial support for CSS and template HMR and in v20 we graduated template HMR to stable. We'll continue collecting feedback to make sure we're addressing developers' needs before we mark this project as complete.
+  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306" link="Completed in 2025">
+  We're working towards faster edit/refresh cycle by enabling hot module replacement. In Angular v19 we shipped initial support for CSS and template HMR and in v20 we graduated template HMR to stable. We'll continue collecting feedback to make sure we're addressing developers' needs before we mark this project as complete.
 </docs-card>
+
 <docs-card title="Zoneless Angular"  link="Completed in Q4 2025">
 In v18 we shipped experimental zoneless support in Angular. It enables developers to use the framework without including zone.js in their bundle, which improves performance, debugging experience, and interoperability. As part of the initial release we also introduced zoneless support to the Angular CDK and Angular Material.
 
@@ -144,14 +150,14 @@ To make it easier for developers to use modern Angular APIs, we enabled integrat
 As part of this initiative, the language service automatically imports components and pipes in standalone and NgModule-based apps. Additionally, we've added a template diagnostic to highlight unused imports in standalone components, which should help make application bundles smaller.
 </docs-card>
 <docs-card title="Local template variables" link="Completed in Q3 2024">
-We've released the support for local template variables in Angular, see [`@let` docs](/api/core/@let) for additional information.
+We've released the support for local template variables in Angular, see [`@let`](/api/core/@let) for additional information.
 </docs-card>
 <docs-card title="Expand the customizability of Angular Material" link="Completed in Q2 2024" href="https://material.angular.dev/guide/theming">
 To provide better customization of our Angular Material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs.
 
 In v17.2 we shared experimental support for Angular Material 3 and in v18 we graduated it to stable.
 </docs-card>
-<docs-card title="Introduce deferred loading" link="Completed in Q2 2024" href="https://next.angular.dev/guide/templates/defer">
+<docs-card title="Introduce deferred loading" link="Completed in Q2 2024" href="guide/templates/defer">
 In v17 we shipped deferrable views in developer preview, which provide an ergonomic API for deferred code loading. In v18 we enabled deferrable views for library developers and graduated the API to stable.
 </docs-card>
 <docs-card title="iframe support in Angular DevTools" link="Completed in Q2 2024">
@@ -166,126 +172,126 @@ Angular.dev is the new site, domain and home for Angular development. The new si
 <docs-card title="Introduce built-in control flow" link="Completed in Q2 2024" href="guide/templates/control-flow">
 In v17 we shipped a developer preview version of a new control flow. It brings significant performance improvements and better ergonomics for template authoring. We also provided a migration of existing `*ngIf`, `*ngFor`, and `*ngSwitch` which you can run to move your project to the new implementation. As of v18 the built-in control flow is now stable.
 </docs-card>
-<docs-card title="Modernize getting started tutorial" link="Completed Q4 2023">
+<docs-card title="Modernize getting started tutorial" link="Completed in Q4 2023">
 Over the past two quarters, we developed a new [video](https://www.youtube.com/watch?v=xAT0lHYhHMY&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF) and [textual](/tutorials/learn-angular) tutorial based on standalone components.
 </docs-card>
-<docs-card title="Investigate modern bundlers" link="Completed Q4 2023" href="guide/hydration">
+<docs-card title="Investigate modern bundlers" link="Completed in Q4 2023" href="guide/hydration">
 In Angular v16, we released a developer preview of an esbuild-based builder with support for `ng build` and `ng serve`. The `ng serve` development server uses Vite and a multi-file compilation by esbuild and the Angular compiler. In v17 we graduated the build tooling from developer preview and enabled it by default for new projects.
 </docs-card>
-<docs-card title="Introduce dependency injection debugging APIs" link="Completed Q4 2023" href="tools/devtools">
+<docs-card title="Introduce dependency injection debugging APIs" link="Completed in Q4 2023" href="tools/devtools">
 To improve the debugging utilities of Angular and Angular DevTools, we'll work on APIs that provide access to the dependency injection runtime. As part of the project, we'll expose debugging methods that allow us to explore the injector hierarchy and the dependencies across their associated providers. As of v17, we shipped a feature that enables us to plug into the dependency injection life-cycle. We also launched a visualization of the injector tree and inspection of the providers declared inside each individual node,
 </docs-card>
-<docs-card title="Improve documentation and schematics for standalone components" link="Completed Q4 2023" href="essentials/components">
+<docs-card title="Improve documentation and schematics for standalone components" link="Completed in Q4 2023" href="essentials/components">
 We released a developer preview of the `ng new --standalone` schematics collection, allowing you to create apps free of NgModules. In v17 we switched the new application authoring format to standalone APIs and changed the documentation to reflect the recommendation. Additionally, we shipped schematics which support updating existing applications to standalone components, directives, and pipes. Even though NgModules will stick around for foreseeable future, we recommend you to explore the benefits of the new APIs to improve developer experience and benefit from the new features we build for them.
 </docs-card>
-<docs-card title="Explore hydration and server-side rendering improvements" link="Completed Q4 2023">
+<docs-card title="Explore hydration and server-side rendering improvements" link="Completed in Q4 2023">
 In v16, we released a developer preview of non-destructive full hydration, see the [hydration guide](guide/hydration) and the [blog post](https://blog.angular.dev/whats-next-for-server-side-rendering-in-angular-2a6f27662b67) for additional information. We're already seeing significant improvements to Core Web Vitals, including [LCP](https://web.dev/lcp) and [CLS](https://web.dev/cls). In lab tests, we consistently observed 45% better LCP of a real-world app.
 
 In v17 we launched hydration outside developer preview and did a series of improvements in the server-side rendering story, including: route discovery at runtime for SSG, up to 87% faster build times for hybrid rendered applications, prompt that enables hybrid rendering for new projects.
 </docs-card>
-<docs-card title="Non-destructive full app hydration" link="Completed Q1 2023" href="guide/hydration">
+<docs-card title="Non-destructive full app hydration" link="Completed in Q1 2023" href="guide/hydration">
 In v16, we released a developer preview of non-destructive full hydration, which allows Angular to reuse existing DOM nodes on a server-side rendered page, instead of re-creating an app from scratch. See additional information in the hydration guide.
 </docs-card>
-<docs-card title="Improvements in the image directive" link="Completed Q1 2023" href="guide/image-optimization">
+<docs-card title="Improvements in the image directive" link="Completed in Q1 2023" href="guide/image-optimization">
 We released the Angular image directive as stable in v15. We introduced a new fill mode feature that enables images to fit within their parent container rather than having explicit dimensions. Over the past two months, the Chrome Aurora team backported the directive to v12 and newer.
 </docs-card>
-<docs-card title="Documentation refactoring" link="Completed Q1 2023" href="https://angular.io">
+<docs-card title="Documentation refactoring" link="Completed in Q1 2023" href="https://angular.io">
 Ensure all existing documentation fits into a consistent set of content types. Update excessive use of tutorial-style documentation into independent topics. We want to ensure the content outside the main tutorials is self-sufficient without being tightly coupled to a series of guides. In Q2 2022, we refactored the template content and dependency injection. In Q1 2023, we improved the HTTP guides, and with this, we're putting the documentation refactoring project on hold.
 </docs-card>
-<docs-card title="Improve image performance" link="Completed Q4 2022" href="guide/image-optimization">
+<docs-card title="Improve image performance" link="Completed in Q4 2022" href="guide/image-optimization">
 The Aurora and the Angular teams are working on the implementation of an image directive that aims to improve Core Web Vitals. We shipped a stable version of the image directive in v15.
 </docs-card>
-<docs-card title="Modern CSS" link="Completed Q4 2022" href="https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127">
+<docs-card title="Modern CSS" link="Completed in Q4 2022" href="https://blog.angular.dev/modern-css-in-angular-layouts-4a259dca9127">
 The Web ecosystem evolves constantly and we want to reflect the latest modern standards in Angular. In this project we aim to provide guidelines on using modern CSS features in Angular to ensure developers follow best practices for layout, styling, etc. We shared official guidelines for layout and as part of the initiative stopped publishing flex layout.
 </docs-card>
-<docs-card title="Support adding directives to host elements" link="Completed Q4 2022" href="guide/directives/directive-composition-api">
+<docs-card title="Support adding directives to host elements" link="Completed in Q4 2022" href="guide/directives/directive-composition-api">
 A long-standing feature request is to add the ability to add directives to host elements. The feature lets developers augment their own components with additional behaviors without using inheritance. In v15 we shipped our directive composition API, which enables enhancing host elements with directives.
 </docs-card>
-<docs-card title="Better stack traces" link="Completed Q4 2022" href="https://developer.chrome.com/blog/devtools-better-angular-debugging/">
+<docs-card title="Better stack traces" link="Completed in Q4 2022" href="https://developer.chrome.com/blog/devtools-better-angular-debugging/">
 The Angular and the Chrome DevTools are working together to enable more readable stack traces for error messages. In v15 we released improved relevant and linked stack traces. As a lower priority initiative, we'll be exploring how to make the stack traces friendlier by providing more accurate call frame names for templates.
 </docs-card>
-<docs-card title="Enhanced Angular Material components by integrating MDC Web" link="Completed Q4 2022" href="https://material.angular.dev/guide/mdc-migration">
+<docs-card title="Enhanced Angular Material components by integrating MDC Web" link="Completed in Q4 2022" href="https://material.angular.dev/guide/mdc-migration">
 MDC Web is a library created by the Google Material Design team that provides reusable primitives for building Material Design components. The Angular team is incorporating these primitives into Angular Material. Using MDC Web aligns Angular Material more closely with the Material Design specification, expands accessibility, improves component quality, and improves the velocity of our team.
 </docs-card>
-<docs-card title="Implement APIs for optional NgModules" link="Completed Q4 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+<docs-card title="Implement APIs for optional NgModules" link="Completed in Q4 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
 In the process of making Angular simpler, we are working on introducing APIs that allow developers to initialize apps, instantiate components, and use the router without NgModules. Angular v14 introduces developer preview of the APIs for standalone components, directives, and pipes. In the next few quarters we'll collect feedback from developers and finalize the project making the APIs stable. As the next step we will work on improving use cases such as TestBed, Angular elements, etc.
 </docs-card>
-<docs-card title="Allow binding to protected fields in templates" link="Completed Q2 2022" href="guide/templates/binding">
+<docs-card title="Allow binding to protected fields in templates" link="Completed in Q2 2022" href="guide/templates/binding">
 To improve the encapsulation of Angular components we enabled binding to protected members of the component instance. This way you'll no longer have to expose a field or a method as public to use it inside your templates.
 </docs-card>
-<docs-card title="Publish guides on advanced concepts" link="Completed Q2 2022" href="https://angular.io/guide/change-detection">
+<docs-card title="Publish guides on advanced concepts" link="Completed in Q2 2022" href="https://angular.io/guide/change-detection">
 Develop and publish an in-depth guide on change detection. Develop content for performance profiling of Angular apps. Cover how change detection interacts with Zone.js and explain when it gets triggered, how to profile its duration, as well as common practices for performance optimization.
 </docs-card>
-<docs-card title="Rollout strict typings for @angular/forms" link="Completed Q2 2022" href="guide/forms/typed-forms">
+<docs-card title="Rollout strict typings for @angular/forms" link="Completed in Q2 2022" href="guide/forms/typed-forms">
 In Q4 2021 we designed a solution for introducing strict typings for forms and in Q1 2022 we concluded the corresponding request for comments. Currently, we are implementing a rollout strategy with an automated migration step that will enable the improvements for existing projects. We are first testing the solution with more than 2,500 projects at Google to ensure a smooth migration path for the external community.
 </docs-card>
-<docs-card title="Remove legacy View Engine" link="Completed Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+<docs-card title="Remove legacy View Engine" link="Completed in Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
 After the transition of all our internal tooling to Ivy is completed, we will remove the legacy View Engine for reduced Angular conceptual overhead, smaller package size, lower maintenance cost, and lower codebase complexity.
 </docs-card>
-<docs-card title="Simplified Angular mental model with optional NgModules" link="Completed Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
+<docs-card title="Simplified Angular mental model with optional NgModules" link="Completed in Q1 2022" href="https://blog.angular.dev/angular-v15-is-now-available-df7be7f2f4c8">
 To simplify the Angular mental model and learning journey, we will be working on making NgModules optional. This work lets developers develop standalone components and implement an alternative API for declaring the compilation scope of the component. We kicked this project off with high-level design discussions that we captured in an RFC.
 </docs-card>
-<docs-card title="Design strict typing for @angular/forms" link="Completed Q1 2022" href="guide/forms/typed-forms">
+<docs-card title="Design strict typing for @angular/forms" link="Completed in Q1 2022" href="guide/forms/typed-forms">
 We will work on finding a way to implement stricter type checking for reactive forms with minimal backward incompatible implications. This way, we let developers catch more issues during development time, enable better text editor and IDE support, and improve the type checking for reactive forms.
 </docs-card>
-<docs-card title="Improve integration of Angular DevTools with framework" link="Completed Q1 2022" href="tools/devtools">
+<docs-card title="Improve integration of Angular DevTools with framework" link="Completed in Q1 2022" href="tools/devtools">
 To improve the integration of Angular DevTools with the framework, we are working on moving the codebase to the angular/angular monorepository. This includes transitioning Angular DevTools to Bazel and integrating it into the existing processes and CI pipeline.
 </docs-card>
-<docs-card title="Launch advanced compiler diagnostics" link="Completed Q1 2022" href="extended-diagnostics">
+<docs-card title="Launch advanced compiler diagnostics" link="Completed in Q1 2022" href="extended-diagnostics">
 Extend the diagnostics of the Angular compiler outside type checking. Introduce other correctness and conformance checks to further guarantee correctness and best practices.
 </docs-card>
-<docs-card title="Update our e2e testing strategy" link="Completed Q3 2021" href="guide/testing">
+<docs-card title="Update our e2e testing strategy" link="Completed in Q3 2021" href="guide/testing">
 To ensure we provide a future-proof e2e testing strategy, we want to evaluate the state of Protractor, community innovations, e2e best practices, and explore novel opportunities. As first steps of the effort, we shared an RFC and worked with partners to ensure smooth integration between the Angular CLI and state-of-the-art tooling for e2e testing. As the next step, we need to finalize the recommendations and compile a list of resources for the transition.
 </docs-card>
-<docs-card title="Angular libraries use Ivy" link="Completed Q3 2021" href="tools/libraries">
+<docs-card title="Angular libraries use Ivy" link="Completed in Q3 2021" href="tools/libraries">
 Earlier in 2020, we shared an RFC for Ivy library distribution. After invaluable feedback from the community, we developed a design of the project. We are now investing in the development of Ivy library distribution, including an update of the library package format to use Ivy compilation, unblock the deprecation of the View Engine library format, and ngcc.
 </docs-card>
-<docs-card title="Improve test times and debugging with automatic test environment tear down" link="Completed Q3 2021" href="guide/testing">
+<docs-card title="Improve test times and debugging with automatic test environment tear down" link="Completed in Q3 2021" href="guide/testing">
 To improve test time and create better isolation across tests, we want to change TestBed to automatically clean up and tear down the test environment after each test run.
 </docs-card>
-<docs-card title="Deprecate and remove IE11 support" link="Completed Q3 2021" href="https://github.com/angular/angular/issues/41840">
+<docs-card title="Deprecate and remove IE11 support" link="Completed in Q3 2021" href="https://github.com/angular/angular/issues/41840">
 Internet Explorer 11 (IE11) has been preventing Angular from taking advantage of some of the modern features of the Web platform. As part of this project we are going to deprecate and remove IE11 support to open the path for modern features that evergreen browsers provide. We ran an RFC to collect feedback from the community and decide on next steps to move forward.
 </docs-card>
-<docs-card title="Leverage ES2017+ as the default output language" link="Completed Q3 2021" href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">
+<docs-card title="Leverage ES2017+ as the default output language" link="Completed in Q3 2021" href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html">
 Supporting modern browsers lets us take advantage of the more compact, expressive, and performant new syntax of JavaScript. As part of this project we will investigate what the blockers are to moving forward with this effort, and take the steps to enable it.
 </docs-card>
-<docs-card title="Accelerated debugging and performance profiling with Angular DevTools" link="Completed Q2 2021" href="tools/devtools">
+<docs-card title="Accelerated debugging and performance profiling with Angular DevTools" link="Completed in Q2 2021" href="tools/devtools">
 We are working on development tooling for Angular that provides utilities for debugging and performance profiling. This project aims to help developers understand the component structure and the change detection in an Angular app.
 </docs-card>
-<docs-card title="Streamline releases with consolidated Angular versioning & branching" link="Completed Q2 2021" href="reference/releases">
+<docs-card title="Streamline releases with consolidated Angular versioning & branching" link="Completed in Q2 2021" href="reference/releases">
 We want to consolidate release management tooling between the multiple GitHub repositories for Angular (angular/angular, angular/angular-cli, and angular/components). This effort lets us reuse infrastructure, unify and simplify processes, and improve the reliability of our release process.
 </docs-card>
-<docs-card title="Higher developer consistency with commit message standardization" link="Completed Q2 2021" href="https://github.com/angular/angular">
+<docs-card title="Higher developer consistency with commit message standardization" link="Completed in Q2 2021" href="https://github.com/angular/angular">
 We want to unify commit message requirements and conformance across Angular repositories (angular/angular, angular/components, and angular/angular-cli) to bring consistency to our development process and reuse infrastructure tooling.
 </docs-card>
-<docs-card title="Transition the Angular language service to Ivy" link="Completed Q2 2021" href="tools/language-service">
+<docs-card title="Transition the Angular language service to Ivy" link="Completed in Q2 2021" href="tools/language-service">
 The goal of this project is to improve the experience and remove legacy dependency by transitioning the language service to Ivy. Today the language service still uses the View Engine compiler and type checking, even for Ivy apps. We want to use the Ivy template parser and improved type checking for the Angular Language service to match app behavior. This migration is also a step towards unblocking the removal of View Engine, which will simplify Angular, reduce the npm package size, and improve the maintainability of the framework.
 </docs-card>
-<docs-card title="Increased security with native Trusted Types in Angular" link="Completed Q2 2021" href="best-practices/security">
+<docs-card title="Increased security with native Trusted Types in Angular" link="Completed in Q2 2021" href="best-practices/security">
 In collaboration with the Google security team, we are adding support for the new Trusted Types API. This web platform API helps developers build more secure web apps.
 </docs-card>
-<docs-card title="Optimized build speed and bundle sizes with Angular CLI webpack 5" link="Completed Q2 2021" href="tools/cli/build">
+<docs-card title="Optimized build speed and bundle sizes with Angular CLI webpack 5" link="Completed in Q2 2021" href="tools/cli/build">
 As part of the v11 release, we introduced an opt-in preview of webpack 5 in the Angular CLI. To ensure stability, we will continue iterating on the implementation to enable build speed and bundle size improvements.
 </docs-card>
-<docs-card title="Faster apps by inlining critical styles in Universal apps" link="Completed Q1 2021" href="guide/ssr">
+<docs-card title="Faster apps by inlining critical styles in Universal apps" link="Completed in Q1 2021" href="guide/ssr">
 Loading external stylesheets is a blocking operation, which means that the browser cannot start rendering your app until it loads all the referenced CSS. Having render-blocking resources in the header of a page can significantly impact its load performance, for example, its first contentful paint. To make apps faster, we have been collaborating with the Google Chrome team on inlining critical CSS and loading the rest of the styles asynchronously.
 </docs-card>
-<docs-card title="Improve debugging with better Angular error messages" link="Completed Q1 2021" href="errors">
+<docs-card title="Improve debugging with better Angular error messages" link="Completed in Q1 2021" href="errors">
 Error messages often bring limited actionable information to help developers resolve them. We have been working on making error messages more discoverable by adding associated codes, developing guides, and other materials to ensure a smoother debugging experience.
 </docs-card>
-<docs-card title="Improved developer onboarding with refreshed introductory documentation" link="Completed Q1 2021" href="tutorials">
+<docs-card title="Improved developer onboarding with refreshed introductory documentation" link="Completed in Q1 2021" href="tutorials">
 We will redefine the user learning journeys and refresh the introductory documentation. We will clearly state the benefits of Angular, how to explore its capabilities and provide guidance so developers can become proficient with the framework in as little time as possible.
 </docs-card>
-<docs-card title="Expand component harnesses best practices" link="Completed Q1 2021" href="https://material.angular.dev/guide/using-component-harnesses">
+<docs-card title="Expand component harnesses best practices" link="Completed in Q1 2021" href="https://material.angular.dev/guide/using-component-harnesses">
 Angular CDK introduced the concept of component test harnesses to Angular in version 9. Test harnesses let component authors create supported APIs for testing component interactions. We are continuing to improve this harness infrastructure and clarifying the best practices around using harnesses. We are also working to drive more harness adoption inside of Google.
 </docs-card>
-<docs-card title="Author a guide for content projection" link="Completed Q2 2021" href="https://angular.io/docs">
+<docs-card title="Author a guide for content projection" link="Completed in Q2 2021" href="https://angular.io/docs">
 Content projection is a core Angular concept that does not have the presence it deserves in the documentation. As part of this project we want to identify the core use cases and concepts for content projection and document them.
 </docs-card>
-<docs-card title="Migrate to ESLint" link="Completed Q4 2020" href="tools/cli">
+<docs-card title="Migrate to ESLint" link="Completed in Q4 2020" href="tools/cli">
 With the deprecation of TSLint we will be moving to ESLint. As part of the process, we will work on ensuring backward compatibility with our current recommended TSLint configuration, implement a migration strategy for existing Angular apps and introduce new tooling to the Angular CLI toolchain.
 </docs-card>
-<docs-card title="Operation Bye Bye Backlog (also known as Operation Byelog)" link="Completed Q4 2020" href="https://github.com/angular/angular/issues">
+<docs-card title="Operation Bye Bye Backlog (also known as Operation Byelog)" link="Completed in Q4 2020" href="https://github.com/angular/angular/issues">
 We are actively investing up to 50% of our engineering capacity on triaging issues and PRs until we have a clear understanding of broader community needs. After that, we will commit up to 20% of our engineering capacity to keep up with new submissions promptly.
 </docs-card>
 </docs-card-container>
diff --git a/adev-ja/src/content/reference/roadmap.md b/adev-ja/src/content/reference/roadmap.md
index 333cb35f23..a6f4c14742 100644
--- a/adev-ja/src/content/reference/roadmap.md
+++ b/adev-ja/src/content/reference/roadmap.md
@@ -20,12 +20,13 @@
 
 ### 実験的に利用可能
 
-- [Signal Forms](/guide/forms/signals/overview)
-- [Resource API](/guide/signals/resource)
-- [httpResource](/api/common/http/httpResource)
+- [Web MCP](/ai/webmcp)
 
 ### 本番環境向け
 
+- [Signal Forms](/guide/forms/signals/overview)
+- [Resource API](/guide/signals/resource)
+- [httpResource](/api/common/http/httpResource)
 - [Zoneless change detection](/guide/zoneless)
 - [Linked Signal API](/guide/signals/linked-signal)
 - [Incremental hydration](/guide/incremental-hydration)
@@ -70,18 +71,8 @@ As part of this project, we'll explore the requirement space of cross framework
 
   </docs-card>
 
-  <docs-card title="Signal Forms" href="/guide/forms/signals/overview">
-  In Angular v21, we landed an experimental version of Signal Forms. This new approach allows developers to manage form state using signals, providing an ergonomic forms creation experience. Next, our plans include promoting Signal Forms to stable and enhancing interoperability with reactive forms - enabling teams to progressively migrate large forms at their own pace.
-  </docs-card>
-  <docs-card title="Reactivity">
-  We introduced experimental signal APIs, resource() and httpResource(), for flexible asynchronous data handling. We plan to promote these APIs to developer preview/stable based on community feedback.
-  We are also evaluating new APIs for unhandled use cases, considering community benefits and tradeoffs before implementation after careful consideration.
-  </docs-card>
-  <docs-card title="Change Detection">
-  With Zoneless being stable and default, we are also planning to shift the default change detection strategy to OnPush, to follow current best practices. [See the RFC discussion for details](https://github.com/angular/angular/discussions/66779).
-  </docs-card>
   <docs-card title="Components">
-  In Angular v21, we launched Angular Aria in developer preview, providing eight patterns for accessible, headless components. We're planning to promote these patterns to stable and introduce new patterns where needed . We want to provide developers with a solid foundation for developing their own components using Angular Aria - we provide the interactions and you bring the style that matches your design systems. Developers will have the choice of developing custom components with Angular Aria, use interaction patterns from the CDK, or use ready-made styled Material Components.
+  In Angular v21, we launched Angular Aria in developer preview, providing eight patterns for accessible, headless components. We're planning to promote these patterns to stable and introduce new patterns where needed. We want to provide developers with a solid foundation for developing their own components using Angular Aria - we provide the interactions and you bring the style that matches your design systems. Developers will have the choice of developing custom components with Angular Aria, use interaction patterns from the CDK, or use ready-made styled Material Components.
 
 For accessibility, we are continuously evaluating the components and patterns against accessibility standards such as WCAG and are working to fix any issues that arise from this process.
 </docs-card>
@@ -98,14 +89,29 @@ For accessibility, we are continuously evaluating the components and patterns ag
 ## 完了したプロジェクト
 
 <docs-card-container>
-  <docs-card title="Signal debugging in Angular DevTools" link="Completed in 2025">
-  Angularのシグナルの進化に伴い、シグナルのデバッグを支援するより良いツールの開発に取り組んでいます。最優先事項の1つは、シグナルの状態を確認・デバッグできるUIの提供です。
+
+  <docs-card title="Signal Forms" href="/guide/forms/signals/overview" link="Completed in 2026">
+  Signal Forms are now stable. This new approach allows developers to manage form state using signals, providing an ergonomic forms creation experience. We promoted Signal Forms to stable and enhanced interoperability with reactive forms - enabling teams to progressively migrate large forms at their own pace.
+  </docs-card>
+
+  <docs-card title="Reactivity" href="/guide/signals" link="Completed in 2026">
+  We introduced new signal APIs, `resource()` and `httpResource()`, for flexible asynchronous data handling. We promoted these APIs to developer stable.
+  </docs-card>
+
+  <docs-card title="Change Detection" href="/api/core/ChangeDetectionStrategy" link="Completed in 2026">
+  With Zoneless being stable and default, we set the default change detection strategy to `OnPush`, to follow current best practices. We also renamed `ChangeDetectionStrategy.Default` to `ChangeDetectionStrategy.Eager`.
+
+[See the RFC discussion for details](https://github.com/angular/angular/discussions/66779).
+</docs-card>
+
+  <docs-card title="Signal debugging in Angular DevTools" link="Completed in 2026">
+  We've added better tooling for debugging Signals using Angular DevTools. This change includes a new UI for inspecting and debugging signals.
   </docs-card>
-  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306" link="Completed in 2025">
-  ホットモジュールリプレースメントを有効にすることで、編集/リフレッシュサイクルを高速化することに取り組んでいます。
 
-Angular v19では、CSSとテンプレートのHMRの初期サポートを提供し、v20ではテンプレートのHMRを安定版に卒業させました。このプロジェクトを完了としてマークする前に、開発者のニーズに対応していることを確認するために、フィードバックを収集し続けます。
+  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306" link="Completed in 2025">
+  ホットモジュールリプレースメントを有効にすることで、編集/リフレッシュサイクルを高速化することに取り組んでいます。Angular v19では、CSSとテンプレートのHMRの初期サポートを提供し、v20ではテンプレートのHMRを安定版に卒業させました。このプロジェクトを完了としてマークする前に、開発者のニーズに対応していることを確認するために、フィードバックを収集し続けます。
 </docs-card>
+
 <docs-card title="Zoneless Angular"  link="Completed in Q4 2025">
 v18では、Angularに実験的なZonelessサポートを提供しました。これにより、バンドルにzone.jsを含めずにフレームワークを使用できるようになり、パフォーマンス、デバッグエクスペリエンス、相互運用性が向上します。初期リリースの一環として、Angular CDKとAngular MaterialにもZonelessサポートを導入しました。
 
@@ -144,14 +150,14 @@ To make it easier for developers to use modern Angular APIs, we enabled integrat
 As part of this initiative, the language service automatically imports components and pipes in standalone and NgModule-based apps. Additionally, we've added a template diagnostic to highlight unused imports in standalone components, which should help make application bundles smaller.
 </docs-card>
 <docs-card title="Local template variables" link="Completed in Q3 2024">
-We've released the support for local template variables in Angular, see [`@let` docs](/api/core/@let) for additional information.
+We've released the support for local template variables in Angular, see [`@let`](/api/core/@let) for additional information.
 </docs-card>
 <docs-card title="Angular Materialのカスタマイズを拡張する" link="2024年第2四半期に完了" href="https://material.angular.dev/guide/theming">
 Angular Materialコンポーネントのカスタマイズを向上させ、Material 3機能を有効にするために、トークンベースのテーマAPIを定義するためにGoogleのMaterial Designチームと協力しています。
 
 v17.2では、Angular Material 3の実験的なサポートを共有し、v18では安定版に卒業しました。
 </docs-card>
-<docs-card title="遅延読み込みを導入する" link="2024年第2四半期に完了" href="https://next.angular.dev/guide/templates/defer">
+<docs-card title="遅延読み込みを導入する" link="2024年第2四半期に完了" href="guide/templates/defer">
 v17では、遅延コード読み込みのための使い慣れたAPIを提供する、開発者プレビューで遅延表示を提供しました。v18では、ライブラリ開発者向けの遅延表示を有効にし、APIを安定版に卒業させました。
 </docs-card>
 <docs-card title="Angular DevToolsのiframeサポート" link="2024年第2四半期に完了">
diff --git a/adev-ja/src/content/reference/versions.en.md b/adev-ja/src/content/reference/versions.en.md
index 1ae7ac8ba9..e273fb2166 100644
--- a/adev-ja/src/content/reference/versions.en.md
+++ b/adev-ja/src/content/reference/versions.en.md
@@ -86,9 +86,9 @@ targets supporting approximately 95% of web users.
 | v21     | 2025-10-20    | [Browser Set][browsers-v21] |
 | v20     | 2025-04-30    | [Browser Set][browsers-v20] |
 
-[browsers-v22]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2026-05-07&includeDownstream=false
-[browsers-v21]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2025-10-20&includeDownstream=false
-[browsers-v20]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2025-04-30&includeDownstream=false
+[browsers-v22]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2026-05-07&includeDownstream=false
+[browsers-v21]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2025-10-20&includeDownstream=false
+[browsers-v20]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2025-04-30&includeDownstream=false
 
 Angular versions prior to v20 support the following specific browser versions:
 
diff --git a/adev-ja/src/content/reference/versions.md b/adev-ja/src/content/reference/versions.md
index 9e1600cba3..76b355d49f 100644
--- a/adev-ja/src/content/reference/versions.md
+++ b/adev-ja/src/content/reference/versions.md
@@ -86,9 +86,9 @@ Angularは、ブラウザサポートを定義するために["widely available"
 | v21     | 2025-10-20    | [Browser Set][browsers-v21] |
 | v20     | 2025-04-30    | [Browser Set][browsers-v20] |
 
-[browsers-v22]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2026-05-07&includeDownstream=false
-[browsers-v21]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2025-10-20&includeDownstream=false
-[browsers-v20]: https://web-platform-dx.github.io/web-features/supported-browsers/?widelyAvailableOnDate=2025-04-30&includeDownstream=false
+[browsers-v22]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2026-05-07&includeDownstream=false
+[browsers-v21]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2025-10-20&includeDownstream=false
+[browsers-v20]: https://web-platform-dx.github.io/supported-browsers/?widelyAvailableOnDate=2025-04-30&includeDownstream=false
 
 v20より前のAngularバージョンは、次の特定のブラウザバージョンをサポートしています:
 
diff --git a/adev-ja/src/content/tools/cli/aot-compiler.md b/adev-ja/src/content/tools/cli/aot-compiler.md
index 3249387d58..6e0cb8d6b7 100644
--- a/adev-ja/src/content/tools/cli/aot-compiler.md
+++ b/adev-ja/src/content/tools/cli/aot-compiler.md
@@ -91,7 +91,7 @@ At the same time, the AOT **collector** analyzes the metadata recorded in the An
 
 You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
 
-HELPFUL: Angular's [schema.ts](https://github.com/angular/angular/blob/main/packages/compiler-cli/src/metadata/schema.ts) describes the JSON format as a collection of TypeScript interfaces.
+HELPFUL: Angular's [schema.ts](https://github.com/angular/angular/blob/12.2.x/packages/compiler-cli/src/metadata/schema.ts) describes the JSON format as a collection of TypeScript interfaces.
 
 ### Expression syntax limitations
 
diff --git a/adev-ja/src/content/tools/cli/build-system-migration.md b/adev-ja/src/content/tools/cli/build-system-migration.md
index a4cb268fab..193cbf8faa 100644
--- a/adev-ja/src/content/tools/cli/build-system-migration.md
+++ b/adev-ja/src/content/tools/cli/build-system-migration.md
@@ -12,8 +12,8 @@ This new build system is stable and fully supported for use with Angular applica
 You can migrate to the new build system with applications that use the `browser` builder.
 If using a custom builder, please refer to the documentation for that builder on possible migration options.
 
-IMPORTANT: The existing webpack-based build system is still considered stable and fully supported.
-Applications can continue to use the `browser` builder and projects can opt-out of migrating during an update.
+IMPORTANT: The existing webpack-based build system and `browser` builder are deprecated.
+Applications can temporarily continue to use the `browser` builder and projects can opt-out of migrating during an update, but the Angular team recommends migrating to the new build system.
 
 ## For new applications
 
diff --git a/adev-ja/src/content/tools/cli/cli-builder.md b/adev-ja/src/content/tools/cli/cli-builder.md
index cf4f3d01bf..52705a7b0d 100644
--- a/adev-ja/src/content/tools/cli/cli-builder.md
+++ b/adev-ja/src/content/tools/cli/cli-builder.md
@@ -106,7 +106,7 @@ You can provide the following schema for type validation of these values.
 
 ```json {header: "schema.json"}
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "type": "object",
   "properties": {
     "source": {
@@ -120,7 +120,7 @@ You can provide the following schema for type validation of these values.
 ```
 
 HELPFUL: This is a minimal example, but the use of a schema for validation can be very powerful.
-For more information, see the [JSON schemas website](http://json-schema.org).
+For more information, see the [JSON schemas website](https://json-schema.org).
 
 To link our builder implementation with its schema and name, you need to create a _builder definition_ file, which you can point to in `package.json`.
 
diff --git a/adev-ja/src/content/tools/cli/deployment.en.md b/adev-ja/src/content/tools/cli/deployment.en.md
index 22d72563ba..a45b78fb7d 100644
--- a/adev-ja/src/content/tools/cli/deployment.en.md
+++ b/adev-ja/src/content/tools/cli/deployment.en.md
@@ -30,10 +30,10 @@ You can read more by following the links associated with the package names below
 
 | Deployment to                                                     | Setup Command                                                                               |
 | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
-| [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://npmjs.org/package/@angular/fire)                           |
+| [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://www.npmjs.com/package/@angular/fire)                       |
 | [Vercel](https://vercel.com/solutions/angular)                    | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular)        |
-| [Netlify](https://www.netlify.com)                                | [`ng add @netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy)       |
-| [GitHub Pages](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)               |
+| [Netlify](https://www.netlify.com)                                | [`ng add @netlify-builder/deploy`](https://www.npmjs.com/package/@netlify-builder/deploy)   |
+| [GitHub Pages](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://www.npmjs.com/package/angular-cli-ghpages)           |
 | [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`ng add @jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |
 
 If you're deploying to a self-managed server or there's no builder for your favorite cloud platform, you can either [create a builder](tools/cli/cli-builder) that allows you to use the `ng deploy` command, or read through this guide to learn how to manually deploy your application.
diff --git a/adev-ja/src/content/tools/cli/deployment.md b/adev-ja/src/content/tools/cli/deployment.md
index ef38723426..c003bc8a95 100644
--- a/adev-ja/src/content/tools/cli/deployment.md
+++ b/adev-ja/src/content/tools/cli/deployment.md
@@ -30,10 +30,10 @@ ng deploy
 
 | デプロイ先                                                        | セットアップコマンド                                                                        |
 | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
-| [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://npmjs.org/package/@angular/fire)                           |
+| [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://www.npmjs.com/package/@angular/fire)                       |
 | [Vercel](https://vercel.com/solutions/angular)                    | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular)        |
-| [Netlify](https://www.netlify.com)                                | [`ng add @netlify-builder/deploy`](https://npmjs.org/package/@netlify-builder/deploy)       |
-| [GitHub Pages](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages)               |
+| [Netlify](https://www.netlify.com)                                | [`ng add @netlify-builder/deploy`](https://www.npmjs.com/package/@netlify-builder/deploy)   |
+| [GitHub Pages](https://pages.github.com)                          | [`ng add angular-cli-ghpages`](https://www.npmjs.com/package/angular-cli-ghpages)           |
 | [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`ng add @jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |
 
 もし自己管理されたサーバーにデプロイする場合や、お気に入りのクラウドプラットフォームのビルダーがない場合、`ng deploy`コマンドを使うことを許容する[ビルダーを作成する](tools/cli/cli-builder)か、アプリケーションを手動でデプロイする方法を学ぶためのこのガイドを読み通すか、どちらかの方法を取る事が可能です。
diff --git a/adev-ja/src/content/tools/cli/schematics-authoring.md b/adev-ja/src/content/tools/cli/schematics-authoring.md
index 074e3968a9..51c869cf13 100644
--- a/adev-ja/src/content/tools/cli/schematics-authoring.md
+++ b/adev-ja/src/content/tools/cli/schematics-authoring.md
@@ -37,12 +37,12 @@ When you create a new blank schematic with the [Schematics CLI](#schematics-cli)
 A `RuleFactory` object defines a higher-order function that creates a `Rule`.
 
 ```ts {header: "index.ts"}
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
 
 // You don't have to export the function as default.
 // You can also have more than one rule factory per file.
-export function helloWorld(\_options: any): Rule {
-   return (tree: Tree,\_context: SchematicContext) => {
+export function helloWorld(_options: any): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
     return tree;
   };
 }
diff --git a/adev-ja/src/content/tools/cli/schematics-for-libraries.md b/adev-ja/src/content/tools/cli/schematics-for-libraries.md
index 39f9a8ab84..ff6eeb418d 100644
--- a/adev-ja/src/content/tools/cli/schematics-for-libraries.md
+++ b/adev-ja/src/content/tools/cli/schematics-for-libraries.md
@@ -36,10 +36,17 @@ A schematic for the `ng add` command can enhance the initial installation proces
 The following steps define this type of schematic.
 
 1. Go to the `<lib-root>/schematics/ng-add` folder.
-1. Create the main file, `index.ts`.
-1. Open `index.ts` and add the source code for your schematic factory function.
+1. Create a `schema.json` file to define the options that the schematic accepts.
 
-<docs-code header="projects/my-lib/schematics/ng-add/index.ts (ng-add Rule Factory)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"/>
+   <docs-code header="projects/my-lib/schematics/ng-add/schema.json (ng-add Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/schema.json"/>
+
+1. Create a `schema.ts` file to define an interface for the options defined in the `schema.json` file.
+
+   <docs-code header="projects/my-lib/schematics/ng-add/schema.ts (ng-add Schema Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/schema.ts"/>
+
+1. Create the main file, `index.ts`, and add the source code for your schematic factory function.
+
+   <docs-code header="projects/my-lib/schematics/ng-add/index.ts (ng-add Rule Factory)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"/>
 
 The Angular CLI will install the latest version of the library automatically, and this example is taking it a step further by adding the `MyLibModule` to the root of the application. The `addRootImport` function accepts a callback that needs to return a code block. You can write any code inside of the string tagged with the `code` function and any external symbol have to be wrapped with the `external` function to ensure that the appropriate import statements are generated.
 
diff --git a/adev-ja/src/content/tools/cli/schematics.md b/adev-ja/src/content/tools/cli/schematics.md
index dc4aac3463..9b4cb9d3a7 100644
--- a/adev-ja/src/content/tools/cli/schematics.md
+++ b/adev-ja/src/content/tools/cli/schematics.md
@@ -107,7 +107,7 @@ We analyzed your package.json, there are some packages to update:
 
 If you pass the command a set of libraries to update, it updates those libraries, their peer dependencies, and the peer dependencies that depend on them.
 
-HELPFUL: If there are inconsistencies \(for example, if peer dependencies cannot be matched by a simple [semver](https://semver.io) range\), the command generates an error and does not change anything in the workspace.
+HELPFUL: If there are inconsistencies \(for example, if peer dependencies cannot be matched by a simple [semver](https://semver.org) range\), the command generates an error and does not change anything in the workspace.
 
 We recommend that you do not force an update of all dependencies by default.
 Try updating specific dependencies first.
diff --git a/adev-ja/src/content/tools/libraries/angular-package-format.md b/adev-ja/src/content/tools/libraries/angular-package-format.md
index 912dbbbece..51572a79e8 100644
--- a/adev-ja/src/content/tools/libraries/angular-package-format.md
+++ b/adev-ja/src/content/tools/libraries/angular-package-format.md
@@ -243,7 +243,7 @@ The end result of these optimizations should be smaller bundle size and better c
 This optimization can break your code if it contains non-local side-effects - this is however not common in Angular applications and it's usually a sign of bad design.
 The recommendation is for all packages to claim the side-effect free status by setting the `sideEffects` property to `false`, and that developers follow the [Angular Style Guide](/style-guide) which naturally results in code without non-local side-effects.
 
-More info: [webpack docs on side effects](https://github.com/webpack/webpack/tree/master/examples/side-effects)
+More info: [webpack docs on side effects](https://github.com/webpack/webpack/tree/main/examples/side-effects)
 
 ### ES2022 language level
 
diff --git a/adev-ja/src/content/tools/libraries/creating-libraries.md b/adev-ja/src/content/tools/libraries/creating-libraries.md
index c1a755b2c0..c60406f613 100644
--- a/adev-ja/src/content/tools/libraries/creating-libraries.md
+++ b/adev-ja/src/content/tools/libraries/creating-libraries.md
@@ -131,7 +131,7 @@ For more information, see [Schematics Overview](tools/cli/schematics) and [Schem
 
 Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
 
-Angular CLI uses a tool called [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/master/README.md) to create packages from your compiled code that can be published to npm.
+Angular CLI uses a tool called [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/main/README.md) to create packages from your compiled code that can be published to npm.
 See [Building libraries with Ivy](tools/libraries/creating-libraries#publishing-libraries) for information on the distribution formats supported by `ng-packagr` and guidance on how
 to choose the right format for your library.
 
@@ -149,7 +149,7 @@ npm publish
 ## Managing assets in a library
 
 In your Angular library, the distributable can include additional assets like theming files, Sass mixins, or documentation \(like a changelog\).
-For more information [copy assets into your library as part of the build](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md) and [embed assets in component styles](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md).
+For more information [copy assets into your library as part of the build](https://github.com/ng-packagr/ng-packagr/blob/main/docs/copy-assets.md) and [embed assets in component styles](https://github.com/ng-packagr/ng-packagr/blob/main/docs/embed-assets-css.md).
 
 IMPORTANT: When including additional assets like Sass mixins or pre-compiled CSS.
 You need to add these manually to the conditional ["exports"](tools/libraries/angular-package-format#exports) in the `package.json` of the primary entrypoint.
diff --git a/adev-ja/src/content/tutorials/learn-angular/intro/README.en.md b/adev-ja/src/content/tutorials/learn-angular/intro/README.en.md
index 92210d5306..f016d54203 100644
--- a/adev-ja/src/content/tutorials/learn-angular/intro/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/intro/README.en.md
@@ -1,5 +1,10 @@
 # Welcome to the Angular tutorial
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's learn the building blocks of Angular.</p>
+</div>
+
 This interactive tutorial will teach you the basic building blocks to start building great apps with Angular.
 
 ## How to use this tutorial
diff --git a/adev-ja/src/content/tutorials/learn-angular/intro/README.md b/adev-ja/src/content/tutorials/learn-angular/intro/README.md
index 649d031c93..51ed933bdf 100644
--- a/adev-ja/src/content/tutorials/learn-angular/intro/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/intro/README.md
@@ -1,5 +1,10 @@
 # Angular チュートリアルへようこそ
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">ようこそ！Angularの構成要素を学びましょう。</p>
+</div>
+
 このインタラクティブなチュートリアルでは、Angularを使用してすばらしいアプリケーションを作成するための基本的な構成要素を学びます。
 
 ## このチュートリアルの使い方
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md
index ea81401589..b21652754c 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.en.md
@@ -10,31 +10,25 @@ In this activity, you'll learn how to create an `injectable` service.
 
 One way to use a service is to act as a way to interact with data and APIs. To make a service reusable you should keep the logic in the service and share it throughout the application when it is needed.
 
-To make a service eligible to be injected by the DI system use the `@Injectable` decorator. For example:
+To make a class eligible to be injected by the DI system, use the `@Service` decorator. For example:
 
-```ts {highlight:[1,2,3]}
-@Injectable({
-  providedIn: 'root',
-})
+```ts {highlight:[1]}
+@Service()
 class UserService {
   // methods to retrieve and return data
 }
 ```
 
-The `@Injectable` decorator notifies the DI system that the `UserService` is available to be requested in a class. `providedIn` sets the scope in which this resource is available. For now, it is good enough to understand that `providedIn: 'root'` means that the `UserService` is available to the entire application.
+The `@Service` decorator marks the class as a service and notifies the DI system that `UserService` can be accessed anywhere in your application. By default, Angular provides the service across your entire application, so you don't need to write any extra configuration.
+
+NOTE: By default, `@Service` provides the class at the root injector. If you want to provide it manually, for example, to scope it to a specific route or component, set `autoProvided: false`. Learn more in the [guide on creating and using services](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator).
 
 Alright, you try:
 
 <docs-workflow>
 
-<docs-step title="Add the `@Injectable` decorator">
-Update the code in `car.service.ts` by adding the `@Injectable` decorator.
-</docs-step>
-
-<docs-step title="Configure the decorator">
-The values in the object passed to the decorator are considered to be the configuration for the decorator.
-<br>
-Update the `@Injectable` decorator in `car.service.ts` to include the configuration for `providedIn: 'root'`.
+<docs-step title="Add the `@Service` decorator">
+Update the code in `car.service.ts` by adding the `@Service()` decorator to the `CarService` class.
 
 TIP: Use the above example to find the correct syntax.
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
index 8f3219af47..cb4e90b0b0 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md
@@ -10,31 +10,25 @@ NOTE: [エッセンシャルガイドの依存性の注入](/essentials/dependen
 
 サービスを使用する1つの方法は、データやAPIとの対話方法として機能させることです。サービスを再利用可能にするため、サービス内のロジックを保持し、必要に応じてアプリケーション全体で共有する必要があります。
 
-サービスをDIシステムによって注入されるようにするには、`@Injectable`デコレーターを使用します。例えば:
+クラスをDIシステムによって注入されるようにするには、`@Service`デコレーターを使用します。例えば:
 
-```ts {highlight:[1,2,3]}
-@Injectable({
-  providedIn: 'root',
-})
+```ts {highlight:[1]}
+@Service()
 class UserService {
   // データを取得して返すためのメソッド
 }
 ```
 
-`@Injectable`デコレーターは、DIシステムに`UserService`がクラス内で要求できることを教えます。`providedIn`は、このリソースが利用可能なスコープを設定します。現時点では、`providedIn: 'root'`は`UserService`がアプリケーション全体で利用可能であることを意味すると理解しておけば十分です。
+`@Service`デコレーターは、クラスをサービスとしてマークし、DIシステムに`UserService`がアプリケーション内のどこからでもアクセスできることを通知します。デフォルトでは、Angularはアプリケーション全体でサービスを提供するため、追加の構成を記述する必要はありません。
+
+NOTE: デフォルトでは、`@Service`はクラスをルートインジェクターで提供します。特定のルートやコンポーネントにスコープを限定するなど、手動で提供したい場合は、`autoProvided: false`を設定します。詳しくは[サービスの作成と使用に関するガイド](guide/di/creating-and-using-services#using-the-service-vs-injectable-decorator)をご覧ください。
 
 では、試してみましょう。
 
 <docs-workflow>
 
-<docs-step title="`@Injectable`デコレーターを追加する">
-`car.service.ts`のコードを更新して、`@Injectable`デコレーターを追加します。
-</docs-step>
-
-<docs-step title="デコレーターを構成する">
-デコレーターに渡されるオブジェクトの値は、デコレーターの構成と見なされます。
-<br>
-`car.service.ts`の`@Injectable`デコレーターを更新して、`providedIn: 'root'`の構成を含めます。
+<docs-step title="`@Service`デコレーターを追加する">
+`car.service.ts`のコードを更新して、`CarService`クラスに`@Service()`デコレーターを追加します。
 
 TIP: 上記の例を使用して、正しい構文を確認してください。
 
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md b/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md
index f7a6fb5abe..256ddd9a91 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.en.md
@@ -1,5 +1,10 @@
 # Ready to explore more of Angular?
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Learn Angular tutorial and learned the essentials of building apps.</p>
+</div>
+
 You can also learn more in our [guides](overview) and [reference](api), or `ng new`.
 
 <docs-card-container>
diff --git a/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.md b/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
index e024ac982f..92981fd676 100644
--- a/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
+++ b/adev-ja/src/content/tutorials/learn-angular/steps/25-next-steps/README.md
@@ -1,5 +1,10 @@
 # Angularをさらに詳しく知りたいですか？
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">やりました！Angularチュートリアルを完了し、アプリ構築の基本を学びました。</p>
+</div>
+
 [ガイド](overview)や[リファレンス](api)でさらに学ぶこともできます。または、`ng new`を実行してください。
 
 <docs-card-container>
diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
index bb767be6ca..112ebc10ba 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/README.en.md
@@ -1,5 +1,10 @@
 # Learn Angular Signal Forms
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's build forms with signals.</p>
+</div>
+
 This interactive tutorial will teach you how to build reactive forms using Angular's Signal Forms API.
 
 ## How to use this tutorial
diff --git a/adev-ja/src/content/tutorials/signal-forms/intro/README.md b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
index 92ac60ce87..d62d0ad1f4 100644
--- a/adev-ja/src/content/tutorials/signal-forms/intro/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/intro/README.md
@@ -1,5 +1,10 @@
 # Angularシグナルフォームを学ぶ
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">ようこそ！シグナルを使ってフォームを構築しましょう。</p>
+</div>
+
 このインタラクティブなチュートリアルでは、AngularのシグナルフォームAPIを使用してリアクティブフォームを構築する方法を学びます。
 
 ## このチュートリアルの使い方 {#how-to-use-this-tutorial}
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
index 750b90919f..061094ad1f 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.en.md
@@ -1,6 +1,9 @@
 # Congratulations!
 
-You've completed the Signal Forms tutorial and built a complete login form from scratch!
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signal Forms tutorial and built a login form from scratch.</p>
+</div>
 
 ## What you learned
 
diff --git a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
index 928c631437..8bad892473 100644
--- a/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
+++ b/adev-ja/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
@@ -1,6 +1,9 @@
 # おめでとうございます!
 
-シグナルフォームチュートリアルを完了し、ゼロから完全なログインフォームを構築しました!
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">やりました！シグナルフォームチュートリアルを完了し、ゼロからログインフォームを構築しました。</p>
+</div>
 
 ## 学んだこと {#what-you-learned}
 
diff --git a/adev-ja/src/content/tutorials/signals/intro/README.en.md b/adev-ja/src/content/tutorials/signals/intro/README.en.md
index b9d8df86d9..bbbfe98b87 100644
--- a/adev-ja/src/content/tutorials/signals/intro/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/intro/README.en.md
@@ -1,5 +1,10 @@
 # Learn Angular signals
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">Welcome! Let's explore signals.</p>
+</div>
+
 This interactive tutorial will teach you the fundamentals of Angular signals and how to use them to build reactive applications.
 
 ## How to use this tutorial
diff --git a/adev-ja/src/content/tutorials/signals/intro/README.md b/adev-ja/src/content/tutorials/signals/intro/README.md
index 96a4d52a2b..1e88420de7 100644
--- a/adev-ja/src/content/tutorials/signals/intro/README.md
+++ b/adev-ja/src/content/tutorials/signals/intro/README.md
@@ -1,5 +1,10 @@
 # Angularシグナルを学ぶ
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/greeting.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">ようこそ！シグナルを探求してみましょう。</p>
+</div>
+
 このインタラクティブなチュートリアルでは、Angularシグナルの基礎と、それらを使用してリアクティブなアプリケーションを構築する方法を学びます。
 
 ## このチュートリアルの使い方 {#how-to-use-this-tutorial}
diff --git a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.en.md b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.en.md
index 55de1ae4c7..3b95424cfa 100644
--- a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.en.md
@@ -1,5 +1,10 @@
 # Want to dive deeper into signals?
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">You've done it! You completed the Signals tutorial and learned to manage reactive state with signals.</p>
+</div>
+
 You can also learn more about signals with the following resources:
 
 <docs-card-container>
diff --git a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.md b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.md
index 53ff6618ad..6414fcc478 100644
--- a/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/11-next-steps/README.md
@@ -1,5 +1,10 @@
 # シグナルをさらに深く掘り下げたいですか？
 
+<div class="docs-tutorial-mascot">
+  <img class="docs-tutorial-mascot__angie" src="assets/images/angie/superhero.svg" aria-hidden="true">
+  <p class="docs-tutorial-mascot__bubble">やりました！シグナルチュートリアルを完了し、シグナルを使ったリアクティブな状態管理の方法を学びました。</p>
+</div>
+
 以下のリソースでシグナルについてさらに学ぶことができます。
 
 <docs-card-container>
diff --git a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md
index 7dcb21eeba..cf07a3f0da 100644
--- a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md
+++ b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.en.md
@@ -13,7 +13,7 @@ Add readonly and computed signals to make the cart state reactive in `cart-store
 
 ```ts
 // Add the computed import
-import {Injectable, signal, computed} from '@angular/core';
+import {Service, signal, computed} from '@angular/core';
 
 // Then add these signals to the class:
 
diff --git a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
index 28580d808b..ce00af001f 100644
--- a/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
+++ b/adev-ja/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
@@ -13,7 +13,7 @@
 
 ```ts
 // Add the computed import
-import {Injectable, signal, computed} from '@angular/core';
+import {Service, signal, computed} from '@angular/core';
 
 // Then add these signals to the class:
 
diff --git a/origin b/origin
index fa546f382d..4d985a179e 160000
--- a/origin
+++ b/origin
@@ -1 +1 @@
-Subproject commit fa546f382de10af46d0508733c6630ffe4bef328
+Subproject commit 4d985a179e66428d46e60b4622435f88c39e1d2b