fix: update origin 20.3.2

adev-ja/src/app/core/layout/navigation/navigation.component.en.html

@@ -151,7 +151,7 @@
             aria-label="Select Angular version"
             role="menu"
             class="adev-version-button"
-            [class.adev-mini-menu-open]="openedMenu === 'version-picker'"
+            [class.adev-mini-menu-open]="openedMenu() === 'version-picker'"
             [cdkMenuTriggerFor]="docsVersionMiniMenu"
             [cdkMenuPosition]="miniMenuPositions"
             (cdkMenuClosed)="closeMenu()"
@@ -299,7 +299,7 @@
     <!-- Bottom section of primary nav -->
     <div class="adev-nav__bottom">
       <!-- Social Icons Dots -->
-      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'social'">
+      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'social'">
         <button
           type="button"
           [cdkMenuTriggerFor]="socialMiniMenu"
@@ -447,7 +447,7 @@
         </ng-template>
       </div>
       <!-- TODO: Refactor this and make it better. Accessible, animated, etc. -->
-      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'theme-picker'">
+      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'theme-picker'">
         <button
           type="button"
           [cdkMenuTriggerFor]="themeMiniMenu"

adev-ja/src/app/core/layout/navigation/navigation.component.html

@@ -151,7 +151,7 @@
             aria-label="Select Angular version"
             role="menu"
             class="adev-version-button"
-            [class.adev-mini-menu-open]="openedMenu === 'version-picker'"
+            [class.adev-mini-menu-open]="openedMenu() === 'version-picker'"
             [cdkMenuTriggerFor]="docsVersionMiniMenu"
             [cdkMenuPosition]="miniMenuPositions"
             (cdkMenuClosed)="closeMenu()"
@@ -296,7 +296,7 @@
     <!-- Bottom section of primary nav -->
     <div class="adev-nav__bottom">
       <!-- Social Icons Dots -->
-      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'social'">
+      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'social'">
         <button
           type="button"
           [cdkMenuTriggerFor]="socialMiniMenu"
@@ -444,7 +444,7 @@
         </ng-template>
       </div>
       <!-- TODO: Refactor this and make it better. Accessible, animated, etc. -->
-      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu === 'theme-picker'">
+      <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'theme-picker'">
         <button
           type="button"
           [cdkMenuTriggerFor]="themeMiniMenu"

adev-ja/src/app/features/update/update.component.en.ts

@@ -128,10 +128,8 @@ export default class UpdateComponent {
     }
   }
 
-  @HostListener('click', ['$event'])
-  copyCode(event: Event) {
-    const {tagName, textContent} = event.target as Element;
-
+  @HostListener('click', ['$event.target'])
+  copyCode({tagName, textContent}: Element) {
     if (tagName === 'CODE') {
       this.clipboard.copy(textContent!);
       this.snackBar.open('Copied to clipboard', '', {duration: 2000});

adev-ja/src/app/features/update/update.component.ts

@@ -128,9 +128,8 @@ export default class UpdateComponent {
     }
   }
 
-  @HostListener('click', ['$event'])
-  copyCode(event: Event) {
-    const {tagName, textContent} = event.target as Element;
+  @HostListener('click', ['$event.target'])
+  copyCode({tagName, textContent}: Element) {
 
     if (tagName === 'CODE') {
       this.clipboard.copy(textContent!);

adev-ja/src/app/routing/sub-navigation-data.en.ts

@@ -677,66 +677,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'guide/drag-drop',
         contentPath: 'guide/drag-drop',
       },
-      // TODO: unwrap to release Angular Aria docs.
-      ...(isDevMode()
-        ? [
-            {
-              label: 'Angular Aria',
-              children: [
-                {
-                  label: 'Overview',
-                  path: 'guide/aria/overview',
-                  contentPath: 'guide/aria/overview',
-                },
-                {
-                  label: 'Accordion',
-                  path: 'guide/aria/accordion',
-                  contentPath: 'guide/aria/accordion',
-                },
-                {
-                  label: 'Combobox',
-                  path: 'guide/aria/combobox',
-                  contentPath: 'guide/aria/combobox',
-                },
-                {
-                  label: 'Grid',
-                  path: 'guide/aria/grid',
-                  contentPath: 'guide/aria/grid',
-                },
-                {
-                  label: 'Listbox',
-                  path: 'guide/aria/listbox',
-                  contentPath: 'guide/aria/listbox',
-                },
-                {
-                  label: 'Menu',
-                  path: 'guide/aria/menu',
-                  contentPath: 'guide/aria/menu',
-                },
-                {
-                  label: 'Radio Group',
-                  path: 'guide/aria/radio',
-                  contentPath: 'guide/aria/radio',
-                },
-                {
-                  label: 'Tabs',
-                  path: 'guide/aria/tabs',
-                  contentPath: 'guide/aria/tabs',
-                },
-                {
-                  label: 'Toolbar',
-                  path: 'guide/aria/toolbar',
-                  contentPath: 'guide/aria/toolbar',
-                },
-                {
-                  label: 'Tree',
-                  path: 'guide/aria/tree',
-                  contentPath: 'guide/aria/tree',
-                },
-              ],
-            },
-          ]
-        : []),
     ],
   },
   {
@@ -1491,18 +1431,6 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/self-closing-tags',
         contentPath: 'reference/migrations/self-closing-tags',
       },
-      {
-        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',
-      },
     ],
   },
 ];

adev-ja/src/app/routing/sub-navigation-data.ts

@@ -677,66 +677,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'guide/drag-drop',
         contentPath: 'guide/drag-drop',
       },
-      // TODO: unwrap to release Angular Aria docs.
-      ...(isDevMode()
-        ? [
-            {
-              label: 'Angular Aria',
-              children: [
-                {
-                  label: 'Overview',
-                  path: 'guide/aria/overview',
-                  contentPath: 'guide/aria/overview',
-                },
-                {
-                  label: 'Accordion',
-                  path: 'guide/aria/accordion',
-                  contentPath: 'guide/aria/accordion',
-                },
-                {
-                  label: 'Combobox',
-                  path: 'guide/aria/combobox',
-                  contentPath: 'guide/aria/combobox',
-                },
-                {
-                  label: 'Grid',
-                  path: 'guide/aria/grid',
-                  contentPath: 'guide/aria/grid',
-                },
-                {
-                  label: 'Listbox',
-                  path: 'guide/aria/listbox',
-                  contentPath: 'guide/aria/listbox',
-                },
-                {
-                  label: 'Menu',
-                  path: 'guide/aria/menu',
-                  contentPath: 'guide/aria/menu',
-                },
-                {
-                  label: 'Radio Group',
-                  path: 'guide/aria/radio',
-                  contentPath: 'guide/aria/radio',
-                },
-                {
-                  label: 'Tabs',
-                  path: 'guide/aria/tabs',
-                  contentPath: 'guide/aria/tabs',
-                },
-                {
-                  label: 'Toolbar',
-                  path: 'guide/aria/toolbar',
-                  contentPath: 'guide/aria/toolbar',
-                },
-                {
-                  label: 'Tree',
-                  path: 'guide/aria/tree',
-                  contentPath: 'guide/aria/tree',
-                },
-              ],
-            },
-          ]
-        : []),
     ],
   },
   {
@@ -1499,18 +1439,6 @@ const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'reference/migrations/self-closing-tags',
         contentPath: 'reference/migrations/self-closing-tags',
       },
-      {
-        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',
-      },
     ],
   },
 ];

adev-ja/src/content/ai/develop-with-ai.en.md

@@ -39,3 +39,7 @@ The Angular CLI includes an experimental [Model Context Protocol (MCP) server](h
 * <a href="/context/llm-files/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.
+
+## Web Codegen Scorer
+The Angular team developed and open-sourced the [Web Codegen Scorer](https://github.com/angular/web-codegen-scorer), a tool to evaluate and score the quality of AI generated web code. You can use this tool to make evidence-based decisions relating to AI-generated code, such as fine-tuning prompts to improve the accuracy of LLM-generated code for Angular. These prompts can be included as system instructions for your AI tooling or as context with your prompt. You can also use this tool to compare the quality of code produced by different models and monitor quality over time as models and agents evolve.
+

adev-ja/src/content/ai/develop-with-ai.md

@@ -39,3 +39,6 @@ Angular CLIには、開発環境のAIアシスタントがAngular CLIと連携
 * <a href="/context/llm-files/llms-full.txt" target="_blank">llms-full.txt</a> - Angularの動作方法とAngularアプリケーションの構築方法を記述した、より堅牢なコンパイル済みリソースセット。
 
 AngularアプリケーションにAIを統合する方法に関する詳細情報については、[概要ページ](/ai)もご確認ください。
+
+## Web Codegen Scorer
+Angularチームは[Web Codegen Scorer](https://github.com/angular/web-codegen-scorer)を開発し、オープンソース化しました。これは、AI生成ウェブコードの品質を評価・スコア化するためのツールです。このツールを使用して、Angular向けにLLM生成コードの精度を向上させるプロンプトの微調整など、AI生成コードに関するエビデンスベースの意思決定を行うことができます。これらのプロンプトは、AIツールのシステム指示として含めたり、プロンプトとともにコンテキストとして含めたりできます。また、このツールを使用して、異なるモデルが生成するコードの品質を比較したり、モデルやエージェントの進化に伴う品質の経時変化を監視したりできます。

adev-ja/src/content/ai/overview.en.md

@@ -54,7 +54,7 @@ Here is an example of how to build with Firebase AI Logic and Angular:
   This example includes an [in-depth video walkthrough explaining the functionality and demonstrates how to add new features](https://youtube.com/live/4vfDz2al_BI).
 
 ### Build AI-powered applications with Gemini API and Angular
-The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state-of-the-art models from Google that supports audio, images, video, and text input. The models that are optimized for specific use cases, [learn more on the Gemini API documentation site](https://ai.google.dev/gemini-api/docs/models).
+The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state-of-the-art models from Google that support audio, images, video, and text input. These models that are optimized for specific use cases, [learn more on the Gemini API documentation site](https://ai.google.dev/gemini-api/docs/models).
 
 * [AI Text Editor Angular app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - Use this template to start with a fully functioning text editor with AI-powered features like refining text, expanding text and formalizing text. This is a good starting point to gain experience with calling the Gemini API via HTTP.
 
@@ -64,7 +64,7 @@ The [Gemini API](https://ai.google.dev/gemini-api/docs) provides access to state
 ### Connecting to model providers and keeping your API Credentials Secure
 When connecting to model providers, it is important to keep your API secrets safe. *Never put your API key in a file that ships to the client, such as `environments.ts`*.
 
-Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firerbase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys.
+Your application's architecture determines which AI APIs and tools to choose. Specifically, choose based on whether or not your application is client-side or server-side. Tools such as Firebase AI Logic provide a secure connection to the model APIs for client-side code. If you want to use a different API than Firebase AI Logic or prefer to use a different model provider, consider creating a proxy-server or even [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) to serve as a proxy and not expose your API keys.
 
 For an example of connecting using a client-side app, see the code:  [Firebase AI Logic Angular example repository](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example).
 
@@ -88,7 +88,7 @@ Because models can return non-deterministic results, your applications should be
 Even considering these strategies and techniques, sensible fallbacks should be incorporated in your application design. Follow existing standards of application resiliency. For example, it is not acceptable for an application to crash if a resource or API is not available. In that scenario, an error message is displayed to the user and, if applicable, options for next steps are also displayed. Building AI-powered applications requires the same consideration. Confirm that the response is aligned with the expected output and provide a "safe landing" in case it is not aligned by way of [graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation). This also applies to API outages for LLM providers.
 
 Consider this example: The LLM provider is not responding. A potential strategy to handle the outage is:
-* Save the response from the user to used in a retry scenario (now or at a later time)
+* Save the response from the user to use in a retry scenario (now or at a later time)
 * Alert the user to the outage with an appropriate message that doesn't reveal sensitive information
 * Resume the conversation at a later time once the services are available again.
 

adev-ja/src/content/ai/overview.md

@@ -54,7 +54,7 @@ Firebase AI LogicとAngularで構築する方法の例を次に示します。
   この例には、[機能の説明と新機能の追加方法を示す詳細なビデオウォークスルー](https://youtube.com/live/4vfDz2al_BI)が含まれています。
 
 ### Gemini APIとAngularでAI搭載アプリケーションを構築する {#build-ai-powered-applications-with-gemini-api-and-angular}
-[Gemini API](https://ai.google.dev/gemini-api/docs)は、音声、画像、動画、テキスト入力をサポートするGoogleの最先端モデルへのアクセスを提供します。特定のユースケースに最適化されたモデルについては、[Gemini APIドキュメントサイトで詳細を確認してください](https://ai.google.dev/gemini-api/docs/models)。
+[Gemini API](https://ai.google.dev/gemini-api/docs)は、音声、画像、動画、テキスト入力をサポートするGoogleの最先端モデルへのアクセスを提供します。特定のユースケースに最適化されたこれらのモデルについては、[Gemini APIドキュメントサイトで詳細を確認してください](https://ai.google.dev/gemini-api/docs/models)。
 
 * [AIテキストエディターAngularアプリテンプレート](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - このテンプレートを使用して、テキストの洗練、テキストの拡張、テキストの形式化などのAI搭載機能を備えた完全に機能するテキストエディターから始めましょう。これは、HTTP経由でのGemini API呼び出しの経験を積むのに良い出発点です。
 

adev-ja/src/content/cli/index.md

@@ -10,7 +10,7 @@ Install the CLI using the `npm` package manager:
 
 <code-example format="shell" language="shell">
 
-npm install -g @angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
+npm install -g &commat;angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
 
 </code-example>
 

adev-ja/src/content/ecosystem/service-workers/getting-started.md

@@ -50,7 +50,7 @@ npm, which supports service worker applications. Run it without installation usi
 
 <docs-code language="shell">
 
-npx http-server -p 8080 -c-1 dist/<project-name>/browser
+npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
 
 </docs-code>