diff --git a/adev-es/src/app/core/layout/navigation/navigation.component.en.html b/adev-es/src/app/core/layout/navigation/navigation.component.en.html
index a51fab3..8786877 100644
--- a/adev-es/src/app/core/layout/navigation/navigation.component.en.html
+++ b/adev-es/src/app/core/layout/navigation/navigation.component.en.html
@@ -62,9 +62,9 @@
   <nav
     class="adev-nav-primary docs-scroll-hide"
     [class.adev-nav-primary--open]="isMobileNavigationOpened()"
-    [class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
-    [class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
-    [class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
+    [class.adev-nav-primary--rc]="currentDocsVersionMode() === 'rc'"
+    [class.adev-nav-primary--next]="currentDocsVersionMode() === 'next'"
+    [class.adev-nav-primary--deprecated]="currentDocsVersionMode() === 'deprecated'"
   >
     <button
       type="button"
@@ -177,7 +177,7 @@
                   type="button"
                   cdkMenuItem
                   [href]="item.url"
-                  [attr.aria-label]="item.displayName"
+                  [aria-label]="item.displayName"
                 >
                   <span>{{ item.displayName }}</span>
               </a>
@@ -209,7 +209,7 @@
           </svg>
           <span
             class="adev-nav-item__label adev-search-desktop"
-            [attr.aria-label]="'Open search dialog with ' + searchTitle"
+            [aria-label]="'Open search dialog with ' + searchTitle"
           >
             <kbd>{{ searchLabel }}</kbd>
             <kbd>K</kbd>
@@ -446,17 +446,20 @@
           </ul>
         </ng-template>
       </div>
-      <!-- TODO: Refactor this and make it better. Accessible, animated, etc. -->
+      <!-- Theme Picker -->
       <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'theme-picker'">
         <button
           type="button"
           [cdkMenuTriggerFor]="themeMiniMenu"
           [cdkMenuPosition]="miniMenuPositions"
-          aria-label="Open theme picker"
+          [aria-label]="'Change theme. Current theme: ' + theme()"
+          aria-controls="theme-mini-menu"
+          [aria-expanded]="openedMenu() === 'theme-picker'"
+          aria-haspopup="menu"
           (cdkMenuClosed)="closeMenu()"
           (cdkMenuOpened)="openMenu('theme-picker')"
         >
-          <docs-icon role="presentation">
+          <docs-icon role="presentation" class="adev-theme-icon">
             @switch (theme()) {
               @case ('light') {
                 {{ 'light_mode' }}
@@ -472,37 +475,49 @@
         </button>
 
         <ng-template #themeMiniMenu>
-          <ul class="adev-mini-menu" cdkMenu>
-            <li>
+          <ul
+            class="adev-mini-menu"
+            cdkMenu
+            id="theme-mini-menu"
+            role="menu"
+            aria-label="Theme options"
+          >
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'auto'"
                 (click)="setTheme('auto')"
                 aria-label="Set default system theme"
               >
-                <docs-icon class="docs-icon_high-contrast">routine</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">routine</docs-icon>
                 <span>System</span>
               </button>
             </li>
-            <li>
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'dark'"
                 (click)="setTheme('dark')"
                 aria-label="Set dark theme"
               >
-                <docs-icon class="docs-icon_high-contrast">dark_mode</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">dark_mode</docs-icon>
                 <span>Dark</span>
               </button>
             </li>
-            <li>
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'light'"
                 (click)="setTheme('light')"
                 aria-label="Set light theme"
               >
-                <docs-icon class="docs-icon_high-contrast">light_mode</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">light_mode</docs-icon>
                 <span>Light</span>
               </button>
             </li>
diff --git a/adev-es/src/app/core/layout/navigation/navigation.component.html b/adev-es/src/app/core/layout/navigation/navigation.component.html
index 69530a6..85bcff7 100644
--- a/adev-es/src/app/core/layout/navigation/navigation.component.html
+++ b/adev-es/src/app/core/layout/navigation/navigation.component.html
@@ -62,9 +62,9 @@
   <nav
     class="adev-nav-primary docs-scroll-hide"
     [class.adev-nav-primary--open]="isMobileNavigationOpened()"
-    [class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
-    [class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
-    [class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
+    [class.adev-nav-primary--rc]="currentDocsVersionMode() === 'rc'"
+    [class.adev-nav-primary--next]="currentDocsVersionMode() === 'next'"
+    [class.adev-nav-primary--deprecated]="currentDocsVersionMode() === 'deprecated'"
   >
     <button
       type="button"
@@ -166,7 +166,7 @@
           </svg>
           <span
             class="adev-nav-item__label adev-search-desktop"
-            [attr.aria-label]="'Open search dialog with ' + searchTitle"
+            [aria-label]="'Open search dialog with ' + searchTitle"
           >
             <kbd>{{ searchLabel }}</kbd>
             <kbd>K</kbd>
@@ -307,17 +307,20 @@
           </ul>
         </ng-template>
       </div>
-      <!-- TODO: Refactor this and make it better. Accessible, animated, etc. -->
+      <!-- Theme Picker -->
       <div class="adev-nav-item" [class.adev-nav-item--active]="openedMenu() === 'theme-picker'">
         <button
           type="button"
           [cdkMenuTriggerFor]="themeMiniMenu"
           [cdkMenuPosition]="miniMenuPositions"
-          aria-label="Open theme picker"
+          [aria-label]="'Change theme. Current theme: ' + theme()"
+          aria-controls="theme-mini-menu"
+          [aria-expanded]="openedMenu() === 'theme-picker'"
+          aria-haspopup="menu"
           (cdkMenuClosed)="closeMenu()"
           (cdkMenuOpened)="openMenu('theme-picker')"
         >
-          <docs-icon role="presentation">
+          <docs-icon role="presentation" class="adev-theme-icon">
             @switch (theme()) {
               @case ('light') {
                 {{ 'light_mode' }}
@@ -333,37 +336,49 @@
         </button>
 
         <ng-template #themeMiniMenu>
-          <ul class="adev-mini-menu" cdkMenu>
-            <li>
+          <ul
+            class="adev-mini-menu"
+            cdkMenu
+            id="theme-mini-menu"
+            role="menu"
+            aria-label="Theme options"
+          >
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'auto'"
                 (click)="setTheme('auto')"
                 aria-label="Set default system theme"
               >
-                <docs-icon class="docs-icon_high-contrast">routine</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">routine</docs-icon>
                 <span>System</span>
               </button>
             </li>
-            <li>
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'dark'"
                 (click)="setTheme('dark')"
                 aria-label="Set dark theme"
               >
-                <docs-icon class="docs-icon_high-contrast">dark_mode</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">dark_mode</docs-icon>
                 <span>Dark</span>
               </button>
             </li>
-            <li>
+            <li role="none">
               <button
                 type="button"
                 cdkMenuItem
+                role="menuitemradio"
+                [aria-checked]="theme() === 'light'"
                 (click)="setTheme('light')"
                 aria-label="Set light theme"
               >
-                <docs-icon class="docs-icon_high-contrast">light_mode</docs-icon>
+                <docs-icon class="docs-icon_high-contrast" aria-hidden="true">light_mode</docs-icon>
                 <span>Light</span>
               </button>
             </li>
diff --git a/adev-es/src/app/features/home/home.component.en.html b/adev-es/src/app/features/home/home.component.en.html
index 5267f29..cdeb3ff 100644
--- a/adev-es/src/app/features/home/home.component.en.html
+++ b/adev-es/src/app/features/home/home.component.en.html
@@ -1,9 +1,13 @@
-<div class="adev-home" #home>
+<main class="adev-home" #home>
   <div class="banners-layer layer">
     <div class="adev-banner-container">
-      <a href="https://goo.gle/angular-ai-update" class="adev-banner" target="_blank">
-        <h1 tabindex="-1">Available Now:</h1>
-        <p class="adev-banner-cta">Angular AI Developer Event Replay</p>
+      <a
+        href="events/v21"
+        class="adev-banner"
+        target="_blank"
+      >
+        <h1 tabindex="-1">Angular v21 is here!</h1>
+        <p class="adev-banner-cta">🕹️ Start your adventure</p>
       </a>
     </div>
   </div>
@@ -486,4 +490,4 @@ <h3>Are you an LLM or curious about AI in Angular?</h3>
       </div>
     </div>
   </section>
-</div>
+</main>
diff --git a/adev-es/src/app/features/home/home.component.html b/adev-es/src/app/features/home/home.component.html
index b5b398c..0b95118 100644
--- a/adev-es/src/app/features/home/home.component.html
+++ b/adev-es/src/app/features/home/home.component.html
@@ -1,9 +1,13 @@
-<div class="adev-home" #home>
+<main class="adev-home" #home>
   <div class="banners-layer layer">
     <div class="adev-banner-container">
-      <a href="https://goo.gle/angular-ai-update" class="adev-banner" target="_blank">
-        <h1 tabindex="-1"></h1>
-        <p class="adev-banner-cta"></p>
+      <a
+        href="events/v21"
+        class="adev-banner"
+        target="_blank"
+      >
+        <h1 tabindex="-1">Angular v21 está aquí!</h1>
+        <p class="adev-banner-cta">🕹️ Comenzar tu aventura</p>
       </a>
     </div>
   </div>
@@ -85,7 +89,7 @@ <h2> El framework para crear aplicaciones web escalables con confianza</h2>
 
     <div class="learn-angular">
       <a href="#learn-more" class="adev-cta">
-        <button class="docs-primary-btn" [attr.text]="'Get Started'" aria-label="Get Started">
+        <button class="docs-primary-btn" [attr.text]="'Comenzar'" aria-label="Comenzar">
           Comenzar
         </button>
       </a>
@@ -186,7 +190,8 @@ <h2>Cuando el rendimiento importa</h2>
             </svg>
             <div class="card-content">
               <p>
-                Alcanza tus objetivos de rendimiento con SSR, SSG, hidratación y la carga diferida de nueva generación
+                Alcanza tus objetivos de rendimiento con SSR, SSG, hidratación 
+                y la carga diferida de nueva generación
               </p>
             </div>
             <span>Aprende sobre estrategias de renderizado</span>
@@ -485,4 +490,4 @@ <h3>¿Eres un LLM o tienes curiosidad sobre la IA en Angular?</h3>
       </div>
     </div>
   </section>
-</div>
+</main>
diff --git a/adev-es/src/app/routing/sub-navigation-data.en.ts b/adev-es/src/app/routing/sub-navigation-data.en.ts
index ad1a5e2..a859ab2 100644
--- a/adev-es/src/app/routing/sub-navigation-data.en.ts
+++ b/adev-es/src/app/routing/sub-navigation-data.en.ts
@@ -14,6 +14,7 @@ import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app
 import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
 import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
 import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json';
+import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json';
 import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json';
 import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json';
 
@@ -64,6 +65,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'essentials/templates',
             contentPath: 'introduction/essentials/templates',
           },
+          {
+            label: 'Forms with signals',
+            path: 'essentials/signal-forms',
+            contentPath: 'introduction/essentials/signal-forms',
+            status: 'new',
+          },
           {
             label: 'Modular design with dependency injection',
             path: 'essentials/dependency-injection',
@@ -282,26 +289,25 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Dependency Injection',
+        status: 'updated',
         children: [
           {
             label: 'Overview',
             path: 'guide/di',
             contentPath: 'guide/di/overview',
+            status: 'updated',
           },
           {
-            label: 'Understanding dependency injection',
-            path: 'guide/di/dependency-injection',
-            contentPath: 'guide/di/dependency-injection',
-          },
-          {
-            label: 'Creating an injectable service',
-            path: 'guide/di/creating-injectable-service',
-            contentPath: 'guide/di/creating-injectable-service',
+            label: 'Creating and using services',
+            path: 'guide/di/creating-and-using-services',
+            contentPath: 'guide/di/creating-and-using-services',
+            status: 'updated',
           },
           {
             label: 'Defining dependency providers',
-            path: 'guide/di/dependency-injection-providers',
-            contentPath: 'guide/di/dependency-injection-providers',
+            path: 'guide/di/defining-dependency-providers',
+            contentPath: 'guide/di/defining-dependency-providers',
+            status: 'updated',
           },
           {
             label: 'Injection context',
@@ -416,12 +422,49 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Forms',
+        status: 'updated',
         children: [
           {
             label: 'Overview',
             path: 'guide/forms',
             contentPath: 'guide/forms/overview',
           },
+          {
+            label: 'Signal forms',
+            status: 'new',
+            children: [
+              {
+                label: 'Overview',
+                path: 'guide/forms/signals/overview',
+                contentPath: 'guide/forms/signals/overview',
+              },
+              {
+                label: 'Form models',
+                path: 'guide/forms/signals/models',
+                contentPath: 'guide/forms/signals/models',
+              },
+              {
+                label: 'Field state management',
+                path: 'guide/forms/signals/field-state-management',
+                contentPath: 'guide/forms/signals/field-state-management',
+              },
+              {
+                label: 'Validation',
+                path: 'guide/forms/signals/validation',
+                contentPath: 'guide/forms/signals/validation',
+              },
+              {
+                label: 'Custom controls',
+                path: 'guide/forms/signals/custom-controls',
+                contentPath: 'guide/forms/signals/custom-controls',
+              },
+              {
+                label: 'Comparison with other form systems',
+                path: 'guide/forms/signals/comparison',
+                contentPath: 'guide/forms/signals/comparison',
+              },
+            ],
+          },
           {
             label: 'Reactive forms',
             path: 'guide/forms/reactive-forms',
@@ -517,16 +560,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing',
             contentPath: 'guide/testing/overview',
           },
-          {
-            label: 'Code coverage',
-            path: 'guide/testing/code-coverage',
-            contentPath: 'guide/testing/code-coverage',
-          },
-          {
-            label: 'Testing services',
-            path: 'guide/testing/services',
-            contentPath: 'guide/testing/services',
-          },
           {
             label: 'Basics of testing components',
             path: 'guide/testing/components-basics',
@@ -537,6 +570,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/components-scenarios',
             contentPath: 'guide/testing/components-scenarios',
           },
+          {
+            label: 'Testing services',
+            path: 'guide/testing/services',
+            contentPath: 'guide/testing/services',
+          },
           {
             label: 'Testing attribute directives',
             path: 'guide/testing/attribute-directives',
@@ -558,15 +596,20 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/debugging',
             contentPath: 'guide/testing/debugging',
           },
+          {
+            label: 'Code coverage',
+            path: 'guide/testing/code-coverage',
+            contentPath: 'guide/testing/code-coverage',
+          },
           {
             label: 'Testing utility APIs',
             path: 'guide/testing/utility-apis',
             contentPath: 'guide/testing/utility-apis',
           },
           {
-            label: 'Experimental unit testing integration',
-            path: 'guide/testing/unit-tests',
-            contentPath: 'guide/testing/experimental-unit-test',
+            label: 'Zone.js Testing Utilities',
+            path: 'guide/testing/zone-js-testing-utilities',
+            contentPath: 'guide/testing/zone-js-testing-utilities',
           },
           {
             label: 'Component harnesses overview',
@@ -588,6 +631,87 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/component-harnesses-testing-environments',
             contentPath: 'guide/testing/component-harnesses-testing-environments',
           },
+          {
+            label: 'Migrating from Karma to Vitest',
+            path: 'guide/testing/migrating-to-vitest',
+            contentPath: 'guide/testing/migrating-to-vitest',
+          },
+          {
+            label: 'Testing with Karma and Jasmine',
+            path: 'guide/testing/karma',
+            contentPath: 'guide/testing/karma',
+          },
+        ],
+      },
+      {
+        label: 'Angular Aria',
+        status: 'new',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/aria/overview',
+            contentPath: 'guide/aria/overview',
+          },
+          {
+            label: 'Accordion',
+            path: 'guide/aria/accordion',
+            contentPath: 'guide/aria/accordion',
+          },
+          {
+            label: 'Autocomplete',
+            path: 'guide/aria/autocomplete',
+            contentPath: 'guide/aria/autocomplete',
+          },
+          {
+            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: 'Menubar',
+            path: 'guide/aria/menubar',
+            contentPath: 'guide/aria/menubar',
+          },
+          {
+            label: 'Multiselect',
+            path: 'guide/aria/multiselect',
+            contentPath: 'guide/aria/multiselect',
+          },
+          {
+            label: 'Select',
+            path: 'guide/aria/select',
+            contentPath: 'guide/aria/select',
+          },
+          {
+            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',
+          },
         ],
       },
       {
@@ -703,6 +827,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'ai/mcp',
         contentPath: 'ai/mcp-server-setup',
       },
+      {
+        label: 'Angular AI Tutor',
+        path: 'ai/ai-tutor',
+        contentPath: 'ai/ai-tutor',
+      },
     ],
   },
   {
@@ -831,6 +960,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'tools/devtools/profiler',
             contentPath: 'tools/devtools/profiler',
           },
+          {
+            label: 'Injectors',
+            path: 'tools/devtools/injectors',
+            contentPath: 'tools/devtools/injectors',
+          },
           // TODO: create those guides
           // The signal debugging docs should also be added to the signal section
           // {
@@ -914,6 +1048,17 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
     ],
   },
+  {
+    label: 'Developer Events',
+    children: [
+      {
+        label: 'Angular v21 Release',
+        path: 'events/v21',
+        contentPath: 'events/v21',
+        status: 'new',
+      },
+    ],
+  },
   {
     label: 'Extended Ecosystem',
     children: [
@@ -1080,6 +1225,7 @@ export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
   LEARN_ANGULAR_TUTORIAL_NAV_DATA,
   DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
   SIGNALS_TUTORIAL_NAV_DATA,
+  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
   {
     path: DEFAULT_PAGES.TUTORIALS,
     contentPath: 'tutorials/home',
@@ -1431,6 +1577,30 @@ 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',
+      },
+      {
+        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-es/src/app/routing/sub-navigation-data.ts b/adev-es/src/app/routing/sub-navigation-data.ts
index a7e1368..21d8477 100644
--- a/adev-es/src/app/routing/sub-navigation-data.ts
+++ b/adev-es/src/app/routing/sub-navigation-data.ts
@@ -13,6 +13,7 @@ import {NavigationItem} from '@angular/docs';
 import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
 import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
 import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
+import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json';
 import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json';
 import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json';
 import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json';
@@ -64,6 +65,12 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'essentials/templates',
             contentPath: 'introduction/essentials/templates',
           },
+          {
+            label: 'Forms with signals',
+            path: 'essentials/signal-forms',
+            contentPath: 'introduction/essentials/signal-forms',
+            status: 'new',
+          },
           {
             label: 'Diseño modular con inyección de dependencias',
             path: 'essentials/dependency-injection',
@@ -282,26 +289,25 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Inyección de Dependencias',
+        status: 'updated',
         children: [
           {
             label: 'Visión general',
             path: 'guide/di',
             contentPath: 'guide/di/overview',
+            status: 'updated',
           },
           {
-            label: 'Entendiendo la inyección de dependencias',
-            path: 'guide/di/dependency-injection',
-            contentPath: 'guide/di/dependency-injection',
-          },
-          {
-            label: 'Creando un servicio inyectable',
-            path: 'guide/di/creating-injectable-service',
-            contentPath: 'guide/di/creating-injectable-service',
+            label: 'Creating and using services',
+            path: 'guide/di/creating-and-using-services',
+            contentPath: 'guide/di/creating-and-using-services',
+            status: 'updated',
           },
           {
-            label: 'Definiendo proveedores de dependencias',
-            path: 'guide/di/dependency-injection-providers',
-            contentPath: 'guide/di/dependency-injection-providers',
+            label: 'Defining dependency providers',
+            path: 'guide/di/defining-dependency-providers',
+            contentPath: 'guide/di/defining-dependency-providers',
+            status: 'updated',
           },
           {
             label: 'Contexto de inyección',
@@ -416,12 +422,49 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
       {
         label: 'Formularios',
+        status: 'updated',
         children: [
           {
             label: 'Visión general',
             path: 'guide/forms',
             contentPath: 'guide/forms/overview',
           },
+          {
+            label: 'Signal forms',
+            status: 'new',
+            children: [
+              {
+                label: 'Overview',
+                path: 'guide/forms/signals/overview',
+                contentPath: 'guide/forms/signals/overview',
+              },
+              {
+                label: 'Form models',
+                path: 'guide/forms/signals/models',
+                contentPath: 'guide/forms/signals/models',
+              },
+              {
+                label: 'Field state management',
+                path: 'guide/forms/signals/field-state-management',
+                contentPath: 'guide/forms/signals/field-state-management',
+              },
+              {
+                label: 'Validation',
+                path: 'guide/forms/signals/validation',
+                contentPath: 'guide/forms/signals/validation',
+              },
+              {
+                label: 'Custom controls',
+                path: 'guide/forms/signals/custom-controls',
+                contentPath: 'guide/forms/signals/custom-controls',
+              },
+              {
+                label: 'Comparison with other form systems',
+                path: 'guide/forms/signals/comparison',
+                contentPath: 'guide/forms/signals/comparison',
+              },
+            ],
+          },
           {
             label: 'Formularios reactivos',
             path: 'guide/forms/reactive-forms',
@@ -517,16 +560,6 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing',
             contentPath: 'guide/testing/overview',
           },
-          {
-            label: 'Cobertura de código',
-            path: 'guide/testing/code-coverage',
-            contentPath: 'guide/testing/code-coverage',
-          },
-          {
-            label: 'Pruebas de servicios',
-            path: 'guide/testing/services',
-            contentPath: 'guide/testing/services',
-          },
           {
             label: 'Fundamentos de pruebas de componentes',
             path: 'guide/testing/components-basics',
@@ -537,6 +570,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/components-scenarios',
             contentPath: 'guide/testing/components-scenarios',
           },
+          {
+            label: 'Pruebas de servicios',
+            path: 'guide/testing/services',
+            contentPath: 'guide/testing/services',
+          },
           {
             label: 'Pruebas de directivas de atributo',
             path: 'guide/testing/attribute-directives',
@@ -558,15 +596,20 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/debugging',
             contentPath: 'guide/testing/debugging',
           },
+          {
+            label: 'Cobertura de código',
+            path: 'guide/testing/code-coverage',
+            contentPath: 'guide/testing/code-coverage',
+          },
           {
             label: 'Testing utility APIs',
             path: 'guide/testing/utility-apis',
             contentPath: 'guide/testing/utility-apis',
           },
           {
-            label: 'Integración experimental de pruebas unitarias',
-            path: 'guide/testing/unit-tests',
-            contentPath: 'guide/testing/experimental-unit-test',
+            label: 'Zone.js Testing Utilities',
+            path: 'guide/testing/zone-js-testing-utilities',
+            contentPath: 'guide/testing/zone-js-testing-utilities',
           },
           {
             label: 'Visión general de component harnesses',
@@ -588,6 +631,87 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'guide/testing/component-harnesses-testing-environments',
             contentPath: 'guide/testing/component-harnesses-testing-environments',
           },
+          {
+            label: 'Migrating from Karma to Vitest',
+            path: 'guide/testing/migrating-to-vitest',
+            contentPath: 'guide/testing/migrating-to-vitest',
+          },
+          {
+            label: 'Testing with Karma and Jasmine',
+            path: 'guide/testing/karma',
+            contentPath: 'guide/testing/karma',
+          },
+        ],
+      },
+      {
+        label: 'Angular Aria',
+        status: 'new',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/aria/overview',
+            contentPath: 'guide/aria/overview',
+          },
+          {
+            label: 'Accordion',
+            path: 'guide/aria/accordion',
+            contentPath: 'guide/aria/accordion',
+          },
+          {
+            label: 'Autocomplete',
+            path: 'guide/aria/autocomplete',
+            contentPath: 'guide/aria/autocomplete',
+          },
+          {
+            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: 'Menubar',
+            path: 'guide/aria/menubar',
+            contentPath: 'guide/aria/menubar',
+          },
+          {
+            label: 'Multiselect',
+            path: 'guide/aria/multiselect',
+            contentPath: 'guide/aria/multiselect',
+          },
+          {
+            label: 'Select',
+            path: 'guide/aria/select',
+            contentPath: 'guide/aria/select',
+          },
+          {
+            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',
+          },
         ],
       },
       {
@@ -703,6 +827,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
         path: 'ai/mcp',
         contentPath: 'ai/mcp-server-setup',
       },
+      {
+        label: 'Angular AI Tutor',
+        path: 'ai/ai-tutor',
+        contentPath: 'ai/ai-tutor',
+      },
     ],
   },
   {
@@ -831,6 +960,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
             path: 'tools/devtools/profiler',
             contentPath: 'tools/devtools/profiler',
           },
+          {
+            label: 'Injectors',
+            path: 'tools/devtools/injectors',
+            contentPath: 'tools/devtools/injectors',
+          },
           // TODO: create those guides
           // The signal debugging docs should also be added to the signal section
           // {
@@ -914,6 +1048,17 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
       },
     ],
   },
+  {
+    label: 'Developer Events',
+    children: [
+      {
+        label: 'Angular v21 Release',
+        path: 'events/v21',
+        contentPath: 'events/v21',
+        status: 'new',
+      },
+    ],
+  },
   {
     label: 'Extended Ecosystem',
     children: [
@@ -1080,6 +1225,7 @@ export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
   LEARN_ANGULAR_TUTORIAL_NAV_DATA,
   DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
   SIGNALS_TUTORIAL_NAV_DATA,
+  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
   {
     path: DEFAULT_PAGES.TUTORIALS,
     contentPath: 'tutorials/home',
@@ -1431,6 +1577,30 @@ 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',
+      },
+      {
+        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-es/src/content/ai/ai-tutor.md b/adev-es/src/content/ai/ai-tutor.md
new file mode 100644
index 0000000..fd3b01a
--- /dev/null
+++ b/adev-es/src/content/ai/ai-tutor.md
@@ -0,0 +1,150 @@
+# Angular AI Tutor
+
+The Angular AI Tutor is designed to interactively guide you step-by-step through building a complete, modern Angular application from the ground up. You'll learn the latest patterns and best practices by building a real, tangible project: a **"Smart Recipe Box"** for creating and managing recipes.
+
+Our goal is to foster critical thinking and help you retain what you learn. Instead of just giving you code, the tutor will explain concepts, show you examples, and then give you project-specific exercises to solve on your own.
+
+## Get Started
+
+You can access the AI tutor via the [Angular MCP server](ai/mcp).
+
+1. [Install](ai/mcp#get-started) the Angular MCP server
+2. Create a new Angular project `ng new <project-name>`
+3. Navigate to your new project (`cd <project-name>`) in an AI-powered editor or tool, like the [Gemini CLI](https://geminicli.com/)
+4. Enter a prompt like `launch the Angular AI tutor`
+   ![A screenshot demonstrating how to launch the Angular AI Tutor in the Gemini CLI.](assets/images/launch-ai-tutor.png 'Launch the Angular AI Tutor')
+
+## Using the AI Tutor
+
+Each module begins with a brief concept explanation.
+![A screenshot of the Angular AI Tutor presenting a brief concept explanation.](assets/images/ai-tutor-preview-1.png 'Angular AI Tutor explanation')
+If applicable, the tutor will present a code example to demonstrate the concept.
+![A screenshot of the Angular AI Tutor showing a code example.](assets/images/ai-tutor-preview-2.png 'Angular AI Tutor code example')
+The tutor will also provide an open-ended exercise to test your understanding.
+![A screenshot of the Angular AI Tutor providing an exercise.](assets/images/ai-tutor-preview-3.png 'Angular AI Tutor exercise')
+Finally, the tutor will check your work before moving onto the next module.
+![A screenshot of the Angular AI Tutor checking the user's work.](assets/images/ai-tutor-preview-4.png 'Angular AI Tutor check')
+
+## How It Works: The Learning Cycle
+
+For each new topic, you'll follow a learning loop that emphasizes critical thinking to help you better retain what you learn.
+
+1. **Learn the Concept:** The tutor will briefly explain a core Angular feature and show you a generic code example to illustrate it.
+2. **Apply Your Knowledge:** You'll immediately get a hands-on exercise. The tutor presents these exercises at a high level with objectives and expected outcomes, encouraging you to think through the solution yourself.
+3. **Get Feedback & Support:** When you're ready, let the tutor know. It will **automatically read your project files** to verify your solution is correct. If you get stuck, you are in complete control. You can ask for a **"hint"** for more guidance, or get step-by-step instructions by typing **"detailed guide"** or **"step-by-step instructions."**
+
+Once you've succeeded, the tutor will move directly to the next topic. You can also ask the tutor for more information on a topic or ask any related Angular questions at any time.
+
+---
+
+## **Features & Commands**
+
+You are in control of your learning experience. Use these features at any time:
+
+### **Leave and Come Back**
+
+Feel free to take a break. Your progress is tied to your project's code. When you return for a new session, the tutor will automatically analyze your files to determine exactly where you left off, allowing you to seamlessly pick up right where you were.
+
+**Pro Tip:** We highly recommend using Git to save your progress. After completing a module, it's a great idea to commit your changes (e.g., `git commit -m "Complete Phase 1, Module 8"`). This acts as a personal checkpoint you can always return to.
+
+### **Adjust Your Experience Level**
+
+You can set your experience level to **Beginner (1-3)**, **Intermediate (4-7)**, or **Experienced (8-10)**. You can change this setting at any time during your session, and the tutor will immediately adapt its teaching style to match.
+
+**Example Prompts:**
+
+- "Set my experience level to beginner."
+- "Change my rating to 8."
+
+### **See the Full Learning Plan**
+
+Want to see the big picture or check how far you've come? Just ask for the table of contents.
+
+**Example Prompts:**
+
+- "Where are we?"
+- "Show the table of contents."
+- "Show the plan."
+
+The tutor will display the full learning plan and mark your current location.
+
+### **A Note on Styling**
+
+The tutor will apply basic styling to your application to keep things looking clean. You are highly encouraged to apply your own styling to make the app your own.
+
+### **Skip the Current Module**
+
+If you'd rather move on to the next topic in the learning path, you can ask the tutor to skip the current exercise.
+
+**Example Prompts:**
+
+- "Skip this section."
+- "Auto-complete this step for me."
+
+The tutor will ask for confirmation and then present you with the complete code solution for the current module and attempt to automatically apply any required updates to ensure you can continue smoothly with the next module.
+
+### **Jump to Any Topic**
+
+If you want to learn about a specific topic out of order (e.g., jump from the basics to forms), you can. The tutor will provide the necessary code to update your project to the correct starting point for the selected module and attempt to automatically apply any required updates.
+
+**Example Prompts:**
+
+- "Take me to the forms lesson."
+- "I want to learn about Route Guards now."
+- "Jump to the section on Services."
+
+---
+
+## **Troubleshooting**
+
+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.
+2. **Correct the Tutor:** If the tutor is mistaken about your progress (e.g., it says you're on Module 3 but you've completed Module 8), just tell it. For example: _"I'm actually on Module 8."_ The tutor will re-evaluate your code and adjust.
+3. **Verify Your UI:** If you want to confirm what your application's user interface should look like, just ask the tutor. For example: _"What should I see in my UI?"_
+4. **Reload the Browser Window:** A refresh can solve many issues related to your application.
+5. **Hard Restart the Browser:** Errors are sometimes only surfaced in the browser's developer console. A hard restart can help clear underlying issues related to the application.
+6. **Start a New Chat:** You can always start a new chat to remove the existing history and begin fresh. The tutor will read your files to find the latest step you were on.
+
+## **Your Learning Journey: The Phased Path**
+
+You will build your application over a four-phase journey. You can follow this path from start to finish to create a complete, fully-functional Angular application. Each module builds logically upon the last, taking you from the basics to advanced, real-world features.
+
+**A Note on Automated Setup:** Some modules require a setup step, like creating interfaces or mock data. In these cases, the tutor will present you with the code and file instructions. You will be responsible for creating and modifying these files as instructed before the exercise begins.
+
+### **Phase 1: Angular Fundamentals**
+
+- **Module 1:** Getting Started
+- **Module 2:** Dynamic Text with Interpolation
+- **Module 3:** Event Listeners (`(click)`)
+
+### **Phase 2: State and Signals**
+
+- **Module 4:** State Management with Writable Signals (Part 1: `set`)
+- **Module 5:** State Management with Writable Signals (Part 2: `update`)
+- **Module 6:** Computed Signals
+
+### **Phase 3: Component Architecture**
+
+- **Module 7:** Template Binding (Properties & Attributes)
+- **Module 8:** Creating & Nesting Components
+- **Module 9:** Component Inputs with Signals
+- **Module 10:** Styling Components
+- **Module 11:** List Rendering with `@for`
+- **Module 12:** Conditional Rendering with `@if`
+
+### **Phase 4: Advanced Features & Architecture**
+
+- **Module 13:** Two-Way Binding
+- **Module 14:** Services & Dependency Injection (DI)
+- **Module 15:** Basic Routing
+- **Module 16:** Introduction to Forms
+- **Module 17:** Intro to Angular Material
+
+---
+
+## **A Note on AI & Feedback**
+
+This tutor is powered by a Large Language Model (LLM). While we've worked hard to make it an expert, AIs can make mistakes. If you encounter an explanation or code example that seems incorrect, please let us know. You can correct the tutor, and it will use your feedback to adjust its response.
+
+For any technical bugs or feature requests, please [submit an issue](https://github.com/angular/angular-cli/issues).
diff --git a/adev-es/src/content/ai/design-patterns.en.md b/adev-es/src/content/ai/design-patterns.en.md
index 75ae54a..cdcd753 100644
--- a/adev-es/src/content/ai/design-patterns.en.md
+++ b/adev-es/src/content/ai/design-patterns.en.md
@@ -40,8 +40,9 @@ storyResource = resource({
 You can configure LLM APIs to return structured data. Strongly typing your `resource` to match the expected output from the LLM provides better type safety and editor autocompletion.
 
 To manage state derived from a resource, use a `computed` signal or `linkedSignal`. Because `linkedSignal` [provides access to prior values](guide/signals/linked-signal), it can serve a variety of AI-related use cases, including
-  * building a chat history
-  * preserving or customizing data that templates display while LLMs generate content
+
+- building a chat history
+- preserving or customizing data that templates display while LLMs generate content
 
 In the example below, `storyParts` is a `linkedSignal` that appends the latest story parts returned from `storyResource` to the existing array of story parts.
 
@@ -63,10 +64,10 @@ storyParts = linkedSignal<string[], string[]>({
 
 LLM APIs may be slower and more error-prone than conventional, more deterministic APIs. You can use several Angular features to build a performant and user-friendly interface.
 
-* **Scoped Loading:** place the `resource` in the component that directly uses the data. This helps limit change detection cycles (especially in zoneless applications) and prevents blocking other parts of your application. If data needs to be shared across multiple components, provide the `resource` from a service.  
-* **SSR and Hydration:** use Server-Side Rendering (SSR) with incremental hydration to render the initial page content quickly. You can show a placeholder for the AI-generated content and defer fetching the data until the component hydrates on the client.  
-* **Loading State:** use the `resource` `LOADING` [status](guide/signals/resource#resource-status) to show an indicator, like a spinner, while the request is in flight. This status covers both initial loads and reloads.  
-* **Error Handling and Retries:** use the `resource` [**`reload()`**](guide/signals/resource#reloading) method as a simple way for users to retry failed requests, may be more prevalent when relying on AI generated content.
+- **Scoped Loading:** place the `resource` in the component that directly uses the data. This helps limit change detection cycles (especially in zoneless applications) and prevents blocking other parts of your application. If data needs to be shared across multiple components, provide the `resource` from a service.
+- **SSR and Hydration:** use Server-Side Rendering (SSR) with incremental hydration to render the initial page content quickly. You can show a placeholder for the AI-generated content and defer fetching the data until the component hydrates on the client.
+- **Loading State:** use the `resource` `LOADING` [status](guide/signals/resource#resource-status) to show an indicator, like a spinner, while the request is in flight. This status covers both initial loads and reloads.
+- **Error Handling and Retries:** use the `resource` [**`reload()`**](guide/signals/resource#reloading) method as a simple way for users to retry failed requests, may be more prevalent when relying on AI generated content.
 
 The following example demonstrates how to create a responsive UI to dynamically display an AI generated image with loading and retry functionality.
 
@@ -88,8 +89,8 @@ The following example demonstrates how to create a responsive UI to dynamically
 }
 ```
 
-
 ## AI patterns in action: streaming chat responses
+
 Interfaces often display partial results from LLM-based APIs incrementally as response data arrives. Angular's resource API provides the ability to stream responses to support this type of pattern. The `stream` property of `resource` accepts an asynchronous function you can use to apply updates to a signal value over time. The signal being updated represents the data being streamed.
 
 ```ts
diff --git a/adev-es/src/content/ai/design-patterns.md b/adev-es/src/content/ai/design-patterns.md
index 39a87cf..864942e 100644
--- a/adev-es/src/content/ai/design-patterns.md
+++ b/adev-es/src/content/ai/design-patterns.md
@@ -12,7 +12,7 @@ Un patrón común al trabajar con prompts proporcionados por el usuario es separ
 
 Esta configuración asegura que la función **`loader`** del resource solo se ejecute cuando el usuario envía explícitamente su prompt, no en cada pulsación de tecla. Puedes usar parámetros de signal adicionales, como un `sessionId` o `userId` (que pueden ser útiles para crear sesiones persistentes de LLM), en el campo `loader`. De esta manera, la solicitud siempre usa los valores actuales de estos parámetros sin volver a disparar la función asíncrona definida en el campo `loader`.
 
-Muchos SDKs de IA proporcionan métodos auxiliares para hacer llamadas a la API. Por ejemplo, la biblioteca cliente de Genkit expone un método `runFlow` para llamar flows de Genkit, que puedes llamar desde el `loader` de un resource. Para otras APIs, puedes usar el [`httpResource`](guide/signals/resource#reactive-data-fetching-with-httpresource).
+Muchos SDKs de IA proporcionan métodos auxiliares para hacer llamadas a la API. Por ejemplo, la biblioteca cliente de Genkit expone un método `runFlow` para llamar flows de Genkit, que puedes llamar desde el `loader` de un resource. Para otras APIs, puedes usar el [`httpResource`](guide/signals/resource#obtención-de-datos-reactiva-con-httpresource).
 
 El siguiente ejemplo muestra un `resource` que obtiene partes de una historia generada por IA. El `loader` se dispara solo cuando el signal `storyInput` cambia.
 
@@ -40,8 +40,9 @@ storyResource = resource({
 Puedes configurar APIs de LLM para que devuelvan datos estructurados. Tipar fuertemente tu `resource` para que coincida con la salida esperada del LLM proporciona mejor seguridad de tipos y autocompletado del editor.
 
 Para gestionar estado derivado de un resource, usa un signal `computed` o `linkedSignal`. Dado que `linkedSignal` [proporciona acceso a valores previos](guide/signals/linked-signal), puede servir una variedad de casos de uso relacionados con IA, incluyendo
-  * construir un historial de chat
-  * preservar o personalizar datos que las plantillas muestran mientras los LLMs generan contenido
+
+- construir un historial de chat
+- preservar o personalizar datos que las plantillas muestran mientras los LLMs generan contenido
 
 En el ejemplo a continuación, `storyParts` es un `linkedSignal` que agrega las últimas partes de la historia devueltas desde `storyResource` al array existente de partes de la historia.
 
@@ -63,10 +64,10 @@ storyParts = linkedSignal<string[], string[]>({
 
 Las APIs de LLM pueden ser más lentas y más propensas a errores que las APIs convencionales, más determinísticas. Puedes usar varias características de Angular para construir una interfaz eficiente y amigable para el usuario.
 
-* **Carga Acotada:** coloca el `resource` en el componente que directamente usa los datos. Esto ayuda a limitar los ciclos de detección de cambios (especialmente en aplicaciones zoneless) y previene bloquear otras partes de tu aplicación. Si los datos necesitan ser compartidos entre múltiples componentes, proporciona el `resource` desde un servicio.
-* **SSR e Hidratación:** usa Server-Side Rendering (SSR) con hidratación incremental para renderizar el contenido inicial de la página rápidamente. Puedes mostrar un placeholder para el contenido generado por IA y diferir la obtención de datos hasta que el componente se hidrate en el cliente.
-* **Estado de Carga:** usa el [estado](guide/signals/resource#resource-status) `LOADING` del `resource` para mostrar un indicador, como un spinner, mientras la solicitud está en curso. Este estado cubre tanto cargas iniciales como recargas.
-* **Manejo de Errores y Reintentos:** usa el método [**`reload()`**](guide/signals/resource#reloading) del `resource` como una forma simple para que los usuarios reintenten solicitudes fallidas, que pueden ser más prevalentes al depender de contenido generado por IA.
+- **Carga Acotada:** coloca el `resource` en el componente que directamente usa los datos. Esto ayuda a limitar los ciclos de detección de cambios (especialmente en aplicaciones zoneless) y previene bloquear otras partes de tu aplicación. Si los datos necesitan ser compartidos entre múltiples componentes, proporciona el `resource` desde un servicio.
+- **SSR e Hidratación:** usa Server-Side Rendering (SSR) con hidratación incremental para renderizar el contenido inicial de la página rápidamente. Puedes mostrar un placeholder para el contenido generado por IA y diferir la obtención de datos hasta que el componente se hidrate en el cliente.
+- **Estado de Carga:** usa el [estado](guide/signals/resource#estado-del-resource) `LOADING` del `resource` para mostrar un indicador, como un spinner, mientras la solicitud está en curso. Este estado cubre tanto cargas iniciales como recargas.
+- **Manejo de Errores y Reintentos:** usa el método [**`reload()`**](guide/signals/resource#recargando) del `resource` como una forma simple para que los usuarios reintenten solicitudes fallidas, que pueden ser más prevalentes al depender de contenido generado por IA.
 
 El siguiente ejemplo demuestra cómo crear una interfaz de usuario responsiva para mostrar dinámicamente una imagen generada por IA con funcionalidad de carga y reintento.
 
@@ -90,6 +91,7 @@ El siguiente ejemplo demuestra cómo crear una interfaz de usuario responsiva pa
 
 
 ## Patrones de IA en acción: streaming de respuestas de chat
+
 Las interfaces a menudo muestran resultados parciales de APIs basadas en LLM de forma incremental a medida que llegan los datos de respuesta. La API de resource de Angular proporciona la capacidad de hacer streaming de respuestas para soportar este tipo de patrón. La propiedad `stream` de `resource` acepta una función asíncrona que puedes usar para aplicar actualizaciones a un valor de signal a lo largo del tiempo. El signal que se está actualizando representa los datos que se están transmitiendo en streaming.
 
 ```ts
diff --git a/adev-es/src/content/ai/develop-with-ai.en.md b/adev-es/src/content/ai/develop-with-ai.en.md
index fa7e252..4641f61 100644
--- a/adev-es/src/content/ai/develop-with-ai.en.md
+++ b/adev-es/src/content/ai/develop-with-ai.en.md
@@ -1,45 +1,49 @@
 # LLM prompts and AI IDE setup
+
 Generating code with large language models (LLMs) is a rapidly growing area of interest for developers. While LLMs are often capable of generating working code it can be a challenge to generate code for consistently evolving frameworks like Angular.
 
 Advanced instructions and prompting are an emerging standard for supporting modern code generation with domain specific details. This section contains curated content and resources to support more accurate code generation for Angular and LLMs.
 
 ## Custom Prompts and System Instructions
+
 Improve your experience generating code with LLMs by using one of the following custom, domain specific files.
 
 NOTE: These files will be updated on a regular basis staying up to date with Angular's conventions.
 
 Here is a set of instructions to help LLMs generate correct code that follows Angular best practices. This file can be included as system instructions to your AI tooling or included along with your prompt as context.
 
-<docs-code language="md" path="adev/src/context/best-practices.md" class="compact"/>
+<docs-code language="md" path="packages/core/resources/best-practices.md" class="compact"/>
 
-<a download href="/assets/context/best-practices.md" target="_blank">Click here to download the best-practices.md file.</a> 
+<a download href="/assets/context/best-practices.md" target="_blank">Click here to download the best-practices.md file.</a>
 
 ## 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">Firebase Studio</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">Configure `airules.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> |
-| VS Code | <a download=".instructions.md" href="/assets/context/guidelines.md" target="_blank">.instructions.md</a>  | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.instructions.md`</a> |
-| Windsurf | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>  | <a href="https://docs.windsurf.com/windsurf/cascade/memories#rules" target="_blank">Configure `guidelines.md`</a> |
+| 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">Configure `airules.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>                                          |
+| VS Code              | <a download=".instructions.md" href="/assets/context/guidelines.md" target="_blank">.instructions.md</a>               | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configure `.instructions.md`</a>                |
+| Windsurf             | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>                                     | <a href="https://docs.windsurf.com/windsurf/cascade/memories#rules" target="_blank">Configure `guidelines.md`</a>                                               |
 
 ## Angular CLI MCP Server setup
+
 The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) that allows AI assistants in your development environment to interact with the Angular CLI.
 
 [**Learn how to set up the Angular CLI MCP Server**](/ai/mcp)
 
 ## Providing Context with `llms.txt`
-`llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code.
 
+`llms.txt` is a proposed standard for websites designed to help LLMs better understand and process their content. The Angular team has developed two versions of this file to help LLMs and tools that use LLMs for code generation to create better modern Angular code.
 
-* <a href="/llms.txt" target="_blank">llms.txt</a> - an index file providing links to key files and resources. 
-* <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.
+- <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.
 
 ## 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.
 
+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.
diff --git a/adev-es/src/content/ai/develop-with-ai.md b/adev-es/src/content/ai/develop-with-ai.md
index dde8c1d..1f7812e 100644
--- a/adev-es/src/content/ai/develop-with-ai.md
+++ b/adev-es/src/content/ai/develop-with-ai.md
@@ -1,45 +1,50 @@
 # Prompts de LLM y configuración de IDE con IA
+
 Generar código con modelos de lenguaje grandes (LLMs) es un área de interés en rápido crecimiento para los desarrolladores. Aunque los LLMs a menudo son capaces de generar código funcional, puede ser un desafío generar código para frameworks en constante evolución como Angular.
 
 Las instrucciones avanzadas y el prompting son un estándar emergente para soportar la generación de código moderna con detalles específicos del dominio. Esta sección contiene contenido y recursos curados para apoyar una generación de código más precisa para Angular y LLMs.
 
 ## Prompts Personalizados e Instrucciones del Sistema
+
 Mejora tu experiencia generando código con LLMs usando uno de los siguientes archivos personalizados, específicos del dominio.
 
 NOTA: Estos archivos se actualizarán regularmente manteniéndose al día con las convenciones de Angular.
 
 Aquí hay un conjunto de instrucciones para ayudar a los LLMs a generar código correcto que sigue las mejores prácticas de Angular. Este archivo puede incluirse como instrucciones del sistema para tus herramientas de IA o incluirse junto con tu prompt como contexto.
 
-<docs-code language="md" path="adev/src/context/best-practices.md" class="compact"/>
+<docs-code language="md" path="packages/core/resources/best-practices.md" class="compact"/>
 
 <a download href="/assets/context/best-practices.md" target="_blank">Haz clic aquí para descargar el archivo best-practices.md.</a>
 
 ## Archivos de Reglas
+
 Varios editores, como <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">Firebase Studio</a> tienen archivos de reglas útiles para proporcionar contexto crítico a los LLMs.
 
-| Entorno/IDE | Archivo de Reglas                                                      | Instrucciones de Instalación                                                                                              |
-|:----------------|:----------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------|
-| 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">Configurar `airules.md`</a>         |
+| Entorno/IDE                  | Archivo de Reglas                                                                                                       | Instrucciones de Instalación                                                                                                                                    |
+|:---------------------------- |:----------------------------------------------------------------------------------------------------------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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">Configurar `airules.md`</a>                                                   |
 | IDEs potenciados por Copilot | <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">Configurar `.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">Configurar `cursorrules.md`</a>                         |
-| IDEs de JetBrains  | <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">Configurar `guidelines.md`</a> |
-| VS Code | <a download=".instructions.md" href="/assets/context/guidelines.md" target="_blank">.instructions.md</a>  | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configurar `.instructions.md`</a> |
-| Windsurf | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>  | <a href="https://docs.windsurf.com/windsurf/cascade/memories#rules" target="_blank">Configurar `guidelines.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">Configurar `cursorrules.md`</a>                                                                  |
+| IDEs de JetBrains            | <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">Configurar `guidelines.md`</a>                                          |
+| VS Code                      | <a download=".instructions.md" href="/assets/context/guidelines.md" target="_blank">.instructions.md</a>                | <a href="https://code.visualstudio.com/docs/copilot/copilot-customization#_custom-instructions" target="_blank">Configurar `.instructions.md`</a>                |
+| Windsurf                     | <a download href="/assets/context/guidelines.md" target="_blank">guidelines.md</a>                                      | <a href="https://docs.windsurf.com/windsurf/cascade/memories#rules" target="_blank">Configurar `guidelines.md`</a>                                               |
 
 ## Configuración del Servidor MCP de Angular CLI
+
 Angular CLI incluye un [servidor de Model Context Protocol (MCP)](https://modelcontextprotocol.io/) experimental que permite a los asistentes de IA en tu entorno de desarrollo interactuar con Angular CLI.
 
 [**Aprende cómo configurar el Servidor MCP de Angular CLI**](/ai/mcp)
 
 ## Proporcionando Contexto con `llms.txt`
-`llms.txt` es un estándar propuesto para sitios web diseñado para ayudar a los LLMs a entender y procesar mejor su contenido. El equipo de Angular ha desarrollado dos versiones de este archivo para ayudar a los LLMs y herramientas que usan LLMs para generación de código a crear mejor código Angular moderno.
 
+`llms.txt` es un estándar propuesto para sitios web diseñado para ayudar a los LLMs a entender y procesar mejor su contenido. El equipo de Angular ha desarrollado dos versiones de este archivo para ayudar a los LLMs y herramientas que usan LLMs para generación de código a crear mejor código Angular moderno.
 
-* <a href="/llms.txt" target="_blank">llms.txt</a> - un archivo índice que proporciona enlaces a archivos y recursos clave.
-* <a href="/context/llm-files/llms-full.txt" target="_blank">llms-full.txt</a> - un conjunto compilado más robusto de recursos que describen cómo funciona Angular y cómo construir aplicaciones Angular.
+- <a href="/llms.txt" target="_blank">llms.txt</a> - un archivo índice que proporciona enlaces a archivos y recursos clave.
+- <a href="/assets/context/llms-full.txt" target="_blank">llms-full.txt</a> - un conjunto compilado más robusto de recursos que describen cómo funciona Angular y cómo construir aplicaciones Angular.
 
 Asegúrate de [consultar la página de visión general](/ai) para más información sobre cómo integrar IA en tus aplicaciones Angular.
 
 ## Web Codegen Scorer
+
 El equipo de Angular desarrolló y publicó como código abierto el [Web Codegen Scorer](https://github.com/angular/web-codegen-scorer), una herramienta para evaluar y puntuar la calidad del código web generado por IA. Puedes usar esta herramienta para tomar decisiones basadas en evidencia relacionadas con código generado por IA, como ajustar prompts para mejorar la precisión del código generado por LLM para Angular. Estos prompts pueden incluirse como instrucciones del sistema para tus herramientas de IA o como contexto con tu prompt. También puedes usar esta herramienta para comparar la calidad del código producido por diferentes modelos y monitorear la calidad a lo largo del tiempo a medida que los modelos y agentes evolucionan.
 
diff --git a/adev-es/src/content/ai/mcp-server-setup.en.md b/adev-es/src/content/ai/mcp-server-setup.en.md
index d51831b..148c431 100644
--- a/adev-es/src/content/ai/mcp-server-setup.en.md
+++ b/adev-es/src/content/ai/mcp-server-setup.en.md
@@ -6,11 +6,22 @@ The Angular CLI includes an experimental [Model Context Protocol (MCP) server](h
 
 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` |
-| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `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.                                    |      ✅      |      ✅     |
-| `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.               |      ❌      |      ✅     |
+| 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` |
+| :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
+| `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) |      ✅      |     ❌      |
 
 ## Get Started
 
@@ -69,20 +80,21 @@ Create a file named `.gemini/settings.json` in your project's root and add the f
 
 ### 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`. Paste the following configuration, which does not use a top-level property for the server list.
+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
 {
-  "name": "Angular CLI",
-  "command": "npx",
-  "args": [
-    "-y",
-    "@angular/cli",
-    "mcp"
-  ]
+  "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.
@@ -117,11 +129,11 @@ For other IDEs, check your IDE's documentation for the proper location of the MC
 
 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` |
-
+| 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`.                 |         |
 
 For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
 
@@ -138,4 +150,4 @@ For example, to run the server in read-only mode in VS Code, you would update yo
 
 ## 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).
\ No newline at end of file
+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-es/src/content/ai/mcp-server-setup.md b/adev-es/src/content/ai/mcp-server-setup.md
index 49167e6..e6266ed 100644
--- a/adev-es/src/content/ai/mcp-server-setup.md
+++ b/adev-es/src/content/ai/mcp-server-setup.md
@@ -6,13 +6,24 @@ Angular CLI incluye un [servidor de Model Context Protocol (MCP)](https://modelc
 
 El servidor MCP de Angular CLI proporciona varias herramientas para asistirte en tu flujo de trabajo de desarrollo. Por defecto, las siguientes herramientas están habilitadas:
 
-| Nombre                 | Descripción                                                                                                                                                                                        | `local-only` | `read-only` |
-| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
-| `get_best_practices`   | Recupera la Guía de Mejores Prácticas de Angular. Esta guía es esencial para asegurar que todo el código se adhiera a los estándares modernos, incluyendo componentes standalone, formularios tipados y flujo de control moderno. |      ✅      |      ✅     |
-| `list_projects`        | Lista los nombres de todas las aplicaciones y bibliotecas definidas dentro de un espacio de trabajo de Angular. Lee el archivo de configuración `angular.json` para identificar los proyectos.                                    |      ✅      |      ✅     |
-| `search_documentation` | Busca en la documentación oficial de Angular en https://angular.dev. Esta herramienta debe usarse para responder cualquier pregunta sobre Angular, como para APIs, tutoriales y mejores prácticas.               |      ❌      |      ✅     |
+| Nombre                        | Descripción                                                                                                                                                                                        | `local-only` | `read-only` |
+| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
+| `ai_tutor`                  | Inicia un tutor de Angular interactivo potenciado por IA. Se recomienda ejecutarlo desde un nuevo proyecto Angular usando v20 o posterior. [Aprende más](ai/ai-tutor).                                                     |      ✅      |     ✅      |
+| `find_examples`             | Encuentra ejemplos de código autorizados de una base de datos curada de ejemplos oficiales y de mejores prácticas, enfocándose en características de Angular **modernas, nuevas y recientemente actualizadas**.                                 |      ✅      |     ✅      |
+| `get_best_practices`        | Recupera la Guía de Mejores Prácticas de Angular. Esta guía es esencial para asegurar que todo el código se adhiera a los estándares modernos, incluyendo componentes standalone, formularios tipados y flujo de control moderno. |      ✅      |     ✅      |
+| `list_projects`             | Lista los nombres de todas las aplicaciones y bibliotecas definidas dentro de un espacio de trabajo de Angular. Lee el archivo de configuración `angular.json` para identificar los proyectos.                                    |      ✅      |     ✅      |
+| `onpush_zoneless_migration` | Analiza código Angular y proporciona un plan paso a paso e iterativo para migrarlo a detección de cambios `OnPush`, un prerrequisito para una aplicación sin zona.                                           |      ✅      |     ✅      |
+| `search_documentation`      | Busca en la documentación oficial de Angular en <https://angular.dev>. Esta herramienta debe usarse para responder cualquier pregunta sobre Angular, como para APIs, tutoriales y mejores prácticas.             |      ❌      |     ✅      |
 
-## Primeros Pasos
+### Herramientas Experimentales
+
+Algunas herramientas se proporcionan en estado experimental / de vista previa ya que son nuevas o no están completamente probadas. Habilítalas individualmente con la opción [`--experimental-tool`](#opciones-de-comando) y úsalas con precaución.
+
+| Nombre        | Descripción                                                                                                                                                                                                             | `local-only` | `read-only` |
+| :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
+| `modernize`.  | Realiza migraciones de código y proporciona más instrucciones sobre cómo modernizar código Angular para alinearse con las últimas mejores prácticas y sintaxis. [Aprende más](https://angular.dev/reference/migrations) |      ✅     |     ❌       |
+
+## Get Started
 
 Para comenzar, ejecuta el siguiente comando en tu terminal:
 
@@ -69,20 +80,21 @@ Crea un archivo llamado `.gemini/settings.json` en la raíz de tu proyecto y agr
 
 ### IDEs de JetBrains
 
-En los IDEs de JetBrains (como IntelliJ IDEA o WebStorm), después de instalar el plugin JetBrains AI Assistant, ve a `Settings | Tools | AI Assistant | Model Context Protocol (MCP)`. Agrega un nuevo servidor y selecciona `As JSON`. Pega la siguiente configuración, que no usa una propiedad de nivel superior para la lista de servidores.
+En los IDEs de JetBrains (como IntelliJ IDEA o WebStorm), después de instalar el plugin JetBrains AI Assistant, ve a `Settings | Tools | AI Assistant | Model Context Protocol (MCP)`. Agrega un nuevo servidor (`+`) y selecciona `As JSON`. Luego pega la siguiente configuración:
 
 ```json
 {
-  "name": "Angular CLI",
-  "command": "npx",
-  "args": [
-    "-y",
-    "@angular/cli",
-    "mcp"
-  ]
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
 }
 ```
 
+Para las instrucciones más actualizadas sobre cómo configurar servidores MCP, consulta la documentación de JetBrains: [Connect to an MCP server](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).
+
 ### VS Code
 
 En la raíz de tu proyecto, crea un archivo llamado `.vscode/mcp.json` y agrega la siguiente configuración. Nota el uso de la propiedad `servers`.
@@ -117,11 +129,11 @@ Para otros IDEs, consulta la documentación de tu IDE para la ubicación adecuad
 
 El comando `mcp` puede configurarse con las siguientes opciones pasadas como argumentos en la configuración MCP de tu IDE:
 
-| Opción         | Tipo      | Descripción                                                                                                | Predeterminado |
-| :------------- | :-------- | :--------------------------------------------------------------------------------------------------------- | :------ |
-| `--read-only`  | `boolean` | Solo registra herramientas que no realizan cambios en el proyecto. Tu editor o agente de codificación aún puede realizar ediciones. | `false` |
-| `--local-only` | `boolean` | Solo registra herramientas que no requieren una conexión a internet. Tu editor o agente de codificación aún puede enviar datos a través de la red. | `false` |
-
+| Opción                        | Tipo      | Descripción                                                                                                                       | Default |
+| :---------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------- | :------ |
+| `--read-only`                 | `boolean` | Solo registra herramientas que no realizan cambios en el proyecto. Tu editor o agente de codificación aún puede realizar ediciones.                 | `false` |
+| `--local-only`                | `boolean` | Solo registra herramientas que no requieren una conexión a internet. Tu editor o agente de codificación aún puede enviar datos a través de la red. | `false` |
+| `--experimental-tool`<br>`-E` | `string`  | Habilita una [herramienta experimental](#herramientas-experimentales). Separa múltiples opciones con espacios, ej. `-E tool_a tool_b`.                 |         |
 
 Por ejemplo, para ejecutar el servidor en modo de solo lectura en VS Code, actualizarías tu `mcp.json` así:
 
diff --git a/adev-es/src/content/ai/overview.en.md b/adev-es/src/content/ai/overview.en.md
index 33314b8..e2da24e 100644
--- a/adev-es/src/content/ai/overview.en.md
+++ b/adev-es/src/content/ai/overview.en.md
@@ -1,4 +1,5 @@
 <!-- TODO: need an Angular + AI logo -->
+
 <docs-decorative-header title="Build with AI" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
 Build AI-powered apps. Develop faster with AI.
 </docs-decorative-header>
@@ -9,9 +10,9 @@ Generative AI (GenAI) with large language models (LLMs) enables the creation of
 
 Developing features like these would have previously required deep domain expertise and significant engineering effort. However, new products and SDKs are lowering the barrier to entry. Angular is well-suited for integrating AI into your web application as a result of:
 
-* Angular's robust templating APIs enable the creation of dynamic, cleanly composed UIs made from generated content
-* Strong, signal-based architecture designed to dynamically manage data and state
-* Angular integrates seamlessly with AI SDKs and APIs
+- Angular's robust templating APIs enable the creation of dynamic, cleanly composed UIs made from generated content
+- Strong, signal-based architecture designed to dynamically manage data and state
+- Angular integrates seamlessly with AI SDKs and APIs
 
 This guide demonstrates how you can use [Genkit](/ai#build-ai-powered-applications-with-genkit-and-angular), [Firebase AI Logic](/ai#build-ai-powered-applications-with-firebase-ai-logic-and-angular), and the [Gemini API](/ai#build-ai-powered-applications-with-gemini-api-and-angular) to infuse your Angular apps with AI today. This guide will jumpstart your AI-powered web app development journey by explaining how to begin integrating AI into Angular apps. This guide also shares resources, such as starter kits, example code, and recipes for common workflows, you can use to get up to speed quickly.
 
@@ -20,77 +21,93 @@ To get started, you should have a basic understanding of Angular. New to Angular
 NOTE: While this page features integrations and examples with Google AI products, tools like Genkit are model agnostic and allow you to choose your own model. In many cases, the examples and code samples are applicable to other third-party solutions.
 
 ## Getting Started
+
 Building AI-powered applications is a new and rapidly developing field. It can be challenging to decide where to start and which technologies to choose. The following section provides three options to choose from:
 
-1. *Genkit* gives you the choice of [supported model and interface with a unified API](https://genkit.dev) for building full-stack applications. Ideal for applications requiring sophisticated back-end AI logic, such as personalized recommendations.
+1. _Genkit_ gives you the choice of [supported model and interface with a unified API](https://genkit.dev) for building full-stack applications. Ideal for applications requiring sophisticated back-end AI logic, such as personalized recommendations.
 
-1. *Firebase AI Logic* provides a secure client-side API for Google's models to build client-side only applications or mobile apps. Best for interactive AI features directly in the browser, such as real-time text analysis or basic chatbots.
+1. _Firebase AI Logic_ provides a secure client-side API for Google's models to build client-side only applications or mobile apps. Best for interactive AI features directly in the browser, such as real-time text analysis or basic chatbots.
 
-1. *Gemini API* enables you to build an application that uses the methods and functionality exposed through the API surface directly, best for full-stack applications. Suitable for applications needing direct control over AI models, like custom image generation or deep data processing.
+1. _Gemini API_ enables you to build an application that uses the methods and functionality exposed through the API surface directly, best for full-stack applications. Suitable for applications needing direct control over AI models, like custom image generation or deep data processing.
 
 ### Build AI-powered applications with Genkit and Angular
-[Genkit](https://genkit.dev) is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. It offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs. As a server-side solution, your web apps need a supported server environment, such as a node-based server in order to integrate with Genkit. Building a full-stack app using Angular SSR gives you the starting server-side code, for example. 
+
+[Genkit](https://genkit.dev) is an open-source toolkit designed to help you build AI-powered features in web and mobile apps. It offers a unified interface for integrating AI models from Google, OpenAI, Anthropic, Ollama, and more, so you can explore and choose the best models for your needs. As a server-side solution, your web apps need a supported server environment, such as a node-based server in order to integrate with Genkit. Building a full-stack app using Angular SSR gives you the starting server-side code, for example.
 
 Here are examples of how to build with Genkit and Angular:
 
-* [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience.
+- [Agentic Apps with Genkit and Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit) — New to building with AI? Start here with a basic app that features an agentic workflow. Perfect place to start for your first AI building experience.
 
-* [Use Genkit in an Angular app](https://genkit.dev/docs/angular/)— Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features.
+- [Use Genkit in an Angular app](https://genkit.dev/docs/angular/) — Build a basic application that uses Genkit Flows, Angular and Gemini 2.5 Flash. This step-by-step walkthrough guides you through creating a full-stack Angular application with AI features.
 
-* [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case.
+- [Dynamic Story Generator app](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) — Learn to build an agentic Angular app powered by Genkit, Gemini and Imagen 3 to dynamically generate a story based on user interaction featuring beautiful image panels to accompany the events that take place. Start here if you'd like to experiment with a more advanced use-case.
 
   This example also has an in-depth video walkthrough of the functionality:
-    * [Watch "Building Agentic Apps with Angular and Genkit live!"](https://youtube.com/live/mx7yZoIa2n4?feature=share)
-    * [Watch "Building Agentic Apps with Angular and Genkit live! PT 2"](https://youtube.com/live/YR6LN5_o3B0?feature=share)
+  - [Watch "Building Agentic Apps with Angular and Genkit live!"](https://youtube.com/live/mx7yZoIa2n4?feature=share)
+  - [Watch "Building Agentic Apps with Angular and Genkit live! PT 2"](https://youtube.com/live/YR6LN5_o3B0?feature=share)
+
+- [Building Agentic apps with Firebase and Google Cloud (Barista Example)](https://developers.google.com/solutions/learn/agentic-barista) - Learn how to build an agentic coffee ordering app with Firebase and Google Cloud. This example uses both Firebase AI Logic and Genkit.
 
-* [Building Agentic apps with Firebase and Google Cloud (Barista Example)](https://developers.google.com/solutions/learn/agentic-barista) - Learn how to build an agentic coffee ordering app with Firebase and Google Cloud. This example uses both Firebase AI Logic and Genkit.
+- [Creating Dynamic, Server-Driven UIs](https://github.com/angular/examples/tree/main/dynamic-sdui-app) - Learn to build Agentic Angular apps with UI views that are generated at runtime based on user input.
+
+  This example also has an in-depth video walkthrough of the functionality:
+  - [Watch "Exploring the future of web apps"](https://www.youtube.com/live/4qargCqOu70?feature=share)
 
 ### Build AI-powered applications with Firebase AI Logic and Angular
+
 [Firebase AI Logic](https://firebase.google.com/products/vertex-ai-in-firebase) provides a secure way to interact with Vertex AI Gemini API or Imagen API directly from your web and mobile apps. This is compelling for Angular developers since apps can be either full-stack or client-side only. If you are developing a client-side only application, Firebase AI Logic is a good fit for incorporating AI into your web apps.
 
 Here is an example of how to build with Firebase AI Logic and Angular:
-* [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Use this starter-kit to build an e-commerce application with a chat agent that can perform tasks. Start here if you do not have experience building with Firebase AI Logic and Angular.
+
+- [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Use this starter-kit to build an e-commerce application with a chat agent that can perform tasks. Start here if you do not have experience building 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 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.
+- [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.
 
-* [AI Chatbot app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-chatbot) - This template starts with a chatbot user interface that communicates with the Gemini API via HTTP. 
+- [AI Chatbot app template](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-chatbot) - This template starts with a chatbot user interface that communicates with the Gemini API via HTTP.
 
 ## Best Practices
+
 ### 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`*.
+
+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 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).
+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).
 
 For server-side connections to model APIs that require API keys, prefer using a secrets manager or environment variable, not `environments.ts`. You should follow standard best practices for securing API keys and credentials. Firebase now provides a new secrets manager with the latest updates from Firebase App Hosting. To learn more, [check out the official documentation](https://firebase.google.com/docs/app-hosting/configure).
 
 For a server-side connection example in a full-stack application, see the code: [Angular AI Example (Genkit and Angular Story Generator) repository](https://github.com/angular/examples/tree/main/genkit-angular-story-generator).
 
 ### Use Tool Calling to enhance apps
+
 If you want to build agentic workflows, where agents are able to act and use tools to solve problems based on prompts use "tool calling". Tool calling, also known as function calling, is a way to provide LLMs the ability to make requests back to the application that called it. As a developer, you define which tools are available and you are in control of how or when the tools are called.
 
-Tool calling further enhances your web apps by expanding your AI integration further than a question and answer style chat bot. In fact, you can empower your model to request function calls using the function calling API of your model provider. The available tools can be used to perform more complex actions within the context of your application. 
+Tool calling further enhances your web apps by expanding your AI integration further than a question and answer style chat bot. In fact, you can empower your model to request function calls using the function calling API of your model provider. The available tools can be used to perform more complex actions within the context of your application.
 
 In the [e-commerce example](https://github.com/angular/examples/blob/main/vertex-ai-firebase-angular-example/src/app/ai.service.ts#L88) of the [Angular examples repository](https://github.com/angular/examples), the LLM requests to make calls to functions for inventory in order to gain the necessary context to perform more complex tasks such as calculating how much a group of items in the store will cost. The scope of the available API is up to you as a developer just as is whether or not to call a function requested by the LLM. You remain in control of the flow of execution. You can expose specific functions of a service for example but not all functions of that service.
 
 ### Handling non-deterministic responses
+
 Because models can return non-deterministic results, your applications should be designed with that in mind. Here are a few strategies that you can use in your application implementation:
-* Adjust prompts and model parameters (such as [temperature](https://ai.google.dev/gemini-api/docs/prompting-strategies)) for more or less deterministic responses. You can [find out more in the prompting strategies section](https://ai.google.dev/gemini-api/docs/prompting-strategies) of [ai.google.dev](https://ai.google.dev/).
-* Use the "human in the loop" strategy where a human verifies outputs before proceeding in a workflow. Build your application workflows to allow operators (humans or other models) to verify outputs and confirm key decisions.
-* Employ tool (or function) calling and schema constraints to guide and restrict model responses to predefined formats, increasing response predictability.
+
+- Adjust prompts and model parameters (such as [temperature](https://ai.google.dev/gemini-api/docs/prompting-strategies)) for more or less deterministic responses. You can [find out more in the prompting strategies section](https://ai.google.dev/gemini-api/docs/prompting-strategies) of [ai.google.dev](https://ai.google.dev/).
+- Use the "human in the loop" strategy where a human verifies outputs before proceeding in a workflow. Build your application workflows to allow operators (humans or other models) to verify outputs and confirm key decisions.
+- Employ tool (or function) calling and schema constraints to guide and restrict model responses to predefined formats, increasing response predictability.
 
 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 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.
+
+- 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.
 
 ## Next steps
 
diff --git a/adev-es/src/content/ai/overview.md b/adev-es/src/content/ai/overview.md
index 4233557..c3977df 100644
--- a/adev-es/src/content/ai/overview.md
+++ b/adev-es/src/content/ai/overview.md
@@ -1,66 +1,78 @@
 <!-- TODO: need an Angular + AI logo -->
+
 <docs-decorative-header title="Construye con IA" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
 Construye aplicaciones potenciadas por IA. Desarrolla más rápido con IA.
 </docs-decorative-header>
 
-ÚTIL: ¿Buscas comenzar a construir en tu IDE potenciado por IA favorito? <br>Consulta nuestras [reglas de prompts y mejores prácticas](/ai/develop-with-ai).
+CONSEJO: ¿Buscas comenzar a construir en tu IDE potenciado por IA favorito? <br>Consulta nuestras [reglas de prompts y mejores prácticas](/ai/develop-with-ai).
 
 La IA generativa (GenAI) con modelos de lenguaje grandes (LLMs) permite la creación de experiencias de aplicación sofisticadas y atractivas, incluyendo contenido personalizado, recomendaciones inteligentes, generación y comprensión de medios, resúmenes de información y funcionalidad dinámica.
 
 Desarrollar características como estas habría requerido previamente experiencia profunda en el dominio y un esfuerzo de ingeniería significativo. Sin embargo, nuevos productos y SDKs están bajando la barrera de entrada. Angular es ideal para integrar IA en tu aplicación web como resultado de:
 
-* Las APIs de plantillas robustas de Angular permiten la creación de interfaces de usuario dinámicas, claramente compuestas y hechas a partir de contenido generado
-* Arquitectura sólida basada en signals diseñada para gestionar dinámicamente datos y estado
-* Angular se integra perfectamente con SDKs y APIs de IA
+- Las APIs de plantillas robustas de Angular permiten la creación de interfaces de usuario dinámicas, claramente compuestas y hechas a partir de contenido generado
+- Arquitectura sólida basada en signals diseñada para gestionar dinámicamente datos y estado
+- Angular se integra perfectamente con SDKs y APIs de IA
 
-Esta guía demuestra cómo puedes usar [Genkit](/ai#build-ai-powered-applications-with-genkit-and-angular), [Firebase AI Logic](/ai#build-ai-powered-applications-with-firebase-ai-logic-and-angular) y la [Gemini API](/ai#build-ai-powered-applications-with-gemini-api-and-angular) para infundir IA en tus aplicaciones Angular hoy. Esta guía impulsará tu viaje de desarrollo de aplicaciones web potenciadas por IA explicando cómo comenzar a integrar IA en aplicaciones Angular. Esta guía también comparte recursos, como kits de inicio, código de ejemplo y recetas para flujos de trabajo comunes, que puedes usar para ponerte al día rápidamente.
+Esta guía demuestra cómo puedes usar [Genkit](/ai#construye-aplicaciones-potenciadas-por-ia-con-genkit-y-angular), [Firebase AI Logic](/ai#construye-aplicaciones-potenciadas-por-ia-con-firebase-ai-logic-y-angular) y la [Gemini API](/ai#construye-aplicaciones-potenciadas-por-ia-con-gemini-api-y-angular) para infundir IA en tus aplicaciones Angular hoy. Esta guía impulsará tu viaje de desarrollo de aplicaciones web potenciadas por IA explicando cómo comenzar a integrar IA en aplicaciones Angular. Esta guía también comparte recursos, como kits de inicio, código de ejemplo y recetas para flujos de trabajo comunes, que puedes usar para ponerte al día rápidamente.
 
 Para comenzar, deberías tener un entendimiento básico de Angular. ¿Nuevo en Angular? Prueba nuestra [guía de elementos esenciales](/essentials) o nuestros [tutoriales de primeros pasos](/tutorials).
 
 NOTA: Aunque esta página presenta integraciones y ejemplos con productos de IA de Google, herramientas como Genkit son agnósticas de modelo y te permiten elegir tu propio modelo. En muchos casos, los ejemplos y muestras de código son aplicables a otras soluciones de terceros.
 
 ## Primeros Pasos
+
 Construir aplicaciones potenciadas por IA es un campo nuevo y en rápido desarrollo. Puede ser desafiante decidir dónde empezar y qué tecnologías elegir. La siguiente sección proporciona tres opciones para elegir:
 
-1. *Genkit* te da la opción de [modelo soportado e interfaz con una API unificada](https://genkit.dev) para construir aplicaciones full-stack. Ideal para aplicaciones que requieren lógica de IA sofisticada en el backend, como recomendaciones personalizadas.
+1. _Genkit_ te da la opción de [modelo soportado e interfaz con una API unificada](https://genkit.dev) para construir aplicaciones full-stack. Ideal para aplicaciones que requieren lógica de IA sofisticada en el backend, como recomendaciones personalizadas.
 
-1. *Firebase AI Logic* proporciona una API segura del lado del cliente para los modelos de Google para construir aplicaciones de solo lado del cliente o aplicaciones móviles. Mejor para características de IA interactivas directamente en el navegador, como análisis de texto en tiempo real o chatbots básicos.
+1. _Firebase AI Logic_ proporciona una API segura del lado del cliente para los modelos de Google para construir aplicaciones de solo lado del cliente o aplicaciones móviles. Mejor para características de IA interactivas directamente en el navegador, como análisis de texto en tiempo real o chatbots básicos.
 
-1. *Gemini API* te permite construir una aplicación que use los métodos y funcionalidades expuestos a través de la superficie de la API directamente, mejor para aplicaciones full-stack. Adecuado para aplicaciones que necesitan control directo sobre modelos de IA, como generación de imágenes personalizadas o procesamiento profundo de datos.
+1. _Gemini API_ te permite construir una aplicación que use los métodos y funcionalidades expuestos a través de la superficie de la API directamente, mejor para aplicaciones full-stack. Adecuado para aplicaciones que necesitan control directo sobre modelos de IA, como generación de imágenes personalizadas o procesamiento profundo de datos.
 
 ### Construye aplicaciones potenciadas por IA con Genkit y Angular
+
 [Genkit](https://genkit.dev) es un toolkit de código abierto diseñado para ayudarte a construir características potenciadas por IA en aplicaciones web y móviles. Ofrece una interfaz unificada para integrar modelos de IA de Google, OpenAI, Anthropic, Ollama y más, para que puedas explorar y elegir los mejores modelos para tus necesidades. Como solución del lado del servidor, tus aplicaciones web necesitan un entorno de servidor soportado, como un servidor basado en node para integrarse con Genkit. Construir una aplicación full-stack usando Angular SSR te da el código inicial del lado del servidor, por ejemplo.
 
 Aquí hay ejemplos de cómo construir con Genkit y Angular:
 
-* [Aplicaciones Agénticas con Genkit y Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit)— ¿Nuevo construyendo con IA? Comienza aquí con una aplicación básica que presenta un flujo de trabajo agéntico. Lugar perfecto para comenzar tu primera experiencia de construcción con IA.
+- [Aplicaciones Agénticas con Genkit y Angular starter-kit](https://github.com/angular/examples/tree/main/genkit-angular-starter-kit) — ¿Nuevo construyendo con IA? Comienza aquí con una aplicación básica que presenta un flujo de trabajo agéntico. Lugar perfecto para comenzar tu primera experiencia de construcción con IA.
 
-* [Usar Genkit en una aplicación Angular](https://genkit.dev/docs/angular/)— Construye una aplicación básica que usa Genkit Flows, Angular y Gemini 2.5 Flash. Este tutorial paso a paso te guía a través de la creación de una aplicación Angular full-stack con características de IA.
+- [Usar Genkit en una aplicación Angular](https://genkit.dev/docs/angular/) — Construye una aplicación básica que usa Genkit Flows, Angular y Gemini 2.5 Flash. Este tutorial paso a paso te guía a través de la creación de una aplicación Angular full-stack con características de IA.
 
-* [Aplicación de Generador de Historias Dinámico](https://github.com/angular/examples/tree/main/genkit-angular-story-generator)— Aprende a construir una aplicación Angular agéntica potenciada por Genkit, Gemini e Imagen 3 para generar dinámicamente una historia basada en la interacción del usuario con hermosos paneles de imagen para acompañar los eventos que ocurren. Comienza aquí si te gustaría experimentar con un caso de uso más avanzado.
+- [Aplicación de Generador de Historias Dinámico](https://github.com/angular/examples/tree/main/genkit-angular-story-generator) — Aprende a construir una aplicación Angular agéntica potenciada por Genkit, Gemini e Imagen 3 para generar dinámicamente una historia basada en la interacción del usuario con hermosos paneles de imagen para acompañar los eventos que ocurren. Comienza aquí si te gustaría experimentar con un caso de uso más avanzado.
 
   Este ejemplo también tiene un video tutorial en profundidad de la funcionalidad:
-    * [Ver "Building Agentic Apps with Angular and Genkit live!"](https://youtube.com/live/mx7yZoIa2n4?feature=share)
-    * [Ver "Building Agentic Apps with Angular and Genkit live! PT 2"](https://youtube.com/live/YR6LN5_o3B0?feature=share)
+  - [Ver "Building Agentic Apps with Angular and Genkit live!"](https://youtube.com/live/mx7yZoIa2n4?feature=share)
+  - [Ver "Building Agentic Apps with Angular and Genkit live! PT 2"](https://youtube.com/live/YR6LN5_o3B0?feature=share)
+
+- [Construyendo aplicaciones agénticas con Firebase y Google Cloud (Ejemplo Barista)](https://developers.google.com/solutions/learn/agentic-barista) - Aprende cómo construir una aplicación agéntica de pedidos de café con Firebase y Google Cloud. Este ejemplo usa tanto Firebase AI Logic como Genkit.
 
-* [Construyendo aplicaciones agénticas con Firebase y Google Cloud (Ejemplo Barista)](https://developers.google.com/solutions/learn/agentic-barista) - Aprende cómo construir una aplicación agéntica de pedidos de café con Firebase y Google Cloud. Este ejemplo usa tanto Firebase AI Logic como Genkit.
+- [Creando UIs Dinámicas Impulsadas por el Servidor](https://github.com/angular/examples/tree/main/dynamic-sdui-app) - Aprende a construir aplicaciones Angular agénticas con vistas de UI que se generan en tiempo de ejecución basadas en la entrada del usuario.
+
+  Este ejemplo también tiene un video tutorial en profundidad de la funcionalidad:
+  - [Ver "Exploring the future of web apps"](https://www.youtube.com/live/4qargCqOu70?feature=share)
 
 ### Construye aplicaciones potenciadas por IA con Firebase AI Logic y Angular
+
 [Firebase AI Logic](https://firebase.google.com/products/vertex-ai-in-firebase) proporciona una forma segura de interactuar con la API de Vertex AI Gemini o la API de Imagen directamente desde tus aplicaciones web y móviles. Esto es atractivo para los desarrolladores de Angular ya que las aplicaciones pueden ser full-stack o de solo lado del cliente. Si estás desarrollando una aplicación de solo lado del cliente, Firebase AI Logic es una buena opción para incorporar IA en tus aplicaciones web.
 
 Aquí hay un ejemplo de cómo construir con Firebase AI Logic y Angular:
-* [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Usa este starter-kit para construir una aplicación de e-commerce con un agente de chat que puede realizar tareas. Comienza aquí si no tienes experiencia construyendo con Firebase AI Logic y Angular.
+
+- [Firebase AI Logic x Angular Starter Kit](https://github.com/angular/examples/tree/main/vertex-ai-firebase-angular-example) - Usa este starter-kit para construir una aplicación de e-commerce con un agente de chat que puede realizar tareas. Comienza aquí si no tienes experiencia construyendo con Firebase AI Logic y Angular.
 
   Este ejemplo incluye un [video tutorial en profundidad explicando la funcionalidad y demuestra cómo agregar nuevas características](https://youtube.com/live/4vfDz2al_BI).
 
 ### Construye aplicaciones potenciadas por IA con Gemini API y Angular
+
 La [Gemini API](https://ai.google.dev/gemini-api/docs) proporciona acceso a modelos de última generación de Google que soportan entrada de audio, imágenes, video y texto. Estos modelos están optimizados para casos de uso específicos, [aprende más en el sitio de documentación de Gemini API](https://ai.google.dev/gemini-api/docs/models).
 
-* [Plantilla de aplicación Angular de Editor de Texto con IA](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - Usa esta plantilla para comenzar con un editor de texto completamente funcional con características potenciadas por IA como refinar texto, expandir texto y formalizar texto. Este es un buen punto de partida para ganar experiencia llamando a la Gemini API vía HTTP.
+- [Plantilla de aplicación Angular de Editor de Texto con IA](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-text-editor) - Usa esta plantilla para comenzar con un editor de texto completamente funcional con características potenciadas por IA como refinar texto, expandir texto y formalizar texto. Este es un buen punto de partida para ganar experiencia llamando a la Gemini API vía HTTP.
 
-* [Plantilla de aplicación de Chatbot con IA](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-chatbot) - Esta plantilla comienza con una interfaz de usuario de chatbot que se comunica con la Gemini API vía HTTP.
+- [Plantilla de aplicación de Chatbot con IA](https://github.com/FirebaseExtended/firebase-framework-tools/tree/main/starters/angular/ai-chatbot) - Esta plantilla comienza con una interfaz de usuario de chatbot que se comunica con la Gemini API vía HTTP.
 
 ## Mejores Prácticas
+
 ### Conectarse a proveedores de modelos y mantener tus Credenciales de API Seguras
 Cuando te conectas a proveedores de modelos, es importante mantener tus secretos de API seguros. *Nunca pongas tu clave de API en un archivo que se envía al cliente, como `environments.ts`*.
 
@@ -80,22 +92,25 @@ Tool calling mejora aún más tus aplicaciones web expandiendo tu integración d
 En el [ejemplo de e-commerce](https://github.com/angular/examples/blob/main/vertex-ai-firebase-angular-example/src/app/ai.service.ts#L88) del [repositorio de ejemplos de Angular](https://github.com/angular/examples), el LLM solicita hacer llamadas a funciones para inventario con el fin de obtener el contexto necesario para realizar tareas más complejas como calcular cuánto costará un grupo de artículos en la tienda. El alcance de la API disponible depende de ti como desarrollador, al igual que si llamar o no a una función solicitada por el LLM. Permaneces en control del flujo de ejecución. Puedes exponer funciones específicas de un servicio, por ejemplo, pero no todas las funciones de ese servicio.
 
 ### Manejo de respuestas no determinísticas
+
 Debido a que los modelos pueden devolver resultados no determinísticos, tus aplicaciones deben diseñarse con eso en mente. Aquí hay algunas estrategias que puedes usar en la implementación de tu aplicación:
-* Ajusta los prompts y parámetros del modelo (como [temperature](https://ai.google.dev/gemini-api/docs/prompting-strategies)) para respuestas más o menos determinísticas. Puedes [descubrir más en la sección de estrategias de prompting](https://ai.google.dev/gemini-api/docs/prompting-strategies) de [ai.google.dev](https://ai.google.dev/).
-* Usa la estrategia "humano en el bucle" donde un humano verifica las salidas antes de proceder en un flujo de trabajo. Construye los flujos de trabajo de tu aplicación para permitir que operadores (humanos u otros modelos) verifiquen salidas y confirmen decisiones clave.
-* Emplea tool calling (o function calling) y restricciones de esquema para guiar y restringir las respuestas del modelo a formatos predefinidos, aumentando la previsibilidad de respuestas.
+
+- Ajusta los prompts y parámetros del modelo (como [temperature](https://ai.google.dev/gemini-api/docs/prompting-strategies)) para respuestas más o menos determinísticas. Puedes [descubrir más en la sección de estrategias de prompting](https://ai.google.dev/gemini-api/docs/prompting-strategies) de [ai.google.dev](https://ai.google.dev/).
+- Usa la estrategia "humano en el bucle" donde un humano verifica las salidas antes de proceder en un flujo de trabajo. Construye los flujos de trabajo de tu aplicación para permitir que operadores (humanos u otros modelos) verifiquen salidas y confirmen decisiones clave.
+- Emplea tool calling (o function calling) y restricciones de esquema para guiar y restringir las respuestas del modelo a formatos predefinidos, aumentando la previsibilidad de respuestas.
 
 Incluso considerando estas estrategias y técnicas, se deben incorporar alternativas sensatas en el diseño de tu aplicación. Sigue los estándares existentes de resiliencia de aplicación. Por ejemplo, no es aceptable que una aplicación falle si un recurso o API no está disponible. En ese escenario, se muestra un mensaje de error al usuario y, si es aplicable, también se muestran opciones para los siguientes pasos. Construir aplicaciones potenciadas por IA requiere la misma consideración. Confirma que la respuesta esté alineada con la salida esperada y proporciona un "aterrizaje seguro" en caso de que no esté alineada mediante [graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation). Esto también aplica a interrupciones de API de proveedores de LLM.
 
 Considera este ejemplo: El proveedor de LLM no está respondiendo. Una estrategia potencial para manejar la interrupción es:
-* Guardar la respuesta del usuario para usar en un escenario de reintento (ahora o en un momento posterior)
-* Alertar al usuario sobre la interrupción con un mensaje apropiado que no revele información sensible
-* Reanudar la conversación en un momento posterior una vez que los servicios estén disponibles nuevamente.
+
+- Guardar la respuesta del usuario para usar en un escenario de reintento (ahora o en un momento posterior)
+- Alertar al usuario sobre la interrupción con un mensaje apropiado que no revele información sensible
+- Reanudar la conversación en un momento posterior una vez que los servicios estén disponibles nuevamente.
 
 ## Siguientes Pasos
 
 Para aprender sobre prompts de LLM y configuración de IDE con IA, consulta las siguientes guías:
 
 <docs-pill-row>
-  <docs-pill href="ai/develop-with-ai" title="Prompts de LLM y configuración de IDE"/>
+  <docs-pill href="ai/develop-with-ai" title="LLM prompts and IDE setup"/>
 </docs-pill-row>
diff --git a/adev-es/src/content/best-practices/a11y.en.md b/adev-es/src/content/best-practices/a11y.en.md
index 7df1b3b..9fb674e 100644
--- a/adev-es/src/content/best-practices/a11y.en.md
+++ b/adev-es/src/content/best-practices/a11y.en.md
@@ -11,28 +11,48 @@ This page discusses best practices for designing Angular applications that work
 ## Accessibility attributes
 
 <!-- TODO: add link once attribute binding guide is implemented -->
-Building accessible web experience often involves setting [Accessible Rich Internet Applications \(ARIA\) attributes](https://web.dev/learn/accessibility/aria-html/) to provide semantic meaning where it might otherwise be missing.
+
+Building accessible web experiences often involves setting [Accessible Rich Internet Applications \(ARIA\) attributes](https://web.dev/learn/accessibility/aria-html/) to provide semantic meaning where it might otherwise be missing.
 Use attribute binding template syntax to control the values of accessibility-related attributes.
 
-When binding to ARIA attributes in Angular, you must use the `attr.` prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.
+### ARIA attributes and properties
+
+When binding to ARIA attributes in Angular, you can use them directly like any other HTML attribute.
 
-<docs-code language="html">
-<!-- Use attr. when binding to an ARIA attribute -->
-<button [attr.aria-label]="myActionLabel">…</button>
-</docs-code>
+```html
+<button [aria-label]="myActionLabel">…</button>
+```
 
-NOTE: This syntax is only necessary for attribute *bindings*.
-Static ARIA attributes require no extra syntax.
+Static ARIA attributes work as regular HTML attributes.
 
-<docs-code language="html">
-<!-- Static ARIA attributes require no extra syntax -->
+```html
 <button aria-label="Save document">…</button>
-</docs-code>
+```
 
 HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\).
 
-<!-- TODO: add link once attribute binding guide implemented -->
-See the [Binding syntax guide](guide/templates) for more background on the difference between attributes and properties.
+Some ARIA patterns expose DOM APIs or directive inputs that accept structured values (for example, collections of `Element` references). Use standard property bindings for those cases so the underlying relationship stays synchronized.
+
+```angular-ts
+@Component({
+  template: `
+    <h2 #dialogTitle>Attention</h2>
+    <p #dialogDescription>Please review your answers before continuing.</p>
+
+    <section
+      role="dialog"
+      [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
+      <ng-content />
+    </section>
+
+`,
+})
+export class ReviewDialog {}
+```
+
+Here `[ariaLabelledByElements]` accepts an array of elements, so property binding keeps the element references up to date whenever the template data changes.
+
+See the [binding guide](guide/templates/binding#aria-attributes) for a summary of ARIA attribute syntax.
 
 ## Angular UI components
 
@@ -40,11 +60,11 @@ The [Angular Material](https://material.angular.dev) library, which is maintaine
 The [Component Development Kit (CDK)](https://material.angular.dev/cdk/categories) includes the `a11y` package that provides tools to support various areas of accessibility.
 For example:
 
-* `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
-    See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
+- `LiveAnnouncer` is used to announce messages for screen-reader users using an `aria-live` region.
+  See the W3C documentation for more information on [aria-live regions](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
 
-* The `cdkTrapFocus` directive traps Tab-key focus within an element.
-    Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.
+- The `cdkTrapFocus` directive traps Tab-key focus within an element.
+  Use it to create accessible experience for components such as modal dialogs, where focus must be constrained.
 
 For full details of these and other tools, see the [Angular CDK accessibility overview](https://material.angular.dev/cdk/a11y/overview).
 
@@ -63,7 +83,7 @@ You can see examples of this pattern in Angular Material:
 
 Sometimes using the appropriate native element requires a container element.
 For example, the native `<input>` element cannot have children, so any custom text entry components need to wrap an `<input>` with extra elements.
-By just including `<input>` in your custom component's template, it's impossible for your component's users  to set arbitrary properties and attributes to the `<input>` element.
+By just including `<input>` in your custom component's template, it's impossible for your component's users to set arbitrary properties and attributes to the `<input>` element.
 Instead, create a container component that uses content projection to include the native control in the component's API.
 
 You can see [`MatFormField`](https://material.angular.dev/components/form-field/overview) as an example of this pattern.
@@ -72,9 +92,9 @@ You can see [`MatFormField`](https://material.angular.dev/components/form-field/
 
 The following example shows how to make a progress bar accessible by using host binding to control accessibility-related attributes.
 
-* The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes.
-    The ARIA attribute `aria-valuenow` is bound to the user's input.
-* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
+- The component defines an accessibility-enabled element with both the standard HTML attribute `role`, and ARIA attributes.
+  The ARIA attribute `aria-valuenow` is bound to the user's input.
+- In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
 
 <docs-code-multifile>
   <docs-code
@@ -101,16 +121,14 @@ Use the `NavigationEnd` event from the `Router` service to know when to update f
 
 The following example shows how to find and focus the main content header in the DOM after navigation.
 
-<docs-code language="typescript">
-
-router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
-  const mainHeader = document.querySelector('#main-content-header')
+```ts
+router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
+  const mainHeader = document.querySelector('#main-content-header');
   if (mainHeader) {
     mainHeader.focus();
   }
 });
-
-</docs-code>
+```
 
 In a real application, the element that receives focus depends on your specific application structure and layout.
 The focused element should put users in a position to immediately move into the main content that has just been routed into view.
@@ -149,17 +167,25 @@ The following example shows how to apply the `active-page` class to active links
 
 <!-- vale Angular.Angular_Spelling = NO -->
 
+## Deferred Loading
+
+When using Angular's `@defer` blocks for lazy loading content, consider the accessibility implications for users with assistive technologies.
+Screen readers may not automatically announce content changes when deferred components load, potentially leaving users unaware of new content.
+
+To ensure deferred content changes are properly announced, wrap your `@defer` blocks in elements with appropriate ARIA live regions.
+For detailed guidance and examples, see the [accessibility section in the defer guide](/guide/templates/defer#keep-accessibility-in-mind).
+
 ## More information
 
-* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
-* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria)
-* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
-* [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
-* [Inclusive Components](https://inclusive-components.design)
-* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources)
-* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web)
-* [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
-* [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality) provides linting rules that can help you make sure your code meets accessibility standards.
+- [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
+- [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria)
+- [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
+- [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
+- [Inclusive Components](https://inclusive-components.design)
+- [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources)
+- [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web)
+- [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
+- [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality) provides linting rules that can help you make sure your code meets accessibility standards.
 
 <!-- vale Angular.Angular_Spelling = YES -->
 
@@ -167,7 +193,7 @@ Books
 
 <!-- vale Angular.Google_Quotes = NO -->
 
-* "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
-* "Inclusive Design Patterns," Heydon Pickering
+- "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
+- "Inclusive Design Patterns," Heydon Pickering
 
 <!-- vale Angular.Google_Quotes = YES -->
diff --git a/adev-es/src/content/best-practices/a11y.md b/adev-es/src/content/best-practices/a11y.md
index 444eb7d..94e38e7 100644
--- a/adev-es/src/content/best-practices/a11y.md
+++ b/adev-es/src/content/best-practices/a11y.md
@@ -11,28 +11,48 @@ Esta página aborda las mejores prácticas para diseñar aplicaciones Angular qu
 ## Atributos de accesibilidad
 
 <!-- TODO: add link once attribute binding guide is implemented -->
+
 Construir experiencias web accesibles a menudo implica establecer [atributos de Aplicaciones de Internet Enriquecidas Accesibles (ARIA)](https://web.dev/learn/accessibility/aria-html/) para proporcionar significado semántico donde de otro modo podría faltar.
 Usa la sintaxis de plantilla de enlace de atributo para controlar los valores de los atributos relacionados con la accesibilidad.
 
-Al enlazar a atributos ARIA en Angular, debes usar el prefijo `attr.`. La especificación ARIA depende específicamente de atributos HTML en lugar de propiedades de elementos DOM.
+### Atributos y propiedades ARIA
+
+Al enlazar a atributos ARIA en Angular, puedes usarlos directamente como cualquier otro atributo HTML.
 
-<docs-code language="html">
-<!-- Usa attr. al enlazar a un atributo ARIA -->
-<button [attr.aria-label]="myActionLabel">…</button>
-</docs-code>
+```html
+<button [aria-label]="myActionLabel">…</button>
+```
 
-NOTA: Esta sintaxis solo es necesaria para *enlaces* de atributo.
-Los atributos ARIA estáticos no requieren sintaxis adicional.
+Los atributos ARIA estáticos funcionan como atributos HTML regulares.
 
-<docs-code language="html">
-<!-- Los atributos ARIA estáticos no requieren sintaxis adicional -->
+```html
 <button aria-label="Save document">…</button>
-</docs-code>
+```
+
+CONSEJO: Por convención, los atributos HTML usan nombres en minúsculas (`tabindex`), mientras que las propiedades usan nombres en camelCase (`tabIndex`).
+
+Algunos patrones ARIA exponen APIs DOM o entradas de directivas que aceptan valores estructurados (por ejemplo, colecciones de referencias de `Element`). Usa enlaces de propiedades estándar para esos casos para que la relación subyacente se mantenga sincronizada.
+
+```angular-ts
+@Component({
+  template: `
+    <h2 #dialogTitle>Atención</h2>
+    <p #dialogDescription>Por favor revisa tus respuestas antes de continuar.</p>
+
+    <section
+      role="dialog"
+      [ariaLabelledByElements]="[dialogTitle, dialogDescription]">
+      <ng-content />
+    </section>
 
-ÚTIL: Por convención, los atributos HTML usan nombres en minúsculas (`tabindex`), mientras que las propiedades usan nombres en camelCase (`tabIndex`).
+`,
+})
+export class ReviewDialog {}
+```
+
+Aquí `[ariaLabelledByElements]` acepta un array de elementos, por lo que el enlace de propiedades mantiene las referencias de elementos actualizadas siempre que cambien los datos de la plantilla.
 
-<!-- TODO: add link once attribute binding guide implemented -->
-Consulta la [guía de sintaxis de enlace](guide/templates) para más información sobre la diferencia entre atributos y propiedades.
+Consulta la [guía de enlaces](guide/templates/binding#aria-attributes) para un resumen de la sintaxis de atributos ARIA.
 
 ## Componentes UI de Angular
 
@@ -40,11 +60,11 @@ La biblioteca [Angular Material](https://material.angular.dev), que es mantenida
 El [Component Development Kit (CDK)](https://material.angular.dev/cdk/categories) incluye el paquete `a11y` que proporciona herramientas para soportar diversas áreas de accesibilidad.
 Por ejemplo:
 
-* `LiveAnnouncer` se usa para anunciar mensajes para usuarios de lectores de pantalla usando una región `aria-live`.
-    Consulta la documentación de W3C para más información sobre [regiones aria-live](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
+- `LiveAnnouncer` se usa para anunciar mensajes para usuarios de lectores de pantalla usando una región `aria-live`.
+  Consulta la documentación de W3C para más información sobre [regiones aria-live](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live).
 
-* La directiva `cdkTrapFocus` atrapa el foco de la tecla Tab dentro de un elemento.
-    Úsala para crear experiencias accesibles para componentes como diálogos modales, donde el foco debe estar restringido.
+- La directiva `cdkTrapFocus` atrapa el foco de la tecla Tab dentro de un elemento.
+  Úsala para crear experiencias accesibles para componentes como diálogos modales, donde el foco debe estar restringido.
 
 Para detalles completos de estas y otras herramientas, consulta la [visión general de accesibilidad de Angular CDK](https://material.angular.dev/cdk/a11y/overview).
 
@@ -72,9 +92,9 @@ Puedes ver [`MatFormField`](https://material.angular.dev/components/form-field/o
 
 El siguiente ejemplo muestra cómo hacer accesible una barra de progreso usando host binding para controlar atributos relacionados con la accesibilidad.
 
-* El componente define un elemento habilitado para accesibilidad con tanto el atributo HTML estándar `role`, como atributos ARIA.
+- El componente define un elemento habilitado para accesibilidad con tanto el atributo HTML estándar `role`, como atributos ARIA.
     El atributo ARIA `aria-valuenow` está enlazado a la entrada del usuario.
-* En la plantilla, el atributo `aria-label` asegura que el control sea accesible para lectores de pantalla.
+- En la plantilla, el atributo `aria-label` asegura que el control sea accesible para lectores de pantalla.
 
 <docs-code-multifile>
   <docs-code
@@ -101,16 +121,14 @@ Usa el evento `NavigationEnd` del servicio `Router` para saber cuándo actualiza
 
 El siguiente ejemplo muestra cómo encontrar y enfocar el encabezado de contenido principal en el DOM después de la navegación.
 
-<docs-code language="typescript">
-
+```ts
 router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
   const mainHeader = document.querySelector('#main-content-header')
   if (mainHeader) {
     mainHeader.focus();
   }
 });
-
-</docs-code>
+```
 
 En una aplicación real, el elemento que recibe el foco depende de la estructura y diseño específicos de tu aplicación.
 El elemento enfocado debe poner a los usuarios en una posición para moverse inmediatamente al contenido principal que acaba de ser enrutado a la vista.
@@ -149,17 +167,25 @@ El siguiente ejemplo muestra cómo aplicar la clase `active-page` a los enlaces
 
 <!-- vale Angular.Angular_Spelling = NO -->
 
+## Carga diferida
+
+Al usar los bloques `@defer` de Angular para la carga diferida de contenido, considera las implicaciones de accesibilidad para usuarios con tecnologías de asistencia.
+Los lectores de pantalla pueden no anunciar automáticamente los cambios de contenido cuando se cargan componentes diferidos, potencialmente dejando a los usuarios sin conocimiento del nuevo contenido.
+
+Para asegurar que los cambios de contenido diferido se anuncien correctamente, envuelve tus bloques `@defer` en elementos con regiones ARIA live apropiadas.
+Para orientación detallada y ejemplos, consulta la [sección de accesibilidad en la guía de defer](/guide/templates/defer#keep-accessibility-in-mind).
+
 ## Más información
 
-* [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
-* [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria)
-* [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
-* [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
-* [Inclusive Components](https://inclusive-components.design)
-* [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources)
-* [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web)
-* [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
-* [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality) proporciona reglas de linting que pueden ayudarte a asegurarte de que tu código cumpla con los estándares de accesibilidad.
+- [Accessibility - Google Web Fundamentals](https://developers.google.com/web/fundamentals/accessibility)
+- [ARIA specification and authoring practices](https://www.w3.org/TR/wai-aria)
+- [Material Design - Accessibility](https://material.io/design/usability/accessibility.html)
+- [Smashing Magazine](https://www.smashingmagazine.com/search/?q=accessibility)
+- [Inclusive Components](https://inclusive-components.design)
+- [Accessibility Resources and Code Examples](https://dequeuniversity.com/resources)
+- [W3C - Web Accessibility Initiative](https://www.w3.org/WAI/people-use-web)
+- [Rob Dodson A11ycasts](https://www.youtube.com/watch?v=HtTyRajRuyY)
+- [Angular ESLint](https://github.com/angular-eslint/angular-eslint#functionality) proporciona reglas de linting que pueden ayudarte a asegurarte de que tu código cumpla con los estándares de accesibilidad.
 
 <!-- vale Angular.Angular_Spelling = YES -->
 
@@ -167,7 +193,7 @@ Libros
 
 <!-- vale Angular.Google_Quotes = NO -->
 
-* "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
-* "Inclusive Design Patterns," Heydon Pickering
+- "A Web for Everyone: Designing Accessible User Experiences," Sarah Horton and Whitney Quesenbery
+- "Inclusive Design Patterns," Heydon Pickering
 
 <!-- vale Angular.Google_Quotes = YES -->
diff --git a/adev-es/src/content/best-practices/error-handling.en.md b/adev-es/src/content/best-practices/error-handling.en.md
index 36dbb05..c4cd17a 100644
--- a/adev-es/src/content/best-practices/error-handling.en.md
+++ b/adev-es/src/content/best-practices/error-handling.en.md
@@ -8,7 +8,7 @@ For example, consider a component that fetches user data from an API. The code r
 
 ## Unhandled errors are reported to the `ErrorHandler`
 
-Angular reports unhandled errors to the application's root [ErrorHandler](api/core/ErrorHandler). When providing a custom `ErrorHandler`, provide it in your `ApplicationConfig` as part of calling `bootstrapApplication`.
+Angular reports unhandled errors to the application's root `ErrorHandler`. When providing a custom `ErrorHandler`, provide it in your `ApplicationConfig` as part of calling `bootstrapApplication`.
 
 When building an Angular application, often you write code that is called automatically _by_ the framework. For example, Angular is responsible for calling a component's constructor and lifecycle methods when that component appears in a template. When the framework runs your code, there's nowhere you could reasonably add a `try` block to gracefully handle errors. In situations like this, Angular catches errors and sends them to the `ErrorHandler`.
 
@@ -16,13 +16,33 @@ Angular does _not_ catch errors inside of APIs that are called directly by your
 
 Angular catches _asynchronous_ errors from user promises or observables only when:
 
-* There is an explicit contract for Angular to wait for and use the result of the asynchronous operation, and
-* When errors are not presented in the return value or state.
+- There is an explicit contract for Angular to wait for and use the result of the asynchronous operation, and
+- When errors are not presented in the return value or state.
 
 For example, `AsyncPipe` and `PendingTasks.run` forward errors to the `ErrorHandler`, whereas `resource` presents the error in the `status` and `error` properties.
 
 Errors that Angular reports to the `ErrorHandler` are _unexpected_ errors. These errors may be unrecoverable or an indication that the state of the application is corrupted. Applications should provide error handling using `try` blocks or appropriate error handling operators (like `catchError` in RxJS) where the error occurs whenever possible rather than relying on the `ErrorHandler`, which is most frequently and appropriately used only as a mechanism to report potentially fatal errors to the error tracking and logging infrastructure.
 
+```ts
+export class GlobalErrorHandler implements ErrorHandler {
+  private readonly analyticsService = inject(AnalyticsService);
+  private readonly router = inject(Router);
+
+  handleError(error: any) {
+    const url = this.router.url;
+    const errorMessage = error?.message ?? 'unknown';
+
+    this.analyticsService.trackEvent({
+      eventName: 'exception',
+      description: `Screen: ${url} | ${errorMessage}`,
+    });
+
+    console.error(GlobalErrorHandler.name, { error });
+  }
+}
+
+```
+
 ### `TestBed` rethrows errors by default
 
 In many cases, `ErrorHandler` may only log errors and otherwise allow the application to continue running. In tests, however, you almost always want to surface these errors. Angular's `TestBed` rethrows unexpected errors to ensure that errors caught by the framework cannot be unintentionally missed or ignored. In rare circumstances, a test may specifically attempt to ensure errors do not cause the application to be unresponsive or crash. In these situations, you can [configure `TestBed` to _not_ rethrow application errors](api/core/testing/TestModuleMetadata#rethrowApplicationErrors) with `TestBed.configureTestingModule({rethrowApplicationErrors: false})`.
diff --git a/adev-es/src/content/best-practices/error-handling.md b/adev-es/src/content/best-practices/error-handling.md
index 528088f..bb009b7 100644
--- a/adev-es/src/content/best-practices/error-handling.md
+++ b/adev-es/src/content/best-practices/error-handling.md
@@ -16,13 +16,33 @@ Angular _no_ captura errores dentro de APIs que son llamadas directamente por tu
 
 Angular captura errores _asíncronos_ de promesas de usuario u observables solo cuando:
 
-* Hay un contrato explícito para que Angular espere y use el resultado de la operación asíncrona, y
-* Cuando los errores no se presentan en el valor de retorno o estado.
+- Hay un contrato explícito para que Angular espere y use el resultado de la operación asíncrona, y
+- Cuando los errores no se presentan en el valor de retorno o estado.
 
 Por ejemplo, `AsyncPipe` y `PendingTasks.run` reenvían errores al `ErrorHandler`, mientras que `resource` presenta el error en las propiedades `status` y `error`.
 
 Los errores que Angular reporta al `ErrorHandler` son errores _inesperados_. Estos errores pueden ser irrecuperables o una indicación de que el estado de la aplicación está corrupto. Las aplicaciones deben proporcionar manejo de errores usando bloques `try` u operadores apropiados de manejo de errores (como `catchError` en RxJS) donde ocurre el error siempre que sea posible en lugar de depender del `ErrorHandler`, que se usa con más frecuencia y apropiadamente solo como un mecanismo para reportar errores potencialmente fatales a la infraestructura de seguimiento de errores y logging.
 
+```ts
+export class GlobalErrorHandler implements ErrorHandler {
+  private readonly analyticsService = inject(AnalyticsService);
+  private readonly router = inject(Router);
+
+  handleError(error: any) {
+    const url = this.router.url;
+    const errorMessage = error?.message ?? 'unknown';
+
+    this.analyticsService.trackEvent({
+      eventName: 'exception',
+      description: `Screen: ${url} | ${errorMessage}`,
+    });
+
+    console.error(GlobalErrorHandler.name, { error });
+  }
+}
+
+```
+
 ### `TestBed` relanza errores por defecto
 
 En muchos casos, `ErrorHandler` puede solo registrar errores y de otra manera permitir que la aplicación continúe ejecutándose. En pruebas, sin embargo, casi siempre quieres exponer estos errores. El `TestBed` de Angular relanza errores inesperados para asegurar que los errores capturados por el framework no puedan ser perdidos o ignorados sin intención. En circunstancias raras, una prueba puede intentar específicamente asegurar que los errores no causen que la aplicación no responda o se bloquee. En estas situaciones, puedes [configurar `TestBed` para _no_ relanzar errores de aplicación](api/core/testing/TestModuleMetadata#rethrowApplicationErrors) con `TestBed.configureTestingModule({rethrowApplicationErrors: false})`.
@@ -33,7 +53,7 @@ Los errores que no son capturados ni por el código de la aplicación ni por la
 
 ### Renderización del lado del cliente
 
-Agregar [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) al [ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig) agrega los escuchadores `'error'` y `'unhandledrejection'` a la ventana del navegador y reenvía esos errores al `ErrorHandler`. El CLI de Angular genera nuevas aplicaciones con este proveedor por defecto. El equipo de Angular recomienda manejar estos errores globales para la mayoría de las aplicaciones, ya sea con los escuchadores integrados del framework o con tus propios escuchadores personalizados. Si proporcionas escuchadores personalizados, puedes eliminar `provideBrowserGlobalErrorListeners`.
+Agregar [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) al [ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap) agrega los escuchadores `'error'` y `'unhandledrejection'` a la ventana del navegador y reenvía esos errores al `ErrorHandler`. El CLI de Angular genera nuevas aplicaciones con este proveedor por defecto. El equipo de Angular recomienda manejar estos errores globales para la mayoría de las aplicaciones, ya sea con los escuchadores integrados del framework o con tus propios escuchadores personalizados. Si proporcionas escuchadores personalizados, puedes eliminar `provideBrowserGlobalErrorListeners`.
 
 ### Renderización del lado del servidor e híbrida
 
diff --git a/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.en.md b/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.en.md
index 64e984d..39313fb 100644
--- a/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.en.md
+++ b/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.en.md
@@ -10,8 +10,8 @@ If you are confident that a part of the application is not affected by a state c
 
 OnPush change detection instructs Angular to run change detection for a component subtree **only** when:
 
-* The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with `==`.
-* Angular handles an event _(for example using event binding, output binding, or `@HostListener` )_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.
+- The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with `==`.
+- Angular handles an event _(for example using event binding, output binding, or `@HostListener` )_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.
 
 You can set the change detection strategy of a component to `OnPush` in the `@Component` decorator:
 
@@ -128,5 +128,5 @@ class event eventNode
 
 ## Edge cases
 
-* **Modifying input properties in TypeScript code**. When you use an API like `@ViewChild` or `@ContentChild` to get a reference to a component in TypeScript and manually modify an `@Input` property, Angular will not automatically run change detection for OnPush components. If you need Angular to run change detection, you can inject `ChangeDetectorRef` in your component and call `changeDetectorRef.markForCheck()` to tell Angular to schedule a change detection.
-* **Modifying object references**. In case an input receives a mutable object as value and you modify the object but preserve the reference, Angular will not invoke change detection. That’s the expected behavior because the previous and the current value of the input point to the same reference.
+- **Modifying input properties in TypeScript code**. When you use an API like `@ViewChild` or `@ContentChild` to get a reference to a component in TypeScript and manually modify an `@Input` property, Angular will not automatically run change detection for OnPush components. If you need Angular to run change detection, you can inject `ChangeDetectorRef` in your component and call `changeDetectorRef.markForCheck()` to tell Angular to schedule a change detection.
+- **Modifying object references**. In case an input receives a mutable object as value and you modify the object but preserve the reference, Angular will not invoke change detection. That’s the expected behavior because the previous and the current value of the input point to the same reference.
diff --git a/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.md b/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.md
index 3dff507..dcb747b 100644
--- a/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.md
+++ b/adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.md
@@ -10,8 +10,8 @@ Si confías en que una parte de la aplicación no está afectada por un cambio d
 
 El change detection OnPush le indica a Angular que ejecute change detection para un subárbol de componentes **solo** cuando:
 
-* El componente raíz del subárbol recibe nuevas entradas como resultado de un enlace de plantilla. Angular compara el valor actual y pasado de la entrada con `==`.
-* Angular maneja un evento _(por ejemplo usando enlace de evento, enlace de salida, o `@HostListener`)_ en el componente raíz del subárbol o cualquiera de sus hijos, ya sea que estén usando change detection OnPush o no.
+- El componente raíz del subárbol recibe nuevas entradas como resultado de un enlace de plantilla. Angular compara el valor actual y pasado de la entrada con `==`.
+- Angular maneja un evento _(por ejemplo usando enlace de evento, enlace de salida, o `@HostListener`)_ en el componente raíz del subárbol o cualquiera de sus hijos, ya sea que estén usando change detection OnPush o no.
 
 Puedes establecer la estrategia de change detection de un componente a `OnPush` en el decorador `@Component`:
 
diff --git a/adev-es/src/content/best-practices/runtime-performance/slow-computations.en.md b/adev-es/src/content/best-practices/runtime-performance/slow-computations.en.md
index 38f8aab..744080e 100644
--- a/adev-es/src/content/best-practices/runtime-performance/slow-computations.en.md
+++ b/adev-es/src/content/best-practices/runtime-performance/slow-computations.en.md
@@ -2,13 +2,13 @@
 
 On every change detection cycle, Angular synchronously:
 
-* Evaluates all template expressions in all components, unless specified otherwise, based on that each component's detection strategy
-* Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks.
-A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.
+- Evaluates all template expressions in all components, unless specified otherwise, based on that each component's detection strategy
+- Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks.
+  A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.
 
 ## Identifying slow computations
 
-You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent  evaluating its template and lifecycle hooks.
+You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent evaluating its template and lifecycle hooks.
 
 <img alt="Angular DevTools profiler preview showing slow computation" src="assets/images/best-practices/runtime-performance/slow-computations.png">
 
@@ -18,9 +18,9 @@ For example, in the preceding screenshot, the second recorded change detection c
 
 Here are several techniques to remove slow computations:
 
-* **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
-* **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
-* **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
-* **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
+- **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
+- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
+- **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
+- **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
 
 Pure pipes and memoization have different trade-offs. Pure pipes are an Angular built-in concept compared to memoization, which is a general software engineering practice for caching function results. The memory overhead of memoization could be significant if you invoke the heavy computation frequently with different arguments.
diff --git a/adev-es/src/content/best-practices/runtime-performance/slow-computations.md b/adev-es/src/content/best-practices/runtime-performance/slow-computations.md
index a6ecab5..d77d95f 100644
--- a/adev-es/src/content/best-practices/runtime-performance/slow-computations.md
+++ b/adev-es/src/content/best-practices/runtime-performance/slow-computations.md
@@ -2,9 +2,9 @@
 
 En cada ciclo de change detection, Angular sincrónicamente:
 
-* Evalúa todas las expresiones de plantilla en todos los componentes, a menos que se especifique lo contrario, basándose en la estrategia de detección de cada componente
-* Ejecuta los hooks de ciclo de vida `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, y `ngOnChanges`.
-Una sola computación lenta dentro de una plantilla o un hook de ciclo de vida puede ralentizar todo el proceso de change detection porque Angular ejecuta las computaciones secuencialmente.
+- Evalúa todas las expresiones de plantilla en todos los componentes, a menos que se especifique lo contrario, basándose en la estrategia de detección de cada componente
+- Ejecuta los hooks de ciclo de vida `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, y `ngOnChanges`.
+  Una sola computación lenta dentro de una plantilla o un hook de ciclo de vida puede ralentizar todo el proceso de change detection porque Angular ejecuta las computaciones secuencialmente.
 
 ## Identificando computaciones lentas
 
@@ -18,9 +18,9 @@ Por ejemplo, en la captura de pantalla anterior, el segundo ciclo de change dete
 
 Aquí hay varias técnicas para eliminar computaciones lentas:
 
-* **Optimizar el algoritmo subyacente**. Este es el enfoque recomendado. Si puedes acelerar el algoritmo que está causando el problema, puedes acelerar todo el mecanismo de change detection.
-* **Caching usando pipes puros**. Puedes mover la computación pesada a un [pipe](guide/pipes) puro. Angular reevalúa un pipe puro solo si detecta que sus entradas han cambiado, comparado con la vez anterior que Angular lo llamó.
-* **Usando memoización**. La [memoización](https://en.wikipedia.org/wiki/Memoization) es una técnica similar a los pipes puros, con la diferencia de que los pipes puros preservan solo el último resultado de la computación donde la memoización podría almacenar múltiples resultados.
-* **Evitar repaints/reflows en hooks de ciclo de vida**. Ciertas [operaciones](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) causan que el navegador recalcule sincrónicamente el layout de la página o la vuelva a renderizar. Ya que los reflows y repaints son generalmente lentos, quieres evitar realizarlos en cada ciclo de change detection.
+- **Optimizar el algoritmo subyacente**. Este es el enfoque recomendado. Si puedes acelerar el algoritmo que está causando el problema, puedes acelerar todo el mecanismo de change detection.
+- **Caching usando pipes puros**. Puedes mover la computación pesada a un [pipe](guide/pipes) puro. Angular reevalúa un pipe puro solo si detecta que sus entradas han cambiado, comparado con la vez anterior que Angular lo llamó.
+- **Usando memoización**. La [memoización](https://en.wikipedia.org/wiki/Memoization) es una técnica similar a los pipes puros, con la diferencia de que los pipes puros preservan solo el último resultado de la computación donde la memoización podría almacenar múltiples resultados.
+- **Evitar repaints/reflows en hooks de ciclo de vida**. Ciertas [operaciones](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) causan que el navegador recalcule sincrónicamente el layout de la página o la vuelva a renderizar. Ya que los reflows y repaints son generalmente lentos, quieres evitar realizarlos en cada ciclo de change detection.
 
 Los pipes puros y la memoización tienen diferentes compensaciones. Los pipes puros son un concepto integrado de Angular comparado con la memoización, que es una práctica general de ingeniería de software para cachear resultados de funciones. La sobrecarga de memoria de la memoización podría ser significativa si invocas la computación pesada frecuentemente con diferentes argumentos.
diff --git a/adev-es/src/content/best-practices/runtime-performance/zone-pollution.en.md b/adev-es/src/content/best-practices/runtime-performance/zone-pollution.en.md
index e232ec0..37cdf73 100644
--- a/adev-es/src/content/best-practices/runtime-performance/zone-pollution.en.md
+++ b/adev-es/src/content/best-practices/runtime-performance/zone-pollution.en.md
@@ -4,8 +4,8 @@
 
 In some cases scheduled [tasks](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) or [microtasks](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks) don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are:
 
-* `requestAnimationFrame`, `setTimeout` or `setInterval`
-* Task or microtask scheduling by third-party libraries
+- `requestAnimationFrame`, `setTimeout` or `setInterval`
+- Task or microtask scheduling by third-party libraries
 
 This section covers how to identify such conditions, and how to run code outside the Angular zone to avoid unnecessary change detection calls.
 
@@ -26,11 +26,11 @@ import { Component, NgZone, OnInit } from '@angular/core';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
+}
 }
 </docs-code>
 
@@ -44,13 +44,13 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      Plotly.newPlot('chart', data);
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+Plotly.newPlot('chart', data);
+});
+}
 }
 </docs-code>
 
@@ -66,18 +66,18 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+plotlyClick = output<Plotly.PlotMouseEvent>();
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      this.createPlotly();
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+this.createPlotly();
+});
+}
 
-  private async createPlotly() {
-    const plotly = await Plotly.newPlot('chart', data);
+private async createPlotly() {
+const plotly = await Plotly.newPlot('chart', data);
 
     plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
       // This handler will be called outside of the Angular zone because
@@ -86,7 +86,8 @@ class AppComponent implements OnInit {
       console.log(NgZone.isInAngularZone());
       this.plotlyClick.emit(event);
     });
-  }
+
+}
 }
 </docs-code>
 
@@ -98,26 +99,27 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+plotlyClick = output<Plotly.PlotMouseEvent>();
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      this.createPlotly();
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+this.createPlotly();
+});
+}
 
-  private async createPlotly() {
-    const plotly = await Plotly.newPlot('chart', data);
+private async createPlotly() {
+const plotly = await Plotly.newPlot('chart', data);
 
     plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
       this.ngZone.run(() => {
         this.plotlyClick.emit(event);
       });
     });
-  }
+
+}
 }
 </docs-code>
 
-The scenario of dispatching events outside of the Angular zone may also arise. It's important to remember that triggering change detection (for example, manually) may result in the creation/update of views outside of the Angular zone.
\ No newline at end of file
+The scenario of dispatching events outside of the Angular zone may also arise. It's important to remember that triggering change detection (for example, manually) may result in the creation/update of views outside of the Angular zone.
diff --git a/adev-es/src/content/best-practices/runtime-performance/zone-pollution.md b/adev-es/src/content/best-practices/runtime-performance/zone-pollution.md
index e488cc3..40703d1 100644
--- a/adev-es/src/content/best-practices/runtime-performance/zone-pollution.md
+++ b/adev-es/src/content/best-practices/runtime-performance/zone-pollution.md
@@ -4,8 +4,8 @@
 
 En algunos casos, las [tareas](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) o [microtareas](https://developer.mozilla.org/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks) programadas no hacen ningún cambio en el modelo de datos, lo que hace que ejecutar change detection sea innecesario. Ejemplos comunes son:
 
-* `requestAnimationFrame`, `setTimeout` o `setInterval`
-* Programación de tareas o microtareas por bibliotecas de terceros
+- `requestAnimationFrame`, `setTimeout` o `setInterval`
+- Programación de tareas o microtareas por bibliotecas de terceros
 
 Esta sección cubre cómo identificar tales condiciones, y cómo ejecutar código fuera de la zone de Angular para evitar llamadas innecesarias de change detection.
 
@@ -26,11 +26,11 @@ import { Component, NgZone, OnInit } from '@angular/core';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
-  }
+ngOnInit() {
+  this.ngZone.runOutsideAngular(() => setInterval(pollForUpdates), 500);
+}
 }
 </docs-code>
 
@@ -44,13 +44,13 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      Plotly.newPlot('chart', data);
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+Plotly.newPlot('chart', data);
+});
+}
 }
 </docs-code>
 
@@ -66,18 +66,18 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+plotlyClick = output<Plotly.PlotMouseEvent>();
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      this.createPlotly();
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+this.createPlotly();
+});
+}
 
-  private async createPlotly() {
-    const plotly = await Plotly.newPlot('chart', data);
+private async createPlotly() {
+const plotly = await Plotly.newPlot('chart', data);
 
     plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
       // Este manejador será llamado fuera de la zone de Angular porque
@@ -86,7 +86,8 @@ class AppComponent implements OnInit {
       console.log(NgZone.isInAngularZone());
       this.plotlyClick.emit(event);
     });
-  }
+
+}
 }
 </docs-code>
 
@@ -98,25 +99,26 @@ import * as Plotly from 'plotly.js-dist-min';
 
 @Component(...)
 class AppComponent implements OnInit {
-  private ngZone = inject(NgZone);
+private ngZone = inject(NgZone);
 
-  plotlyClick = output<Plotly.PlotMouseEvent>();
+plotlyClick = output<Plotly.PlotMouseEvent>();
 
-  ngOnInit() {
-    this.ngZone.runOutsideAngular(() => {
-      this.createPlotly();
-    });
-  }
+ngOnInit() {
+this.ngZone.runOutsideAngular(() => {
+this.createPlotly();
+});
+}
 
-  private async createPlotly() {
-    const plotly = await Plotly.newPlot('chart', data);
+private async createPlotly() {
+const plotly = await Plotly.newPlot('chart', data);
 
     plotly.on('plotly_click', (event: Plotly.PlotMouseEvent) => {
       this.ngZone.run(() => {
         this.plotlyClick.emit(event);
       });
     });
-  }
+
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/best-practices/style-guide.en.md b/adev-es/src/content/best-practices/style-guide.en.md
index 63128d8..5cffdd3 100644
--- a/adev-es/src/content/best-practices/style-guide.en.md
+++ b/adev-es/src/content/best-practices/style-guide.en.md
@@ -112,10 +112,10 @@ When in doubt, go with the approach that leads to smaller files.
 
 Prefer using the `inject` function over injecting constructor parameters. The `inject` function works the same way as constructor parameter injection, but offers several style advantages:
 
-*   `inject` is generally more readable, especially when a class injects many dependencies.
-*   It's more syntactically straightforward to add comments to injected dependencies
-*   `inject` offers better type inference.
-*   When targeting ES2022+ with [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), you can avoid separating field declaration and initialization when fields read on injected dependencies.
+- `inject` is generally more readable, especially when a class injects many dependencies.
+- It's more syntactically straightforward to add comments to injected dependencies
+- `inject` offers better type inference.
+- When targeting ES2022+ with [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), you can avoid separating field declaration and initialization when fields read on injected dependencies.
 
 [You can refactor existing code to `inject` with an automatic tool](reference/migrations/inject-function).
 
@@ -222,12 +222,15 @@ Prefer `class` and `style` bindings over using the [`NgClass`](/api/common/NgCla
 ```html
 <!-- PREFER -->
 <div [class.admin]="isAdmin" [class.dense]="density === 'high'">
+<div [style.color]="textColor" [style.background-color]="backgroundColor">
 <!-- OR -->
 <div [class]="{admin: isAdmin, dense: density === 'high'}">
+<div [style]="{'color': textColor, 'background-color': backgroundColor}">
 
 
 <!-- AVOID -->
 <div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
+<div [ngStyle]="{'color': textColor, 'background-color': backgroundColor}">
 ```
 
 Both `class` and `style` bindings use a more straightforward syntax that aligns closely with
diff --git a/adev-es/src/content/best-practices/style-guide.md b/adev-es/src/content/best-practices/style-guide.md
index 19f59b8..80ef746 100644
--- a/adev-es/src/content/best-practices/style-guide.md
+++ b/adev-es/src/content/best-practices/style-guide.md
@@ -2,57 +2,83 @@
 
 ## Introducción
 
-Esta guía cubre un rango de convenciones de estilo para código de aplicaciones Angular. Estas recomendaciones no son requeridas para que Angular funcione, sino que establecen un conjunto de prácticas de codificación que promueven la consistencia en el ecosistema Angular. Un conjunto consistente de prácticas hace más fácil compartir código y moverse entre proyectos.
+Esta guía cubre un rango de convenciones de estilo para código de aplicaciones Angular. Estas recomendaciones no son requeridas para 
+que Angular funcione, sino que establecen un conjunto de prácticas de codificación que promueven la consistencia en el ecosistema 
+Angular. Un conjunto consistente de prácticas hace más fácil 
+compartir código y moverse entre proyectos.
 
-Esta guía _no_ cubre TypeScript o prácticas generales de codificación no relacionadas con Angular. Para TypeScript, consulta la [guía de estilo TypeScript de Google](https://google.github.io/styleguide/tsguide.html).
+Esta guía _no_ cubre TypeScript o prácticas generales de 
+codificación no relacionadas con Angular. Para TypeScript, 
+consulta la [guía de estilo TypeScript de Google](https://google.github.io/styleguide/tsguide.html).
 
 ### En caso de duda, prefiere la consistencia
 
-Siempre que te encuentres con una situación en la que estas reglas contradigan el estilo de un archivo particular, prioriza mantener la consistencia dentro de un archivo. Mezclar diferentes convenciones de estilo en un solo archivo crea más confusión que divergir de las recomendaciones en esta guía.
+Siempre que te encuentres con una situación en la que estas reglas contradigan el estilo de un archivo particular, prioriza mantener 
+la consistencia dentro de un archivo. Mezclar diferentes 
+convenciones de estilo en un solo archivo crea más confusión que divergir de las recomendaciones en esta guía.
 
 ## Nomenclatura
 
 ### Separa palabras en nombres de archivo con guiones
 
-Separa palabras dentro de un nombre de archivo con guiones (`-`). Por ejemplo, un componente llamado `UserProfile` tiene un nombre de archivo `user-profile.ts`.
+Separa palabras dentro de un nombre de archivo con guiones (`-`). Por ejemplo, un componente llamado `UserProfile` tiene un nombre 
+de archivo `user-profile.ts`.
 
 ### Usa el mismo nombre para las pruebas de un archivo con `.spec` al final
 
-Para pruebas unitarias, termina los nombres de archivo con `.spec.ts`. Por ejemplo, el archivo de prueba unitaria para el componente `UserProfile` tiene el nombre de archivo `user-profile.spec.ts`.
+Para pruebas unitarias, termina los nombres de archivo con `.spec.ts`. Por ejemplo, el archivo de prueba unitaria para el componente 
+`UserProfile` tiene el nombre de archivo `user-profile.spec.ts`.
 
 ### Haz coincidir nombres de archivo con el identificador TypeScript dentro
 
-Los nombres de archivo generalmente deben describir el contenido del código en el archivo. Cuando el archivo contiene una clase TypeScript, el nombre del archivo debe reflejar ese nombre de clase. Por ejemplo, un archivo que contiene un componente llamado `UserProfile` tiene el nombre `user-profile.ts`.
+Los nombres de archivo generalmente deben describir el contenido del código en el archivo. Cuando el archivo contiene una clase 
+TypeScript, el nombre del archivo debe reflejar ese nombre de 
+clase. Por ejemplo, un archivo que contiene un componente llamado `UserProfile` tiene el nombre `user-profile.ts`.
 
-Si el archivo contiene más de un identificador nombrable principal, elige un nombre que describa el tema común del código dentro. Si el código en un archivo no encaja dentro de un tema común o área de funcionalidad, considera dividir el código en diferentes archivos. Evita nombres de archivo demasiado genéricos como `helpers.ts`, `utils.ts`, o `common.ts`.
+Si el archivo contiene más de un identificador nombrable principal, elige un nombre que describa el tema común del código 
+dentro. Si el código en un archivo no encaja dentro de un tema 
+común o área de funcionalidad, considera dividir el código en diferentes archivos. Evita nombres de archivo demasiado genéricos 
+como `helpers.ts`, `utils.ts`, o `common.ts`.
 
 ### Usa el mismo nombre de archivo para el TypeScript, plantilla y estilos de un componente
 
-Los componentes típicamente consisten en un archivo TypeScript, un archivo de plantilla y un archivo de estilo. Estos archivos deben compartir el mismo nombre con diferentes extensiones de archivo. Por ejemplo, un componente `UserProfile` puede tener los archivos `user-profile.ts`, `user-profile.html`, y `user-profile.css`.
+Los componentes típicamente consisten en un archivo TypeScript, un archivo de plantilla y un archivo de estilo. Estos archivos deben 
+compartir el mismo nombre con diferentes extensiones de archivo. Por ejemplo, un componente `UserProfile` puede tener los archivos 
+`user-profile.ts`, `user-profile.html`, y `user-profile.css`.
 
-Si un componente tiene más de un archivo de estilo, agrega al nombre palabras adicionales que describan los estilos específicos de ese archivo. Por ejemplo, `UserProfile` podría tener archivos de estilo `user-profile-settings.css` y `user-profile-subscription.css`.
+Si un componente tiene más de un archivo de estilo, agrega al nombre palabras adicionales que describan los estilos específicos 
+de ese archivo. Por ejemplo, `UserProfile` podría tener archivos 
+de estilo `user-profile-settings.css` y `user-profile-subscription.css`.
 
 ## Estructura del proyecto
 
 ### Todo el código de la aplicación va en un directorio llamado `src`
 
-Todo tu código UI de Angular (TypeScript, HTML, y estilos) debe vivir dentro de un directorio llamado `src`. El código que no está relacionado con la UI, como archivos de configuración o scripts, debe vivir fuera del directorio `src`.
+Todo tu código UI de Angular (TypeScript, HTML, y estilos) debe vivir dentro de un directorio llamado `src`. El código que no está 
+relacionado con la UI, como archivos de configuración o scripts, 
+debe vivir fuera del directorio `src`.
 
-Esto mantiene el directorio raíz de la aplicación consistente entre diferentes proyectos Angular y crea una separación clara entre el código UI y otro código en tu proyecto.
+Esto mantiene el directorio raíz de la aplicación consistente entre diferentes proyectos Angular y crea una separación clara 
+entre el código UI y otro código en tu proyecto.
 
 ### Inicia tu aplicación en un archivo llamado `main.ts` directamente dentro de `src`
 
-El código para iniciar, o hacer **bootstrap**, de una aplicación Angular debe siempre vivir en un archivo llamado `main.ts`. Esto representa el punto de entrada principal a la aplicación.
+El código para iniciar, o hacer **bootstrap**, de una aplicación 
+Angular debe siempre vivir en un archivo llamado `main.ts`. Esto representa el punto de entrada principal a la aplicación.
 
 ### Agrupa archivos estrechamente relacionados juntos en el mismo directorio
 
-Los componentes de Angular consisten en un archivo TypeScript y, opcionalmente, una plantilla y uno o más archivos de estilo. Debes agrupar estos juntos en el mismo directorio.
+Los componentes de Angular consisten en un archivo TypeScript y, opcionalmente, una plantilla y uno o más archivos de estilo. Debes 
+agrupar estos juntos en el mismo directorio.
 
-Las pruebas unitarias deben vivir en el mismo directorio que el código bajo prueba. Evita recolectar pruebas no relacionadas en un solo directorio `tests`.
+Las pruebas unitarias deben vivir en el mismo directorio que el 
+código bajo prueba. Evita recolectar pruebas no relacionadas en un solo directorio `tests`.
 
 ### Organiza tu proyecto por áreas de funcionalidad
 
-Organiza tu proyecto en subdirectorios basados en las características de tu aplicación o temas comunes al código en esos directorios. Por ejemplo, la estructura del proyecto para un sitio de cine, MovieReel, podría verse así:
+Organiza tu proyecto en subdirectorios basados en las características de tu aplicación o temas comunes al código en esos 
+directorios. Por ejemplo, la estructura del proyecto para un sitio 
+de cine, MovieReel, podría verse así:
 
 ```
 src/
@@ -65,13 +91,18 @@ src/
 │ │ ├─ purchase-confirmation/
 ```
 
-Evita crear subdirectorios basados en el tipo de código que vive en esos directorios. Por ejemplo, evita crear directorios como `components`, `directives`, y `services`.
+Evita crear subdirectorios basados en el tipo de código que vive en esos directorios. Por ejemplo, evita crear directorios como 
+`components`, `directives`, y `services`.
 
-Evita poner tantos archivos en un directorio que se vuelva difícil de leer o navegar. A medida que el número de archivos en un directorio crece, considera dividir aún más en subdirectorios adicionales.
+Evita poner tantos archivos en un directorio que se vuelva difícil de leer o navegar. A medida que el número de archivos en un 
+directorio crece, considera dividir aún más en subdirectorios adicionales.
 
 ### Un concepto por archivo
 
-Prefiere enfocar archivos fuente en un solo _concepto_. Para clases Angular específicamente, esto usualmente significa un componente, directiva, o servicio por archivo. Sin embargo, está bien si un archivo contiene más de un componente o directiva si tus clases son relativamente pequeñas y se vinculan juntas como parte de un solo concepto.
+Prefiere enfocar archivos fuente en un solo _concepto_. Para clases Angular específicamente, esto usualmente significa un 
+componente, directiva, o servicio por archivo. Sin embargo, está bien si un archivo contiene más de un componente o directiva si 
+tus clases son relativamente pequeñas y se vinculan juntas como 
+parte de un solo concepto.
 
 En caso de duda, ve con el enfoque que lleve a archivos más pequeños.
 
@@ -81,10 +112,10 @@ En caso de duda, ve con el enfoque que lleve a archivos más pequeños.
 
 Prefiere usar la función `inject` sobre inyectar parámetros de constructor. La función `inject` funciona de la misma manera que la inyección de parámetros de constructor, pero ofrece varias ventajas de estilo:
 
-*   `inject` es generalmente más legible, especialmente cuando una clase inyecta muchas dependencias.
-*   Es más directo sintácticamente agregar comentarios a dependencias inyectadas
-*   `inject` ofrece mejor inferencia de tipos.
-*   Al apuntar a ES2022+ con [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), puedes evitar separar la declaración e inicialización de campos cuando los campos leen dependencias inyectadas.
+- `inject` es generalmente más legible, especialmente cuando una clase inyecta muchas dependencias.
+- Es más directo sintácticamente agregar comentarios a dependencias inyectadas
+- `inject` ofrece mejor inferencia de tipos.
+- Al apuntar a ES2022+ con [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields), puedes evitar separar la declaración e inicialización de campos cuando los campos leen dependencias inyectadas.
 
 [Puedes refactorizar código existente a `inject` con una herramienta automática](reference/migrations/inject-function).
 
@@ -92,39 +123,57 @@ Prefiere usar la función `inject` sobre inyectar parámetros de constructor. La
 
 ### Eligiendo selectores de componentes
 
-Consulta la [guía de Componentes para detalles sobre cómo elegir selectores de componentes](guide/components/selectors#choosing-a-selector).
+Consulta la
+[guía de Componentes para detalles sobre cómo elegir selectores de componentes](guide/components/selectors#eligiendo-un-selector).
 
 ### Nombrando miembros de componentes y directivas
 
-Consulta la guía de Componentes para detalles sobre [nombrar propiedades de entrada](guide/components/inputs#choosing-input-names) y [nombrar propiedades de salida](guide/components/outputs#choosing-event-names).
+Consulta la guía de Componentes para detalles sobre
+[nombrar propiedades de entrada](guide/components/inputs#choosing-input-names) y
+[nombrar propiedades de salida](guide/components/outputs#choosing-event-names).
 
 ### Eligiendo selectores de directivas
 
-Las directivas deben usar el mismo [prefijo específico de aplicación](guide/components/selectors#selector-prefixes) que tus componentes.
+Las directivas deben usar el 
+mismo [prefijo específico de aplicación](guide/components/selectors#prefijos-de-selectores) 
+que tus componentes.
 
-Al usar un selector de atributo para una directiva, usa un nombre de atributo camelCase. Por ejemplo, si tu aplicación se llama "MovieReel" y construyes una directiva que agrega un tooltip a un elemento, podrías usar el selector `[mrTooltip]`.
+Al usar un selector de atributo para una directiva, usa un nombre 
+de atributo camelCase. Por ejemplo, si tu aplicación se llama "MovieReel" y construyes una directiva que agrega un tooltip a un 
+elemento, podrías usar el selector `[mrTooltip]`.
 
 ### Agrupa propiedades específicas de Angular antes de los métodos
 
-Los componentes y directivas deben agrupar las propiedades específicas de Angular juntas, típicamente cerca de la parte superior de la declaración de clase. Esto incluye dependencias inyectadas, entradas, salidas y consultas. Define estas y otras propiedades antes de los métodos de la clase.
+Los componentes y directivas deben agrupar las propiedades específicas de Angular juntas, típicamente cerca de la parte 
+superior de la declaración de clase. Esto incluye dependencias inyectadas, entradas, salidas y consultas. Define estas y otras 
+propiedades antes de los métodos de la clase.
 
 Esta práctica hace más fácil encontrar las APIs de plantilla y dependencias de la clase.
 
 ### Mantén componentes y directivas enfocados en la presentación
 
-El código dentro de tus componentes y directivas generalmente debe relacionarse con la UI mostrada en la página. Para código que tiene sentido por sí solo, desacoplado de la UI, prefiere refactorizar a otros archivos. Por ejemplo, puedes factorizar reglas de validación de formularios o transformaciones de datos en funciones o clases separadas.
+El código dentro de tus componentes y directivas generalmente debe relacionarse con la UI mostrada en la página. Para código que 
+tiene sentido por sí solo, desacoplado de la UI, prefiere refactorizar a otros archivos. Por ejemplo, puedes factorizar 
+reglas de validación de formularios o transformaciones de datos en 
+funciones o clases separadas.
 
 ### Evita lógica demasiado compleja en plantillas
 
-Las plantillas de Angular están diseñadas para acomodar [expresiones similares a JavaScript](guide/templates/expression-syntax). Debes aprovechar estas expresiones para capturar lógica relativamente directa directamente en expresiones de plantilla.
+Las plantillas de Angular están diseñadas para acomodar 
+[expresiones similares a JavaScript](guide/templates/expression-syntax). Debes aprovechar estas expresiones para 
+capturar lógica relativamente directa directamente en expresiones 
+de plantilla.
 
-Sin embargo, cuando el código en una plantilla se vuelve demasiado complejo, refactoriza la lógica al código TypeScript (típicamente con un [computed](guide/signals#computed-signals)).
+Sin embargo, cuando el código en una plantilla se vuelve demasiado complejo, refactoriza la lógica al código TypeScript (típicamente con un [computed](guide/signals/overview#signals-computadas)).
 
-No hay una regla única y rápida que determine qué constituye "complejo". Usa tu mejor juicio.
+No hay una regla única y rápida que determine qué constituye 
+"complejo". Usa tu mejor juicio.
 
 ### Usa `protected` en miembros de clase que solo son usados por la plantilla de un componente
 
-Los miembros públicos de la clase de un componente intrínsecamente definen una API pública que es accesible vía inyección de dependencias y [consultas](guide/components/queries). Prefiere acceso `protected` para cualquier miembro que esté destinado a ser leído desde la plantilla del componente.
+Los miembros públicos de la clase de un componente intrínsecamente definen una API pública que es accesible vía inyección de 
+dependencias y [consultas](guide/components/queries). Prefiere 
+acceso `protected` para cualquier miembro que esté destinado a ser leído desde la plantilla del componente.
 
 ```ts
 @Component({
@@ -142,7 +191,9 @@ export class UserProfile {
 
 ### Usa `readonly` para propiedades que no deben cambiar
 
-Marca propiedades de componentes y directivas inicializadas por Angular como `readonly`. Esto incluye propiedades inicializadas por `input`, `model`, `output`, y consultas. El modificador de acceso readonly asegura que el valor establecido por Angular no sea sobrescrito.
+Marca propiedades de componentes y directivas inicializadas por Angular como `readonly`. Esto incluye propiedades inicializadas 
+por `input`, `model`, `output`, y consultas. El modificador de 
+acceso readonly asegura que el valor establecido por Angular no sea sobrescrito.
 
 ```ts
 @Component({/* ... */})
@@ -153,7 +204,8 @@ export class UserProfile {
 }
 ```
 
-Para componentes y directivas que usan las APIs basadas en decoradores `@Input`, `@Output`, y consultas, este consejo aplica a propiedades de salida y consultas, pero no a propiedades de entrada.
+Para componentes y directivas que usan las APIs basadas en decoradores `@Input`, `@Output`, y consultas, este consejo aplica 
+a propiedades de salida y consultas, pero no a propiedades de entrada.
 
 ```ts
 @Component({/* ... */})
@@ -170,17 +222,23 @@ Prefiere enlaces `class` y `style` sobre usar las directivas [`NgClass`](/api/co
 ```html
 <!-- PREFERIR -->
 <div [class.admin]="isAdmin" [class.dense]="density === 'high'">
+<div [style.color]="textColor" [style.background-color]="backgroundColor">
 <!-- O -->
 <div [class]="{admin: isAdmin, dense: density === 'high'}">
+<div [style]="{'color': textColor, 'background-color': backgroundColor}">
 
 
 <!-- EVITAR -->
 <div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
+<div [ngStyle]="{'color': textColor, 'background-color': backgroundColor}">
 ```
 
-Tanto los enlaces `class` como `style` usan una sintaxis más directa que se alinea estrechamente con los atributos HTML estándar. Esto hace tus plantillas más fáciles de leer y entender, especialmente para desarrolladores familiarizados con HTML básico.
+Tanto los enlaces `class` como `style` usan una sintaxis más directa que se alinea estrechamente con los atributos HTML 
+estándar. Esto hace tus plantillas más fáciles de leer y entender, 
+especialmente para desarrolladores familiarizados con HTML básico.
 
-Adicionalmente, las directivas `NgClass` y `NgStyle` incurren en un costo de rendimiento adicional comparado con la sintaxis integrada de enlace `class` y `style`.
+Adicionalmente, las directivas `NgClass` y `NgStyle` incurren en un costo de rendimiento adicional comparado con la sintaxis 
+integrada de enlace `class` y `style`.
 
 Para más detalles, consulta la [guía de enlaces](/guide/templates/binding#css-class-and-style-property-bindings)
 
@@ -196,7 +254,8 @@ Prefiere nombrar manejadores de eventos por la acción que realizan en lugar de
 <button (click)="handleClick()">Save</button>
 ```
 
-Usar nombres significativos como este hace más fácil saber qué hace un evento al leer la plantilla.
+Usar nombres significativos como este hace más fácil saber qué 
+hace un evento al leer la plantilla.
 
 Para eventos de teclado, puedes usar los modificadores de eventos de tecla de Angular con nombres de manejadores específicos:
 
@@ -204,7 +263,9 @@ Para eventos de teclado, puedes usar los modificadores de eventos de tecla de An
 <textarea (keydown.control.enter)="commitNotes()" (keydown.control.space)="showSuggestions()">
 ```
 
-A veces, la lógica de manejo de eventos es especialmente larga o compleja, haciendo impráctico declarar un solo manejador bien nombrado. En estos casos, está bien volver a un nombre como 'handleKeydown' y luego delegar a comportamientos más específicos basados en los detalles del evento:
+A veces, la lógica de manejo de eventos es especialmente larga o compleja, haciendo impráctico declarar un solo manejador bien 
+nombrado. En estos casos, está bien volver a un nombre como 
+'handleKeydown' y luego delegar a comportamientos más específicos basados en los detalles del evento:
 
 ```ts
 
@@ -225,7 +286,10 @@ class RichText {
 
 ### Mantén métodos de ciclo de vida simples
 
-Evita poner lógica larga o compleja dentro de hooks de ciclo de vida como `ngOnInit`. En su lugar, prefiere crear métodos bien nombrados para contener esa lógica y luego _llamar esos métodos_ en tus hooks de ciclo de vida. Los nombres de hooks de ciclo de vida describen _cuándo_ se ejecutan, lo que significa que el código dentro no tiene un nombre significativo que describa qué está haciendo el código dentro.
+Evita poner lógica larga o compleja dentro de hooks de ciclo de vida como `ngOnInit`. En su lugar, prefiere crear métodos bien 
+nombrados para contener esa lógica y luego _llamar esos métodos_ en tus hooks de ciclo de vida. Los nombres de hooks de ciclo de 
+vida describen _cuándo_ se ejecutan, lo que significa que el código dentro no tiene un nombre significativo que describa qué 
+está haciendo el código dentro.
 
 ```typescript
 // PREFERIR
@@ -244,7 +308,8 @@ ngOnInit() {
 
 ### Usa interfaces de hooks de ciclo de vida
 
-Angular proporciona una interfaz TypeScript para cada método de ciclo de vida. Al agregar un hook de ciclo de vida a tu clase, importa e `implementa` estas interfaces para asegurar que los métodos estén nombrados correctamente.
+Angular proporciona una interfaz TypeScript para cada método de ciclo de vida. Al agregar un hook de ciclo de vida a tu clase, 
+importa e `implementa` estas interfaces para asegurar que los métodos estén nombrados correctamente.
 
 ```ts
 import {Component, OnInit} from '@angular/core';
diff --git a/adev-es/src/content/best-practices/update.en.md b/adev-es/src/content/best-practices/update.en.md
index 3ce48ce..5729714 100644
--- a/adev-es/src/content/best-practices/update.en.md
+++ b/adev-es/src/content/best-practices/update.en.md
@@ -6,20 +6,20 @@ Keeping your Angular application up-to-date enables you to take advantage of lea
 
 This document contains information and resources to help you keep your Angular applications and libraries up-to-date.
 
-For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases "Angular versioning and releases").
+For information about our versioning policy and practices —including support and deprecation practices, as well as the release schedule— see [Angular versioning and releases](reference/releases 'Angular versioning and releases').
 
-HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
-*AngularJS* is the name for all v1.x versions of Angular.
+HELPFUL: If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade 'Upgrading from Angular JS').
+_AngularJS_ is the name for all v1.x versions of Angular.
 
 ## Getting notified of new releases
 
-To be notified when new releases are available, follow [@angular](https://x.com/angular "@angular on X") on X (formerly Twitter) or subscribe to the [Angular blog](https://blog.angular.dev "Angular blog").
+To be notified when new releases are available, follow [@angular](https://x.com/angular '@angular on X') on X (formerly Twitter) or subscribe to the [Angular blog](https://blog.angular.dev 'Angular blog').
 
 ## Learning about new features
 
-What's new? What's changed? We share the most important things you need to know on the Angular blog in [release announcements]( https://blog.angular.dev/ "Angular blog - release announcements").
+What's new? What's changed? We share the most important things you need to know on the Angular blog in [release announcements](https://blog.angular.dev/ 'Angular blog - release announcements').
 
-To review a complete list of changes, organized by version, see the [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular change log").
+To review a complete list of changes, organized by version, see the [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log').
 
 ## Checking your version of Angular
 
@@ -27,7 +27,7 @@ To check your application's version of Angular use the `ng version` command from
 
 ## Finding the current version of Angular
 
-The most recent stable released version of Angular appears [on npm](https://www.npmjs.com/package/@angular/core "Angular on npm") under "Version." For example, `16.2.4`.
+The most recent stable released version of Angular appears [on npm](https://www.npmjs.com/package/@angular/core 'Angular on npm') under "Version." For example, `16.2.4`.
 
 You can also find the most current version of Angular by using the CLI command [`ng update`](cli/update).
 By default, [`ng update`](cli/update)(without additional arguments) lists the updates that are available to you.
@@ -43,22 +43,22 @@ It also includes troubleshooting information and any recommended manual changes
 For simple updates, the CLI command [`ng update`](cli/update) is all you need.
 Without additional arguments, [`ng update`](cli/update) lists the updates that are available to you and provides recommended steps to update your application to the most current version.
 
-[Angular Versioning and Releases](reference/releases#versioning "Angular Release Practices, Versioning") describes the level of change that you can expect based on a release's version number.
+[Angular Versioning and Releases](reference/releases#versioning 'Angular Release Practices, Versioning') describes the level of change that you can expect based on a release's version number.
 It also describes supported update paths.
 
 ## Resource summary
 
-* Release announcements:
-    [Angular blog - release announcements](https://blog.angular.dev/ "Angular blog announcements about recent releases")
+- Release announcements:
+  [Angular blog - release announcements](https://blog.angular.dev/ 'Angular blog announcements about recent releases')
 
-* Release details:
-    [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md "Angular change log")
+- Release details:
+  [Angular change log](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Angular change log')
 
-* Update instructions:
-    [Angular Update Guide](update-guide)
+- Update instructions:
+  [Angular Update Guide](update-guide)
 
-* Update command reference:
-    [Angular CLI `ng update` command reference](cli/update)
+- Update command reference:
+  [Angular CLI `ng update` command reference](cli/update)
 
-* Versioning, release, support, and deprecation practices:
-    [Angular versioning and releases](reference/releases "Angular versioning and releases")
+- Versioning, release, support, and deprecation practices:
+  [Angular versioning and releases](reference/releases 'Angular versioning and releases')
diff --git a/adev-es/src/content/best-practices/update.md b/adev-es/src/content/best-practices/update.md
index 86a53cc..1166173 100644
--- a/adev-es/src/content/best-practices/update.md
+++ b/adev-es/src/content/best-practices/update.md
@@ -6,20 +6,20 @@ Mantener tu aplicación Angular actualizada te permite aprovechar las nuevas fun
 
 Este documento contiene información y recursos para ayudarte a mantener tus aplicaciones y bibliotecas Angular actualizadas.
 
-Para información sobre nuestra política y prácticas de versionado —incluyendo prácticas de soporte y deprecación, así como el calendario de lanzamientos— consulta [Versionado y lanzamientos de Angular](reference/releases "Versionado y lanzamientos de Angular").
+Para información sobre nuestra política y prácticas de versionado —incluyendo prácticas de soporte y deprecación, así como el calendario de lanzamientos— consulta [Versionado y lanzamientos de Angular](reference/releases 'Versionado y lanzamientos de Angular').
 
-ÚTIL: Si actualmente estás usando AngularJS, consulta [Actualizando desde AngularJS](https://angular.io/guide/upgrade "Actualizando desde Angular JS").
-*AngularJS* es el nombre para todas las versiones v1.x de Angular.
+ÚTIL: Si actualmente estás usando AngularJS, consulta [Actualizando desde AngularJS](https://angular.io/guide/upgrade 'Actualizando desde Angular JS').
+_AngularJS_ es el nombre para todas las versiones v1.x de Angular.
 
 ## Recibiendo notificaciones de nuevos lanzamientos
 
-Para recibir notificaciones cuando nuevos lanzamientos estén disponibles, sigue a [@angular](https://x.com/angular "@angular en X") en X (anteriormente Twitter) o suscríbete al [blog de Angular](https://blog.angular.dev "Blog de Angular").
+Para recibir notificaciones cuando nuevos lanzamientos estén disponibles, sigue a [@angular](https://x.com/angular '@angular en X') en X (anteriormente Twitter) o suscríbete al [blog de Angular](https://blog.angular.dev 'Blog de Angular').
 
 ## Aprendiendo sobre nuevas funcionalidades
 
-¿Qué hay de nuevo? ¿Qué ha cambiado? Compartimos las cosas más importantes que necesitas saber en el blog de Angular en [anuncios de lanzamiento]( https://blog.angular.dev/ "Blog de Angular - anuncios de lanzamiento").
+¿Qué hay de nuevo? ¿Qué ha cambiado? Compartimos las cosas más importantes que necesitas saber en el blog de Angular en [anuncios de lanzamiento](https://blog.angular.dev/ 'Blog de Angular - anuncios de lanzamiento').
 
-Para revisar una lista completa de cambios, organizados por versión, consulta el [registro de cambios de Angular](https://github.com/angular/angular/blob/main/CHANGELOG.md "Registro de cambios de Angular").
+Para revisar una lista completa de cambios, organizados por versión, consulta el [registro de cambios de Angular](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Registro de cambios de Angular').
 
 ## Verificando tu versión de Angular
 
@@ -27,7 +27,7 @@ Para verificar la versión de Angular de tu aplicación usa el comando `ng versi
 
 ## Encontrando la versión actual de Angular
 
-La versión estable más reciente lanzada de Angular aparece [en npm](https://www.npmjs.com/package/@angular/core "Angular en npm") bajo "Version." Por ejemplo, `16.2.4`.
+La versión estable más reciente lanzada de Angular aparece [en npm](https://www.npmjs.com/package/@angular/core 'Angular en npm') bajo "Version." Por ejemplo, `16.2.4`.
 
 También puedes encontrar la versión más actual de Angular usando el comando CLI [`ng update`](cli/update).
 Por defecto, [`ng update`](cli/update)(sin argumentos adicionales) lista las actualizaciones que están disponibles para ti.
@@ -43,22 +43,22 @@ También incluye información de solución de problemas y cualquier cambio manua
 Para actualizaciones simples, el comando CLI [`ng update`](cli/update) es todo lo que necesitas.
 Sin argumentos adicionales, [`ng update`](cli/update) lista las actualizaciones que están disponibles para ti y proporciona pasos recomendados para actualizar tu aplicación a la versión más actual.
 
-[Versionado y Lanzamientos de Angular](reference/releases#versioning "Prácticas de Lanzamiento de Angular, Versionado") describe el nivel de cambio que puedes esperar basado en el número de versión de un lanzamiento.
+[Versionado y Lanzamientos de Angular](reference/releases#versioning 'Prácticas de Lanzamiento de Angular, Versionado') describe el nivel de cambio que puedes esperar basado en el número de versión de un lanzamiento.
 También describe las rutas de actualización soportadas.
 
 ## Resumen de recursos
 
-* Anuncios de lanzamiento:
-    [Blog de Angular - anuncios de lanzamiento](https://blog.angular.dev/ "Anuncios del blog de Angular sobre lanzamientos recientes")
+- Anuncios de lanzamiento:
+    [Blog de Angular - anuncios de lanzamiento](https://blog.angular.dev/ 'Anuncios del blog de Angular sobre lanzamientos recientes')
 
-* Detalles de lanzamiento:
-    [Registro de cambios de Angular](https://github.com/angular/angular/blob/main/CHANGELOG.md "Registro de cambios de Angular")
+- Detalles de lanzamiento:
+    [Registro de cambios de Angular](https://github.com/angular/angular/blob/main/CHANGELOG.md 'Registro de cambios de Angular')
 
-* Instrucciones de actualización:
+- Instrucciones de actualización:
     [Guía de Actualización de Angular](update-guide)
 
-* Referencia del comando de actualización:
+- Referencia del comando de actualización:
     [Referencia del comando `ng update` de Angular CLI](cli/update)
 
-* Prácticas de versionado, lanzamiento, soporte y deprecación:
-    [Versionado y lanzamientos de Angular](reference/releases "Versionado y lanzamientos de Angular")
+- Prácticas de versionado, lanzamiento, soporte y deprecación:
+    [Versionado y lanzamientos de Angular](reference/releases 'Versionado y lanzamientos de Angular')
diff --git a/adev-es/src/content/cli/index.md b/adev-es/src/content/cli/index.md
index 76cc177..d6c5d06 100644
--- a/adev-es/src/content/cli/index.md
+++ b/adev-es/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 &commat;angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
+npm install -g @angular/cli<aio-angular-dist-tag class="pln"></aio-angular-dist-tag>
 
 </code-example>
 
@@ -53,7 +53,7 @@ If the current working directory is not the right place for your project, you ca
 
 ## Workspaces and project files
 
-The [ng new](cli/new) command creates an *Angular workspace* folder and generates a new application skeleton.
+The [ng new](cli/new) command creates an _Angular workspace_ folder and generates a new application skeleton.
 A workspace can contain multiple applications and libraries.
 The initial application created by the [ng new](cli/new) command is at the top level of the workspace.
 When you generate an additional application or library in a workspace, it goes into a `projects/` subfolder.
@@ -65,7 +65,7 @@ You can edit the generated files directly, or add to and modify them using CLI c
 Use the [ng generate](cli/generate) command to add new files for additional components and services, and code for new pipes, directives, and so on.
 Commands such as [add](cli/add) and [generate](cli/generate), which create or operate on applications and libraries, must be executed from within a workspace or project folder.
 
-*   See more about the [Workspace file structure](guide/file-structure).
+- See more about the [Workspace file structure](guide/file-structure).
 
 ### Workspace and project configuration
 
@@ -81,32 +81,32 @@ Option names in the configuration file must use [camelCase](guide/glossary#case-
 
 </div>
 
-*   See more about [Workspace Configuration](guide/workspace-config).
+- See more about [Workspace Configuration](guide/workspace-config).
 
 ## CLI command-language syntax
 
 Command syntax is shown as follows:
 
-`ng` *<command-name>* *<required-arg>* [*optional-arg*] `[options]`
+`ng` _<command-name>_ _<required-arg>_ [*optional-arg*] `[options]`
 
-*   Most commands, and some options, have aliases.
-    Aliases are shown in the syntax statement for each command.
+- Most commands, and some options, have aliases.
+  Aliases are shown in the syntax statement for each command.
 
-*   Option names are prefixed with a double dash \(`--`\) characters.
-    Option aliases are prefixed with a single dash \(`-`\) character.
-    Arguments are not prefixed.
-    For example:
+- Option names are prefixed with a double dash \(`--`\) characters.
+  Option aliases are prefixed with a single dash \(`-`\) character.
+  Arguments are not prefixed.
+  For example:
 
-    <code-example format="shell" language="shell">
+  <code-example format="shell" language="shell">
 
-    ng build my-app -c production
+  ng build my-app -c production
 
-    </code-example>
+  </code-example>
 
-*   Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.
+- Typically, the name of a generated artifact can be given as an argument to the command or specified with the `--name` option.
 
-*   Arguments and option names must be given in [dash-case](guide/glossary#case-types).
-    For example: `--my-option-name`
+- Arguments and option names must be given in [dash-case](guide/glossary#case-types).
+  For example: `--my-option-name`
 
 ### Boolean options
 
@@ -124,7 +124,7 @@ Options that specify files can be given as absolute paths, or as paths relative
 ### Schematics
 
 The [ng generate](cli/generate) and [ng add](cli/add) commands take, as an argument, the artifact or library to be generated or added to the current project.
-In addition to any general options, each artifact or library defines its own options in a *schematic*.
+In addition to any general options, each artifact or library defines its own options in a _schematic_.
 Schematic options are supplied to the command in the same format as immediate command options.
 
 <!-- links -->
diff --git a/adev-es/src/content/ecosystem/custom-build-pipeline.en.md b/adev-es/src/content/ecosystem/custom-build-pipeline.en.md
index 10d2aa4..6670076 100644
--- a/adev-es/src/content/ecosystem/custom-build-pipeline.en.md
+++ b/adev-es/src/content/ecosystem/custom-build-pipeline.en.md
@@ -8,9 +8,9 @@ This page explores the **rare use cases** when you need a custom build pipeline
 
 There are some niche use cases when you may want to maintain a custom build pipeline. For example:
 
-* You have an existing app using a different toolchain and you’d like to add Angular to it
-* You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation)
-* You’d like to create an short-lived experiment using your favorite build tool
+- You have an existing app using a different toolchain and you’d like to add Angular to it
+- You’re strongly coupled to [module federation](https://module-federation.io/) and unable to adopt bundler-agnostic [native federation](https://www.npmjs.com/package/@angular-architects/native-federation)
+- You’d like to create an short-lived experiment using your favorite build tool
 
 ## What are the options?
 
diff --git a/adev-es/src/content/ecosystem/custom-build-pipeline.md b/adev-es/src/content/ecosystem/custom-build-pipeline.md
index 8d9a603..d545aba 100644
--- a/adev-es/src/content/ecosystem/custom-build-pipeline.md
+++ b/adev-es/src/content/ecosystem/custom-build-pipeline.md
@@ -8,9 +8,9 @@ Esta página explora los **casos de uso poco comunes** en los que necesitas un p
 
 Existen algunos casos muy específicos en los que podrías querer mantener un pipeline de compilación personalizado. Por ejemplo:
 
-* Tienes una aplicación existente que utiliza una herramienta diferente y quieres agregar Angular
-* Estás fuertemente acoplado a [module federation](https://module-federation.io/) y no puedes adoptar la [native federation](https://www.npmjs.com/package/@angular-architects/native-federation) independiente del empaquetador
-* Quieres crear un experimento de corta duración usando tu herramienta de compilación favorita
+- Tienes una aplicación existente que utiliza una herramienta diferente y quieres agregar Angular
+- Estás fuertemente acoplado a [module federation](https://module-federation.io/) y no puedes adoptar la [native federation](https://www.npmjs.com/package/@angular-architects/native-federation) independiente del empaquetador
+- Quieres crear un experimento de corta duración usando tu herramienta de compilación favorita
 
 ## ¿Cuáles son las opciones?
 
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
index 207a1f6..bd9faff 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/output-interop.md
@@ -8,18 +8,18 @@ The `@angular/rxjs-interop` package offers two APIs related to component and dir
 
 The `outputFromObservable` lets you create a component or directive output that emits based on an RxJS observable:
 
-<docs-code language="ts" highlight="[7]">
+```ts {highlight:[9]}
 import {Directive} from '@angular/core';
 import {outputFromObservable} from '@angular/core/rxjs-interop';
 
 @Directive({/*...*/})
 class Draggable {
-  pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
-  
-  // Whenever `pointerMoves$` emits, the `pointerMove` event fires.
-  pointerMove = outputFromObservable(this.pointerMoves$);
+    pointerMoves$: Observable<PointerMovements> = listenToPointerMoves();
+
+    // Whenever `pointerMoves$` emits, the `pointerMove` event fires.
+    pointerMove = outputFromObservable(this.pointerMoves$);
 }
-</docs-code>
+```
 
 The `outputFromObservable` function has special meaning to the Angular compiler. **You may only call `outputFromObservable` in component and directive property initializers.**
 
@@ -31,20 +31,20 @@ HELPFUL: Consider using `output()` directly if you can emit values imperatively.
 
 The `outputToObservable` function lets you create an RxJS observable from a component output.
 
-<docs-code language="ts" highlight="[11]">
+```ts {highlight:[11]}
 import {outputToObservable} from '@angular/core/rxjs-interop';
 
 @Component(/*...*/)
-class CustomSlider {
-  valueChange = output<number>();
+    class CustomSlider {
+    valueChange = output<number>();
 }
 
 // Instance reference to `CustomSlider`.
 const slider: CustomSlider = createSlider();
 
 outputToObservable(slider.valueChange) // Observable<number>
-  .pipe(...)
-  .subscribe(...);
-</docs-code>
+    .pipe(...)
+    .subscribe(...);
+```
 
 HELPFUL: Consider using the `subscribe` method on `OutputRef` directly if it meets your needs.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
index 210311c..2ab060e 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/signals-interop.md
@@ -6,7 +6,7 @@ The `@angular/core/rxjs-interop` package offers APIs that help you integrate RxJ
 
 Use the `toSignal` function to create a signal which tracks the value of an Observable. It behaves similarly to the `async` pipe in templates, but is more flexible and can be used anywhere in an application.
 
-```ts
+```angular-ts
 import { Component } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { interval } from 'rxjs';
@@ -55,6 +55,31 @@ By default, `toSignal` automatically unsubscribes from the Observable when the c
 
 To override this behavior, you can pass the `manualCleanup` option. You can use this setting for Observables that complete themselves naturally.
 
+#### Custom equality comparison
+
+Some observables may emit values that are **equals** even though they differ by reference or minor detail. The `equal` option lets you define a **custom equal function** to determine when two consecutive values should be considered the same.
+
+When two emitted values are considered equal, the resulting signal **does not update**. This prevents redundant computations, DOM updates, or effects from re-running unnecessarily.
+
+```ts
+import { Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { interval, map } from 'rxjs';
+
+@Component(/* ... */)
+export class EqualExample {
+  temperature$ = interval(1000).pipe(
+    map(() => ({ temperature: Math.floor(Math.random() * 3) + 20 }) ) // 20, 21, or 22 randomly
+  );
+
+  // Only update if the temperature changes
+  temperature = toSignal(this.temperature$, {
+    initialValue: { temperature : 20  },
+    equal: (prev, curr) => prev.temperature === curr.temperature
+  });
+}
+```
+
 ### Error and Completion
 
 If an Observable used in `toSignal` produces an error, that error is thrown when the signal is read.
@@ -121,7 +146,7 @@ export class UserProfile {
   protected userId = input<string>();
 
   private userResource = rxResource({
-    params: () => this.userId(),
+    params: () => ({ userId: this.userId() }),
 
     // The `stream` property expects a factory function that returns
     // a data stream as an RxJS Observable.
diff --git a/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
index 17dc37a..19e8a42 100644
--- a/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
+++ b/adev-es/src/content/ecosystem/rxjs-interop/take-until-destroyed.md
@@ -25,7 +25,7 @@ export class UserProfile {
 }
 ```
 
-The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](https://angular.dev/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](https://angular.dev/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context.
+The `takeUntilDestroyed` operator accepts a single optional [`DestroyRef`](/api/core/DestroyRef) argument. The operator uses `DestroyRef` to know when the component or directive has been destroyed. You can omit this argument when calling `takeUntilDestroyed` in an [injection context](/guide/di/dependency-injection-context), typically the constructor of a component or directive. Always provide a `DestroyRef` if your code may call `takeUntilDestroyed` outside of an injection context.
 
 ```typescript
 @Component(/* ... */)
diff --git a/adev-es/src/content/ecosystem/service-workers/app-shell.md b/adev-es/src/content/ecosystem/service-workers/app-shell.md
index e4fdf2f..31e86a0 100644
--- a/adev-es/src/content/ecosystem/service-workers/app-shell.md
+++ b/adev-es/src/content/ecosystem/service-workers/app-shell.md
@@ -9,22 +9,18 @@ This gives users a meaningful first paint of your application that appears quick
 <docs-step title="Prepare the application">
 Do this with the following Angular CLI command:
 
-<docs-code language="shell">
-
+```shell
 ng new my-app
-
-</docs-code>
+```
 
 For an existing application, you have to manually add the `Router` and defining a `<router-outlet>` within your application.
 </docs-step>
 <docs-step title="Create the application shell">
 Use the Angular CLI to automatically create the application shell.
 
-<docs-code language="shell">
-
+```shell
 ng generate app-shell
-
-</docs-code>
+```
 
 For more information about this command, see [App shell command](cli/generate/app-shell).
 
@@ -44,19 +40,15 @@ src
 
 <docs-step title="Verify the application is built with the shell content">
 
-<docs-code language="shell">
-
+```shell
 ng build --configuration=development
-
-</docs-code>
+```
 
 Or to use the production configuration.
 
-<docs-code language="shell">
-
+```shell
 ng build
-
-</docs-code>
+```
 
 To verify the build output, open <code class="no-auto-link">dist/my-app/browser/index.html</code>.
 Look for default text `app-shell works!` to show that the application shell route was rendered as part of the output.
diff --git a/adev-es/src/content/ecosystem/service-workers/communications.md b/adev-es/src/content/ecosystem/service-workers/communications.md
index 59ab2db..71e9ffe 100644
--- a/adev-es/src/content/ecosystem/service-workers/communications.md
+++ b/adev-es/src/content/ecosystem/service-workers/communications.md
@@ -8,20 +8,20 @@ The `SwUpdate` service gives you access to events that indicate when the service
 
 The `SwUpdate` service supports three separate operations:
 
-* Receiving notifications when an updated version is *detected* on the server, *installed and ready* to be used locally or when an *installation fails*.
-* Asking the service worker to check the server for new updates.
-* Asking the service worker to activate the latest version of the application for the current tab.
+- Receiving notifications when an updated version is _detected_ on the server, _installed and ready_ to be used locally or when an _installation fails_.
+- Asking the service worker to check the server for new updates.
+- Asking the service worker to activate the latest version of the application for the current tab.
 
 ### Version updates
 
 The `versionUpdates` is an `Observable` property of `SwUpdate` and emits five event types:
 
-| Event types                      | Details |
-|:---                              |:---     |
-| `VersionDetectedEvent`           | Emitted when the service worker has detected a new version of the app on the server and is about to start downloading it.                                                   |
-| `NoNewVersionDetectedEvent`      | Emitted when the service worker has checked the version of the app on the server and did not find a new version.                                                            |
-| `VersionReadyEvent`              | Emitted when a new version of the app is available to be activated by clients. It may be used to notify the user of an available update or prompt them to refresh the page. |
-| `VersionInstallationFailedEvent` | Emitted when the installation of a new version failed. It may be used for logging/monitoring purposes.                                                                      |
+| Event types                      | Details                                                                                                                                                                               |
+| :------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `VersionDetectedEvent`           | Emitted when the service worker has detected a new version of the app on the server and is about to start downloading it.                                                             |
+| `NoNewVersionDetectedEvent`      | Emitted when the service worker has checked the version of the app on the server and did not find a new version.                                                                      |
+| `VersionReadyEvent`              | Emitted when a new version of the app is available to be activated by clients. It may be used to notify the user of an available update or prompt them to refresh the page.           |
+| `VersionInstallationFailedEvent` | Emitted when the installation of a new version failed. It may be used for logging/monitoring purposes.                                                                                |
 | `VersionFailedEvent`             | Emitted when a version encounters a critical failure (such as broken hash errors) that affects all clients using that version. Provides error details for debugging and transparency. |
 
 <docs-code header="log-update.service.ts" path="adev/src/content/examples/service-worker-getting-started/src/app/log-update.service.ts" visibleRegion="sw-update"/>
@@ -73,23 +73,23 @@ In some cases, the version of the application used by the service worker to serv
 For example, imagine the following scenario:
 
 1. A user opens the application for the first time and the service worker caches the latest version of the application.
-    Assume the application's cached assets include `index.html`, `main.<main-hash-1>.js` and `lazy-chunk.<lazy-hash-1>.js`.
+   Assume the application's cached assets include `index.html`, `main.<main-hash-1>.js` and `lazy-chunk.<lazy-hash-1>.js`.
 
 1. The user closes the application and does not open it for a while.
 1. After some time, a new version of the application is deployed to the server.
-    This newer version includes the files `index.html`, `main.<main-hash-2>.js` and `lazy-chunk.<lazy-hash-2>.js`.
+   This newer version includes the files `index.html`, `main.<main-hash-2>.js` and `lazy-chunk.<lazy-hash-2>.js`.
 
 IMPORTANT: The hashes are different now, because the content of the files changed. The old version is no longer available on the server.
 
 1. In the meantime, the user's browser decides to evict `lazy-chunk.<lazy-hash-1>.js` from its cache.
-    Browsers might decide to evict specific (or all) resources from a cache in order to reclaim disk space.
+   Browsers might decide to evict specific (or all) resources from a cache in order to reclaim disk space.
 
 1. The user opens the application again.
-    The service worker serves the latest version known to it at this point, namely the old version (`index.html` and `main.<main-hash-1>.js`).
+   The service worker serves the latest version known to it at this point, namely the old version (`index.html` and `main.<main-hash-1>.js`).
 
 1. At some later point, the application requests the lazy bundle, `lazy-chunk.<lazy-hash-1>.js`.
 1. The service worker is unable to find the asset in the cache (remember that the browser evicted it).
-    Nor is it able to retrieve it from the server (because the server now only has `lazy-chunk.<lazy-hash-2>.js` from the newer version).
+   Nor is it able to retrieve it from the server (because the server now only has `lazy-chunk.<lazy-hash-2>.js` from the newer version).
 
 In the preceding scenario, the service worker is not able to serve an asset that would normally be cached.
 That particular application version is broken and there is no way to fix the state of the client without reloading the page.
diff --git a/adev-es/src/content/ecosystem/service-workers/config.md b/adev-es/src/content/ecosystem/service-workers/config.md
index 1cdf056..8f13339 100644
--- a/adev-es/src/content/ecosystem/service-workers/config.md
+++ b/adev-es/src/content/ecosystem/service-workers/config.md
@@ -9,10 +9,10 @@ The [Angular CLI](tools/cli) processes this configuration file during `ng build`
 
 All file paths must begin with `/`, which corresponds to the deployment directory — usually `dist/<project-name>` in CLI projects.
 
-Unless otherwise commented, patterns use a **limited*** glob format that internally will be converted into regex:
+Unless otherwise commented, patterns use a **limited\*** glob format that internally will be converted into regex:
 
-| Glob formats | Details |
-|:---          |:---     |
+| Glob formats | Details                                                                                                |
+| :----------- | :----------------------------------------------------------------------------------------------------- |
 | `**`         | Matches 0 or more path segments                                                                        |
 | `*`          | Matches 0 or more characters excluding `/`                                                             |
 | `?`          | Matches exactly one character excluding `/`                                                            |
@@ -32,8 +32,8 @@ If you want your patterns to match the beginning and/or end of URLs, you can add
 
 Example patterns:
 
-| Patterns     | Details |
-|:---          |:---     |
+| Patterns     | Details                               |
+| :----------- | :------------------------------------ |
 | `/**/*.html` | Specifies all HTML files              |
 | `/*.html`    | Specifies only HTML files in the root |
 | `!/**/*.map` | Exclude all sourcemaps                |
@@ -55,7 +55,7 @@ Usually this is `/index.html`.
 
 ### `assetGroups`
 
-*Assets* are resources that are part of the application version that update along with the application.
+_Assets_ are resources that are part of the application version that update along with the application.
 They can include resources loaded from the page's origin as well as third-party resources loaded from CDNs and other external URLs.
 As not all such external URLs might be known at build time, URL patterns can be matched.
 
@@ -63,8 +63,7 @@ HELPFUL: For the service worker to handle resources that are loaded from differe
 
 This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached.
 
-<docs-code language="json">
-
+```ts
 {
   "assetGroups": [
     {
@@ -75,8 +74,7 @@ This field contains an array of asset groups, each of which defines a set of ass
     }
   ]
 }
-
-</docs-code>
+```
 
 HELPFUL: When the ServiceWorker handles a request, it checks asset groups in the order in which they appear in `ngsw-config.json`.
 The first asset group that matches the requested resource handles the request.
@@ -89,8 +87,7 @@ This policy determines when the resources are fetched and what happens when chan
 
 Asset groups follow the Typescript interface shown here:
 
-<docs-code language="typescript">
-
+```ts
 interface AssetGroup {
   name: string;
   installMode?: 'prefetch' | 'lazy';
@@ -103,8 +100,7 @@ interface AssetGroup {
     ignoreSearch?: boolean;
   };
 }
-
-</docs-code>
+```
 
 Each `AssetGroup` is defined by the following asset group properties.
 
@@ -118,8 +114,8 @@ It identifies this particular group of assets between versions of the configurat
 The `installMode` determines how these resources are initially cached.
 The `installMode` can be either of two values:
 
-| Values     | Details |
-|:---        |:---     |
+| Values     | Details                                                                                                                                                                                                                                                                                                                                                                                       |
+| :--------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `prefetch` | Tells the Angular service worker to fetch every single listed resource while it's caching the current version of the application. This is bandwidth-intensive but ensures resources are available whenever they're requested, even if the browser is currently offline.                                                                                                                       |
 | `lazy`     | Does not cache any of the resources up front. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested are not cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation. |
 
@@ -130,8 +126,8 @@ Defaults to `prefetch`.
 For resources already in the cache, the `updateMode` determines the caching behavior when a new version of the application is discovered.
 Any resources in the group that have changed since the previous version are updated in accordance with `updateMode`.
 
-| Values     | Details |
-|:---        |:---     |
+| Values     | Details                                                                                                                                                                                                                                  |
+| :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `prefetch` | Tells the service worker to download and cache the changed resources immediately.                                                                                                                                                        |
 | `lazy`     | Tells the service worker to not cache those resources. Instead, it treats them as unrequested and waits until they're requested again before updating them. An `updateMode` of `lazy` is only valid if the `installMode` is also `lazy`. |
 
@@ -141,10 +137,10 @@ Defaults to the value `installMode` is set to.
 
 This section describes the resources to cache, broken up into the following groups:
 
-| Resource groups | Details |
-|:---             |:---     |
-| `files`         | Lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.                                                                                                                                                                                                                                                                   |
-| `urls`          | Includes both URLs and URL patterns that are matched at runtime. These resources are not fetched directly and do not have content hashes, but they are cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service. <br />  *(Negative glob patterns are not supported and `?` will be matched literally; that is, it will not match any character other than `?`.)* |
+| Resource groups | Details                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `files`         | Lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.                                                                                                                                                                                                                                                                  |
+| `urls`          | Includes both URLs and URL patterns that are matched at runtime. These resources are not fetched directly and do not have content hashes, but they are cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service. <br /> _(Negative glob patterns are not supported and `?` will be matched literally; that is, it will not match any character other than `?`.)_ |
 
 #### `cacheQueryOptions`
 
@@ -153,8 +149,8 @@ They are passed to the browsers `Cache#match` function.
 See [MDN](https://developer.mozilla.org/docs/Web/API/Cache/match) for details.
 Currently, only the following options are supported:
 
-| Options        | Details |
-|:---            |:---     |
+| Options        | Details                                       |
+| :------------- | :-------------------------------------------- |
 | `ignoreSearch` | Ignore query parameters. Defaults to `false`. |
 
 ### `dataGroups`
@@ -164,8 +160,7 @@ They're cached according to manually-configured policies that are more useful fo
 
 This field contains an array of data groups, each of which defines a set of data resources and the policy by which they are cached.
 
-<docs-code language="json">
-
+```json
 {
   "dataGroups": [
     {
@@ -176,8 +171,7 @@ This field contains an array of data groups, each of which defines a set of data
     }
   ]
 }
-
-</docs-code>
+```
 
 HELPFUL: When the ServiceWorker handles a request, it checks data groups in the order in which they appear in `ngsw-config.json`.
 The first data group that matches the requested resource handles the request.
@@ -187,8 +181,7 @@ For example, a data group that matches `/api/foo.json` should appear before one
 
 Data groups follow this Typescript interface:
 
-<docs-code language="typescript">
-
+```ts
 export interface DataGroup {
   name: string;
   urls: string[];
@@ -204,8 +197,7 @@ export interface DataGroup {
     ignoreSearch?: boolean;
   };
 }
-
-</docs-code>
+```
 
 Each `DataGroup` is defined by the following data group properties.
 
@@ -219,8 +211,8 @@ A list of URL patterns.
 URLs that match these patterns are cached according to this data group's policy.
 Only non-mutating requests (GET and HEAD) are cached.
 
-* Negative glob patterns are not supported
-* `?` is matched literally; that is, it matches *only* the character `?`
+- Negative glob patterns are not supported
+- `?` is matched literally; that is, it matches _only_ the character `?`
 
 #### `version`
 
@@ -245,8 +237,8 @@ CRITICAL: Open-ended caches can grow in unbounded ways and eventually exceed sto
 
 The `maxAge` parameter indicates how long responses are allowed to remain in the cache before being considered invalid and evicted. `maxAge` is a duration string, using the following unit suffixes:
 
-| Suffixes | Details |
-|:---      |:---     |
+| Suffixes | Details      |
+| :------- | :----------- |
 | `d`      | Days         |
 | `h`      | Hours        |
 | `m`      | Minutes      |
@@ -261,8 +253,8 @@ This duration string specifies the network timeout.
 The network timeout is how long the Angular service worker waits for the network to respond before using a cached response, if configured to do so.
 `timeout` is a duration string, using the following unit suffixes:
 
-| Suffixes | Details |
-|:---      |:---     |
+| Suffixes | Details      |
+| :------- | :----------- |
 | `d`      | Days         |
 | `h`      | Hours        |
 | `m`      | Minutes      |
@@ -271,14 +263,13 @@ The network timeout is how long the Angular service worker waits for the network
 
 For example, the string `5s30u` translates to five seconds and 30 milliseconds of network timeout.
 
-
 ##### `refreshAhead`
 
 This duration string specifies the time ahead of the expiration of a cached resource when the Angular service worker should proactively attempt to refresh the resource from the network.
 The `refreshAhead` duration is an optional configuration that determines how much time before the expiration of a cached response the service worker should initiate a request to refresh the resource from the network.
 
-| Suffixes | Details |
-|:---      |:---     |
+| Suffixes | Details      |
+| :------- | :----------- |
 | `d`      | Days         |
 | `h`      | Hours        |
 | `m`      | Minutes      |
@@ -291,8 +282,8 @@ For example, the string `1h30m` translates to one hour and 30 minutes ahead of t
 
 The Angular service worker can use either of two caching strategies for data resources.
 
-| Caching strategies | Details |
-|:---                |:---     |
+| Caching strategies | Details                                                                                                                                                                                                                                                                                                                                                   |
+| :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `performance`      | The default, optimizes for responses that are as fast as possible. If a resource exists in the cache, the cached version is used, and no network request is made. This allows for some staleness, depending on the `maxAge`, in exchange for better performance. This is suitable for resources that don't change often; for example, user avatar images. |
 | `freshness`        | Optimizes for currency of data, preferentially fetching requested data from the network. Only if the network times out, according to `timeout`, does the request fall back to the cache. This is useful for resources that change frequently; for example, account balances.                                                                              |
 
@@ -312,9 +303,9 @@ Whether the Angular service worker should cache opaque responses or not.
 
 If not specified, the default value depends on the data group's configured strategy:
 
-| Strategies                             | Details |
-|:---                                    |:---     |
-| Groups with the `freshness` strategy   | The default value is `true` and the service worker caches opaque responses. These groups will request the data every time and only fall back to the cached response when offline or on a slow network. Therefore, it doesn't matter if the service worker caches an error response. |
+| Strategies                             | Details                                                                                                                                                                                                                                                                                                                     |
+| :------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Groups with the `freshness` strategy   | The default value is `true` and the service worker caches opaque responses. These groups will request the data every time and only fall back to the cached response when offline or on a slow network. Therefore, it doesn't matter if the service worker caches an error response.                                         |
 | Groups with the `performance` strategy | The default value is `false` and the service worker doesn't cache opaque responses. These groups would continue to return a cached response until `maxAge` expires, even if the error was due to a temporary network or server issue. Therefore, it would be problematic for the service worker to cache an error response. |
 
 <docs-callout title="Comment on opaque responses">
@@ -340,14 +331,14 @@ This optional section enables you to specify a custom list of URLs that will be
 The ServiceWorker redirects navigation requests that don't match any `asset` or `data` group to the specified [index file](#index).
 A request is considered to be a navigation request if:
 
-* Its [method](https://developer.mozilla.org/docs/Web/API/Request/method) is `GET`
-* Its [mode](https://developer.mozilla.org/docs/Web/API/Request/mode) is `navigation`
-* It accepts a `text/html` response as determined by the value of the `Accept` header
-* Its URL matches the following criteria:
-  * The URL must not contain a file extension (that is, a `.`) in the last path segment
-  * The URL must not contain `__`
+- Its [method](https://developer.mozilla.org/docs/Web/API/Request/method) is `GET`
+- Its [mode](https://developer.mozilla.org/docs/Web/API/Request/mode) is `navigation`
+- It accepts a `text/html` response as determined by the value of the `Accept` header
+- Its URL matches the following criteria:
+  - The URL must not contain a file extension (that is, a `.`) in the last path segment
+  - The URL must not contain `__`
 
-HELPFUL: To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigationrequeststrategy) section and [applicationMaxAge](#application-max-age) sections.
+HELPFUL: To configure whether navigation requests are sent through to the network or not, see the [navigationRequestStrategy](#navigationrequeststrategy) section and [applicationMaxAge](#applicationmaxage) sections.
 
 #### Matching navigation request URLs
 
@@ -357,37 +348,36 @@ For example, you might want to ignore specific routes, such as those that are no
 This field contains an array of URLs and [glob-like](#modifying-the-configuration) URL patterns that are matched at runtime.
 It can contain both negative patterns (that is, patterns starting with `!`) and non-negative patterns and URLs.
 
-Only requests whose URLs match *any* of the non-negative URLs/patterns and *none* of the negative ones are considered navigation requests.
+Only requests whose URLs match _any_ of the non-negative URLs/patterns and _none_ of the negative ones are considered navigation requests.
 The URL query is ignored when matching.
 
 If the field is omitted, it defaults to:
 
-<docs-code language="typescript">
+```ts
 
 [
-  '/**',           // Include all URLs.
-  '!/**/*.*',      // Exclude URLs to files (containing a file extension in the last segment).
-  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
-  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
+'/**', // Include all URLs.
+'!/**/*.*', // Exclude URLs to files (containing a file extension in the last segment).
+'!/**/*__*', // Exclude URLs containing `__` in the last segment.
+'!/**/*__*/**', // Exclude URLs containing `__` in any other segment.
 ]
 
-</docs-code>
+```
 
 ### `navigationRequestStrategy`
 
 This optional property enables you to configure how the service worker handles navigation requests:
 
-<docs-code language="json">
+```json
 
 {
   "navigationRequestStrategy": "freshness"
 }
+```
 
-</docs-code>
-
-| Possible values | Details |
-|:---             |:---     |
-| `'performance'` | The default setting. Serves the specified [index file](#index-file), which is typically cached. |
+| Possible values | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'performance'` | The default setting. Serves the specified [index file](#index), which is typically cached.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | `'freshness'`   | Passes the requests through to the network and falls back to the `performance` behavior when offline. This value is useful when the server redirects the navigation requests elsewhere using a `3xx` HTTP redirect status code. Reasons for using this value include: <ul> <li> Redirecting to an authentication website when authentication is not handled by the application </li> <li> Redirecting specific URLs to avoid breaking existing links/bookmarks after a website redesign </li> <li> Redirecting to a different website, such as a server-status page, while a page is temporarily down </li> </ul> |
 
 IMPORTANT: The `freshness` strategy usually results in more requests sent to the server, which can increase response latency. It is recommended that you use the default performance strategy whenever possible.
diff --git a/adev-es/src/content/ecosystem/service-workers/custom-service-worker-scripts.md b/adev-es/src/content/ecosystem/service-workers/custom-service-worker-scripts.md
index 8bafac8..d5fdcaa 100644
--- a/adev-es/src/content/ecosystem/service-workers/custom-service-worker-scripts.md
+++ b/adev-es/src/content/ecosystem/service-workers/custom-service-worker-scripts.md
@@ -8,8 +8,7 @@ To create a custom service worker that extends Angular's functionality:
 
 1. Create a custom service worker file (e.g., `custom-sw.js`) in your `src` directory:
 
-<docs-code language="javascript">
-
+```js
 // Import the Angular service worker
 importScripts('./ngsw-worker.js');
 
@@ -20,7 +19,7 @@ importScripts('./ngsw-worker.js');
   self.addEventListener('notificationclick', (event) => {
     console.log('Custom notification click handler');
     console.log('Notification details:', event.notification);
-    
+
     // Handle notification click - open URL if provided
     if (clients.openWindow && event.notification.data.url) {
       event.waitUntil(clients.openWindow(event.notification.data.url));
@@ -31,7 +30,7 @@ importScripts('./ngsw-worker.js');
   // Add custom background sync handler
   self.addEventListener('sync', (event) => {
     console.log('Custom background sync handler');
-    
+
     if (event.tag === 'background-sync') {
       event.waitUntil(doBackgroundSync());
     }
@@ -40,44 +39,40 @@ importScripts('./ngsw-worker.js');
   function doBackgroundSync() {
     // Implement your background sync logic here
     return fetch('https://example.com/api/sync')
-      .then(response => response.json())
-      .then(data => console.log('Background sync completed:', data))
-      .catch(error => console.error('Background sync failed:', error));
+      .then((response) => response.json())
+      .then((data) => console.log('Background sync completed:', data))
+      .catch((error) => console.error('Background sync failed:', error));
   }
 })();
-
-</docs-code>
+```
 
 2. Update your `angular.json` file to use the custom service worker:
 
-<docs-code language="json">
-
+```json
 {
   "projects": {
     "your-app": {
       "architect": {
         "build": {
-            "options": {
-              "assets": [
-               { 
+          "options": {
+            "assets": [
+              {
                 "glob": "**/*",
                 "input": "public"
-                },
-                "app/src/custom-sw.js"
-              ]
-            },
+              },
+              "app/src/custom-sw.js"
+            ]
+          }
         }
       }
     }
   }
 }
-
-</docs-code>
+```
 
 3. Configure the service worker registration to use your custom script:
 
-<docs-code language="typescript">
-
+```ts
 import { ApplicationConfig, isDevMode } from '@angular/core';
 import { provideServiceWorker } from '@angular/service-worker';
 
@@ -85,12 +80,11 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideServiceWorker('custom-sw.js', {
       enabled: !isDevMode(),
-      registrationStrategy: 'registerWhenStable:30000'
+      registrationStrategy: 'registerWhenStable:30000',
     }),
   ],
 };
-
-</docs-code>
+```
 
 ### Best practices for custom service workers
 
@@ -107,5 +101,5 @@ When extending the Angular service worker:
 Custom service workers are commonly used for:
 
 - **Push notifications**: Handle incoming push messages and display notifications
-- **Background sync**: Sync data when the network connection is restored  
+- **Background sync**: Sync data when the network connection is restored
 - **Custom navigation**: Handle special routing or offline page scenarios
diff --git a/adev-es/src/content/ecosystem/service-workers/devops.md b/adev-es/src/content/ecosystem/service-workers/devops.md
index 4aea23e..fb3b0ea 100644
--- a/adev-es/src/content/ecosystem/service-workers/devops.md
+++ b/adev-es/src/content/ecosystem/service-workers/devops.md
@@ -60,17 +60,17 @@ If necessary, the service worker enters a safe mode where requests fall back on
 
 Hash mismatches can occur for a variety of reasons:
 
-* Caching layers between the origin server and the end user could serve stale content
-* A non-atomic deployment could result in the Angular service worker having visibility of partially updated content
-* Errors during the build process could result in updated resources without `ngsw.json` being updated.
-    The reverse could also happen resulting in an updated `ngsw.json` without updated resources.
+- Caching layers between the origin server and the end user could serve stale content
+- A non-atomic deployment could result in the Angular service worker having visibility of partially updated content
+- Errors during the build process could result in updated resources without `ngsw.json` being updated.
+  The reverse could also happen resulting in an updated `ngsw.json` without updated resources.
 
 #### Unhashed content
 
 The only resources that have hashes in the `ngsw.json` manifest are resources that were present in the `dist` directory at the time the manifest was built.
 Other resources, especially those loaded from CDNs, have content that is unknown at build time or are updated more frequently than the application is deployed.
 
-If the Angular service worker does not have a hash to verify a resource is valid, it still caches its contents. At the same time, it honors the HTTP caching headers by using a policy of *stale while revalidate*.
+If the Angular service worker does not have a hash to verify a resource is valid, it still caches its contents. At the same time, it honors the HTTP caching headers by using a policy of _stale while revalidate_.
 The Angular service worker continues to serve a resource even after its HTTP caching headers indicate
 that it is no longer valid. At the same time, it attempts to refresh the expired resource in the background.
 This way, broken unhashed resources do not remain in the cache beyond their configured lifetimes.
@@ -88,15 +88,15 @@ IMPORTANT: This guarantee is **stronger** than that provided by the normal web d
 
 The Angular service worker might change the version of a running application under error conditions such as:
 
-* The current version becomes non-valid due to a failed hash.
-* An unrelated error causes the service worker to enter safe mode and deactivates it temporarily.
+- The current version becomes non-valid due to a failed hash.
+- An unrelated error causes the service worker to enter safe mode and deactivates it temporarily.
 
 The Angular service worker cleans up application versions when no tab is using them.
 
 Other reasons the Angular service worker might change the version of a running application are normal events:
 
-* The page is reloaded/refreshed.
-* The page requests an update be immediately activated using the `SwUpdate` service.
+- The page is reloaded/refreshed.
+- The page requests an update be immediately activated using the `SwUpdate` service.
 
 ### Service worker updates
 
@@ -155,7 +155,8 @@ Clients: 7b79a015-69af-4d3d-9ae6-95ba90c79486, 5bc08295-aaf2-42f3-a4cc-9e4ef9100
 Last update tick: 1s496u
 Last update run: never
 Task queue:
- * init post-load (update, cleanup)
+
+- init post-load (update, cleanup)
 
 Debug log:
 
@@ -175,10 +176,10 @@ Driver state: NORMAL ((nominal))
 
 There are two possible degraded states:
 
-| Degraded states         | Details |
-|:---                     |:---     |
+| Degraded states         | Details                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| :---------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `EXISTING_CLIENTS_ONLY` | The service worker does not have a clean copy of the latest known version of the application. Older cached versions are safe to use, so existing tabs continue to run from cache, but new loads of the application will be served from the network. The service worker will try to recover from this state when a new version of the application is detected and installed. This happens when a new `ngsw.json` is available. |
-| `SAFE_MODE`             | The service worker cannot guarantee the safety of using cached data. Either an unexpected error occurred or all cached versions are invalid. All traffic will be served from the network, running as little service worker code as possible. |
+| `SAFE_MODE`             | The service worker cannot guarantee the safety of using cached data. Either an unexpected error occurred or all cached versions are invalid. All traffic will be served from the network, running as little service worker code as possible.                                                                                                                                                                                  |
 
 In both cases, the parenthetical annotation provides the
 error that caused the service worker to enter the degraded state.
@@ -232,7 +233,8 @@ HELPFUL: This version hash is the "latest manifest hash" listed above. Both clie
 Last update tick: 1s496u
 Last update run: never
 Task queue:
- * init post-load (update, cleanup)
+
+- init post-load (update, cleanup)
 
 </docs-code>
 
@@ -259,13 +261,13 @@ Errors that occur within the service worker are logged here.
 Browsers such as Chrome provide developer tools for interacting with service workers.
 Such tools can be powerful when used properly, but there are a few things to keep in mind.
 
-* When using developer tools, the service worker is kept running in the background and never restarts.
-    This can cause behavior with Dev Tools open to differ from behavior a user might experience.
+- When using developer tools, the service worker is kept running in the background and never restarts.
+  This can cause behavior with Dev Tools open to differ from behavior a user might experience.
 
-* If you look in the Cache Storage viewer, the cache is frequently out of date.
-    Right-click the Cache Storage title and refresh the caches.
+- If you look in the Cache Storage viewer, the cache is frequently out of date.
+  Right-click the Cache Storage title and refresh the caches.
 
-* Stopping and starting the service worker in the Service Worker pane checks for updates
+- Stopping and starting the service worker in the Service Worker pane checks for updates
 
 ## Service worker safety
 
diff --git a/adev-es/src/content/ecosystem/service-workers/getting-started.md b/adev-es/src/content/ecosystem/service-workers/getting-started.md
index aedaeb7..268a3a1 100644
--- a/adev-es/src/content/ecosystem/service-workers/getting-started.md
+++ b/adev-es/src/content/ecosystem/service-workers/getting-started.md
@@ -6,11 +6,11 @@ This document explains how to enable Angular service worker support in projects
 
 To set up the Angular service worker in your project, run the following CLI command:
 
-<docs-code language="shell">
+```shell
 
 ng add @angular/pwa
 
-</docs-code>
+```
 
 The CLI configures your application to use service workers with the following actions:
 
@@ -18,19 +18,19 @@ The CLI configures your application to use service workers with the following ac
 1. Enables service worker build support in the CLI.
 1. Imports and registers the service worker with the application's root providers.
 1. Updates the `index.html` file:
-    * Includes a link to add the `manifest.webmanifest` file
-    * Adds a meta tag for `theme-color`
+   - Includes a link to add the `manifest.webmanifest` file
+   - Adds a meta tag for `theme-color`
 1. Installs icon files to support the installed Progressive Web App (PWA).
 1. Creates the service worker configuration file called [`ngsw-config.json`](ecosystem/service-workers/config),
-which specifies the caching behaviors and other settings.
+   which specifies the caching behaviors and other settings.
 
 Now, build the project:
 
-<docs-code language="shell">
+```shell
 
 ng build
 
-</docs-code>
+```
 
 The CLI project is now set up to use the Angular service worker.
 
@@ -39,20 +39,20 @@ The CLI project is now set up to use the Angular service worker.
 This section demonstrates a service worker in action,
 using an example application. To enable service worker support during local development, use the production configuration with the following command:
 
-<docs-code language="shell">
+```shell
 
 ng serve --configuration=production
 
-</docs-code>
+```
 
 Alternatively, you can use the [`http-server package`](https://www.npmjs.com/package/http-server) from
 npm, which supports service worker applications. Run it without installation using:
 
-<docs-code language="shell">
+```shell
 
-npx http-server -p 8080 -c-1 dist/&lt;project-name&gt;/browser
+npx http-server -p 8080 -c-1 dist/<project-name>/browser
 
-</docs-code>
+```
 
 This will serve your application with service worker support at http://localhost:8080.
 
@@ -97,12 +97,12 @@ Instead, they are being loaded from the service worker's cache.
 Notice that all of the files the browser needs to render this application are cached.
 The `ngsw-config.json` boilerplate configuration is set up to cache the specific resources used by the CLI:
 
-* `index.html`
-* `favicon.ico`
-* Build artifacts (JS and CSS bundles)
-* Anything under `assets`
-* Images and fonts directly under the configured `outputPath` (by default `./dist/<project-name>/`) or `resourcesOutputPath`.
-    See the documentation for `ng build` for more information about these options.
+- `index.html`
+- `favicon.ico`
+- Build artifacts (JS and CSS bundles)
+- Anything under `assets`
+- Images and fonts directly under the configured `outputPath` (by default `./dist/<project-name>/`) or `resourcesOutputPath`.
+  See the documentation for `ng build` for more information about these options.
 
 IMPORTANT: The generated `ngsw-config.json` includes a limited list of cacheable fonts and images extensions. In some cases, you might want to modify the glob pattern to suit your needs.
 
@@ -114,50 +114,48 @@ Now that you've seen how service workers cache your application, the next step i
 Make a change to the application, and watch the service worker install the update:
 
 1. If you're testing in an incognito window, open a second blank tab.
-    This keeps the incognito and the cache state alive during your test.
+   This keeps the incognito and the cache state alive during your test.
 
 1. Close the application tab, but not the window.
-    This should also close the Developer Tools.
+   This should also close the Developer Tools.
 
 1. Shut down `http-server` (Ctrl-c).
 1. Open `src/app/app.component.html` for editing.
 1. Change the text `Welcome to {{title}}!` to `Bienvenue à {{title}}!`.
 1. Build and run the server again:
 
-    <docs-code language="shell">
-
+```shell
     ng build
     npx http-server -p 8080 -c-1 dist/<project-name>/browser
-
-    </docs-code>
+```
 
 ### Updating your application in the browser
 
 Now look at how the browser and service worker handle the updated application.
 
 1. Open [http://localhost:8080](http://localhost:8080) again in the same window.
-    What happens?
+   What happens?
 
-    <img alt="It still says Welcome to Service Workers!" src="assets/images/guide/service-worker/welcome-msg-en.png">
+   <img alt="It still says Welcome to Service Workers!" src="assets/images/guide/service-worker/welcome-msg-en.png">
 
-    What went wrong?
-    _Nothing, actually!_
-    The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available.
-    In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached.
+   What went wrong?
+   _Nothing, actually!_
+   The Angular service worker is doing its job and serving the version of the application that it has **installed**, even though there is an update available.
+   In the interest of speed, the service worker doesn't wait to check for updates before it serves the application that it has cached.
 
-    Look at the `http-server` logs to see the service worker requesting `/ngsw.json`.
+   Look at the `http-server` logs to see the service worker requesting `/ngsw.json`.
 
-    <docs-code language="shell">
-    [2023-09-07T00:37:24.372Z]  "GET /ngsw.json?ngsw-cache-bust=0.9365263935102124" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
-    </docs-code>
+   ```text
+   [2023-09-07T00:37:24.372Z]  "GET /ngsw.json?ngsw-cache-bust=0.9365263935102124" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
+   ```
 
-    This is how the service worker checks for updates.
+   This is how the service worker checks for updates.
 
 1. Refresh the page.
 
-    <img alt="The text has changed to say Bienvenue à app!" src="assets/images/guide/service-worker/welcome-msg-fr.png">
+   <img alt="The text has changed to say Bienvenue à app!" src="assets/images/guide/service-worker/welcome-msg-fr.png">
 
-    The service worker installed the updated version of your application _in the background_, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
+   The service worker installed the updated version of your application _in the background_, and the next time the page is loaded or reloaded, the service worker switches to the latest version.
 
 ## Service worker configuration
 
@@ -167,7 +165,7 @@ Angular service workers support comprehensive configuration options through the
 
 The `enabled` option controls whether the service worker will be registered and related services will attempt to communicate with it.
 
-<docs-code language="typescript">
+```ts
 
 import { ApplicationConfig, isDevMode } from '@angular/core';
 import { provideServiceWorker } from '@angular/service-worker';
@@ -180,14 +178,13 @@ export const appConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
-
+```
 
 ### Cache control with updateViaCache
 
 The `updateViaCache` option controls how the browser consults the HTTP cache during service worker updates. This provides fine-grained control over when the browser fetches updated service worker scripts and imported modules.
 
-<docs-code language="typescript">
+```ts
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -198,19 +195,19 @@ export const appConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
 The `updateViaCache` option accepts the following values:
 
-* **`'imports'`** - The HTTP cache is consulted for the service worker script's imported scripts, but not for the service worker script itself
-* **`'all'`** - The HTTP cache is consulted for both the service worker script and its imported scripts  
-* **`'none'`** - The HTTP cache is not consulted for the service worker script or its imported scripts
+- **`'imports'`** - The HTTP cache is consulted for the service worker script's imported scripts, but not for the service worker script itself
+- **`'all'`** - The HTTP cache is consulted for both the service worker script and its imported scripts
+- **`'none'`** - The HTTP cache is not consulted for the service worker script or its imported scripts
 
 ### ES Module support with type option
 
 The `type` option enables specifying the script type when registering service workers, providing support for ES module features in your service worker scripts.
 
-<docs-code language="typescript">
+```ts
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -221,18 +218,18 @@ export const appConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
 The `type` option accepts the following values:
 
-* **`'classic'`** (default) - Traditional service worker script execution. ES module features such as `import` and `export` are NOT allowed in the script
-* **`'module'`** - Registers the script as an ES module. Allows use of `import`/`export` syntax and module features
+- **`'classic'`** (default) - Traditional service worker script execution. ES module features such as `import` and `export` are NOT allowed in the script
+- **`'module'`** - Registers the script as an ES module. Allows use of `import`/`export` syntax and module features
 
 ### Registration scope control
 
 The `scope` option defines the service worker's registration scope, determining what range of URLs it can control.
 
-<docs-code language="typescript">
+```ts
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -243,17 +240,17 @@ export const appConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
-* Controls which URLs the service worker can intercept and manage
-* By default, the scope is the directory containing the service worker script
-* Used when calling `ServiceWorkerContainer.register()`
+- Controls which URLs the service worker can intercept and manage
+- By default, the scope is the directory containing the service worker script
+- Used when calling `ServiceWorkerContainer.register()`
 
 ### Registration strategy configuration
 
 The `registrationStrategy` option defines when the service worker will be registered with the browser, providing control over the timing of registration.
 
-<docs-code language="typescript">
+```ts
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -264,15 +261,15 @@ export const appConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
 Available registration strategies:
 
-* **`'registerWhenStable:timeout'`** (default: `'registerWhenStable:30000'`) - Register as soon as the application stabilizes (no pending micro-/macro-tasks) but no later than the specified timeout in milliseconds
-* **`'registerImmediately'`** - Register the service worker immediately
-* **`'registerWithDelay:timeout'`** - Register with a delay of the specified timeout in milliseconds
+- **`'registerWhenStable:timeout'`** (default: `'registerWhenStable:30000'`) - Register as soon as the application stabilizes (no pending micro-/macro-tasks) but no later than the specified timeout in milliseconds
+- **`'registerImmediately'`** - Register the service worker immediately
+- **`'registerWithDelay:timeout'`** - Register with a delay of the specified timeout in milliseconds
 
-<docs-code language="typescript">
+```ts
 
 // Register immediately
 export const immediateConfig: ApplicationConfig = {
@@ -294,11 +291,11 @@ export const delayedConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
 You can also provide an Observable factory function for custom registration timing:
 
-<docs-code language="typescript">
+```ts
 import { timer } from 'rxjs';
 
 export const customConfig: ApplicationConfig = {
@@ -310,7 +307,7 @@ export const customConfig: ApplicationConfig = {
   ],
 };
 
-</docs-code>
+```
 
 ## More on Angular service workers
 
diff --git a/adev-es/src/content/ecosystem/service-workers/overview.md b/adev-es/src/content/ecosystem/service-workers/overview.md
index 6e0fe6e..dc80ede 100644
--- a/adev-es/src/content/ecosystem/service-workers/overview.md
+++ b/adev-es/src/content/ecosystem/service-workers/overview.md
@@ -15,7 +15,7 @@ Service worker-based caching is thus completely programmable and doesn't rely on
 
 Unlike the other scripts that make up an application, such as the Angular application bundle, the service worker is preserved after the user closes the tab.
 The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application.
-If the service worker is designed to do so, it can *completely satisfy the loading of the application, without the need for the network*.
+If the service worker is designed to do so, it can _completely satisfy the loading of the application, without the need for the network_.
 
 Even across a fast reliable network, round-trip delays can introduce significant latency when loading the application.
 Using a service worker to reduce dependency on the network can significantly improve the user experience.
@@ -28,22 +28,22 @@ Angular's service worker is designed to optimize the end user experience of usin
 
 To achieve this, the Angular service worker follows these guidelines:
 
-* Caching an application is like installing a native application.
-    The application is cached as one unit, and all files update together.
+- Caching an application is like installing a native application.
+  The application is cached as one unit, and all files update together.
 
-* A running application continues to run with the same version of all files.
-    It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
+- A running application continues to run with the same version of all files.
+  It does not suddenly start receiving cached files from a newer version, which are likely incompatible.
 
-* When users refresh the application, they see the latest fully cached version.
-    New tabs load the latest cached code.
+- When users refresh the application, they see the latest fully cached version.
+  New tabs load the latest cached code.
 
-* Updates happen in the background, relatively quickly after changes are published.
-    The previous version of the application is served until an update is installed and ready.
+- Updates happen in the background, relatively quickly after changes are published.
+  The previous version of the application is served until an update is installed and ready.
 
-* The service worker conserves bandwidth when possible.
-    Resources are only downloaded if they've changed.
+- The service worker conserves bandwidth when possible.
+  Resources are only downloaded if they've changed.
 
-To support these behaviors, the Angular service worker loads a *manifest* file from the server.
+To support these behaviors, the Angular service worker loads a _manifest_ file from the server.
 The file, called `ngsw.json` (not to be confused with the [web app manifest](https://developer.mozilla.org/docs/Web/Manifest)), describes the resources to cache and includes hashes of every file's contents.
 When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached.
 This manifest is generated from a CLI-generated configuration file called `ngsw-config.json`.
@@ -60,7 +60,7 @@ For service workers to be registered, the application must be accessed over HTTP
 Browsers ignore service workers on pages that are served over an insecure connection.
 The reason is that service workers are quite powerful, so extra care is needed to ensure the service worker script has not been tampered with.
 
-There is one exception to this rule: to make local development more straightforward, browsers do *not* require a secure connection when accessing an application on `localhost`.
+There is one exception to this rule: to make local development more straightforward, browsers do _not_ require a secure connection when accessing an application on `localhost`.
 
 ### Browser support
 
@@ -71,9 +71,9 @@ Browsers like IE and Opera Mini do not support service workers.
 If the user is accessing your application with a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
 More specifically:
 
-* The browser does not download the service worker script and the `ngsw.json` manifest file
-* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises
-* The observable events of related services, such as `SwUpdate.available`, are not triggered
+- The browser does not download the service worker script and the `ngsw.json` manifest file
+- Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises
+- The observable events of related services, such as `SwUpdate.available`, are not triggered
 
 It is highly recommended that you ensure that your application works even without service worker support in the browser.
 Although an unsupported browser ignores service worker caching, it still reports errors if the application attempts to interact with the service worker.
diff --git a/adev-es/src/content/ecosystem/service-workers/push-notifications.md b/adev-es/src/content/ecosystem/service-workers/push-notifications.md
index 2f1ac6a..054b958 100644
--- a/adev-es/src/content/ecosystem/service-workers/push-notifications.md
+++ b/adev-es/src/content/ecosystem/service-workers/push-notifications.md
@@ -23,8 +23,7 @@ The default behavior for the `notificationclick` event is to close the notificat
 You can specify an additional operation to be executed on `notificationclick` by adding an `onActionClick` property to the `data` object, and providing a `default` entry.
 This is especially useful for when there are no open clients when a notification is clicked.
 
-<docs-code language="json">
-
+```json
 {
   "notification": {
     "title": "New Notification!",
@@ -35,19 +34,18 @@ This is especially useful for when there are no open clients when a notification
     }
   }
 }
-
-</docs-code>
+```
 
 ### Operations
 
 The Angular service worker supports the following operations:
 
-| Operations                  | Details |
-|:---                         |:---     |
+| Operations                  | Details                                                                                                                                          |
+| :-------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
 | `openWindow`                | Opens a new tab at the specified URL.                                                                                                            |
 | `focusLastFocusedOrOpen`    | Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL.                                       |
 | `navigateLastFocusedOrOpen` | Focuses the last focused client and navigates it to the specified URL. If there is no client open, then it opens a new tab at the specified URL. |
-| `sendRequest`               | Send a simple GET request to the specified URL.                                                                                                                                                          |
+| `sendRequest`               | Send a simple GET request to the specified URL.                                                                                                  |
 
 IMPORTANT: URLs are resolved relative to the service worker's registration scope.<br />If an `onActionClick` item does not define a `url`, then the service worker's registration scope is used.
 
@@ -60,8 +58,7 @@ Each action is represented as an action button that the user can click to intera
 
 In addition, using the `onActionClick` property on the `data` object, you can tie each action to an operation to be performed when the corresponding action button is clicked:
 
-<docs-code language="typescript">
-
+```json
 {
   "notification": {
     "title": "New Notification!",
@@ -83,8 +80,7 @@ In addition, using the `onActionClick` property on the `data` object, you can ti
     }
   }
 }
-
-</docs-code>
+```
 
 IMPORTANT: If an action does not have a corresponding `onActionClick` entry, then the notification is closed and `SwPush.notificationClicks` is notified on existing clients.
 
@@ -93,7 +89,6 @@ IMPORTANT: If an action does not have a corresponding `onActionClick` entry, the
 You might also be interested in the following:
 
 <docs-pill-row>
-
   <docs-pill href="ecosystem/service-workers/communications" title="Communicating with the Service Worker"/>
   <docs-pill href="ecosystem/service-workers/devops" title="Service Worker devops"/>
 </docs-pill-row>
diff --git a/adev-es/src/content/ecosystem/web-workers.en.md b/adev-es/src/content/ecosystem/web-workers.en.md
index c832564..9ebd9fc 100644
--- a/adev-es/src/content/ecosystem/web-workers.en.md
+++ b/adev-es/src/content/ecosystem/web-workers.en.md
@@ -9,52 +9,47 @@ HELPFUL: The Angular CLI does not support running itself in a web worker.
 
 To add a web worker to an existing project, use the Angular CLI `ng generate` command.
 
-<docs-code language="shell">
-
+```shell
 ng generate web-worker <location>
-
-</docs-code>
+```
 
 You can add a web worker anywhere in your application.
 For example, to add a web worker to the root component, `src/app/app.component.ts`, run the following command.
 
-<docs-code language="shell">
-
+```shell
 ng generate web-worker app
-
-</docs-code>
+```
 
 The command performs the following actions.
 
 1. Configures your project to use web workers, if it isn't already.
-1. Adds the following scaffold code to `src/app/app.worker.ts` to  receive messages.
+1. Adds the following scaffold code to `src/app/app.worker.ts` to receive messages.
 
-    <docs-code language="typescript" header="src/app/app.worker.ts">
+   ```ts {header:"src/app/app.worker.ts"}
 
-    addEventListener('message', ({ data }) => {
-      const response = `worker response to ${data}`;
-      postMessage(response);
-    });
+     addEventListener('message', ({ data }) => {
+        const response = `worker response to ${data}`;
+        postMessage(response);
+     });
 
-    </docs-code>
+   ```
 
 1. Adds the following scaffold code to `src/app/app.component.ts` to use the worker.
 
-    <docs-code language="typescript" header="src/app/app.component.ts">
-
-    if (typeof Worker !== 'undefined') {
-      // Create a new
-      const worker = new Worker(new URL('./app.worker', import.meta.url));
-      worker.onmessage = ({ data }) => {
-        console.log(`page got message: ${data}`);
-      };
-      worker.postMessage('hello');
-    } else {
-      // Web workers are not supported in this environment.
-      // You should add a fallback so that your program still executes correctly.
-    }
-
-    </docs-code>
+   ```ts {header:"src/app/app.component.ts"}
+
+     if (typeof Worker !== 'undefined') {
+        // Create a new
+        const worker = new Worker(new URL('./app.worker', import.meta.url));
+        worker.onmessage = ({ data }) => {
+           console.log(`page got message: ${data}`);
+        };
+        worker.postMessage('hello');
+     } else {
+        // Web workers are not supported in this environment.
+        // You should add a fallback so that your program still executes correctly.
+     }
+   ```
 
 After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.
 
diff --git a/adev-es/src/content/ecosystem/web-workers.md b/adev-es/src/content/ecosystem/web-workers.md
index 4e173a5..f92b314 100644
--- a/adev-es/src/content/ecosystem/web-workers.md
+++ b/adev-es/src/content/ecosystem/web-workers.md
@@ -3,60 +3,55 @@
 Los [web workers](https://developer.mozilla.org/es/docs/Web/API/Web_Workers_API) te permiten ejecutar cálculos con uso intensivo de CPU en un hilo en segundo plano, liberando el hilo principal para actualizar la interfaz de usuario.
 Las aplicaciones que realizan muchos cálculos, como generar dibujos de diseño asistido por computadora (CAD) o llevar a cabo operaciones geométricas complejas, pueden usar web workers para aumentar el rendimiento.
 
-ÚTIL: Angular CLI no permite ejecutarse a sí mismo dentro de un web worker.
+CONSEJO: Angular CLI no permite ejecutarse a sí mismo dentro de un web worker.
 
 ## Agregar un web worker
 
 Para agregar un web worker a un proyecto existente, usa el comando `ng generate` de Angular CLI.
 
-<docs-code language="shell">
-
+```shell
 ng generate web-worker <location>
-
-</docs-code>
+```
 
 Puedes agregar un web worker en cualquier parte de tu aplicación.
 Por ejemplo, para agregar un web worker al componente raíz, `src/app/app.component.ts`, ejecuta el siguiente comando.
 
-<docs-code language="shell">
-
+```shell
 ng generate web-worker app
-
-</docs-code>
+```
 
 El comando realiza las siguientes acciones.
 
 1. Configura tu proyecto para usar web workers, si aún no lo estaba.
 1. Agrega el siguiente código base en `src/app/app.worker.ts` para recibir mensajes.
 
-    <docs-code language="typescript" header="src/app/app.worker.ts">
-
-    addEventListener('message', ({ data }) => {
-      const response = `worker response to ${data}`;
-      postMessage(response);
-    });
+   ```ts {header:"src/app/app.worker.ts"}
 
-    </docs-code>
+     addEventListener('message', ({ data }) => {
+        const response = `worker response to ${data}`;
+        postMessage(response);
+     });
 
-1. Agrega el siguiente siguiente código base en `src/app/app.component.ts` para usar el worker.
+   ```
 
-    <docs-code language="typescript" header="src/app/app.component.ts">
+1. Agrega el siguiente código base en `src/app/app.component.ts` para usar el worker.
 
-    if (typeof Worker !== 'undefined') {
-      // Crear uno nuevo
-      const worker = new Worker(new URL('./app.worker', import.meta.url));
-      worker.onmessage = ({ data }) => {
-        console.log(`page got message: ${data}`);
-      };
-      worker.postMessage('hello');
-    } else {
-      // Web workers no están soportados en este entorno.
-      // Debes agregar un plan alternativo para que tu programa siga funcionando correctamente.
-    }
+   ```ts {header:"src/app/app.component.ts"}
 
-    </docs-code>
+     if (typeof Worker !== 'undefined') {
+        // Crear uno nuevo
+        const worker = new Worker(new URL('./app.worker', import.meta.url));
+        worker.onmessage = ({ data }) => {
+           console.log(`page got message: ${data}`);
+        };
+        worker.postMessage('hello');
+     } else {
+        // Web workers no están soportados en este entorno.
+        // Debes agregar un plan alternativo para que tu programa siga funcionando correctamente.
+     }
+   ```
 
-Después de crear este siguiente código base, debes refactorizar tu código para usar el web worker enviando y recibiendo mensajes.
+Después de crear este código base inicial, debes refactorizar tu código para usar el web worker enviando y recibiendo mensajes.
 
 IMPORTANTE: Algunos entornos o plataformas, como `@angular/platform-server` utilizado en el [renderizado del lado del servidor](guide/ssr), no soportan web workers.
 
diff --git a/adev-es/src/content/events/v21.md b/adev-es/src/content/events/v21.md
new file mode 100644
index 0000000..e1f5ace
--- /dev/null
+++ b/adev-es/src/content/events/v21.md
@@ -0,0 +1,37 @@
+![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg {loading: 'eager', fetchpriority: 'high'} 'Angular v21 Hero Image')
+
+# Angular v21: The Adventure Begins
+
+## 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.
+
+## Experience the v21 Release
+
+Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app.
+
+<docs-code preview hideCode header="v21 Game World" path="adev/src/content/examples/v21-game-world/src/app/app.ts" />
+
+## Angular v21 Developer Event [Full Version]
+
+Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular.
+
+🔥 What's coming in v21
+
+- New Angular MCP Server tools to improve AI-powered workflows and code generation
+- Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular
+- Exciting new details about the Angular Aria package
+
+<div style="display: block; width: 80%; margin: 0 auto; margin-top: 20px;">
+  <iframe
+    credentialless
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/DDAHORVzQ5g?si=B9Uv5vXzIKJfcLGr"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
diff --git a/adev-es/src/content/examples/i18n/readme.md b/adev-es/src/content/examples/i18n/readme.md
index c01dfd1..a724b58 100644
--- a/adev-es/src/content/examples/i18n/readme.md
+++ b/adev-es/src/content/examples/i18n/readme.md
@@ -8,7 +8,7 @@ This sample comes from the Angular documentation's "[Example Angular Internation
 2. `npm start` to see it run in English
 3. `npm run start:fr` to see it run with French translation.
 
->See the scripts in `package.json` for an explanation of these commands.
+> See the scripts in `package.json` for an explanation of these commands.
 
 ## Run in Stackblitz
 
diff --git a/adev-es/src/content/guide/animations/complex-sequences.en.md b/adev-es/src/content/guide/animations/complex-sequences.en.md
index 4eb1da6..27a69f3 100644
--- a/adev-es/src/content/guide/animations/complex-sequences.en.md
+++ b/adev-es/src/content/guide/animations/complex-sequences.en.md
@@ -8,26 +8,26 @@ You can choose to run multiple animations in parallel, or run discrete animation
 
 The functions that control complex animation sequences are:
 
-| Functions                         | Details |
-|:---                               |:---     |
-| `query()`                         | Finds one or more inner HTML elements. |
+| Functions                         | Details                                                        |
+| :-------------------------------- | :------------------------------------------------------------- |
+| `query()`                         | Finds one or more inner HTML elements.                         |
 | `stagger()`                       | Applies a cascading delay to animations for multiple elements. |
-| [`group()`](api/animations/group) | Runs multiple animation steps in parallel. |
-| `sequence()`                      | Runs animation steps one after another. |
+| [`group()`](api/animations/group) | Runs multiple animation steps in parallel.                     |
+| `sequence()`                      | Runs animation steps one after another.                        |
 
 ## The query() function
 
 Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
 
-| Examples                               | Details |
-|:---                                    |:---     |
-| `query()` followed by `animate()`      | Used to query simple HTML elements and directly apply animations to them.                                                                                                                            |
+| Examples                               | Details                                                                                                                                                                                               |
+| :------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `query()` followed by `animate()`      | Used to query simple HTML elements and directly apply animations to them.                                                                                                                             |
 | `query()` followed by `animateChild()` | Used to query child elements, which themselves have animations metadata applied to them and trigger such animation \(which would be otherwise be blocked by the current/parent element's animation\). |
 
 The first argument of `query()` is a [css selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) string which can also contain the following Angular-specific tokens:
 
-| Tokens                     | Details |
-|:---                        |:---     |
+| Tokens                     | Details                                      |
+| :------------------------- | :------------------------------------------- |
 | `:enter` <br /> `:leave`   | For entering/leaving elements.               |
 | `:animating`               | For elements currently animating.            |
 | `@*` <br /> `@triggerName` | For elements with any—or a specific—trigger. |
@@ -47,14 +47,14 @@ After having queried child elements via `query()`, the `stagger()` function lets
 
 The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list \(of heroes\) adding each in sequence, with a slight delay, from top to bottom.
 
-* Use `query()` to look for an element entering the page that meets certain criteria
-* For each of these elements, use `style()` to set the same initial style for the element.
-    Make it transparent and use `transform` to move it out of position so that it can slide into place.
+- Use `query()` to look for an element entering the page that meets certain criteria
+- For each of these elements, use `style()` to set the same initial style for the element.
+  Make it transparent and use `transform` to move it out of position so that it can slide into place.
 
-* Use `stagger()` to delay each animation by 30 milliseconds
-* Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
+- Use `stagger()` to delay each animation by 30 milliseconds
+- Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
 
-<docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="page-animations"/>
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="page-animations"/>
 
 ## Parallel animation using group() function
 
@@ -63,11 +63,11 @@ But you might also want to configure animations that happen in parallel.
 For example, you might want to animate two CSS properties of the same element but use a different `easing` function for each one.
 For this, you can use the animation [`group()`](api/animations/group) function.
 
-HELPFUL: The [`group()`](api/animations/group) function is used to group animation *steps*, rather than animated elements.
+HELPFUL: The [`group()`](api/animations/group) function is used to group animation _steps_, rather than animated elements.
 
 The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel.
 
-<docs-code header="src/app/hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" visibleRegion="animationdef"/>
+<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" visibleRegion="animationdef"/>
 
 ## Sequential vs. parallel animations
 
@@ -77,8 +77,8 @@ But what if you want to create an animation involving several animations happeni
 A second function called `sequence()` lets you run those same animations one after the other.
 Within `sequence()`, the animation steps consist of either `style()` or `animate()` function calls.
 
-* Use `style()` to apply the provided styling data immediately.
-* Use `animate()` to apply styling data over a given time interval.
+- Use `style()` to apply the provided styling data immediately.
+- Use `animate()` to apply styling data over a given time interval.
 
 ## Filter animation example
 
@@ -91,24 +91,24 @@ The heroes list gradually re-enters the page as you delete each letter in the fi
 
 The HTML template contains a trigger called `filterAnimation`.
 
-<docs-code header="src/app/hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" visibleRegion="filter-animations" language="angular-html"/>
+<docs-code header="hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" visibleRegion="filter-animations" language="angular-html"/>
 
 The `filterAnimation` in the component's decorator contains three transitions.
 
-<docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="filter-animations"/>
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="filter-animations"/>
 
 The code in this example performs the following tasks:
 
-* Skips animations when the user first opens or navigates to this page \(the filter animation narrows what is already there, so it only works on elements that already exist in the DOM\)
-* Filters heroes based on the search input's value
+- Skips animations when the user first opens or navigates to this page \(the filter animation narrows what is already there, so it only works on elements that already exist in the DOM\)
+- Filters heroes based on the search input's value
 
 For each change:
 
-* Hides an element leaving the DOM by setting its opacity and width to 0
-* Animates an element entering the DOM over 300 milliseconds.
-    During the animation, the element assumes its default width and opacity.
+- Hides an element leaving the DOM by setting its opacity and width to 0
+- Animates an element entering the DOM over 300 milliseconds.
+  During the animation, the element assumes its default width and opacity.
 
-* If there are multiple elements entering or leaving the DOM, staggers each animation starting at the top of the page, with a 50-millisecond delay between each element
+- If there are multiple elements entering or leaving the DOM, staggers each animation starting at the top of the page, with a 50-millisecond delay between each element
 
 ## Animating the items of a reordering list
 
@@ -121,11 +121,11 @@ IMPORTANT: If you need to animate the items of an `*ngFor` list and there is a p
 
 ## Animations and Component View Encapsulation
 
-Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` behaves differently as we'll discuss shortly).
+Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` behave differently as we'll discuss shortly).
 
 For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree.
 
-On the other hand the `ViewEncapsulation.ShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
+On the other hand the `ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
 
 ## Animation sequence summary
 
diff --git a/adev-es/src/content/guide/animations/complex-sequences.md b/adev-es/src/content/guide/animations/complex-sequences.md
index 3baa880..16106f1 100644
--- a/adev-es/src/content/guide/animations/complex-sequences.md
+++ b/adev-es/src/content/guide/animations/complex-sequences.md
@@ -8,36 +8,36 @@ Puedes elegir ejecutar múltiples animaciones en paralelo, o ejecutar animacione
 
 Las funciones que controlan secuencias de animación complejas son:
 
-| Funciones                         | Detalles |
-|:---                               |:---     |
-| `query()`                         | Encuentra uno o más elementos HTML internos. |
+| Funciones                         | Detalles                                                                 |
+|:--------------------------------  |:------------------------------------------------------------------------ |
+| `query()`                         | Encuentra uno o más elementos HTML internos.                             |
 | `stagger()`                       | Aplica un retraso en cascada a las animaciones para múltiples elementos. |
-| [`group()`](api/animations/group) | Ejecuta múltiples pasos de animación en paralelo. |
-| `sequence()`                      | Ejecuta pasos de animación uno tras otro. |
+| [`group()`](api/animations/group) | Ejecuta múltiples pasos de animación en paralelo.                        |
+| `sequence()`                      | Ejecuta pasos de animación uno tras otro.                                |
 
 ## La función query()
 
 La mayoría de las animaciones complejas dependen de la función `query()` para encontrar elementos hijos y aplicarles animaciones, ejemplos básicos de esto son:
 
-| Ejemplos                               | Detalles |
-|:---                                    |:---     |
-| `query()` seguido de `animate()`      | Se usa para consultar elementos HTML simples y aplicar animaciones directamente a ellos.                                                                                                                            |
+| Ejemplos                              | Detalles                                                                                                                                                                                                  |
+|:------------------------------------- |:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `query()` seguido de `animate()`      | Se usa para consultar elementos HTML simples y aplicar animaciones directamente a ellos.                                                                                                                  |
 | `query()` seguido de `animateChild()` | Se usa para consultar elementos hijos, que tienen metadatos de animación aplicados a ellos mismos y disparar tal animación (que de otro modo sería bloqueada por la animación del elemento actual/padre). |
 
 El primer argumento de `query()` es una cadena de [selector CSS](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) que también puede contener los siguientes tokens específicos de Angular:
 
-| Tokens                     | Detalles |
-|:---                        |:---     |
-| `:enter` <br /> `:leave`   | Para elementos que entran/salen.               |
-| `:animating`               | Para elementos actualmente animando.            |
-| `@*` <br /> `@triggerName` | Para elementos con cualquier trigger—o uno específico. |
-| `:self`                    | El propio elemento que se está animando.                |
+| Tokens                     | Detalles                                               |
+|:-------------------------- |:------------------------------------------------------ |
+| `:enter` <br /> `:leave`   | Para elementos que entran/salen.                       |
+| `:animating`               | Para elementos actualmente animando.                   |
+| `@*` <br /> `@triggerName` | Para elementos con cualquier trigger—o uno específico.  |
+| `:self`                    | El propio elemento que se está animando.               |
 
 <docs-callout title="Elementos que entran y salen">
 
 No todos los elementos hijos son realmente considerados como que entran/salen; esto puede, a veces, ser contraintuitivo y confuso. Por favor consulta la [documentación de la API de query](api/animations/query#entering-and-leaving-elements) para más información.
 
-También puedes ver una ilustración de esto en el ejemplo de animaciones (introducido en la [sección de introducción de animaciones](guide/legacy-animations#about-this-guide)) bajo la pestaña Querying.
+También puedes ver una ilustración de esto en el ejemplo de animaciones (introducido en la [sección de introducción de animaciones](guide/legacy-animations#acerca-de-esta-guía)) bajo la pestaña Querying.
 
 </docs-callout>
 
@@ -47,12 +47,12 @@ Después de haber consultado elementos hijos a través de `query()`, la función
 
 El siguiente ejemplo demuestra cómo usar las funciones `query()` y `stagger()` para animar una lista (de héroes) agregando cada uno en secuencia, con un ligero retraso, de arriba hacia abajo.
 
-* Usa `query()` para buscar un elemento que entra en la página que cumple con ciertos criterios
-* Para cada uno de estos elementos, usa `style()` para establecer el mismo estilo inicial para el elemento.
+- Usa `query()` para buscar un elemento que entra en la página que cumple con ciertos criterios
+- Para cada uno de estos elementos, usa `style()` para establecer el mismo estilo inicial para el elemento.
     Hazlo transparente y usa `transform` para moverlo fuera de posición para que pueda deslizarse a su lugar.
 
-* Usa `stagger()` para retrasar cada animación por 30 milisegundos
-* Anima cada elemento en pantalla durante 0.5 segundos usando una curva de easing personalizada definida, simultáneamente desvaneciéndolo y sin transformarlo
+- Usa `stagger()` para retrasar cada animación por 30 milisegundos
+- Anima cada elemento en pantalla durante 0.5 segundos usando una curva de easing personalizada definida, simultáneamente desvaneciéndolo y sin transformarlo
 
 <docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="page-animations"/>
 
@@ -63,11 +63,11 @@ Pero también es posible que desees configurar animaciones que sucedan en parale
 Por ejemplo, es posible que desees animar dos propiedades CSS del mismo elemento pero usar una función `easing` diferente para cada una.
 Para esto, puedes usar la función de animación [`group()`](api/animations/group).
 
-ÚTIL: La función [`group()`](api/animations/group) se usa para agrupar *pasos* de animación, en lugar de elementos animados.
+ÚTIL: La función [`group()`](api/animations/group) se usa para agrupar _pasos_ de animación, en lugar de elementos animados.
 
 El siguiente ejemplo usa [`group()`](api/animations/group)s en `:enter` y `:leave` para dos configuraciones de tiempo diferentes, aplicando así dos animaciones independientes al mismo elemento en paralelo.
 
-<docs-code header="src/app/hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" visibleRegion="animationdef"/>
+<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" visibleRegion="animationdef"/>
 
 ## Animaciones secuenciales vs. paralelas
 
@@ -77,8 +77,8 @@ Pero ¿qué pasa si deseas crear una animación que involucre varias animaciones
 Una segunda función llamada `sequence()` te permite ejecutar esas mismas animaciones una tras otra.
 Dentro de `sequence()`, los pasos de animación consisten en llamadas a funciones `style()` o `animate()`.
 
-* Usa `style()` para aplicar los datos de estilo proporcionados inmediatamente.
-* Usa `animate()` para aplicar datos de estilo durante un intervalo de tiempo dado.
+- Usa `style()` para aplicar los datos de estilo proporcionados inmediatamente.
+- Usa `animate()` para aplicar datos de estilo durante un intervalo de tiempo dado.
 
 ## Ejemplo de animación de filtro
 
@@ -99,16 +99,16 @@ El `filterAnimation` en el decorador del componente contiene tres transiciones.
 
 El código en este ejemplo realiza las siguientes tareas:
 
-* Omite animaciones cuando el usuario abre por primera vez o navega a esta página (la animación de filtro reduce lo que ya está allí, por lo que solo funciona en elementos que ya existen en el DOM)
-* Filtra héroes basándose en el valor de entrada de búsqueda
+- Omite animaciones cuando el usuario abre por primera vez o navega a esta página (la animación de filtro reduce lo que ya está allí, por lo que solo funciona en elementos que ya existen en el DOM)
+- Filtra héroes basándose en el valor de entrada de búsqueda
 
 Para cada cambio:
 
-* Oculta un elemento que sale del DOM estableciendo su opacidad y ancho a 0
-* Anima un elemento que entra al DOM durante 300 milisegundos.
+- Oculta un elemento que sale del DOM estableciendo su opacidad y ancho a 0
+- Anima un elemento que entra al DOM durante 300 milisegundos.
     Durante la animación, el elemento asume su ancho y opacidad predeterminados.
 
-* Si hay múltiples elementos entrando o saliendo del DOM, escalona cada animación comenzando desde la parte superior de la página, con un retraso de 50 milisegundos entre cada elemento
+- Si hay múltiples elementos entrando o saliendo del DOM, escalona cada animación comenzando desde la parte superior de la página, con un retraso de 50 milisegundos entre cada elemento
 
 ## Animando los elementos de una lista que se reordena
 
@@ -125,7 +125,7 @@ Las animaciones de Angular se basan en la estructura DOM de los componentes y no
 
 Por ejemplo, si la función `query()` (que verás más en el resto de la guía de Animaciones) se aplicara en la parte superior de un árbol de componentes usando encapsulación de vista emulada, tal query sería capaz de identificar (y por lo tanto animar) elementos DOM en cualquier profundidad del árbol.
 
-Por otro lado, el `ViewEncapsulation.ShadowDom` cambia la estructura DOM del componente "ocultando" elementos DOM dentro de elementos [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot). Tales manipulaciones DOM previenen que algunas de las implementaciones de animaciones funcionen correctamente ya que se basa en estructuras DOM simples y no tiene en cuenta elementos `ShadowRoot`. Por lo tanto, se aconseja evitar aplicar animaciones a vistas que incorporan componentes usando la encapsulación de vista ShadowDom.
+Por otro lado, el `ViewEncapsulation.ShadowDom` y `ViewEncapsulation.ExperimentalIsolatedShadowDom` cambian la estructura DOM del componente "ocultando" elementos DOM dentro de elementos [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot). Tales manipulaciones DOM previenen que algunas de las implementaciones de animaciones funcionen correctamente ya que se basa en estructuras DOM simples y no tiene en cuenta elementos `ShadowRoot`. Por lo tanto, se aconseja evitar aplicar animaciones a vistas que incorporan componentes usando la encapsulación de vista ShadowDom.
 
 ## Resumen de secuencia de animación
 
diff --git a/adev-es/src/content/guide/animations/css.en.md b/adev-es/src/content/guide/animations/css.en.md
index 64e6635..0e68cf2 100644
--- a/adev-es/src/content/guide/animations/css.en.md
+++ b/adev-es/src/content/guide/animations/css.en.md
@@ -4,14 +4,14 @@ CSS offers a robust set of tools for you to create beautiful and engaging animat
 
 ## How to write animations in native CSS
 
-If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:  
-[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)  
-[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)  
-[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)  
-[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)  
-
-and a couple of videos:  
-[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)  
+If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them:
+[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
+[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)
+[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)
+[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)
+
+and a couple of videos:
+[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)
 [Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5)
 
 Check some of these various guides and tutorials out, and then come back to this guide.
@@ -20,7 +20,7 @@ Check some of these various guides and tutorials out, and then come back to this
 
 You can create reusable animations that can be shared across your application using `@keyframes`. Define keyframe animations in a shared CSS file, and you'll be able to re-use those keyframe animations wherever you want within your application.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
 
 Adding the class `animated-class` to an element would trigger the animation on that element.
 
@@ -30,7 +30,7 @@ Adding the class `animated-class` to an element would trigger the animation on t
 
 You may want to animate between two different states, for example when an element is opened or closed. You can accomplish this by using CSS classes either using a keyframe animation or transition styling.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
 
 Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings).
 
@@ -42,20 +42,20 @@ Animating often requires adjusting timing, delays and easeing behaviors. This ca
 
 Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
 
 Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
 
 ### Triggering an Animation
 
 Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example:
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -65,9 +65,9 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p
 You can use css-grid to animate to auto height.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -77,17 +77,17 @@ If you don't have to worry about supporting all browsers, you can also check out
 You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="src/app/insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="src/app/insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="src/app/insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
+    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
+    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
 </docs-code-multifile>
 
 Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="src/app/remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="src/app/remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="src/app/remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
+    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
+    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -97,9 +97,9 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and
 Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
 </docs-code-multifile>
 
 ### Disabling an animation or all animations
@@ -128,12 +128,12 @@ 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)  
-[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_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)  
 [`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event)  
 [`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)  
-[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)  
+[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)
 
 The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs.
 
@@ -148,9 +148,9 @@ Animations are often more complicated than just a simple fade in or fade out. Yo
 One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
+    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -170,9 +170,9 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu
 Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
 </docs-code-multifile>
 
 ## Programmatic control of animations
diff --git a/adev-es/src/content/guide/animations/css.md b/adev-es/src/content/guide/animations/css.md
index c4d767c..20f5c3e 100644
--- a/adev-es/src/content/guide/animations/css.md
+++ b/adev-es/src/content/guide/animations/css.md
@@ -20,7 +20,7 @@ Consulta algunas de estas diversas guías y tutoriales, y luego regresa a esta g
 
 Puedes crear animaciones reutilizables que se pueden compartir en toda tu aplicación usando `@keyframes`. Define animaciones de keyframes en un archivo CSS compartido, y podrás reutilizar esas animaciones de keyframes donde quieras dentro de tu aplicación.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
 
 Agregar la clase `animated-class` a un elemento activaría la animación en ese elemento.
 
@@ -30,7 +30,7 @@ Agregar la clase `animated-class` a un elemento activaría la animación en ese
 
 Es posible que desees animar entre dos estados diferentes, por ejemplo cuando un elemento está abierto o cerrado. Puedes lograr esto usando clases CSS ya sea mediante una animación de keyframe o estilo de transición.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
 
 Disparar el estado `open` o `closed` se hace alternando clases en el elemento en tu componente. Puedes encontrar ejemplos de cómo hacer esto en nuestra [guía de plantillas](guide/templates/binding#css-class-and-style-property-bindings).
 
@@ -42,20 +42,20 @@ Animar a menudo requiere ajustar comportamientos de tiempo, retrasos y easing. E
 
 Especifica `animation-duration`, `animation-delay` y `animation-timing-function` para una animación de keyframe en CSS, o alternativamente usa la propiedad abreviada `animation`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
 
 De manera similar, puedes usar `transition-duration`, `transition-delay` y `transition-timing-function` y la abreviación `transition` para animaciones que no están usando `@keyframes`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
 
 ### Disparando una animación
 
 Las animaciones se pueden disparar alternando estilos o clases CSS. Una vez que una clase está presente en un elemento, la animación ocurrirá. Eliminar la clase revertirá el elemento a cualquier CSS que esté definido para ese elemento. Aquí hay un ejemplo:
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
 </docs-code-multifile>
 
 ## Transiciones y triggers
@@ -65,9 +65,9 @@ Las animaciones se pueden disparar alternando estilos o clases CSS. Una vez que
 Puedes usar css-grid para animar a altura automática.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
 </docs-code-multifile>
 
 Si no tienes que preocuparte por soportar todos los navegadores, también puedes revisar `calc-size()`, que es la verdadera solución para animar altura automática. Consulta [la documentación de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) y (este tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] para más información.
@@ -77,17 +77,17 @@ Si no tienes que preocuparte por soportar todos los navegadores, también puedes
 Puedes crear animaciones para cuando un elemento entra en una vista o sale de una vista. Comencemos viendo cómo animar un elemento que entra en una vista. Haremos esto con `animate.enter`, que aplicará clases de animación cuando un elemento entre en la vista.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="src/app/insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="src/app/insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="src/app/insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
+    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
+    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
 </docs-code-multifile>
 
 Animar un elemento cuando sale de la vista es similar a animar cuando entra en una vista. Usa `animate.leave` para especificar qué clases CSS aplicar cuando el elemento sale de la vista.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="src/app/remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="src/app/remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="src/app/remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
+    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
+    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
 </docs-code-multifile>
 
 Para más información sobre `animate.enter` y `animate.leave`, consulta la [guía de animaciones de entrada y salida](guide/animations).
@@ -97,9 +97,9 @@ Para más información sobre `animate.enter` y `animate.leave`, consulta la [gu
 Animar en incremento y decremento es un patrón común en aplicaciones. Aquí hay un ejemplo de cómo puedes lograr ese comportamiento.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
 </docs-code-multifile>
 
 ### Deshabilitando una animación o todas las animaciones
@@ -148,9 +148,9 @@ Las animaciones son a menudo más complicadas que solo un simple fade in o fade
 Un efecto común es escalonar las animaciones de cada elemento en una lista para crear un efecto en cascada. Esto se puede lograr utilizando `animation-delay` o `transition-delay`. Aquí hay un ejemplo de cómo podría verse ese CSS.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
+    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
 </docs-code-multifile>
 
 ### Animaciones paralelas
@@ -170,9 +170,9 @@ En este ejemplo, las animaciones `rotate` y `fade-in` se disparan al mismo tiemp
 Los elementos en un bucle `@for` serán eliminados y re-agregados, lo que disparará animaciones usando `@starting-styles` para animaciones de entrada. Alternativamente, puedes usar `animate.enter` para este mismo comportamiento. Usa `animate.leave` para animar elementos a medida que se eliminan, como se ve en el ejemplo a continuación.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
 </docs-code-multifile>
 
 ## Control programático de animaciones
diff --git a/adev-es/src/content/guide/animations/enter-and-leave.en.md b/adev-es/src/content/guide/animations/enter-and-leave.en.md
index 5059af9..8ab4808 100644
--- a/adev-es/src/content/guide/animations/enter-and-leave.en.md
+++ b/adev-es/src/content/guide/animations/enter-and-leave.en.md
@@ -3,9 +3,9 @@
 Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
 Animations can improve your application and user experience in a number of ways:
 
-* Without animations, web page transitions can seem abrupt and jarring
-* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
-* Good animations can smoothly direct the user's attention throughout a workflow
+- Without animations, web page transitions can seem abrupt and jarring
+- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
+- Good animations can smoothly direct the user's attention throughout a workflow
 
 Angular provides `animate.enter` and `animate.leave` to animate your application's elements. These two features apply enter and leave CSS classes at the appropriate times or call functions to apply animations from third party libraries. `animate.enter` and `animate.leave` are not directives. They are special API supported directly by the Angular compiler. They can be used on elements directly and can also be used as a host binding.
 
@@ -14,9 +14,9 @@ Angular provides `animate.enter` and `animate.leave` to animate your application
 You can use `animate.enter` to animate elements as they _enter_ the DOM. You can define enter animations using CSS classes with either transitions or keyframe animations.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts">
-    <docs-code header="src/app/enter.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts" />
-    <docs-code header="src/app/enter.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.html" />
-    <docs-code header="src/app/enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
+    <docs-code header="enter.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts" />
+    <docs-code header="enter.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.html" />
+    <docs-code header="enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
 </docs-code-multifile>
 
 When the animation completes, Angular removes the class or classes that you specified in `animate.enter` from the DOM. Animation classes are only be present while the animation is active.
@@ -28,9 +28,9 @@ You can use `animate.enter` with any other Angular features, such as control flo
 A quick note about using CSS transitions: If you choose to use transitions instead of keyframe animations, the classes added to the element with `animate.enter` represent the state that the transition will animate _to_. Your base element CSS is what the element will look like when no animations run, which is likely similar to the end state of the CSS transition. So you would still need to pair it with `@starting-style` to have an appropriate _from_ state for your transition to work.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts">
-    <docs-code header="src/app/enter-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts" />
-    <docs-code header="src/app/enter-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html" />
-    <docs-code header="src/app/enter-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css"/>
+    <docs-code header="enter-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts" />
+    <docs-code header="enter-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html" />
+    <docs-code header="enter-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css"/>
 </docs-code-multifile>
 
 ## `animate.leave`
@@ -38,9 +38,9 @@ A quick note about using CSS transitions: If you choose to use transitions inste
 You can use `animate.leave` to animate elements as they _leave_ the DOM. You can define leave animations using CSS classes with either transforms or keyframe animations.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts">
-    <docs-code header="src/app/leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts" />
-    <docs-code header="src/app/leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.html" />
-    <docs-code header="src/app/leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.css"/>
+    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts" />
+    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.html" />
+    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.css"/>
 </docs-code-multifile>
 
 When the animation completes, Angular automatically removes the animated element from the DOM.
@@ -50,9 +50,9 @@ NOTE: When using multiple keyframe animations or transition properties on a an e
 `animate.leave` can also be used with signals, and other bindings. You can use `animate.leave` with a single class or multiple classes. Either specify it as a simple string with spaces or a string array.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts">
-    <docs-code header="src/app/leave-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts" />
-    <docs-code header="src/app/leave-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html" />
-    <docs-code header="src/app/leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
+    <docs-code header="leave-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts" />
+    <docs-code header="leave-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html" />
+    <docs-code header="leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
 </docs-code-multifile>
 
 ## Event Bindings, Functions, and Third-party Libraries
@@ -60,9 +60,9 @@ NOTE: When using multiple keyframe animations or transition properties on a an e
 Both `animate.enter` and `animate.leave` support event binding syntax that allows for function calls. You can use this syntax to call a function in your component code or utilize third-party animation libraries, like [GSAP](https://gsap.com/), [anime.js](https://animejs.com/), or any other JavaScript animation library.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts">
-    <docs-code header="src/app/leave-event.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts" />
-    <docs-code header="src/app/leave-event.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html" />
-    <docs-code header="src/app/leave-event.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css"/>
+    <docs-code header="leave-event.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts" />
+    <docs-code header="leave-event.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html" />
+    <docs-code header="leave-event.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css"/>
 </docs-code-multifile>
 
 The `$event` object has the type `AnimationCallbackEvent`. It includes the element as the `target` and provides an `animationComplete()` function to notify the framework when the animation finishes.
@@ -75,6 +75,10 @@ If you don't call `animationComplete()` when using `animate.leave`, Angular call
   { provide: MAX_ANIMATION_TIMEOUT, useValue: 6000 }
 ```
 
+## Compatibility with Legacy Angular Animations
+
+You cannot use legacy animations alongside `animate.enter` and `animate.leave` within the same component. Doing so would result in enter classes remaining on the element or leaving nodes not being removed. It is otherwise fine to use both legacy animations and the new `animate.enter` and `animate.leave` animations within the same _application_. The only caveat is content projection. If you are projecting content from one component with legacy animations into another component with `animate.enter` or `animate.leave`, or vice versa, this will result in the same behavior as if they are used together in the same component. This is not supported.
+
 ## Testing
 
 TestBed provides built-in support for enabling or disabling animations in your test environment. CSS animations require a browser to run, and many of the APIs are not available in a test environment. By default, TestBed disables animations for you in your test environments.
diff --git a/adev-es/src/content/guide/animations/enter-and-leave.md b/adev-es/src/content/guide/animations/enter-and-leave.md
index 4eeb0a7..2eea824 100644
--- a/adev-es/src/content/guide/animations/enter-and-leave.md
+++ b/adev-es/src/content/guide/animations/enter-and-leave.md
@@ -1,11 +1,11 @@
 # Animando tus aplicaciones con `animate.enter` y `animate.leave`
 
-Las animaciones bien diseñadas pueden hacer que tu aplicación sea más divertida y fácil de usar, pero no son solo cosméticas.
+Las animaciones bien diseñadas pueden hacer que tu aplicación sea más divertida y fácil de usar, pero no son solo algo cosmético.
 Las animaciones pueden mejorar tu aplicación y la experiencia del usuario de varias maneras:
 
-* Sin animaciones, las transiciones de páginas web pueden parecer abruptas y bruscas
-* El movimiento mejora enormemente la experiencia del usuario, así que las animaciones dan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones
-* Las buenas animaciones pueden dirigir suavemente la atención del usuario a lo largo de un flujo de trabajo
+- Sin animaciones, las transiciones de páginas web pueden parecer abruptas y chocantes.
+- El movimiento mejora enormemente la experiencia del usuario, por lo que las animaciones les dan la oportunidad de detectar la respuesta de la aplicación a sus acciones.
+- Las buenas animaciones pueden guiar suavemente la atención del usuario a lo largo de un flujo de trabajo.
 
 Angular proporciona `animate.enter` y `animate.leave` para animar los elementos de tu aplicación. Estas dos características aplican clases CSS de entrada y salida en los momentos apropiados o llaman funciones para aplicar animaciones de bibliotecas de terceros. `animate.enter` y `animate.leave` no son directivas. Son APIs especiales soportadas directamente por el compilador de Angular. Pueden ser usadas en elementos directamente y también pueden ser usadas como un enlace host.
 
@@ -14,9 +14,9 @@ Angular proporciona `animate.enter` y `animate.leave` para animar los elementos
 Puedes usar `animate.enter` para animar elementos a medida que _entran_ al DOM. Puedes definir animaciones de entrada usando clases CSS con transiciones o animaciones de keyframes.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts">
-    <docs-code header="src/app/enter.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts" />
-    <docs-code header="src/app/enter.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.html" />
-    <docs-code header="src/app/enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
+    <docs-code header="enter.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.ts" />
+    <docs-code header="enter.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.html" />
+    <docs-code header="enter.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter.css"/>
 </docs-code-multifile>
 
 Cuando la animación se completa, Angular elimina la clase o clases que especificaste en `animate.enter` del DOM. Las clases de animación solo están presentes mientras la animación está activa.
@@ -28,9 +28,9 @@ Puedes usar `animate.enter` con cualquier otra característica de Angular, como
 Una nota rápida sobre el uso de transiciones CSS: Si eliges usar transiciones en lugar de animaciones de keyframes, las clases agregadas al elemento con `animate.enter` representan el estado al que la transición animará. Tu CSS de elemento base es cómo se verá el elemento cuando no se ejecuten animaciones, lo cual es probablemente similar al estado final de la transición CSS. Así que todavía necesitarías emparejarlo con `@starting-style` para tener un estado _desde_ apropiado para que tu transición funcione.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts">
-    <docs-code header="src/app/enter-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts" />
-    <docs-code header="src/app/enter-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html" />
-    <docs-code header="src/app/enter-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css"/>
+    <docs-code header="enter-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.ts" />
+    <docs-code header="enter-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.html" />
+    <docs-code header="enter-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css"/>
 </docs-code-multifile>
 
 ## `animate.leave`
@@ -38,9 +38,9 @@ Una nota rápida sobre el uso de transiciones CSS: Si eliges usar transiciones e
 Puedes usar `animate.leave` para animar elementos a medida que _salen_ del DOM. Puedes definir animaciones de salida usando clases CSS con transformaciones o animaciones de keyframes.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts">
-    <docs-code header="src/app/leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts" />
-    <docs-code header="src/app/leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.html" />
-    <docs-code header="src/app/leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.css"/>
+    <docs-code header="leave.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.ts" />
+    <docs-code header="leave.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.html" />
+    <docs-code header="leave.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave.css"/>
 </docs-code-multifile>
 
 Cuando la animación se completa, Angular elimina automáticamente el elemento animado del DOM.
@@ -50,9 +50,9 @@ NOTA: Cuando se usan múltiples animaciones de keyframes o propiedades de transi
 `animate.leave` también puede ser usado con signals y otros enlaces. Puedes usar `animate.leave` con una clase única o múltiples clases. Ya sea especificándolo como una cadena simple con espacios o un array de cadenas.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts">
-    <docs-code header="src/app/leave-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts" />
-    <docs-code header="src/app/leave-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html" />
-    <docs-code header="src/app/leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
+    <docs-code header="leave-binding.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.ts" />
+    <docs-code header="leave-binding.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.html" />
+    <docs-code header="leave-binding.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css"/>
 </docs-code-multifile>
 
 ## Enlaces de eventos, funciones y bibliotecas de terceros
@@ -60,9 +60,9 @@ NOTA: Cuando se usan múltiples animaciones de keyframes o propiedades de transi
 Tanto `animate.enter` como `animate.leave` soportan sintaxis de enlace de eventos que permite llamadas a funciones. Puedes usar esta sintaxis para llamar a una función en el código de tu componente o utilizar bibliotecas de animación de terceros, como [GSAP](https://gsap.com/), [anime.js](https://animejs.com/), o cualquier otra biblioteca de animación JavaScript.
 
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts">
-    <docs-code header="src/app/leave-event.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts" />
-    <docs-code header="src/app/leave-event.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html" />
-    <docs-code header="src/app/leave-event.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css"/>
+    <docs-code header="leave-event.ts" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.ts" />
+    <docs-code header="leave-event.html" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.html" />
+    <docs-code header="leave-event.css" path="adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css"/>
 </docs-code-multifile>
 
 El objeto `$event` tiene el tipo `AnimationCallbackEvent`. Incluye el elemento como el `target` y proporciona una función `animationComplete()` para notificar al framework cuando la animación termina.
@@ -75,6 +75,10 @@ Si no llamas a `animationComplete()` cuando usas `animate.leave`, Angular llama
   { provide: MAX_ANIMATION_TIMEOUT, useValue: 6000 }
 ```
 
+## Compatibilidad con las animaciones heredadas de Angular
+
+No puedes usar animaciones heredadas junto con `animate.enter` y `animate.leave` dentro del mismo componente. Hacerlo provocaría que las clases de entrada permanezcan en el elemento o que los nodos que salen no se eliminen. Fuera de eso, está bien usar tanto las animaciones heredadas como las nuevas animaciones `animate.enter` y `animate.leave` dentro de la misma _aplicación_. La única excepción es la proyección de contenido. Si estás proyectando contenido desde un componente con animaciones heredadas hacia otro componente que usa `animate.enter` o `animate.leave`, o viceversa, esto producirá el mismo comportamiento que si se usaran juntas en el mismo componente. Esto no es compatible.
+
 ## Pruebas
 
 TestBed proporciona soporte integrado para habilitar o deshabilitar animaciones en tu entorno de prueba. Las animaciones CSS requieren un navegador para ejecutarse, y muchas de las APIs no están disponibles en un entorno de prueba. Por defecto, TestBed deshabilita las animaciones para ti en tus entornos de prueba.
diff --git a/adev-es/src/content/guide/animations/migration.en.md b/adev-es/src/content/guide/animations/migration.en.md
index 8ca357a..60890a1 100644
--- a/adev-es/src/content/guide/animations/migration.en.md
+++ b/adev-es/src/content/guide/animations/migration.en.md
@@ -1,6 +1,6 @@
 # Migrating away from Angular's Animations package
 
-The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations`  with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations.
+The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations.
 
 ## How to write animations in native CSS
 
@@ -8,7 +8,7 @@ If you've never written any native CSS animations, there are a number of excelle
 [MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)  
 [W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp)  
 [The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/)  
-[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)  
+[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners)
 
 and a couple of videos:  
 [Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw)  
@@ -21,10 +21,12 @@ Check some of these various guides and tutorials out, and then come back to this
 Just like with the animations package, you can create reusable animations that can be shared across your application. The animations package version of this had you using the `animation()` function in a shared typescript file. The native CSS version of this is similar, but lives in a shared CSS file.
 
 #### With Animations Package
-<docs-code header="src/app/animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-example"/>
+
+<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-example"/>
 
 #### With Native CSS
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
+
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
 
 Adding the class `animated-class` to an element would trigger the animation on that element.
 
@@ -35,12 +37,14 @@ Adding the class `animated-class` to an element would trigger the animation on t
 The animations package allowed you to define various states using the [`state()`](api/animations/state) function within a component. Examples might be an `open` or `closed` state containing the styles for each respective state within the definition. For example:
 
 #### With Animations Package
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
+
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
 
 This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling.
 
 #### With Native CSS
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
+
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
 
 Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings).
 
@@ -52,28 +56,30 @@ The animations package `animate()` function allows for providing timing, like du
 
 Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
 
 Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
 
 ### Triggering an Animation
 
 The animations package required specifying triggers using the `trigger()` function and nesting all of your states within it. With native CSS, this is unnecessary. Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. This results in significantly less code to do the same animation. Here's an example:
 
 #### With Animations Package
+
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
 </docs-code-multifile>
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
 </docs-code-multifile>
 
 ## Transition and Triggers
@@ -89,19 +95,21 @@ These state matching patterns are not needed at all when animating with CSS dire
 The animations package offers the ability to animate things that have been historically difficult to animate, like animating a set height to `height: auto`. You can now do this with pure CSS as well.
 
 #### With Animations Package
+
 <docs-code-multifile>
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
 </docs-code-multifile>
 
 You can use css-grid to animate to auto height.
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
 </docs-code-multifile>
 
 If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information.
@@ -111,28 +119,31 @@ If you don't have to worry about supporting all browsers, you can also check out
 The animations package offered the previously mentioned pattern matching for entering and leaving but also included the shorthand aliases of `:enter` and `:leave`.
 
 #### With Animations Package
+
 <docs-code-multifile>
-    <docs-code header="src/app/insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
-    <docs-code header="src/app/insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
-    <docs-code header="src/app/insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
+    <docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
+    <docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
+    <docs-code header="insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
 </docs-code-multifile>
 
 Here's how the same thing can be accomplished without the animations package using `animate.enter`.
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="src/app/insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="src/app/insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="src/app/insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
+    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
+    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
 </docs-code-multifile>
 
 Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view.
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="src/app/remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="src/app/remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="src/app/remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
+    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
+    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
 </docs-code-multifile>
 
 For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations).
@@ -142,17 +153,19 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and
 Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example:
 
 #### With Animations Package
+
 <docs-code-multifile>
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
 </docs-code-multifile>
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
 </docs-code-multifile>
 
 ### Parent / Child Animations
@@ -185,12 +198,12 @@ 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)  
-[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_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)  
 [`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event)  
 [`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)  
-[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)  
+[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event)
 
 The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs.
 
@@ -211,17 +224,19 @@ To toggle classes for child nodes within a template, you can use class and style
 The `stagger()` function allowed you to delay the animation of each item in a list of items by a specified time to create a cascade effect. You can replicate this behavior in native CSS by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like.
 
 #### With Animations Package
+
 <docs-code-multifile>
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
+    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
 </docs-code-multifile>
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
+    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
 </docs-code-multifile>
 
 ### Parallel Animations
@@ -241,20 +256,21 @@ In this example, the `rotate` and `fade-in` animations fire at the same time.
 Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above.
 
 #### With Animations Package<
+
 <docs-code-multifile>
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
 </docs-code-multifile>
 
 #### With Native CSS
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
 </docs-code-multifile>
 
-
 ## Migrating usages of AnimationPlayer
 
 The `AnimationPlayer` class allows access to an animation to do more advanced things like pause, play, restart, and finish an animation through code. All of these things can be handled natively as well.
@@ -263,4 +279,4 @@ You can retrieve animations off an element directly using [`Element.getAnimation
 
 ## Route Transitions
 
-You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started.
\ No newline at end of file
+You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started.
diff --git a/adev-es/src/content/guide/animations/migration.md b/adev-es/src/content/guide/animations/migration.md
index b78d279..024bde8 100644
--- a/adev-es/src/content/guide/animations/migration.md
+++ b/adev-es/src/content/guide/animations/migration.md
@@ -20,11 +20,13 @@ Consulta algunas de estas diversas guías y tutoriales, y luego regresa a esta g
 
 Al igual que con el paquete de animaciones, puedes crear animaciones reutilizables que se pueden compartir en toda tu aplicación. La versión del paquete de animaciones de esto te hacía usar la función `animation()` en un archivo TypeScript compartido. La versión CSS nativa de esto es similar, pero vive en un archivo CSS compartido.
 
-#### Con paquete de Animations
-<docs-code header="src/app/animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-example"/>
+#### Con el paquete de Aninaciones
+
+<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-example"/>
 
 #### Con CSS nativo
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
+
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-shared"/>
 
 Agregar la clase `animated-class` a un elemento activaría la animación en ese elemento.
 
@@ -34,13 +36,15 @@ Agregar la clase `animated-class` a un elemento activaría la animación en ese
 
 El paquete de animaciones te permitía definir varios estados usando la función [`state()`](api/animations/state) dentro de un componente. Los ejemplos podrían ser un estado `open` o `closed` que contiene los estilos para cada estado respectivo dentro de la definición. Por ejemplo:
 
-#### Con paquete de Animations
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
+#### Con el paquete de Aninaciones
+
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
 
 Este mismo comportamiento se puede lograr nativamente usando clases CSS ya sea mediante una animación de keyframe o estilo de transición.
 
 #### Con CSS nativo
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
+
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-states"/>
 
 Disparar el estado `open` o `closed` se hace alternando clases en el elemento en tu componente. Puedes encontrar ejemplos de cómo hacer esto en nuestra [guía de plantillas](guide/templates/binding#css-class-and-style-property-bindings).
 
@@ -52,28 +56,30 @@ La función `animate()` del paquete de animaciones permite proporcionar tiempo,
 
 Especifica `animation-duration`, `animation-delay` y `animation-timing-function` para una animación de keyframe en CSS, o alternativamente usa la propiedad abreviada `animation`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="animation-timing"/>
 
 De manera similar, puedes usar `transition-duration`, `transition-delay` y `transition-timing-function` y la abreviación `transition` para animaciones que no están usando `@keyframes`.
 
-<docs-code header="src/app/animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
+<docs-code header="animations.css" path="adev/src/content/examples/animations/src/app/animations.css" visibleRegion="transition-timing"/>
 
 ### Disparando una animación
 
 El paquete de animaciones requería especificar triggers usando la función `trigger()` y anidar todos tus estados dentro de ella. Con CSS nativo, esto es innecesario. Las animaciones se pueden disparar alternando estilos o clases CSS. Una vez que una clase está presente en un elemento, la animación ocurrirá. Eliminar la clase revertirá el elemento a cualquier CSS que esté definido para ese elemento. Esto resulta en significativamente menos código para hacer la misma animación. Aquí hay un ejemplo:
 
-#### Con paquete de Animations
+#### Con el paquete de Aninaciones
+
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/animations-package/open-close.component.css"/>
 </docs-code-multifile>
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts">
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.ts" />
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.html" />
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/native-css/open-close.component.css"/>
 </docs-code-multifile>
 
 ## Transiciones y triggers
@@ -88,20 +94,22 @@ Estos patrones de coincidencia de estado no se necesitan en absoluto cuando se a
 
 El paquete de animaciones ofrece la capacidad de animar cosas que han sido históricamente difíciles de animar, como animar una altura establecida a `height: auto`. Ahora también puedes hacer esto con CSS puro.
 
-#### Con paquete de Animations
+#### Con el paquete de Animaciones
+
 <docs-code-multifile>
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/animations-package/auto-height.component.css" />
 </docs-code-multifile>
 
 Puedes usar css-grid para animar a altura automática.
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts">
-    <docs-code header="src/app/auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
-    <docs-code header="src/app/auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
-    <docs-code header="src/app/auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
+    <docs-code header="auto-height.component.ts" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts" />
+    <docs-code header="auto-height.component.html" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.html" />
+    <docs-code header="auto-height.component.css" path="adev/src/content/examples/animations/src/app/native-css/auto-height.component.css"  />
 </docs-code-multifile>
 
 Si no tienes que preocuparte por soportar todos los navegadores, también puedes revisar `calc-size()`, que es la verdadera solución para animar altura automática. Consulta [la documentación de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) y (este tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] para más información.
@@ -110,29 +118,32 @@ Si no tienes que preocuparte por soportar todos los navegadores, también puedes
 
 El paquete de animaciones ofrecía el patrón de coincidencia mencionado anteriormente para entrada y salida, pero también incluía los alias abreviados de `:enter` y `:leave`.
 
-#### Con paquete de Animations
+#### Con el paquete de Ani
+
 <docs-code-multifile>
-    <docs-code header="src/app/insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
-    <docs-code header="src/app/insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
-    <docs-code header="src/app/insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
+    <docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.ts" />
+    <docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.html" />
+    <docs-code header="insert-remove.component.css" path="adev/src/content/examples/animations/src/app/animations-package/insert-remove.component.css" />
 </docs-code-multifile>
 
 Aquí está cómo se puede lograr lo mismo sin el paquete de animaciones usando `animate.enter`.
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts">
-    <docs-code header="src/app/insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
-    <docs-code header="src/app/insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
-    <docs-code header="src/app/insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
+    <docs-code header="insert.component.ts" path="adev/src/content/examples/animations/src/app/native-css/insert.component.ts" />
+    <docs-code header="insert.component.html" path="adev/src/content/examples/animations/src/app/native-css/insert.component.html" />
+    <docs-code header="insert.component.css" path="adev/src/content/examples/animations/src/app/native-css/insert.component.css"  />
 </docs-code-multifile>
 
 Usa `animate.leave` para animar elementos a medida que salen de la vista, lo que aplicará las clases CSS especificadas al elemento a medida que sale de la vista.
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts">
-    <docs-code header="src/app/remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
-    <docs-code header="src/app/remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
-    <docs-code header="src/app/remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
+    <docs-code header="remove.component.ts" path="adev/src/content/examples/animations/src/app/native-css/remove.component.ts" />
+    <docs-code header="remove.component.html" path="adev/src/content/examples/animations/src/app/native-css/remove.component.html" />
+    <docs-code header="remove.component.css" path="adev/src/content/examples/animations/src/app/native-css/remove.component.css"  />
 </docs-code-multifile>
 
 Para más información sobre `animate.enter` y `animate.leave`, consulta la [guía de animaciones de entrada y salida](guide/animations).
@@ -141,18 +152,20 @@ Para más información sobre `animate.enter` y `animate.leave`, consulta la [gu
 
 Junto con los mencionados `:enter` y `:leave`, también está `:increment` y `:decrement`. También puedes animar estos agregando y eliminando clases. A diferencia de los alias integrados del paquete de animaciones, no hay aplicación automática de clases cuando los valores suben o bajan. Puedes aplicar las clases apropiadas programáticamente. Aquí hay un ejemplo:
 
-#### Con paquete de Animations
+#### Con el paquete de Aninaciones
+
 <docs-code-multifile>
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/animations-package/increment-decrement.component.css" />
 </docs-code-multifile>
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts">
-    <docs-code header="src/app/increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
-    <docs-code header="src/app/increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
-    <docs-code header="src/app/increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
+    <docs-code header="increment-decrement.component.ts" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts" />
+    <docs-code header="increment-decrement.component.html" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html" />
+    <docs-code header="increment-decrement.component.css" path="adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css" />
 </docs-code-multifile>
 
 ### Animaciones padre / hijo
@@ -210,18 +223,20 @@ Para alternar clases para nodos hijos dentro de una plantilla, puedes usar enlac
 
 La función `stagger()` te permitía retrasar la animación de cada elemento en una lista de elementos por un tiempo especificado para crear un efecto en cascada. Puedes replicar este comportamiento en CSS nativo utilizando `animation-delay` o `transition-delay`. Aquí hay un ejemplo de cómo podría verse ese CSS.
 
-#### Con paquete de Animations
+#### Con el paquete de Aninaciones
+
 <docs-code-multifile>
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.html" />
+    <docs-code header="stagger.component.css" path="adev/src/content/examples/animations/src/app/animations-package/stagger.component.css" />
 </docs-code-multifile>
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts">
-    <docs-code header="src/app/stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
-    <docs-code header="src/app/stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
-    <docs-code header="src/app/stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
+    <docs-code header="stagger.component.ts" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.ts" />
+    <docs-code header="stagger.component.html" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.html" />
+    <docs-code header=stagger.component.css" path="adev/src/content/examples/animations/src/app/native-css/stagger.component.css" />
 </docs-code-multifile>
 
 ### Animaciones paralelas
@@ -240,21 +255,22 @@ En este ejemplo, las animaciones `rotate` y `fade-in` se disparan al mismo tiemp
 
 El reordenamiento de elementos en una lista funciona de forma inmediata usando las técnicas descritas anteriormente. No se requiere ningún trabajo especial adicional. Los elementos en un bucle `@for` serán eliminados y re-agregados correctamente, lo que disparará animaciones usando `@starting-styles` para animaciones de entrada. Alternativamente, puedes usar `animate.enter` para este mismo comportamiento. Usa `animate.leave` para animar elementos a medida que se eliminan, como se ve en el ejemplo anterior.
 
-#### Con paquete de Animations<
+#### Con el paquete de Aninaciones
+
 <docs-code-multifile>
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/animations-package/reorder.component.css" />
 </docs-code-multifile>
 
 #### Con CSS nativo
+
 <docs-code-multifile preview path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts">
-    <docs-code header="src/app/reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
-    <docs-code header="src/app/reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
-    <docs-code header="src/app/reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
+    <docs-code header="reorder.component.ts" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.ts" />
+    <docs-code header="reorder.component.html" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.html" />
+    <docs-code header="reorder.component.css" path="adev/src/content/examples/animations/src/app/native-css/reorder.component.css" />
 </docs-code-multifile>
 
-
 ## Migrando usos de AnimationPlayer
 
 La clase `AnimationPlayer` permite acceso a una animación para hacer cosas más avanzadas como pausar, reproducir, reiniciar y finalizar una animación a través de código. Todas estas cosas también se pueden manejar nativamente.
diff --git a/adev-es/src/content/guide/animations/overview.en.md b/adev-es/src/content/guide/animations/overview.en.md
index bb6991e..e1d042d 100644
--- a/adev-es/src/content/guide/animations/overview.en.md
+++ b/adev-es/src/content/guide/animations/overview.en.md
@@ -6,11 +6,11 @@ Animation provides the illusion of motion: HTML elements change styling over tim
 Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
 Animations can improve your application and user experience in a number of ways:
 
-* Without animations, web page transitions can seem abrupt and jarring
-* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
-* Good animations intuitively call the user's attention to where it is needed
+- Without animations, web page transitions can seem abrupt and jarring
+- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions
+- Good animations intuitively call the user's attention to where it is needed
 
-Typically, animations involve multiple style *transformations* over time.
+Typically, animations involve multiple style _transformations_ over time.
 An HTML element can move, change color, grow or shrink, fade, or slide off the page.
 These changes can occur simultaneously or sequentially. You can control the timing of each transformation.
 
@@ -49,12 +49,12 @@ bootstrapApplication(AppComponent, {
 
 For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module.
 
-<docs-code header="src/app/app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
+<docs-code header="app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
 </docs-step>
 <docs-step title="Importing animation functions into component files">
 If you plan to use specific animation functions in component files, import those functions from `@angular/animations`.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="imports"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="imports"/>
 
 See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide.
 
@@ -63,7 +63,7 @@ See all [available animation functions](guide/legacy-animations#animations-api-s
 In the component file, add a metadata property called `animations:` within the `@Component()` decorator.
 You put the trigger that defines an animation within the `animations` metadata property.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="decorator"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="decorator"/>
 </docs-step>
 </docs-workflow>
 
@@ -82,11 +82,9 @@ HELPFUL: Let's create a new `open-close` component to animate with simple transi
 
 Run the following command in terminal to generate the component:
 
-<docs-code language="shell">
-
+```shell
 ng g component open-close
-
-</docs-code>
+```
 
 This will create the component at `src/app/open-close.component.ts`.
 
@@ -97,24 +95,24 @@ This function takes two arguments:
 A unique name like `open` or `closed` and a `style()` function.
 
 Use the `style()` function to define a set of styles to associate with a given state name.
-You must use *camelCase* for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
+You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`.
 
 Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes.
 In this code snippet, multiple style attributes are set at the same time for the state.
 In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
 
 In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state2"/>
 
 ### Transitions and timing
 
 In Angular, you can set multiple styles without any animation.
 However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.
 
-To make the change less abrupt, you need to define an animation *transition* to specify the changes that occur between one state and another over a period of time.
+To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time.
 The `transition()` function accepts two arguments:
 The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps.
 
@@ -146,40 +144,40 @@ The first part, `duration`, is required.
 The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier.
 For example, a duration of a tenth of a second can be expressed as follows:
 
-* As a plain number, in milliseconds:
-    `100`
+- As a plain number, in milliseconds:
+  `100`
 
-* In a string, as milliseconds:
-    `'100ms'`
+- In a string, as milliseconds:
+  `'100ms'`
 
-* In a string, as seconds:
-    `'0.1s'`
+- In a string, as seconds:
+  `'0.1s'`
 
 The second argument, `delay`, has the same syntax as `duration`.
 For example:
 
-* Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
+- Wait for 100ms and then run for 200ms: `'0.2s 100ms'`
 
 The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime.
 For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses.
 
-* Wait for 100ms, run for 200ms.
-    Use a deceleration curve to start out fast and slowly decelerate to a resting point:
-    `'0.2s 100ms ease-out'`
+- Wait for 100ms, run for 200ms.
+  Use a deceleration curve to start out fast and slowly decelerate to a resting point:
+  `'0.2s 100ms ease-out'`
 
-* Run for 200ms, with no delay.
-    Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end:
-    `'0.2s ease-in-out'`
+- Run for 200ms, with no delay.
+  Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end:
+  `'0.2s ease-in-out'`
 
-* Start immediately, run for 200ms.
-    Use an acceleration curve to start slow and end at full velocity:
-    `'0.2s ease-in'`
+- Start immediately, run for 200ms.
+  Use an acceleration curve to start slow and end at full velocity:
+  `'0.2s ease-in'`
 
 HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves.
 
 This example provides a state transition from `open` to `closed` with a 1-second transition between states.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition1"/>
 
 In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional.
 Within the transition, `animate()` specifies how long the transition takes.
@@ -187,24 +185,24 @@ In this case, the state change from `open` to `closed` takes 1 second, expressed
 
 This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition2"/>
 
 HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions.
 
-* Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes
-* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation
-* When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't
-* Include multiple state pairs within the same `transition()` argument:
+- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes
+- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation
+- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't
+- Include multiple state pairs within the same `transition()` argument:
 
     <docs-code language="typescript">
 
-    transition( 'on => off, off => void' )
+  transition( 'on => off, off => void' )
 
     </docs-code>
 
 ### Triggering the animation
 
-An animation requires a *trigger*, so that it knows when to start.
+An animation requires a _trigger_, so that it knows when to start.
 The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template.
 
 The `trigger()` function describes the property name to watch for changes.
@@ -222,7 +220,7 @@ However, it's possible for multiple triggers to be active at once.
 Animations are defined in the metadata of the component that controls the HTML element to be animated.
 Put the code that defines your animations under the `animations:` property within the `@Component()` decorator.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
 
 When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol.
 Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state.
@@ -237,7 +235,7 @@ The animation is executed or triggered when the expression value changes to a ne
 
 The following code snippet binds the trigger to the value of the `isOpen` property.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
 
 In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change.
 Then it's up to the `openClose` code to handle the state change and kick off a state change animation.
@@ -254,9 +252,9 @@ In the HTML template file, use the trigger name to attach the defined animations
 Here are the code files discussed in the transition example.
 
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
 </docs-code-multifile>
 
 ### Summary
@@ -271,14 +269,14 @@ The functional API provided by the `@angular/animations` module provides a domai
 See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures.
 
 | Function name                     | What it does                                                                                                                                                                                                |
-|:---                               |:---                                                                                                                                                                                                         |
+| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `trigger()`                       | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. |
 | `style()`                         | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.                                                                 |
 | [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.                              |
 | `animate()`                       | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within.                                                                            |
 | `transition()`                    | Defines the animation sequence between two named states. Uses array syntax.                                                                                                                                 |
 | `keyframes()`                     | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax.                       |
-| [`group()`](api/animations/group) | Specifies a group of animation steps \(*inner animations*\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`.     |
+| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`.     |
 | `query()`                         | Finds one or more inner HTML elements within the current element.                                                                                                                                           |
 | `sequence()`                      | Specifies a list of animation steps that are run sequentially, one by one.                                                                                                                                  |
 | `stagger()`                       | Staggers the starting time for animations for multiple elements.                                                                                                                                            |
diff --git a/adev-es/src/content/guide/animations/overview.md b/adev-es/src/content/guide/animations/overview.md
index e0aa01b..f059d6a 100644
--- a/adev-es/src/content/guide/animations/overview.md
+++ b/adev-es/src/content/guide/animations/overview.md
@@ -6,9 +6,9 @@ La animación proporciona la ilusión de movimiento: los elementos HTML cambian
 Las animaciones bien diseñadas pueden hacer que tu aplicación sea más divertida y fácil de usar, pero no son solo cosméticas.
 Las animaciones pueden mejorar tu aplicación y la experiencia del usuario de varias maneras:
 
-* Sin animaciones, las transiciones de páginas web pueden parecer abruptas y bruscas
-* El movimiento mejora enormemente la experiencia del usuario, así que las animaciones dan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones
-* Las buenas animaciones llaman intuitivamente la atención del usuario hacia donde se necesita
+- Sin animaciones, las transiciones de páginas web pueden parecer abruptas y bruscas
+- El movimiento mejora enormemente la experiencia del usuario, así que las animaciones dan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones
+- Las buenas animaciones llaman intuitivamente la atención del usuario hacia donde se necesita
 
 Típicamente, las animaciones involucran múltiples *transformaciones* de estilo a lo largo del tiempo.
 Un elemento HTML puede moverse, cambiar de color, crecer o encoger, desvanecerse o deslizarse fuera de la página.
@@ -49,21 +49,21 @@ bootstrapApplication(AppComponent, {
 
 Para aplicaciones basadas en `NgModule` importa `BrowserAnimationsModule`, que introduce las capacidades de animación en el módulo raíz de tu aplicación Angular.
 
-<docs-code header="src/app/app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
+<docs-code header="app.module.ts" path="adev/src/content/examples/animations/src/app/app.module.1.ts"/>
 </docs-step>
 <docs-step title="Importando funciones de animación en archivos de componentes">
 Si planeas usar funciones de animación específicas en archivos de componentes, importa esas funciones desde `@angular/animations`.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="imports"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="imports"/>
 
-Consulta todas las [funciones de animación disponibles](guide/legacy-animations#animations-api-summary) al final de esta guía.
+Consulta todas las [funciones de animación disponibles](guide/legacy-animations#resumen-de-la-api-de-animaciones) al final de esta guía.
 
 </docs-step>
 <docs-step title="Agregando la propiedad de metadatos de animación">
 En el archivo del componente, agrega una propiedad de metadatos llamada `animations:` dentro del decorador `@Component()`.
 Colocas el trigger que define una animación dentro de la propiedad de metadatos `animations`.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="decorator"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="decorator"/>
 </docs-step>
 </docs-workflow>
 
@@ -82,11 +82,9 @@ Recopila un conjunto de estilos en un estado de animación, y dale al estado un
 
 Ejecuta el siguiente comando en la terminal para generar el componente:
 
-<docs-code language="shell">
-
+```shell
 ng g component open-close
-
-</docs-code>
+```
 
 Esto creará el componente en `src/app/open-close.component.ts`.
 
@@ -97,24 +95,24 @@ Esta función acepta dos argumentos:
 Un nombre único como `open` o `closed` y una función `style()`.
 
 Usa la función `style()` para definir un conjunto de estilos para asociar con un nombre de estado dado.
-Debes usar *camelCase* para los atributos de estilo que contienen guiones, como `backgroundColor` o envolverlos entre comillas, como `'background-color'`.
+Debes usar _camelCase_ para los atributos de estilo que contienen guiones, como `backgroundColor` o envolverlos entre comillas, como `'background-color'`.
 
 Veamos cómo funciona la función [`state()`](api/animations/state) de Angular con la función `style⁣­(⁠)` para establecer atributos de estilo CSS.
 En este fragmento de código, se establecen múltiples atributos de estilo al mismo tiempo para el estado.
 En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de 1 y un color de fondo amarillo.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state1"/>
 
 En el siguiente estado `closed`, el botón tiene una altura de 100 píxeles, una opacidad de 0.8 y un color de fondo azul.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="state2"/>
 
 ### Transiciones y tiempo
 
 En Angular, puedes establecer múltiples estilos sin ninguna animación.
 Sin embargo, sin un mayor refinamiento, el botón se transforma instantáneamente sin desvanecimiento, sin reducción u otro indicador visible de que está ocurriendo un cambio.
 
-Para hacer el cambio menos abrupto, necesitas definir una *transición* de animación para especificar los cambios que ocurren entre un estado y otro durante un período de tiempo.
+Para hacer el cambio menos abrupto, necesitas definir una _transición_ de animación para especificar los cambios que ocurren entre un estado y otro durante un período de tiempo.
 La función `transition()` acepta dos argumentos:
 El primer argumento acepta una expresión que define la dirección entre dos estados de transición, y el segundo argumento acepta uno o una serie de pasos `animate()`.
 
@@ -146,28 +144,28 @@ La primera parte, `duration`, es requerida.
 La duración puede expresarse en milisegundos como un número sin comillas, o en segundos con comillas y un especificador de tiempo.
 Por ejemplo, una duración de una décima de segundo puede expresarse de las siguientes maneras:
 
-* Como un número simple, en milisegundos:
+- Como un número simple, en milisegundos:
     `100`
 
-* En una cadena, como milisegundos:
+- En una cadena, como milisegundos:
     `'100ms'`
 
-* En una cadena, como segundos:
+- En una cadena, como segundos:
     `'0.1s'`
 
 El segundo argumento, `delay`, tiene la misma sintaxis que `duration`.
 Por ejemplo:
 
-* Espera 100ms y luego ejecuta durante 200ms: `'0.2s 100ms'`
+- Espera 100ms y luego ejecuta durante 200ms: `'0.2s 100ms'`
 
 El tercer argumento, `easing`, controla cómo la animación [acelera y desacelera](https://easings.net) durante su ejecución.
 Por ejemplo, `ease-in` hace que la animación comience lentamente y gane velocidad a medida que progresa.
 
-* Espera 100ms, ejecuta durante 200ms.
+- Espera 100ms, ejecuta durante 200ms.
     Usa una curva de desaceleración para comenzar rápido y desacelerar lentamente hasta un punto de reposo:
     `'0.2s 100ms ease-out'`
 
-* Ejecuta durante 200ms, sin retraso.
+- Ejecuta durante 200ms, sin retraso.
     Usa una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final:
     `'0.2s ease-in-out'`
 
@@ -179,7 +177,7 @@ Por ejemplo, `ease-in` hace que la animación comience lentamente y gane velocid
 
 Este ejemplo proporciona una transición de estado de `open` a `closed` con una transición de 1 segundo entre estados.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition1"/>
 
 En el fragmento de código anterior, el operador `=>` indica transiciones unidireccionales, y `<=>` es bidireccional.
 Dentro de la transición, `animate()` especifica cuánto tiempo toma la transición.
@@ -187,24 +185,24 @@ En este caso, el cambio de estado de `open` a `closed` toma 1 segundo, expresado
 
 Este ejemplo agrega una transición de estado del estado `closed` al estado `open` con un arco de animación de transición de 0.5 segundos.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition2"/>
 
 ÚTIL: Algunas notas adicionales sobre el uso de estilos dentro de las funciones [`state`](api/animations/state) y `transition`.
 
-* Usa [`state()`](api/animations/state) para definir estilos que se aplican al final de cada transición, persisten después de que la animación se completa
-* Usa `transition()` para definir estilos intermedios, que crean la ilusión de movimiento durante la animación
-* Cuando las animaciones están deshabilitadas, los estilos de `transition()` pueden omitirse, pero los estilos de [`state()`](api/animations/state) no pueden
-* Incluye múltiples pares de estados dentro del mismo argumento `transition()`:
+- Usa [`state()`](api/animations/state) para definir estilos que se aplican al final de cada transición, persisten después de que la animación se completa
+- Usa `transition()` para definir estilos intermedios, que crean la ilusión de movimiento durante la animación
+- Cuando las animaciones están deshabilitadas, los estilos de `transition()` pueden omitirse, pero los estilos de [`state()`](api/animations/state) no pueden
+- Incluye múltiples pares de estados dentro del mismo argumento `transition()`:
 
     <docs-code language="typescript">
 
-    transition( 'on => off, off => void' )
+  transition( 'on => off, off => void' )
 
     </docs-code>
 
 ### Disparando la animación
 
-Una animación requiere un *trigger*, para que sepa cuándo comenzar.
+Una animación requiere un _trigger_, para que sepa cuándo comenzar.
 La función `trigger()` recopila los estados y transiciones, y le da a la animación un nombre, para que puedas adjuntarla al elemento disparador en la plantilla HTML.
 
 La función `trigger()` describe el nombre de la propiedad a observar para cambios.
@@ -222,7 +220,7 @@ Sin embargo, es posible que múltiples triggers estén activos a la vez.
 Las animaciones se definen en los metadatos del componente que controla el elemento HTML a animar.
 Coloca el código que define tus animaciones bajo la propiedad `animations:` dentro del decorador `@Component()`.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
 
 Cuando hayas definido un trigger de animación para un componente, adjúntalo a un elemento en la plantilla de ese componente envolviendo el nombre del trigger entre corchetes y precediéndolo con un símbolo `@`.
 Luego, puedes enlazar el trigger a una expresión de plantilla usando la sintaxis de enlace de propiedad estándar de Angular como se muestra a continuación, donde `triggerName` es el nombre del trigger, y `expression` se evalúa a un estado de animación definido.
@@ -237,7 +235,7 @@ La animación se ejecuta o dispara cuando el valor de la expresión cambia a un
 
 El siguiente fragmento de código enlaza el trigger al valor de la propiedad `isOpen`.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
 
 En este ejemplo, cuando la expresión `isOpen` se evalúa a un estado definido de `open` o `closed`, notifica al trigger `openClose` de un cambio de estado.
 Luego depende del código `openClose` manejar el cambio de estado y lanzar una animación de cambio de estado.
@@ -254,9 +252,9 @@ En el archivo de plantilla HTML, usa el nombre del trigger para adjuntar las ani
 Aquí están los archivos de código discutidos en el ejemplo de transición.
 
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
-    <docs-code header="src/app/open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="component"/>
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.1.html" visibleRegion="trigger"/>
+    <docs-code header="open-close.component.css" path="adev/src/content/examples/animations/src/app/open-close.component.css"/>
 </docs-code-multifile>
 
 ### Resumen
@@ -270,21 +268,21 @@ Aprende sobre características más avanzadas en las animaciones de Angular en l
 La API funcional proporcionada por el módulo `@angular/animations` proporciona un lenguaje específico de dominio (DSL) para crear y controlar animaciones en aplicaciones Angular.
 Consulta la [referencia de la API](api#animations) para un listado completo y detalles de sintaxis de las funciones principales y estructuras de datos relacionadas.
 
-| Nombre de función                 | Qué hace                                                                                                                                                                                                                      |
-|:---                               |:---                                                                                                                                                                                                                           |
-| `trigger()`                       | Inicia la animación y sirve como contenedor para todas las demás llamadas a funciones de animación. La plantilla HTML se enlaza a `triggerName`. Usa el primer argumento para declarar un nombre de trigger único. Usa sintaxis de array. |
-| `style()`                         | Define uno o más estilos CSS para usar en animaciones. Controla la apariencia visual de los elementos HTML durante las animaciones. Usa sintaxis de objeto.                                                                  |
-| [`state()`](api/animations/state) | Crea un conjunto nombrado de estilos CSS que deben aplicarse en la transición exitosa a un estado dado. El estado puede entonces ser referenciado por nombre dentro de otras funciones de animación.                        |
-| `animate()`                       | Especifica la información de tiempo para una transición. Valores opcionales para `delay` y `easing`. Puede contener llamadas a `style()` dentro.                                                                             |
-| `transition()`                    | Define la secuencia de animación entre dos estados nombrados. Usa sintaxis de array.                                                                                                                                         |
-| `keyframes()`                     | Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo especificado. Usa dentro de `animate()`. Puede incluir múltiples llamadas a `style()` dentro de cada `keyframe()`. Usa sintaxis de array.       |
-| [`group()`](api/animations/group) | Especifica un grupo de pasos de animación (*animaciones internas*) para ejecutarse en paralelo. La animación continúa solo después de que todos los pasos de animación internos se hayan completado. Usado dentro de `sequence()` o `transition()`. |
-| `query()`                         | Encuentra uno o más elementos HTML internos dentro del elemento actual.                                                                                                                                                      |
-| `sequence()`                      | Especifica una lista de pasos de animación que se ejecutan secuencialmente, uno por uno.                                                                                                                                     |
-| `stagger()`                       | Escalonea el tiempo de inicio para animaciones de múltiples elementos.                                                                                                                                                       |
-| `animation()`                     | Produce una animación reutilizable que puede ser invocada desde otro lugar. Usado junto con `useAnimation()`.                                                                                                                |
-| `useAnimation()`                  | Activa una animación reutilizable. Usado con `animation()`.                                                                                                                                                                  |
-| `animateChild()`                  | Permite que las animaciones en componentes hijos se ejecuten dentro del mismo marco de tiempo que el padre.                                                                                                                  |
+| Nombre de función                 | Lo que hace                                                                                                                                                                                                                                        |
+|:--------------------------------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `trigger()`                       | Inicia la animación y sirve como contenedor para todas las demás llamadas a funciones de animación. La plantilla HTML se enlaza a `triggerName`. Usa el primer argumento para declarar un nombre de trigger único. Usa sintaxis de array.          |
+| `style()`                         | Define uno o más estilos CSS para usar en animaciones. Controla la apariencia visual de los elementos HTML durante las animaciones. Usa sintaxis de objeto.                                                                                         |
+| [`state()`](api/animations/state) | Crea un conjunto nombrado de estilos CSS que deben aplicarse en la transición exitosa a un estado dado. El estado puede entonces ser referenciado por nombre dentro de otras funciones de animación.                                               |
+| `animate()`                       | Especifica la información de tiempo para una transición. Valores opcionales para `delay` y `easing`. Puede contener llamadas a `style()` dentro.                                                                                                    |
+| `transition()`                    | Define la secuencia de animación entre dos estados nombrados. Usa sintaxis de array.                                                                                                                                                                |
+| `keyframes()`                     | Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo especificado. Usa dentro de `animate()`. Puede incluir múltiples llamadas a `style()` dentro de cada `keyframe()`. Usa sintaxis de array.                               |
+| [`group()`](api/animations/group) | Especifica un grupo de pasos de animación (_animaciones internas_) para ejecutarse en paralelo. La animación continúa solo después de que todos los pasos de animación internos se hayan completado. Usado dentro de `sequence()` o `transition()`. |
+| `query()`                         | Encuentra uno o más elementos HTML internos dentro del elemento actual.                                                                                                                                                                            |
+| `sequence()`                      | Especifica una lista de pasos de animación que se ejecutan secuencialmente, uno por uno.                                                                                                                                                            |
+| `stagger()`                       | Escalonea el tiempo de inicio para animaciones de múltiples elementos.                                                                                                                                                                             |
+| `animation()`                     | Produce una animación reutilizable que puede ser invocada desde otro lugar. Usado junto con `useAnimation()`.                                                                                                                                      |
+| `useAnimation()`                  | Activa una animación reutilizable. Usado con `animation()`.                                                                                                                                                                                        |
+| `animateChild()`                  | Permite que las animaciones en componentes hijos se ejecuten dentro del mismo marco de tiempo que el padre.                                                                                                                                        |
 
 </table>
 
diff --git a/adev-es/src/content/guide/animations/reusable-animations.en.md b/adev-es/src/content/guide/animations/reusable-animations.en.md
index d8d024f..17c2e9b 100644
--- a/adev-es/src/content/guide/animations/reusable-animations.en.md
+++ b/adev-es/src/content/guide/animations/reusable-animations.en.md
@@ -9,7 +9,7 @@ This topic provides some examples of how to create reusable animations.
 To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable.
 You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function.
 
-<docs-code header="src/app/animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-const"/>
+<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-const"/>
 
 In the preceding code snippet, `transitionAnimation` is made reusable by declaring it as an export variable.
 
@@ -18,12 +18,12 @@ HELPFUL: The `height`, `opacity`, `backgroundColor`, and `time` inputs are repla
 You can also export a part of an animation.
 For example, the following snippet exports the animation `trigger`.
 
-<docs-code header="src/app/animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="trigger-const"/>
+<docs-code header="animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="trigger-const"/>
 
 From this point, you can import reusable animation variables in your component class.
 For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" visibleRegion="reusable"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" visibleRegion="reusable"/>
 
 ## More on Angular animations
 
diff --git a/adev-es/src/content/guide/animations/reusable-animations.md b/adev-es/src/content/guide/animations/reusable-animations.md
index 7f1ecc1..1ef64a2 100644
--- a/adev-es/src/content/guide/animations/reusable-animations.md
+++ b/adev-es/src/content/guide/animations/reusable-animations.md
@@ -9,7 +9,7 @@ Este tema proporciona algunos ejemplos de cómo crear animaciones reutilizables.
 Para crear una animación reutilizable, usa la función [`animation()`](api/animations/animation) para definir una animación en un archivo `.ts` separado y declara esta definición de animación como una variable de exportación `const`.
 Luego puedes importar y reutilizar esta animación en cualquiera de los componentes de tu aplicación usando la función [`useAnimation()`](api/animations/useAnimation).
 
-<docs-code header="src/app/animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-const"/>
+<docs-code header="animations.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="animation-const"/>
 
 En el fragmento de código anterior, `transitionAnimation` se hace reutilizable declarándola como una variable de exportación.
 
@@ -18,12 +18,12 @@ En el fragmento de código anterior, `transitionAnimation` se hace reutilizable
 También puedes exportar una parte de una animación.
 Por ejemplo, el siguiente fragmento exporta el `trigger` de animación.
 
-<docs-code header="src/app/animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="trigger-const"/>
+<docs-code header="animations.1.ts" path="adev/src/content/examples/animations/src/app/animations.1.ts" visibleRegion="trigger-const"/>
 
 Desde este punto, puedes importar variables de animación reutilizables en la clase de tu componente.
 Por ejemplo, el siguiente fragmento de código importa la variable `transitionAnimation` y la usa a través de la función `useAnimation()`.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" visibleRegion="reusable"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.3.ts" visibleRegion="reusable"/>
 
 ## Más sobre animaciones de Angular
 
diff --git a/adev-es/src/content/guide/animations/transition-and-triggers.en.md b/adev-es/src/content/guide/animations/transition-and-triggers.en.md
index cc35138..13be611 100644
--- a/adev-es/src/content/guide/animations/transition-and-triggers.en.md
+++ b/adev-es/src/content/guide/animations/transition-and-triggers.en.md
@@ -11,7 +11,7 @@ In Angular, transition states can be defined explicitly through the [`state()`](
 
 ### Wildcard state
 
-An asterisk `*` or *wildcard* matches any animation state.
+An asterisk `*` or _wildcard_ matches any animation state.
 This is useful for defining transitions that apply regardless of the HTML element's start or end state.
 
 For example, a transition of `open => *` applies when the element's state changes from open to anything else.
@@ -23,11 +23,11 @@ Instead of defining each state-to-state transition pair, any transition to `clos
 
 This allows the addition of new states without having to include separate transitions for each one.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard1"/>
 
 Use a double arrow syntax to specify state-to-state transitions in both directions.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard2"/>
 
 ### Use wildcard state with multiple transition states
 
@@ -37,7 +37,7 @@ If the button can change from `open` to either `closed` or something like `inPro
 
 <img alt="wildcard state with 3 states" src="assets/images/guide/animations/wildcard-3-states.png">
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-transition"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-transition"/>
 
 The `* => *` transition applies when any change between two states takes place.
 
@@ -45,14 +45,14 @@ Transitions are matched in the order in which they are defined.
 Thus, you can apply other transitions on top of the `* => *` transition.
 For example, define style changes or animations that would apply just to `open => closed`, then use `* => *` as a fallback for state pairings that aren't otherwise called out.
 
-To do this, list the more specific transitions *before* `* => *`.
+To do this, list the more specific transitions _before_ `* => *`.
 
 ### Use wildcards with styles
 
 Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that.
 Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition4"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition4"/>
 
 ### Void state
 
@@ -63,9 +63,9 @@ See [Animating entering and leaving a view](guide/legacy-animations/transition-a
 
 Combine wildcard and void states in a transition to trigger animations that enter and leave the page:
 
-* A transition of `* => void` applies when the element leaves a view, regardless of what state it was in before it left
-* A transition of `void => *` applies when the element enters a view, regardless of what state it assumes when entering
-* The wildcard state `*` matches to *any* state, including `void`
+- A transition of `* => void` applies when the element leaves a view, regardless of what state it was in before it left
+- A transition of `void => *` applies when the element enters a view, regardless of what state it assumes when entering
+- The wildcard state `*` matches to _any_ state, including `void`
 
 ## Animate entering and leaving a view
 
@@ -73,10 +73,10 @@ This section shows how to animate elements entering or leaving a page.
 
 Add a new behavior:
 
-* When you add a hero to the list of heroes, it appears to fly onto the page from the left
-* When you remove a hero from the list, it appears to fly out to the right
+- When you add a hero to the list of heroes, it appears to fly onto the page from the left
+- When you remove a hero from the list, it appears to fly out to the right
 
-<docs-code header="src/app/hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" visibleRegion="animationdef"/>
+<docs-code header="hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" visibleRegion="animationdef"/>
 
 In the preceding code, you applied the `void` state when the HTML element isn't attached to a view.
 
@@ -87,8 +87,8 @@ These aliases are used by several animation functions.
 
 <docs-code hideCopy language="typescript">
 
-transition ( ':enter', [ … ] );  // alias for void => *
-transition ( ':leave', [ … ] );  // alias for * => void
+transition ( ':enter', [ … ] ); // alias for void => _
+transition ( ':leave', [ … ] ); // alias for _ => void
 
 </docs-code>
 
@@ -105,11 +105,11 @@ As a rule of thumb consider that any element being added to the DOM by Angular p
 This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`.
 The HTML template contains the following code.
 
-<docs-code header="src/app/insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" visibleRegion="insert-remove"/>
+<docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" visibleRegion="insert-remove"/>
 
 In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view.
 
-<docs-code header="src/app/insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" visibleRegion="enter-leave-trigger"/>
+<docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" visibleRegion="enter-leave-trigger"/>
 
 Note that this example doesn't need to use [`state()`](api/animations/state).
 
@@ -121,13 +121,13 @@ Use these to kick off a transition when a numeric value has increased or decreas
 HELPFUL: The following example uses `query()` and `stagger()` methods.
 For more information on these methods, see the [complex sequences](guide/legacy-animations/complex-sequences) page.
 
-<docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="increment"/>
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="increment"/>
 
 ## Boolean values in transitions
 
 If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" visibleRegion="trigger-boolean"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" visibleRegion="trigger-boolean"/>
 
 In the code snippet above, the HTML template binds a `<div>` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`.
 This pattern is an alternative to the practice of creating two named states like `open` and `close`.
@@ -136,7 +136,7 @@ Inside the `@Component` metadata under the `animations:` property, when the stat
 In this case, the animation uses whatever height the element already had before the animation started.
 When the element is `closed`, the element gets animated to a height of 0, which makes it invisible.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" visibleRegion="trigger-boolean"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" visibleRegion="trigger-boolean"/>
 
 ## Multiple animation triggers
 
@@ -156,8 +156,8 @@ When true, the `@.disabled` binding prevents all animations from rendering.
 The following code sample shows how to use this feature.
 
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" visibleRegion="toggle-animation"/>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" visibleRegion="toggle-animation" language="typescript"/>
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" visibleRegion="toggle-animation"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" visibleRegion="toggle-animation" language="typescript"/>
 </docs-code-multifile>
 
 When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off.
@@ -167,31 +167,31 @@ You can't selectively turn off multiple animations on a single element.<!-- vale
 
 A selective child animations can still be run on a disabled parent in one of the following ways:
 
-* A parent animation can use the [`query()`](api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
-    Those elements can still animate.
+- A parent animation can use the [`query()`](api/animations/query) function to collect inner elements located in disabled areas of the HTML template.
+Those elements can still animate.
 <!-- vale on -->
 
-* A child animation can be queried by a parent and then later animated with the `animateChild()` function
+- A child animation can be queried by a parent and then later animated with the `animateChild()` function
 
 #### Disable all animations
 
 To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="toggle-app-animations"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="toggle-app-animations"/>
 
 HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E\) testing.
 
 ## Animation callbacks
 
-The animation `trigger()` function emits *callbacks* when it starts and when it finishes.
+The animation `trigger()` function emits _callbacks_ when it starts and when it finishes.
 The following example features a component that contains an `openClose` trigger.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events1"/>
 
 In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used.
 In this example, the trigger `openClose` appears as follows.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" visibleRegion="callbacks"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" visibleRegion="callbacks"/>
 
 A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup.
 For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes.
@@ -199,16 +199,16 @@ For example, an **InProgress** button can be set up to have its own looping anim
 Another animation can be called when the current animation finishes.
 For example, the button goes from the `inProgress` state to the `closed` state when the API call is completed.
 
-An animation can influence an end user to *perceive* the operation as faster, even when it is not.
+An animation can influence an end user to _perceive_ the operation as faster, even when it is not.
 
 Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console.
 The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events"/>
 
 ## Keyframes
 
-To create an animation with multiple steps run in sequence, use *keyframes*.
+To create an animation with multiple steps run in sequence, use _keyframes_.
 
 Angular's `keyframe()` function allows several style changes within a single timing segment.
 For example, the button, instead of fading, could change color several times over a single 2-second time span.
@@ -217,7 +217,7 @@ For example, the button, instead of fading, could change color several times ove
 
 The code for this color change might look like this.
 
-<docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframes"/>
+<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframes"/>
 
 ### Offset
 
@@ -233,7 +233,7 @@ Specifying an offset of 0.8 for the middle transition in the preceding example m
 
 The code with offsets specified would be as follows.
 
-<docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframesWithOffsets"/>
+<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframesWithOffsets"/>
 
 You can combine keyframes with `duration`, `delay`, and `easing` within a single animation.
 
@@ -243,14 +243,14 @@ Use keyframes to create a pulse effect in your animations by defining styles at
 
 Here's an example of using keyframes to create a pulse effect:
 
-* The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
-* A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1 second timeframe
+- The original `open` and `closed` states, with the original changes in height, color, and opacity, occurring over a timeframe of 1 second
+- A keyframes sequence inserted in the middle that causes the button to appear to pulsate irregularly over the course of that same 1 second timeframe
 
 <img alt="keyframes with irregular pulsation" src="assets/images/guide/animations/keyframes-pulsation.png">
 
 The code snippet for this animation might look like this.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" visibleRegion="trigger"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" visibleRegion="trigger"/>
 
 ### Animatable properties and units
 
@@ -260,14 +260,14 @@ The W3C maintains a list of animatable properties on its [CSS Transitions](https
 
 For properties with a numeric value, define a unit by providing the value as a string, in quotes, with the appropriate suffix:
 
-* 50 pixels:
-    `'50px'`
+- 50 pixels:
+  `'50px'`
 
-* Relative font size:
-    `'3em'`
+- Relative font size:
+  `'3em'`
 
-* Percentage:
-    `'100%'`
+- Percentage:
+  `'100%'`
 
 You can also provide the value as a number. In such cases Angular assumes a default unit of pixels, or `px`.
 Expressing 50 pixels as `50` is the same as saying `'50px'`.
@@ -285,7 +285,7 @@ In these cases, you can use a special wildcard `*` property value under `style()
 The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page.
 The animation takes whatever height the element has before it leaves, and animates from that height to zero.
 
-<docs-code header="src/app/hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" visibleRegion="auto-calc"/>
+<docs-code header="hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" visibleRegion="auto-calc"/>
 
 ### Keyframes summary
 
diff --git a/adev-es/src/content/guide/animations/transition-and-triggers.md b/adev-es/src/content/guide/animations/transition-and-triggers.md
index 959f528..e807c69 100644
--- a/adev-es/src/content/guide/animations/transition-and-triggers.md
+++ b/adev-es/src/content/guide/animations/transition-and-triggers.md
@@ -11,7 +11,7 @@ En Angular, los estados de transición se pueden definir explícitamente a trav
 
 ### Estado comodín
 
-Un asterisco `*` o *comodín* coincide con cualquier estado de animación.
+Un asterisco `*` o _comodín_ coincide con cualquier estado de animación.
 Esto es útil para definir transiciones que se aplican independientemente del estado inicial o final del elemento HTML.
 
 Por ejemplo, una transición de `open => *` se aplica cuando el estado del elemento cambia de open a cualquier otra cosa.
@@ -23,11 +23,11 @@ En lugar de definir cada par de transición estado-a-estado, cualquier transici
 
 Esto permite la adición de nuevos estados sin tener que incluir transiciones separadas para cada uno.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard1"/>
 
 Usa una sintaxis de doble flecha para especificar transiciones estado-a-estado en ambas direcciones.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard2"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-wildcard2"/>
 
 ### Usa el estado comodín con múltiples estados de transición
 
@@ -37,7 +37,7 @@ Si el botón puede cambiar de `open` a `closed` o algo como `inProgress`, usar u
 
 <img alt="wildcard state with 3 states" src="assets/images/guide/animations/wildcard-3-states.png">
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-transition"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="trigger-transition"/>
 
 La transición `* => *` se aplica cuando tiene lugar cualquier cambio entre dos estados.
 
@@ -45,27 +45,27 @@ Las transiciones se emparejan en el orden en que están definidas.
 Por lo tanto, puedes aplicar otras transiciones sobre la transición `* => *`.
 Por ejemplo, define cambios de estilo o animaciones que se aplicarían solo a `open => closed`, luego usa `* => *` como respaldo para emparejamientos de estado que no estén específicamente llamados.
 
-Para hacer esto, lista las transiciones más específicas *antes de* `* => *`.
+Para hacer esto, lista las transiciones más específicas _antes de_ `* => *`.
 
 ### Usa comodines con estilos
 
 Usa el comodín `*` con un estilo para decirle a la animación que use cualquier valor de estilo actual y anime con eso.
 El comodín es un valor de respaldo que se usa si el estado que se está animando no está declarado dentro del trigger.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition4"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="transition4"/>
 
 ### Estado void
 
 Usa el estado `void` para configurar transiciones para un elemento que está entrando o saliendo de una página.
-Consulta [Animando entrada y salida de una vista](guide/legacy-animations/transition-and-triggers#aliases-enter-and-leave).
+Consulta [Animando entrada y salida de una vista](guide/legacy-animations/transition-and-triggers#alias-enter-y-leave).
 
 ### Combinar estados comodín y void
 
 Combina estados comodín y void en una transición para disparar animaciones que entran y salen de la página:
 
-* Una transición de `* => void` se aplica cuando el elemento sale de una vista, independientemente del estado en el que estaba antes de salir
-* Una transición de `void => *` se aplica cuando el elemento entra en una vista, independientemente del estado que asuma al entrar
-* El estado comodín `*` coincide con *cualquier* estado, incluyendo `void`
+- Una transición de `* => void` se aplica cuando el elemento sale de una vista, independientemente del estado en el que estaba antes de salir
+- Una transición de `void => *` se aplica cuando el elemento entra en una vista, independientemente del estado que asuma al entrar
+- El estado comodín `*` coincide con _cualquier_ estado, incluyendo `void`
 
 ## Animar entrada y salida de una vista
 
@@ -73,10 +73,10 @@ Esta sección muestra cómo animar elementos entrando o saliendo de una página.
 
 Agrega un nuevo comportamiento:
 
-* Cuando agregas un héroe a la lista de héroes, parece volar a la página desde la izquierda
-* Cuando eliminas un héroe de la lista, parece volar hacia la derecha
+- Cuando agregas un héroe a la lista de héroes, parece volar a la página desde la izquierda
+- Cuando eliminas un héroe de la lista, parece volar hacia la derecha
 
-<docs-code header="src/app/hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" visibleRegion="animationdef"/>
+<docs-code header="hero-list-enter-leave.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-enter-leave.component.ts" visibleRegion="animationdef"/>
 
 En el código anterior, aplicaste el estado `void` cuando el elemento HTML no está adjunto a una vista.
 
@@ -87,8 +87,8 @@ Estos alias son usados por varias funciones de animación.
 
 <docs-code hideCopy language="typescript">
 
-transition ( ':enter', [ … ] );  // alias for void => *
-transition ( ':leave', [ … ] );  // alias for * => void
+transition ( ':enter', [ … ] ); // alias for void => *
+transition ( ':leave', [ … ] ); // alias for * => void
 
 </docs-code>
 
@@ -105,11 +105,11 @@ Como regla general, considera que cualquier elemento que Angular agregue al DOM
 Este ejemplo tiene un trigger especial para la animación de entrada y salida llamado `myInsertRemoveTrigger`.
 La plantilla HTML contiene el siguiente código.
 
-<docs-code header="src/app/insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" visibleRegion="insert-remove"/>
+<docs-code header="insert-remove.component.html" path="adev/src/content/examples/animations/src/app/insert-remove.component.html" visibleRegion="insert-remove"/>
 
 En el archivo del componente, la transición `:enter` establece una opacidad inicial de 0. Luego la anima para cambiar esa opacidad a 1 a medida que el elemento se inserta en la vista.
 
-<docs-code header="src/app/insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" visibleRegion="enter-leave-trigger"/>
+<docs-code header="insert-remove.component.ts" path="adev/src/content/examples/animations/src/app/insert-remove.component.ts" visibleRegion="enter-leave-trigger"/>
 
 Nota que este ejemplo no necesita usar [`state()`](api/animations/state).
 
@@ -121,13 +121,13 @@ La función `transition()` acepta otros valores de selector, `:increment` y `:de
 ÚTIL: El siguiente ejemplo usa los métodos `query()` y `stagger()`.
 Para más información sobre estos métodos, consulta la página de [secuencias complejas](guide/legacy-animations/complex-sequences).
 
-<docs-code header="src/app/hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="increment"/>
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" visibleRegion="increment"/>
 
 ## Valores booleanos en transiciones
 
 Si un trigger contiene un valor booleano como valor de enlace, entonces este valor se puede emparejar usando una expresión `transition()` que compara `true` y `false`, o `1` y `0`.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" visibleRegion="trigger-boolean"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.2.html" visibleRegion="trigger-boolean"/>
 
 En el fragmento de código anterior, la plantilla HTML enlaza un elemento `<div>` a un trigger llamado `openClose` con una expresión de estado de `isOpen`, y con valores posibles de `true` y `false`.
 Este patrón es una alternativa a la práctica de crear dos estados nombrados como `open` y `close`.
@@ -136,7 +136,7 @@ Dentro de los metadatos del `@Component` bajo la propiedad `animations:`, cuando
 En este caso, la animación usa cualquier altura que el elemento ya tenía antes de que comenzara la animación.
 Cuando el elemento está `closed`, el elemento se anima a una altura de 0, lo que lo hace invisible.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" visibleRegion="trigger-boolean"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.2.ts" visibleRegion="trigger-boolean"/>
 
 ## Múltiples triggers de animación
 
@@ -156,8 +156,8 @@ Cuando es true, el enlace `@.disabled` previene que se rendericen todas las anim
 El siguiente ejemplo de código muestra cómo usar esta característica.
 
 <docs-code-multifile>
-    <docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" visibleRegion="toggle-animation"/>
-    <docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" visibleRegion="toggle-animation" language="typescript"/>
+    <docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.4.html" visibleRegion="toggle-animation"/>
+    <docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.4.ts" visibleRegion="toggle-animation" language="typescript"/>
 </docs-code-multifile>
 
 Cuando el enlace `@.disabled` es true, el trigger `@childAnimation` no se activa.
@@ -167,8 +167,8 @@ No puedes desactivar selectivamente múltiples animaciones en un solo elemento.<
 
 Una animación hija selectiva aún se puede ejecutar en un padre deshabilitado de una de las siguientes maneras:
 
-* Una animación padre puede usar la función [`query()`](api/animations/query) para recopilar elementos internos ubicados en áreas deshabilitadas de la plantilla HTML.
-    Esos elementos aún pueden animar.
+- Una animación padre puede usar la función [`query()`](api/animations/query) para recopilar elementos internos ubicados en áreas deshabilitadas de la plantilla HTML. 
+Esos elementos aún pueden animar.
 <!-- vale on -->
 
 * Una animación hija puede ser consultada por un padre y luego animada posteriormente con la función `animateChild()`
@@ -177,21 +177,21 @@ Una animación hija selectiva aún se puede ejecutar en un padre deshabilitado d
 
 Para desactivar todas las animaciones para una aplicación Angular, coloca el enlace host `@.disabled` en el componente Angular superior.
 
-<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="toggle-app-animations"/>
+<docs-code header="app.component.ts" path="adev/src/content/examples/animations/src/app/app.component.ts" visibleRegion="toggle-app-animations"/>
 
 ÚTIL: Deshabilitar animaciones en toda la aplicación es útil durante las pruebas end-to-end (E2E).
 
 ## Callbacks de animación
 
-La función `trigger()` de animación emite *callbacks* cuando comienza y cuando termina.
+La función `trigger()` de animación emite _callbacks_ cuando comienza y cuando termina.
 El siguiente ejemplo presenta un componente que contiene un trigger `openClose`.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events1"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events1"/>
 
 En la plantilla HTML, el evento de animación se devuelve a través de `$event`, como `@triggerName.start` y `@triggerName.done`, donde `triggerName` es el nombre del trigger que se está usando.
 En este ejemplo, el trigger `openClose` aparece de la siguiente manera.
 
-<docs-code header="src/app/open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" visibleRegion="callbacks"/>
+<docs-code header="open-close.component.html" path="adev/src/content/examples/animations/src/app/open-close.component.3.html" visibleRegion="callbacks"/>
 
 Un uso potencial para callbacks de animación podría ser cubrir una llamada API lenta, como una búsqueda en base de datos.
 Por ejemplo, se puede configurar un botón **InProgress** para tener su propia animación en bucle mientras la operación del sistema backend finaliza.
@@ -199,16 +199,16 @@ Por ejemplo, se puede configurar un botón **InProgress** para tener su propia a
 Se puede llamar otra animación cuando la animación actual termina.
 Por ejemplo, el botón pasa del estado `inProgress` al estado `closed` cuando la llamada API se completa.
 
-Una animación puede influir en que un usuario final *perciba* la operación como más rápida, incluso cuando no lo es.
+Una animación puede influir en que un usuario final _perciba_ la operación como más rápida, incluso cuando no lo es.
 
 Los callbacks pueden servir como herramienta de depuración, por ejemplo en conjunto con `console.warn()` para ver el progreso de la aplicación en la Consola de JavaScript del desarrollador del navegador.
 El siguiente fragmento de código crea salida de registro de consola para el ejemplo original, un botón con los dos estados de `open` y `closed`.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.ts" visibleRegion="events"/>
 
 ## Keyframes
 
-Para crear una animación con múltiples pasos ejecutados en secuencia, usa *keyframes*.
+Para crear una animación con múltiples pasos ejecutados en secuencia, usa _keyframes_.
 
 La función `keyframe()` de Angular permite varios cambios de estilo dentro de un solo segmento de tiempo.
 Por ejemplo, el botón, en lugar de desvanecerse, podría cambiar de color varias veces durante un solo período de tiempo de 2 segundos.
@@ -217,7 +217,7 @@ Por ejemplo, el botón, en lugar de desvanecerse, podría cambiar de color varia
 
 El código para este cambio de color podría verse así.
 
-<docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframes"/>
+<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframes"/>
 
 ### Offset
 
@@ -233,7 +233,7 @@ Especificar un offset de 0.8 para la transición media en el ejemplo anterior po
 
 El código con offsets especificados sería el siguiente.
 
-<docs-code header="src/app/status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframesWithOffsets"/>
+<docs-code header="status-slider.component.ts" path="adev/src/content/examples/animations/src/app/status-slider.component.ts" visibleRegion="keyframesWithOffsets"/>
 
 Puedes combinar keyframes con `duration`, `delay` y `easing` dentro de una sola animación.
 
@@ -243,14 +243,14 @@ Usa keyframes para crear un efecto de pulso en tus animaciones definiendo estilo
 
 Aquí hay un ejemplo de uso de keyframes para crear un efecto de pulso:
 
-* Los estados originales `open` y `closed`, con los cambios originales en altura, color y opacidad, ocurriendo durante un período de tiempo de 1 segundo
-* Una secuencia de keyframes insertada en el medio que hace que el botón parezca pulsar irregularmente durante el mismo período de tiempo de 1 segundo
+- Los estados originales `open` y `closed`, con los cambios originales en altura, color y opacidad, ocurriendo durante un período de tiempo de 1 segundo
+- Una secuencia de keyframes insertada en el medio que hace que el botón parezca pulsar irregularmente durante el mismo período de tiempo de 1 segundo
 
 <img alt="keyframes with irregular pulsation" src="assets/images/guide/animations/keyframes-pulsation.png">
 
 El fragmento de código para esta animación podría verse así.
 
-<docs-code header="src/app/open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" visibleRegion="trigger"/>
+<docs-code header="open-close.component.ts" path="adev/src/content/examples/animations/src/app/open-close.component.1.ts" visibleRegion="trigger"/>
 
 ### Propiedades animables y unidades
 
@@ -260,13 +260,13 @@ El W3C mantiene una lista de propiedades animables en su página [CSS Transition
 
 Para propiedades con un valor numérico, define una unidad proporcionando el valor como una cadena, entre comillas, con el sufijo apropiado:
 
-* 50 píxeles:
+- 50 píxeles:
     `'50px'`
 
-* Tamaño de fuente relativo:
+- Tamaño de fuente relativo:
     `'3em'`
 
-* Porcentaje:
+- Porcentaje:
     `'100%'`
 
 También puedes proporcionar el valor como un número. En tales casos Angular asume una unidad predeterminada de píxeles, o `px`.
@@ -285,7 +285,7 @@ En estos casos, puedes usar un valor de propiedad comodín `*` especial bajo `st
 El siguiente ejemplo tiene un trigger llamado `shrinkOut`, usado cuando un elemento HTML sale de la página.
 La animación toma cualquier altura que el elemento tenga antes de salir, y la anima desde esa altura hasta cero.
 
-<docs-code header="src/app/hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" visibleRegion="auto-calc"/>
+<docs-code header="hero-list-auto.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-auto.component.ts" visibleRegion="auto-calc"/>
 
 ### Resumen de keyframes
 
diff --git a/adev-es/src/content/guide/aria/accordion.md b/adev-es/src/content/guide/aria/accordion.md
new file mode 100644
index 0000000..2588aee
--- /dev/null
+++ b/adev-es/src/content/guide/aria/accordion.md
@@ -0,0 +1,251 @@
+<docs-decorative-header title="Accordion">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" title="Accordion ARIA pattern"/>
+  <docs-pill href="/api?query=accordion#angular_aria_accordion" title="Accordion API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+An accordion organizes related content into expandable and collapsible sections, reducing page scrolling and helping users focus on relevant information. Each section has a trigger button and a content panel. Clicking a trigger toggles the visibility of its associated panel.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.ts">
+  <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.ts"/>
+  <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.html"/>
+  <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.css"/>
+</docs-code-multifile>
+
+## Usage
+
+Accordions work well for organizing content into logical groups where users typically need to view one section at a time.
+
+**Use accordions when:**
+
+- Displaying FAQs with multiple questions and answers
+- Organizing long forms into manageable sections
+- Reducing scrolling on content-heavy pages
+- Progressively disclosing related information
+
+**Avoid accordions when:**
+
+- Building navigation menus (use the [Menu](guide/aria/menu) component instead)
+- Creating tabbed interfaces (use the [Tabs](guide/aria/tabs) component instead)
+- Showing a single collapsible section (use a disclosure pattern instead)
+- Users need to see multiple sections simultaneously (consider a different layout)
+
+## Features
+
+- **Expansion modes** - Control whether one or multiple panels can be open at the same time
+- **Keyboard navigation** - Navigate between triggers using arrow keys, Home, and End
+- **Lazy rendering** - Content is only created when a panel first expands, improving initial load performance
+- **Disabled states** - Disable the entire group or individual triggers
+- **Focus management** - Control whether disabled items can receive keyboard focus
+- **Programmatic control** - Expand, collapse, or toggle panels from your component code
+- **RTL support** - Automatic support for right-to-left languages
+
+## Examples
+
+### Single expansion mode
+
+Set `[multiExpandable]="false"` to allow only one panel to be open at a time. Opening a new panel automatically closes any previously open panel.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/single-expansion/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/single-expansion/material/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/single-expansion/material/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/single-expansion/material/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/single-expansion/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/single-expansion/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/single-expansion/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/single-expansion/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/single-expansion/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+This mode works well for FAQs or situations where you want users to focus on one answer at a time.
+
+### Multiple expansion mode
+
+Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneously. Users can expand as many panels as needed without closing others.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/multi-expansion/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/multi-expansion/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/multi-expansion/material/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/material/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/multi-expansion/material/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/multi-expansion/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/multi-expansion/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/multi-expansion/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+This mode is useful for form sections or when users need to compare content across multiple panels.
+
+NOTE: The `multiExpandable` input defaults to `true`. Set it to `false` explicitly if you want single expansion behavior.
+
+### Disabled accordion items
+
+Disable specific triggers using the `disabled` input. Control how disabled items behave during keyboard navigation using the `softDisabled` input on the accordion group.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/disabled-focusable/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/disabled-focusable/material/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/material/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/material/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/accordion/src/disabled-focusable/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/accordion/src/disabled-focusable/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When `[softDisabled]="true"` (the default), disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped entirely during keyboard navigation.
+
+### Lazy content rendering
+
+Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel first expands. This improves performance for accordions with heavy content like images, charts, or complex components.
+
+```angular-html
+<div ngAccordionGroup>
+  <div>
+    <button ngAccordionTrigger panelId="item-1">
+      Trigger Text
+    </button>
+    <div ngAccordionPanel panelId="item-1">
+      <ng-template ngAccordionContent>
+        <!-- This content only renders when the panel first opens -->
+        <img src="large-image.jpg" alt="Description">
+        <app-expensive-component />
+      </ng-template>
+    </div>
+  </div>
+</div>
+```
+
+By default, content remains in the DOM after the panel collapses. Set `[preserveContent]="false"` to remove the content from the DOM when the panel closes.
+
+## APIs
+
+### AccordionGroup
+
+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                                                    |
+| ---------- | --------- | ------- | -------------------------------------------------------------- |
+| `id`       | `string`  | auto    | Unique identifier for the trigger                              |
+| `panelId`  | `string`  | —       | **Required.** Must match the `panelId` of the associated panel |
+| `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                                  |
+| `panelId`         | `string`  | —       | **Required.** Must match the `panelId` of the associated trigger |
+| `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 panelId="item-1">
+  <ng-template ngAccordionContent>
+    <!-- Content here is lazily rendered -->
+  </ng-template>
+</div>
+```
diff --git a/adev-es/src/content/guide/aria/autocomplete.md b/adev-es/src/content/guide/aria/autocomplete.md
new file mode 100644
index 0000000..73f2ab7
--- /dev/null
+++ b/adev-es/src/content/guide/aria/autocomplete.md
@@ -0,0 +1,190 @@
+<docs-decorative-header title="Autocomplete">
+</docs-decorative-header>
+
+## Overview
+
+An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Autocomplete works best when users need to select from a large set of options where typing is faster than scrolling. Consider using autocomplete when:
+
+- **The option list is long** (more than 20 items) - Typing narrows down choices faster than scrolling through a dropdown
+- **Users know what they're looking for** - They can type part of the expected value (like a state name, product, or username)
+- **Options follow predictable patterns** - Users can guess partial matches (like country codes, email domains, or categories)
+- **Speed matters** - Forms benefit from quick selection without extensive navigation
+
+Avoid autocomplete when:
+
+- The list has fewer than 10 options - A regular dropdown or radio group provides better visibility
+- Users need to browse options - If discovery is important, show all options upfront
+- Options are unfamiliar - Users can't type what they don't know exists in the list
+
+## Features
+
+Angular's autocomplete provides a fully accessible combobox implementation with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Three Filter Modes** - Choose between auto-select, manual selection, or highlighting behavior
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Popover API Integration** - Leverages the native HTML Popover API for optimal positioning
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+
+## Examples
+
+### Auto-select mode
+
+Users typing partial text expect immediate confirmation that their input matches an available option. Auto-select mode updates the input value to match the first filtered option as users type, reducing the number of keystrokes needed and providing instant feedback that their search is on the right track.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+### Manual selection mode
+
+Manual selection mode keeps the typed text unchanged while users navigate the suggestion list, preventing confusion from automatic updates. The input only changes when users explicitly confirm their choice with Enter or a click.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/manual/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/manual/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/manual/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+### Highlight mode
+
+Highlight mode allows the user to navigate options with arrow keys without changing the input value as they browse until they explicitly select a new option with Enter or click.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/highlight/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/highlight/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/highlight/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## APIs
+
+### Combobox Directive
+
+The `ngCombobox` directive provides the container for autocomplete functionality.
+
+#### Inputs
+
+| Property     | Type                                           | Default    | Description                                       |
+| ------------ | ---------------------------------------------- | ---------- | ------------------------------------------------- |
+| `filterMode` | `'auto-select'` \| `'manual'` \| `'highlight'` | `'manual'` | Controls selection behavior                       |
+| `disabled`   | `boolean`                                      | `false`    | Disables the combobox                             |
+| `firstMatch` | `string`                                       | -          | The value of the first matching item in the popup |
+
+#### Outputs
+
+| Property   | Type              | Description                                           |
+| ---------- | ----------------- | ----------------------------------------------------- |
+| `expanded` | `Signal<boolean>` | Signal indicating whether the popup is currently open |
+
+### ComboboxInput Directive
+
+The `ngComboboxInput` directive connects an input element to the combobox.
+
+#### Model
+
+| Property | Type     | Description                                                  |
+| -------- | -------- | ------------------------------------------------------------ |
+| `value`  | `string` | Two-way bindable string value of the input using `[(value)]` |
+
+### ComboboxPopupContainer Directive
+
+The `ngComboboxPopupContainer` directive wraps the popup content and manages its display.
+
+Must be used with `<ng-template>` inside a popover element.
+
+### Related components
+
+Autocomplete uses [Listbox](/api/aria/listbox/Listbox) and [Option](/api/aria/listbox/Option) directives to render the suggestion list. See the [Listbox documentation](/guide/aria/listbox) for additional customization options.
diff --git a/adev-es/src/content/guide/aria/combobox.md b/adev-es/src/content/guide/aria/combobox.md
new file mode 100644
index 0000000..7139021
--- /dev/null
+++ b/adev-es/src/content/guide/aria/combobox.md
@@ -0,0 +1,255 @@
+<docs-decorative-header title="Combobox">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" title="Combobox ARIA pattern"/>
+  <docs-pill href="/api?query=combobox#angular_aria_combobox" title="Combobox API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+A directive that coordinates a text input with a popup, providing the primitive directive for autocomplete, select, and multiselect patterns.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Combobox is the primitive directive that coordinates a text input with a popup. It provides the foundation for autocomplete, select, and multiselect patterns. Consider using combobox directly when:
+
+- **Building custom autocomplete patterns** - Creating specialized filtering or suggestion behavior
+- **Creating custom selection components** - Developing dropdowns with unique requirements
+- **Coordinating input with popup** - Pairing text input with listbox, tree, or dialog content
+- **Implementing specific filter modes** - Using manual, auto-select, or highlight behaviors
+
+Use documented patterns instead when:
+
+- Standard autocomplete with filtering is needed - See the [Autocomplete pattern](guide/aria/autocomplete) for ready-to-use examples
+- Single-selection dropdowns are needed - See the [Select pattern](guide/aria/select) for complete dropdown implementation
+- Multiple-selection dropdowns are needed - See the [Multiselect pattern](guide/aria/multiselect) for multi-select with compact display
+
+Note: The [Autocomplete](guide/aria/autocomplete), [Select](guide/aria/select), and [Multiselect](guide/aria/multiselect) guides show documented patterns that combine this directive with [Listbox](guide/aria/listbox) for specific use cases.
+
+## Features
+
+Angular's combobox provides a fully accessible input-popup coordination system with:
+
+- **Text Input with Popup** - Coordinates input field with popup content
+- **Three Filter Modes** - Manual, auto-select, or highlight behaviors
+- **Keyboard Navigation** - Arrow keys, Enter, Escape handling
+- **Screen Reader Support** - Built-in ARIA attributes including role="combobox" and aria-expanded
+- **Popup Management** - Automatic show/hide based on user interaction
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+
+## Examples
+
+### Autocomplete
+
+An accessible input field that filters and suggests options as users type, helping them find and select values from a list.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/autocomplete/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `filterMode="manual"` setting gives complete control over filtering and selection. The input updates a signal that filters the options list. Users navigate with arrow keys and select with Enter or click. This mode provides the most flexibility for custom filtering logic. See the [Autocomplete guide](guide/aria/autocomplete) for complete filtering patterns and examples.
+
+### Readonly mode
+
+A pattern that combines a readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `readonly` attribute prevents typing in the input field. The popup opens on click or arrow keys. Users navigate options with keyboard and select with Enter or click.
+
+This configuration provides the foundation for the [Select](guide/aria/select) and [Multiselect](guide/aria/multiselect) patterns. See those guides for complete dropdown implementations with triggers and overlay positioning.
+
+### Dialog popup
+
+Popups sometimes need modal behavior with a backdrop and focus trap. The combobox dialog directive provides this pattern for specialized use cases.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/combobox/src/dialog/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/combobox/src/dialog/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/combobox/src/dialog/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/combobox/src/dialog/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/combobox/src/dialog/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/combobox/src/dialog/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/combobox/src/dialog/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/combobox/src/dialog/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `ngComboboxDialog` directive creates a modal popup using the native dialog element. This provides backdrop behavior and focus trapping. Use dialog popups when the selection interface requires modal interaction or when the popup content is complex enough to warrant full-screen focus.
+
+## APIs
+
+### Combobox Directive
+
+The `ngCombobox` directive coordinates a text input with a popup.
+
+#### Inputs
+
+| Property         | Type                                           | Default    | Description                                      |
+| ---------------- | ---------------------------------------------- | ---------- | ------------------------------------------------ |
+| `filterMode`     | `'manual'` \| `'auto-select'` \| `'highlight'` | `'manual'` | Controls selection behavior                      |
+| `disabled`       | `boolean`                                      | `false`    | Disables the combobox                            |
+| `readonly`       | `boolean`                                      | `false`    | Makes combobox readonly (for Select/Multiselect) |
+| `firstMatch`     | `V`                                            | -          | Value of first matching item for auto-select     |
+| `alwaysExpanded` | `boolean`                                      | `false`    | Keeps popup always open                          |
+
+**Filter Modes:**
+
+- **`'manual'`** - User controls filtering and selection explicitly. The popup shows options based on your filtering logic. Users select with Enter or click. This mode provides the most flexibility.
+- **`'auto-select'`** - Input value automatically updates to the first matching option as users type. Requires the `firstMatch` input for coordination. See the [Autocomplete guide](guide/aria/autocomplete#auto-select-mode) for examples.
+- **`'highlight'`** - Highlights matching text without changing the input value. Users navigate with arrow keys and select with Enter.
+
+#### Signals
+
+| Property   | Type              | Description                     |
+| ---------- | ----------------- | ------------------------------- |
+| `expanded` | `Signal<boolean>` | Whether popup is currently open |
+
+#### Methods
+
+| Method     | Parameters | Description            |
+| ---------- | ---------- | ---------------------- |
+| `open`     | none       | Opens the combobox     |
+| `close`    | none       | Closes the combobox    |
+| `expand`   | none       | Expands the combobox   |
+| `collapse` | none       | Collapses the combobox |
+
+### ComboboxInput Directive
+
+The `ngComboboxInput` directive connects an input element to the combobox.
+
+#### Model
+
+| Property | Type     | Description                              |
+| -------- | -------- | ---------------------------------------- |
+| `value`  | `string` | Two-way bindable value using `[(value)]` |
+
+The input element receives keyboard handling and ARIA attributes automatically.
+
+### ComboboxPopup Directive
+
+The `ngComboboxPopup` directive (host directive) manages popup visibility and coordination. Typically used with `ngComboboxPopupContainer` in an `ng-template` or with CDK Overlay.
+
+### ComboboxPopupContainer Directive
+
+The `ngComboboxPopupContainer` directive marks an `ng-template` as the popup content.
+
+```html
+<ng-template ngComboboxPopupContainer>
+  <div ngListbox>...</div>
+</ng-template>
+```
+
+Used with Popover API or CDK Overlay for positioning.
+
+### ComboboxDialog Directive
+
+The `ngComboboxDialog` directive creates a modal combobox popup.
+
+```html
+<dialog ngComboboxDialog>
+  <div ngListbox>...</div>
+</dialog>
+```
+
+Use for modal popup behavior with backdrop and focus trap.
+
+### Related patterns and directives
+
+Combobox is the primitive directive for these documented patterns:
+
+- **[Autocomplete](guide/aria/autocomplete)** - Filtering and suggestions pattern (uses Combobox with filter modes)
+- **[Select](guide/aria/select)** - Single selection dropdown pattern (uses Combobox with `readonly`)
+- **[Multiselect](guide/aria/multiselect)** - Multiple selection pattern (uses Combobox with `readonly` + 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)
diff --git a/adev-es/src/content/guide/aria/grid.md b/adev-es/src/content/guide/aria/grid.md
new file mode 100644
index 0000000..2b162ae
--- /dev/null
+++ b/adev-es/src/content/guide/aria/grid.md
@@ -0,0 +1,214 @@
+<docs-decorative-header title="Grid">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/grid/" title="Grid ARIA pattern"/>
+  <docs-pill href="/api?query=grid#angular_aria_grid" title="Grid API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.ts">
+  <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.ts"/>
+  <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.html"/>
+  <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/overview/basic/app/app.css"/>
+</docs-code-multifile>
+
+## Usage
+
+Grids work well for data or interactive elements organized in rows and columns where users need keyboard navigation in multiple directions.
+
+**Use grids when:**
+
+- Building interactive data tables with editable or selectable cells
+- Creating calendars or date pickers
+- Implementing spreadsheet-like interfaces
+- Grouping interactive elements (buttons, checkboxes) to reduce tab stops on a page
+- Building interfaces requiring two-dimensional keyboard navigation
+
+**Avoid grids when:**
+
+- Displaying simple read-only tables (use semantic HTML `<table>` instead)
+- Showing single-column lists (use [Listbox](guide/aria/listbox) instead)
+- Displaying hierarchical data (use [Tree](guide/aria/tree) instead)
+- Building forms without tabular layout (use standard form controls)
+
+## Features
+
+- **Two-dimensional navigation** - Arrow keys move between cells in all directions
+- **Focus modes** - Choose between roving tabindex or activedescendant focus strategies
+- **Selection support** - Optional cell selection with single or multi-select modes
+- **Wrapping behavior** - Configure how navigation wraps at grid edges (continuous, loop, or nowrap)
+- **Range selection** - Select multiple cells with modifier keys or dragging
+- **Disabled states** - Disable the entire grid or individual cells
+- **RTL support** - Automatic right-to-left language navigation
+
+## Examples
+
+### Data table grid
+
+Use a grid for interactive tables where users need to navigate between cells using arrow keys. This example shows a basic data table with keyboard navigation.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/table/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/table/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/table/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/table/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/table/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/table/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Apply the `ngGrid` directive to the table element, `ngGridRow` to each row, and `ngGridCell` to each cell.
+
+### Calendar grid
+
+Calendars are a common use case for grids. This example shows a month view where users navigate dates using arrow keys.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/calendar/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/calendar/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/calendar/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/calendar/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/calendar/material/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/calendar/material/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/calendar/material/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/calendar/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/calendar/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/calendar/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/calendar/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/calendar/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Users can activate a date by pressing Enter or Space when focused on a cell.
+
+### Layout grid
+
+Use a layout grid to group interactive elements and reduce tab stops. This example shows a grid of pill buttons.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/pill-list/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/pill-list/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/pill-list/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/pill-list/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/pill-list/material/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/pill-list/material/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/pill-list/material/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/pill-list/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/grid/src/pill-list/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/grid/src/pill-list/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/grid/src/pill-list/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/grid/src/pill-list/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Instead of tabbing through each button, users navigate with arrow keys and only one button receives tab focus.
+
+### Selection and focus modes
+
+Enable selection with `[enableSelection]="true"` and configure how focus and selection interact.
+
+```angular-html
+<table ngGrid
+       [enableSelection]="true"
+       [selectionMode]="'explicit'"
+       [multi]="true"
+       [focusMode]="'roving'">
+  <tr ngGridRow>
+    <td ngGridCell>Cell 1</td>
+    <td ngGridCell>Cell 2</td>
+  </tr>
+</table>
+```
+
+**Selection modes:**
+
+- `follow`: Focused cell is automatically selected
+- `explicit`: Users select cells with Space or click
+
+**Focus modes:**
+
+- `roving`: Focus moves to cells using `tabindex` (better for simple grids)
+- `activedescendant`: Focus stays on grid container, `aria-activedescendant` indicates active cell (better for virtual scrolling)
+
+## APIs
+
+### Grid
+
+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 |
diff --git a/adev-es/src/content/guide/aria/listbox.md b/adev-es/src/content/guide/aria/listbox.md
new file mode 100644
index 0000000..a1863dc
--- /dev/null
+++ b/adev-es/src/content/guide/aria/listbox.md
@@ -0,0 +1,193 @@
+<docs-decorative-header title="Listbox">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" title="Listbox pattern"/>
+  <docs-pill href="/api?query=listbox#angular_aria_listbox" title="Listbox API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+A directive that displays a list of options for users to select from, supporting keyboard navigation, single or multiple selection, and screen reader support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Listbox is a foundational directive used by the [Select](guide/aria/select), [Multiselect](guide/aria/multiselect), and [Autocomplete](guide/aria/autocomplete) patterns. For most dropdown needs, use those documented patterns instead.
+
+Consider using listbox directly when:
+
+- **Building custom selection components** - Creating specialized interfaces with specific behavior
+- **Visible selection lists** - Displaying selectable items directly on the page (not in dropdowns)
+- **Custom integration patterns** - Integrating with unique popup or layout requirements
+
+Avoid listbox when:
+
+- **Navigation menus are needed** - Use the [Menu](guide/aria/menu) directive for actions and commands
+
+## Features
+
+Angular's listbox provides a fully accessible list implementation with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter or Space
+- **Screen Reader Support** - Built-in ARIA attributes including role="listbox"
+- **Single or Multiple Selection** - `multi` attribute controls selection mode
+- **Horizontal or Vertical** - `orientation` attribute for layout direction
+- **Type-ahead Search** - Type characters to jump to matching options
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+
+## Examples
+
+### Basic listbox
+
+Applications sometimes need selectable lists visible directly on the page rather than hidden in a dropdown. A standalone listbox provides keyboard navigation and selection for these visible list interfaces.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/basic/app/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/basic/app/app.html" />
+</docs-code-multifile>
+
+The `values` model signal provides two-way binding to the selected items. With `selectionMode="explicit"`, users press Space or Enter to select options. For dropdown patterns that combine listbox with combobox and overlay positioning, see the [Select](guide/aria/select) pattern.
+
+### Horizontal listbox
+
+Lists sometimes work better horizontally, such as toolbar-like interfaces or tab-style selections. The `orientation` attribute changes both the layout and keyboard navigation direction.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/listbox/src/horizontal/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+With `orientation="horizontal"`, left and right arrow keys navigate between options instead of up and down. The listbox automatically handles right-to-left (RTL) languages by reversing navigation direction.
+
+### Selection modes
+
+Listbox supports two selection modes that control when items become selected. Choose the mode that matches your interface's interaction pattern.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/listbox/src/modes/app/app.ts" />
+  <docs-code header="app.html" path="adev/src/content/examples/aria/listbox/src/modes/app/app.html" />
+</docs-code-multifile>
+
+The `'follow'` mode automatically selects the focused item, providing faster interaction when selection changes frequently. The `'explicit'` mode requires Space or Enter to confirm selection, preventing accidental changes while navigating. Dropdown patterns typically use `'follow'` mode for single selection.
+
+## APIs
+
+### Listbox Directive
+
+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                               |
+| -------- | ----- | ----------------------------------------- |
+| `values` | `V[]` | Two-way bindable array of selected values |
+
+#### Signals
+
+| Property | Type          | Description                           |
+| -------- | ------------- | ------------------------------------- |
+| `values` | `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   |
+
+### 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
+
+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-es/src/content/guide/aria/menu.md b/adev-es/src/content/guide/aria/menu.md
new file mode 100644
index 0000000..444325c
--- /dev/null
+++ b/adev-es/src/content/guide/aria/menu.md
@@ -0,0 +1,258 @@
+<docs-decorative-header title="Menu">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="Menu ARIA pattern"/>
+  <docs-pill href="/api/aria/menu/Menu" title="Menu API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+A menu offers a list of actions or options to users, typically appearing in response to a button click or right-click. Menus support keyboard navigation with arrow keys, submenus, checkboxes, radio buttons, and disabled items.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Menus work well for presenting lists of actions or commands that users can choose from.
+
+**Use menus when:**
+
+- Building application command menus (File, Edit, View)
+- Creating context menus (right-click actions)
+- Showing dropdown action lists
+- Implementing toolbar dropdowns
+- Organizing settings or options
+
+**Avoid menus when:**
+
+- Building site navigation (use navigation landmarks instead)
+- Creating form selects (use the [Select](guide/aria/select) component)
+- Switching between content panels (use [Tabs](guide/aria/tabs))
+- Showing collapsible content (use [Accordion](guide/aria/accordion))
+
+## Features
+
+- **Keyboard navigation** - Arrow keys, Home/End, and character search for efficient navigation
+- **Submenus** - Nested menu support with automatic positioning
+- **Menu types** - Standalone menus, triggered menus, and menubars
+- **Checkboxes and radios** - Toggle and selection menu items
+- **Disabled items** - Soft or hard disabled states with focus management
+- **Auto-close behavior** - Configurable close on selection
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Menu with trigger
+
+Create a dropdown menu by pairing a trigger button with a menu. The trigger opens and closes the menu.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The menu automatically closes when a user selects an item or presses Escape.
+
+### Context menu
+
+Context menus appear at the cursor position when users right-click an element.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-context/app/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-context/app/app.ts"/>
+  <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-context/app/app.html"/>
+</docs-code-multifile>
+
+Position the menu using the `contextmenu` event coordinates.
+
+### Standalone menu
+
+A standalone menu doesn't require a trigger and remains visible in the interface.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-standalone/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-standalone/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-standalone/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-standalone/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-standalone/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-standalone/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Standalone menus work well for always-visible action lists or navigation.
+
+### Disabled menu items
+
+Disable specific menu items using the `disabled` input. Control focus behavior with `softDisabled`.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menu/src/menu-trigger-disabled/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When `[softDisabled]="true"`, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## APIs
+
+### Menu
+
+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                    |
+| `focusFirstItem` | none       | Moves focus to the first menu item |
+
+### 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                    |
+| `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 |
diff --git a/adev-es/src/content/guide/aria/menubar.md b/adev-es/src/content/guide/aria/menubar.md
new file mode 100644
index 0000000..1abedb0
--- /dev/null
+++ b/adev-es/src/content/guide/aria/menubar.md
@@ -0,0 +1,198 @@
+<docs-decorative-header title="Menubar">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" title="Menubar ARIA pattern"/>
+  <docs-pill href="/api/aria/menu/MenuBar" title="Menubar API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+The manubar is a horizontal navigation bar that provides persistent access to application menus. Menubars organize commands into logical categories like File, Edit, and View, helping users discover and execute application features through keyboard or mouse interaction.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Menubars work well for organizing application commands into persistent, discoverable navigation.
+
+**Use menubars when:**
+
+- Building application command bars (such as File, Edit, View, Insert, Format)
+- Creating persistent navigation that stays visible across the interface
+- Organizing commands into logical top-level categories
+- Need horizontal menu navigation with keyboard support
+- Building desktop-style application interfaces
+
+**Avoid menubars when:**
+
+- Building dropdown menus for individual actions (use [Menu with trigger](guide/aria/menu) instead)
+- Creating context menus (use [Menu](guide/aria/menu) guide pattern)
+- Simple standalone action lists (use [Menu](guide/aria/menu) instead)
+- Mobile interfaces where horizontal space is limited
+- Navigation belongs in a sidebar or header navigation pattern
+
+## Features
+
+- **Horizontal navigation** - Left/Right arrow keys move between top-level categories
+- **Persistent visibility** - Always visible, not modal or dismissable
+- **Hover-to-open** - Submenus open on hover after first keyboard or click interaction
+- **Nested submenus** - Support multiple levels of menu depth
+- **Keyboard navigation** - Arrow keys, Enter/Space, Escape, and typeahead search
+- **Disabled states** - Disable entire menubar or individual items
+- **RTL support** - Automatic right-to-left language navigation
+
+## Examples
+
+### Basic menubar
+
+A menubar provides persistent access to application commands organized into top-level categories. Users navigate between categories with Left/Right arrows and open menus with Enter or Down arrow.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Press Right arrow to move between File, Edit, and View. Press Enter or Down arrow to open a menu and navigate submenu items with Up/Down arrows.
+
+### Disabled menubar items
+
+Disable specific menu items or the entire menubar to prevent interaction. Control whether disabled items can receive keyboard focus with the `softDisabled` input.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/disabled/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/disabled/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/disabled/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/disabled/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/disabled/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/disabled/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/disabled/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/disabled/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/disabled/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When `[softDisabled]="true"` on the menubar, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+### RTL support
+
+Menubars automatically adapt to right-to-left (RTL) languages. Arrow key navigation reverses direction, and submenus position on the left side.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/rtl/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/rtl/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/rtl/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/rtl/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/rtl/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/rtl/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/rtl/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/rtl/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/menubar/src/rtl/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `dir="rtl"` attribute enables RTL mode. Left arrow moves right, Right arrow moves left, maintaining natural navigation for RTL language users.
+
+## APIs
+
+The menubar pattern uses directives from Angular's Aria library. See the [Menu guide](guide/aria/menu) for complete API documentation.
+
+### 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 |
+
+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.
diff --git a/adev-es/src/content/guide/aria/multiselect.md b/adev-es/src/content/guide/aria/multiselect.md
new file mode 100644
index 0000000..dc27f4a
--- /dev/null
+++ b/adev-es/src/content/guide/aria/multiselect.md
@@ -0,0 +1,201 @@
+<docs-decorative-header title="Multiselect">
+</docs-decorative-header>
+
+## Overview
+
+A pattern that combines readonly combobox with multi-enabled listbox to create multiple-selection dropdowns with keyboard navigation and screen reader support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+The multiselect pattern works best when users need to choose multiple related items from a familiar set of options.
+
+Consider using this pattern when:
+
+- **Users need multiple selections** - Tags, categories, filters, or labels where multiple choices apply
+- **The option list is fixed** (fewer than 20 items) - Users can scan options without search
+- **Filtering content** - Multiple criteria can be active simultaneously
+- **Assigning attributes** - Labels, permissions, or features where multiple values make sense
+- **Related choices** - Options that logically work together (such as selecting multiple team members)
+
+Avoid this pattern when:
+
+- **Only single selection is needed** - Use the [Select pattern](guide/aria/select) for simpler single-choice dropdowns
+- **The list has more than 20 items with search needed** - Use the [Autocomplete pattern](guide/aria/autocomplete) with multiselect capability
+- **Most or all options will be selected** - A checklist pattern provides better visibility
+- **Choices are independent binary options** - Individual checkboxes communicate the choices more clearly
+
+## Features
+
+The multiselect pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, toggle with Space, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes including aria-multiselectable
+- **Selection Count Display** - Shows compact "Item + 2 more" pattern for multiple selections
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
+- **Persistent Selection** - Selected options remain visible with checkmarks after selection
+
+## Examples
+
+### Basic multiselect
+
+Users need to select multiple items from a list of options. A readonly combobox paired with a multi-enabled listbox provides familiar multiselect functionality with full accessibility support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `multi` attribute on `ngListbox` enables multiple selection. Press Space to toggle options, and the popup remains open for additional selections. The display shows the first selected item plus a count of remaining selections.
+
+### Multiselect with custom display
+
+Options often need visual indicators like icons or colors to help users identify choices. Custom templates within options allow rich formatting while the display value shows a compact summary.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/icons/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Each option displays an icon alongside its label. The display value updates to show the first selection's icon and text, followed by a count of additional selections. Selected options show a checkmark for clear visual feedback.
+
+### Controlled selection
+
+Forms sometimes need to limit the number of selections or validate user choices. Programmatic control over selection enables these constraints while maintaining accessibility.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/limited/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/limited/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/limited/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/limited/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/limited/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/limited/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/limited/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/multiselect/src/limited/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+This example limits selections to three items. When the limit is reached, unselected options become disabled, preventing additional selections. A message informs users about the constraint.
+
+## APIs
+
+The multiselect pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+
+### Combobox Directives
+
+The multiselect pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+
+#### Inputs
+
+| Property   | Type      | Default | Description                               |
+| ---------- | --------- | ------- | ----------------------------------------- |
+| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
+| `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.
+
+### 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 |
+
+#### Model
+
+| Property | Type    | Description                               |
+| -------- | ------- | ----------------------------------------- |
+| `values` | `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](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
diff --git a/adev-es/src/content/guide/aria/overview.md b/adev-es/src/content/guide/aria/overview.md
new file mode 100644
index 0000000..9536e59
--- /dev/null
+++ b/adev-es/src/content/guide/aria/overview.md
@@ -0,0 +1,102 @@
+<docs-decorative-header title="Angular Aria">
+</docs-decorative-header>
+
+## What is Angular Aria?
+
+Building accessible components seems straightforward, but implementing them according to the W3C Accessibility Guidelines requires significant effort and accessibility expertise.
+
+Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support. All you have to do is provide the HTML structure, CSS styling, and business logic!
+
+## Installation
+
+```shell
+npm install @angular/aria
+```
+
+## Showcase
+
+For example, let's take a toolbar menu. While it may appear to be a "simple" row of buttons tied with specific logic, keyboard navigation and screen readers add a lot of unexpected complexity to those unfamiliar with accessibility.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+In this one scenario, developers need to consider:
+
+- **Keyboard navigation**. Users need to open the menu with Enter or Space, navigate options with arrow keys, select with Enter, and close with Escape.
+- **Screen readers** need to announce the menu's state, the number of options, and which option has focus.
+- **Focus management** needs to move logically between the trigger and menu items.
+- **Right-to-left languages** require the ability to navigate in reverse.
+
+## What's included?
+
+Angular Aria includes directives with comprehensive documentation, working examples and API references for common interactive patterns:
+
+### Search and selection
+
+| Component                               | Description                                                    |
+| --------------------------------------- | -------------------------------------------------------------- |
+| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type |
+| [Listbox](guide/aria/listbox)           | Single or multi-select option lists with keyboard navigation   |
+| [Select](guide/aria/select)             | Single-selection dropdown pattern with keyboard navigation     |
+| [Multiselect](guide/aria/multiselect)   | Multiple-selection dropdown pattern with compact display       |
+| [Combobox](guide/aria/combobox)         | Primitive directive that coordinates a text input with a popup |
+
+### Navigation and call to actions
+
+| Component                     | Description                                                |
+| ----------------------------- | ---------------------------------------------------------- |
+| [Menu](guide/aria/menu)       | Dropdown menus with nested submenus and keyboard shortcuts |
+| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus |
+| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation  |
+
+### Content organization
+
+| Component                         | Description                                                            |
+| --------------------------------- | ---------------------------------------------------------------------- |
+| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively |
+| [Tabs](guide/aria/tabs)           | Tabbed interfaces with automatic or manual activation modes            |
+| [Tree](guide/aria/tree)           | Hierarchical lists with expand/collapse functionality                  |
+| [Grid](guide/aria/grid)           | Two-dimensional data display with cell-by-cell keyboard navigation     |
+
+## When to use Angular Aria
+
+Angular Aria works well when you need accessible interactive components that are WCAG compliant with custom styling. Examples include:
+
+- **Building a design system** - Your team maintains a component library with specific visual standards that need accessible implementations
+- **Enterprise component libraries** - You're creating reusable components for multiple applications within an organization
+- **Custom brand requirements** - The interface needs to match precise design specifications that pre-styled component libraries cannot easily accommodate
+
+## When not to use Angular Aria
+
+Angular Aria might not fit every scenario:
+
+- **Pre-styled components** - If you need components that look complete without custom styling, use Angular Material instead
+- **Simple forms** - Native HTML form controls like `<button>` and `<input type="radio">` provide built-in accessibility for straightforward use cases
+- **Rapid prototyping** - When validating concepts quickly, pre-styled component libraries reduce initial development time
+
+## Next steps
+
+Check out a component from the side nav or [list above](#whats-included), or start with [Toolbar](guide/aria/toolbar) to see a complete example of how Angular Aria directives work!
diff --git a/adev-es/src/content/guide/aria/select.md b/adev-es/src/content/guide/aria/select.md
new file mode 100644
index 0000000..fa7f431
--- /dev/null
+++ b/adev-es/src/content/guide/aria/select.md
@@ -0,0 +1,193 @@
+<docs-decorative-header title="Select">
+</docs-decorative-header>
+
+## Overview
+
+A pattern that combines readonly combobox with listbox to create single-selection dropdowns with keyboard navigation and screen reader support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+The select pattern works best when users need to choose a single value from a familiar set of options.
+
+Consider using this pattern when:
+
+- **The option list is fixed** (fewer than 20 items) - Users can scan and choose without filtering
+- **Options are familiar** - Users recognize the choices without needing to search
+- **Forms need standard fields** - Country, state, category, or status selection
+- **Settings and configuration** - Dropdown menus for preferences or options
+- **Clear option labels** - Each choice has a distinct, scannable name
+
+Avoid this pattern when:
+
+- **The list has more than 20 items** - Use the [Autocomplete pattern](guide/aria/autocomplete) for better filtering
+- **Users need to search options** - [Autocomplete](guide/aria/autocomplete) provides text input and filtering
+- **Multiple selection is needed** - Use the [Multiselect pattern](guide/aria/multiselect) instead
+- **Very few options exist (2-3)** - Radio buttons provide better visibility of all choices
+
+## Features
+
+The select pattern combines [Combobox](guide/aria/combobox) and [Listbox](guide/aria/listbox) directives to provide a fully accessible dropdown with:
+
+- **Keyboard Navigation** - Navigate options with arrow keys, select with Enter, close with Escape
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Custom Display** - Show selected values with icons, formatting, or rich content
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Smart Positioning** - CDK Overlay handles viewport edges and scrolling
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+
+## Examples
+
+### Basic select
+
+Users need a standard dropdown to choose from a list of values. A readonly combobox paired with a listbox provides the familiar select experience with full accessibility support.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+The `readonly` attribute on `ngCombobox` prevents text input while preserving keyboard navigation. Users interact with the dropdown using arrow keys and Enter, just like a native select element.
+
+### Select with custom display
+
+Options often need visual indicators like icons or badges to help users identify choices quickly. Custom templates within options allow rich formatting while maintaining accessibility.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/icons/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Each option displays an icon alongside the label. The selected value updates to show the chosen option's icon and text, providing clear visual feedback.
+
+### Disabled select
+
+Selects can be disabled to prevent user interaction when certain form conditions aren't met. The disabled state provides visual feedback and prevents keyboard interaction.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/disabled/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/disabled/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/disabled/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/disabled/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/disabled/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/disabled/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/disabled/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/disabled/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/select/src/disabled/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/select/src/disabled/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/select/src/disabled/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When disabled, the select shows a disabled visual state and blocks all user interaction. Screen readers announce the disabled state to assistive technology users.
+
+## APIs
+
+The select pattern uses the following directives from Angular's Aria library. See the full API documentation in the linked guides.
+
+### Combobox Directives
+
+The select pattern uses `ngCombobox` with the `readonly` attribute to prevent text input while preserving keyboard navigation.
+
+#### Inputs
+
+| Property   | Type      | Default | Description                               |
+| ---------- | --------- | ------- | ----------------------------------------- |
+| `readonly` | `boolean` | `false` | Set to `true` to create dropdown behavior |
+| `disabled` | `boolean` | `false` | Disables the entire select                |
+
+See the [Combobox API documentation](guide/aria/combobox#apis) for complete details on all available inputs and signals.
+
+### Listbox Directives
+
+The select pattern uses `ngListbox` for the dropdown list and `ngOption` for each selectable item.
+
+#### Model
+
+| Property | Type    | Description                                                                  |
+| -------- | ------- | ---------------------------------------------------------------------------- |
+| `values` | `any[]` | Two-way bindable array of selected values (contains single value for select) |
+
+See the [Listbox API documentation](guide/aria/listbox#apis) for complete details on listbox configuration, selection modes, and option properties.
+
+### Positioning
+
+The select pattern integrates with [CDK Overlay](api/cdk/overlay/CdkConnectedOverlay) for smart positioning. Use `cdkConnectedOverlay` to handle viewport edges and scrolling automatically.
diff --git a/adev-es/src/content/guide/aria/tabs.md b/adev-es/src/content/guide/aria/tabs.md
new file mode 100644
index 0000000..29a292c
--- /dev/null
+++ b/adev-es/src/content/guide/aria/tabs.md
@@ -0,0 +1,296 @@
+<docs-decorative-header title="Tabs">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" title="Tabs ARIA pattern"/>
+  <docs-pill href="/api/aria/tabs/Tabs" title="Tabs API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+Tabs display layered content sections where only one panel is visible at a time. Users switch between panels by clicking tab buttons or using arrow keys to navigate the tab list.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Tabs work well for organizing related content into distinct sections where users switch between different views or categories.
+
+**Use tabs when:**
+
+- Organizing related content into distinct sections
+- Creating settings panels with multiple categories
+- Building documentation with multiple topics
+- Implementing dashboards with different views
+- Showing content where users need to switch contexts
+
+**Avoid tabs when:**
+
+- Building sequential forms or wizards (use a stepper pattern)
+- Navigating between pages (use router navigation)
+- Showing single content sections (no need for tabs)
+- Having more than 7-8 tabs (consider a different layout)
+
+## Features
+
+- **Selection modes** - Tabs activate automatically on focus or require manual activation
+- **Keyboard navigation** - Arrow keys, Home, and End for efficient tab navigation
+- **Orientation** - Horizontal or vertical tab list layouts
+- **Lazy content** - Tab panels render only when first activated
+- **Disabled tabs** - Disable individual tabs with focus management
+- **Focus modes** - Roving tabindex or activedescendant focus strategies
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Selection follows focus
+
+When selection follows focus, tabs activate immediately as you navigate with arrow keys. This provides instant feedback and works well for lightweight content.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/selection-follows-focus/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Set `[selectionMode]="'follow'"` on the tab list to enable this behavior.
+
+### Manual activation
+
+With manual activation, arrow keys move focus between tabs without changing the selected tab. Users press Space or Enter to activate the focused tab.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/explicit-selection/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/explicit-selection/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/explicit-selection/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/explicit-selection/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/explicit-selection/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/explicit-selection/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/explicit-selection/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/explicit-selection/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/explicit-selection/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/explicit-selection/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/explicit-selection/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/explicit-selection/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Use `[selectionMode]="'explicit'"` for heavy content panels to avoid unnecessary rendering.
+
+### Vertical tabs
+
+Arrange tabs vertically for interfaces like settings panels or navigation sidebars.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/vertical/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/vertical/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/vertical/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/vertical/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/vertical/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/vertical/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/vertical/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/vertical/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/vertical/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/vertical/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/vertical/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/vertical/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Set `[orientation]="'vertical'"` on the tab list. Navigation changes to Up/Down arrow keys.
+
+### Lazy content rendering
+
+Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're first shown.
+
+```angular-html
+<div ngTabs>
+  <ul ngTabList [(selectedTab)]="selectedTab">
+    <li ngTab value="tab1">Tab 1</li>
+    <li ngTab value="tab2">Tab 2</li>
+  </ul>
+
+  <div ngTabPanel value="tab1">
+    <ng-template ngTabContent>
+      <!-- This content only renders when Tab 1 is first shown -->
+      <app-heavy-component />
+    </ng-template>
+  </div>
+
+  <div ngTabPanel value="tab2">
+    <ng-template ngTabContent>
+      <!-- This content only renders when Tab 2 is first shown -->
+      <app-another-component />
+    </ng-template>
+  </div>
+</div>
+```
+
+By default, content remains in the DOM after the panel is hidden. Set `[preserveContent]="false"` to remove content when the panel is deactivated.
+
+### Disabled tabs
+
+Disable specific tabs to prevent user interaction. Control whether disabled tabs can receive keyboard focus.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/disabled/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/disabled/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/disabled/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/disabled/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/disabled/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/disabled/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/disabled/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/disabled/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tabs/src/disabled/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/tabs/src/disabled/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/tabs/src/disabled/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/tabs/src/disabled/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When `[softDisabled]="true"` on the tab list, disabled tabs can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled tabs are skipped during keyboard navigation.
+
+## APIs
+
+### Tabs
+
+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`                    | `false`        | 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      |
+| `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>
+```
diff --git a/adev-es/src/content/guide/aria/toolbar.md b/adev-es/src/content/guide/aria/toolbar.md
new file mode 100644
index 0000000..3f204d5
--- /dev/null
+++ b/adev-es/src/content/guide/aria/toolbar.md
@@ -0,0 +1,277 @@
+<docs-decorative-header title="Toolbar">
+</docs-decorative-header>
+
+<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>
+
+## Overview
+
+A container for grouping related controls and actions with keyboard navigation, commonly used for text formatting, toolbars, and command panels.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## Usage
+
+Toolbar works best for grouping related controls that users access frequently. Consider using toolbar when:
+
+- **Multiple related actions** - You have several controls that perform related functions (like text formatting buttons)
+- **Keyboard efficiency matters** - Users benefit from quick keyboard navigation through arrow keys
+- **Grouped controls** - You need to organize controls into logical sections with separators
+- **Frequent access** - Controls are used repeatedly within a workflow
+
+Avoid toolbar when:
+
+- A simple button group is sufficient - For just 2-3 unrelated actions, individual buttons work better
+- Controls aren't related - Toolbar implies a logical grouping; unrelated controls confuse users
+- Complex nested navigation - Deep hierarchies are better served by menus or navigation components
+
+## Features
+
+Angular's toolbar provides a fully accessible toolbar implementation with:
+
+- **Keyboard Navigation** - Navigate widgets with arrow keys, activate with Enter or Space
+- **Screen Reader Support** - Built-in ARIA attributes for assistive technologies
+- **Widget Groups** - Organize related widgets like radio button groups or toggle button groups
+- **Flexible Orientation** - Horizontal or vertical layouts with automatic keyboard navigation
+- **Signal-Based Reactivity** - Reactive state management using Angular signals
+- **Bidirectional Text Support** - Automatically handles right-to-left (RTL) languages
+- **Configurable Focus** - Choose between wrapping navigation or hard stops at edges
+
+## Examples
+
+### Basic horizontal toolbar
+
+Horizontal toolbars organize controls from left to right, matching the common pattern in text editors and design tools. Arrow keys navigate between widgets, maintaining focus within the toolbar until users press Tab to move to the next page element.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/basic/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+### Vertical toolbar
+
+Vertical toolbars stack controls top to bottom, useful for side panels or vertical command palettes. Up and down arrow keys navigate between widgets.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/vertical/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/vertical/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/vertical/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/vertical/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/vertical/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/vertical/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+### Widget groups
+
+Widget groups contain related controls that work together, like text alignment options or list formatting choices. Groups maintain their own internal state while participating in toolbar navigation.
+
+In the examples above, the alignment buttons are wrapped in `ngToolbarWidgetGroup` with `role="radiogroup"` to create a mutually exclusive selection group.
+
+The `multi` input controls whether multiple widgets within a group can be selected simultaneously:
+
+```html {highlight: [15]}
+<!-- Single selection (radio group) -->
+<div
+  ngToolbarWidgetGroup
+  role="radiogroup"
+  aria-label="Alignment"
+>
+  <button ngToolbarWidget value="left">Left</button>
+  <button ngToolbarWidget value="center">Center</button>
+  <button ngToolbarWidget value="right">Right</button>
+</div>
+
+<!-- Multiple selection (toggle group) -->
+<div
+  ngToolbarWidgetGroup
+  [multi]="true"
+  aria-label="Formatting"
+>
+  <button ngToolbarWidget value="bold">Bold</button>
+  <button ngToolbarWidget value="italic">Italic</button>
+  <button ngToolbarWidget value="underline">Underline</button>
+</div>
+```
+
+### Disabled widgets
+
+Toolbars support two disabled modes:
+
+1. **Soft-disabled** widgets remain focusable but visually indicate they're unavailable
+2. **Hard-disabled** widgets are completely removed from keyboard navigation.
+
+By default, `softDisabled` is `true`, which allows disabled widgets to still receive focus. If you want to enable hard-disabled mode, set `[softDisabled]="false"` on the toolbar.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/disabled/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/disabled/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/disabled/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/disabled/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/disabled/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/disabled/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+### Right-to-left (RTL) support
+
+Toolbars automatically support right-to-left languages. Wrap the toolbar in a container with `dir="rtl"` to reverse the layout and keyboard navigation direction. Arrow key navigation adjusts automatically: left arrow moves to the next widget, right arrow to the previous.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/rtl/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/rtl/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/rtl/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/rtl/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Material">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/rtl/material/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.ts">
+      <docs-code header="app.ts" path="adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.ts"/>
+      <docs-code header="app.html" path="adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.html"/>
+      <docs-code header="app.css" path="adev/src/content/examples/aria/toolbar/src/rtl/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+## APIs
+
+### Toolbar Directive
+
+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                 |
+
+### 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>
diff --git a/adev-es/src/content/guide/aria/tree.md b/adev-es/src/content/guide/aria/tree.md
new file mode 100644
index 0000000..712ab9c
--- /dev/null
+++ b/adev-es/src/content/guide/aria/tree.md
@@ -0,0 +1,230 @@
+<docs-decorative-header title="Tree">
+</docs-decorative-header>
+
+<docs-pill-row>
+  <docs-pill href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" title="Tree ARIA pattern"/>
+  <docs-pill href="/api/aria/tree/Tree" title="Tree API Reference"/>
+</docs-pill-row>
+
+## Overview
+
+A tree displays hierarchical data where items can expand to reveal children or collapse to hide them. Users navigate with arrow keys, expand and collapse nodes, and optionally select items for navigation or data selection scenarios.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.ts">
+  <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.ts"/>
+  <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html"/>
+  <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css"/>
+</docs-code-multifile>
+
+## Usage
+
+Trees work well for displaying hierarchical data where users need to navigate through nested structures.
+
+**Use trees when:**
+
+- Building file system navigation
+- Showing folder and document hierarchies
+- Creating nested menu structures
+- Displaying organization charts
+- Browsing hierarchical data
+- Implementing site navigation with nested sections
+
+**Avoid trees when:**
+
+- Displaying flat lists (use [Listbox](guide/aria/listbox) instead)
+- Showing data tables (use [Grid](guide/aria/grid) instead)
+- Creating simple dropdowns (use [Select](guide/aria/select) instead)
+- Building breadcrumb navigation (use breadcrumb patterns)
+
+## Features
+
+- **Hierarchical navigation** - Nested tree structure with expand and collapse functionality
+- **Selection modes** - Single or multi-selection with explicit or follow-focus behavior
+- **Selection follows focus** - Optional automatic selection when focus changes
+- **Keyboard navigation** - Arrow keys, Home, End, and type-ahead search
+- **Expand/collapse** - Right/Left arrows or Enter to toggle parent nodes
+- **Disabled items** - Disable specific nodes with focus management
+- **Focus modes** - Roving tabindex or activedescendant focus strategies
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Navigation tree
+
+Use a tree for navigation where clicking items triggers actions rather than selecting them.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/nav/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/nav/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/nav/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/nav/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Set `[nav]="true"` to enable navigation mode. This uses `aria-current` to indicate the current page instead of selection.
+
+### Single selection
+
+Enable single selection for scenarios where users choose one item from the tree.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/single-select/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/single-select/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/single-select/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/single-select/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/single-select/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Leave `[multi]="false"` (the default) for single selection. Users press Space to select the focused item.
+
+### Multi-selection
+
+Allow users to select multiple items from the tree.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/multi-select/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/multi-select/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/multi-select/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/multi-select/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/multi-select/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/multi-select/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/multi-select/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/multi-select/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Set `[multi]="true"` on the tree. Users select items individually with Space or select ranges with Shift+Arrow keys.
+
+### Selection follows focus
+
+When selection follows focus, the focused item is automatically selected. This simplifies interaction for navigation scenarios.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/single-select-follow-focus/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+Set `[selectionMode]="'follow'"` on the tree. Selection automatically updates as users navigate with arrow keys.
+
+### Disabled tree items
+
+Disable specific tree nodes to prevent interaction. Control whether disabled items can receive focus.
+
+<docs-tab-group>
+  <docs-tab label="Basic">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/disabled-focusable/basic/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/disabled-focusable/basic/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/disabled-focusable/basic/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/disabled-focusable/basic/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Retro">
+    <docs-code-multifile preview hideCode path="adev/src/content/examples/aria/tree/src/disabled-focusable/retro/app/app.ts">
+      <docs-code header="TS" path="adev/src/content/examples/aria/tree/src/disabled-focusable/retro/app/app.ts"/>
+      <docs-code header="HTML" path="adev/src/content/examples/aria/tree/src/disabled-focusable/retro/app/app.html"/>
+      <docs-code header="CSS" path="adev/src/content/examples/aria/tree/src/disabled-focusable/retro/app/app.css"/>
+    </docs-code-multifile>
+  </docs-tab>
+</docs-tab-group>
+
+When `[softDisabled]="true"` on the tree, disabled items can receive focus but cannot be activated or selected. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## APIs
+
+### Tree
+
+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                                             |
+| ---------- | --------- | ------- | ------------------------------------------------------- |
+| `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 |
+
+### TreeGroup
+
+A container for child tree items.
+
+This directive has no inputs, outputs, or methods. It serves as a container to organize child `ngTreeItem` elements:
+
+```angular-html
+<li ngTreeItem value="parent">
+  Parent Item
+  <ul ngTreeGroup>
+    <li ngTreeItem value="child1">Child 1</li>
+    <li ngTreeItem value="child2">Child 2</li>
+  </ul>
+</li>
+```
diff --git a/adev-es/src/content/guide/components/anatomy-of-components.en.md b/adev-es/src/content/guide/components/anatomy-of-components.en.md
index e90ce36..5a301b2 100644
--- a/adev-es/src/content/guide/components/anatomy-of-components.en.md
+++ b/adev-es/src/content/guide/components/anatomy-of-components.en.md
@@ -5,9 +5,9 @@ TIP: This guide assumes you've already read the [Essentials Guide](essentials).
 
 Every component must have:
 
-* A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
-* An HTML template that controls what renders into the DOM
-* A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
+- A TypeScript class with _behaviors_ such as handling user input and fetching data from a server
+- An HTML template that controls what renders into the DOM
+- A [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) that defines how the component is used in HTML
 
 You provide Angular-specific information for a component by adding a `@Component` [decorator](https://www.typescriptlang.org/docs/handbook/decorators.html) on top of the TypeScript class:
 
@@ -58,7 +58,7 @@ Both `templateUrl` and `styleUrl` are relative to the directory in which the com
 To use a component, [directive](guide/directives), or [pipe](guide/templates/pipes), you must add
 it to the `imports` array in the `@Component` decorator:
 
-```angular-ts
+```ts
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
@@ -70,7 +70,7 @@ import {ProfilePhoto} from './profile-photo';
 export class UserProfile { }
 ```
 
-By default, Angular components are *standalone*, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
+By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
 
 Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`.
 
@@ -97,8 +97,8 @@ You show a component by creating a matching HTML element in the template of _oth
 export class ProfilePhoto { }
 
 @Component({
-  imports: [ProfilePhoto],
-  template: `<profile-photo />`
+imports: [ProfilePhoto],
+template: `<profile-photo />`
 })
 export class UserProfile { }
 </docs-code>
@@ -121,5 +121,4 @@ flowchart TD
     E[UserBio]
 ```
 
-
 This tree structure is important to understanding several other Angular concepts, including [dependency injection](guide/di) and [child queries](guide/components/queries).
diff --git a/adev-es/src/content/guide/components/anatomy-of-components.md b/adev-es/src/content/guide/components/anatomy-of-components.md
index 47dad80..688adff 100644
--- a/adev-es/src/content/guide/components/anatomy-of-components.md
+++ b/adev-es/src/content/guide/components/anatomy-of-components.md
@@ -5,9 +5,9 @@ SUGERENCIA: Esta guía asume que ya has leído [Guía de Esenciales](essentials)
 
 Cada componente debe tener:
 
-* Una clase TypeScript con _comportamientos_ como el manejo de la entrada del usuario y la obtención de datos desde un servidor
-* Una plantilla HTML que controla lo que se renderiza en el DOM
-* Un [selector CSS](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) que define cómo se utiliza el componente en el HTML
+- Una clase TypeScript con _comportamientos_ como el manejo de la entrada del usuario y la obtención de datos desde un servidor
+- Una plantilla HTML que controla lo que se renderiza en el DOM
+- Un [selector CSS](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Styling_basics/Basic_selectors) que define cómo se utiliza el componente en el HTML
 
 Puedes proporcionar información específica de Angular para un componente agregando un [decorador](https://www.typescriptlang.org/docs/handbook/decorators.html) `@Component` en la parte superior de la clase TypeScript:
 
@@ -58,7 +58,7 @@ Tanto `templateUrl` como `styleUrls` son relativos al directorio en el que resid
 Para usar un component, [directive](guide/directives), o [pipe](guide/templates/pipes), debes agregarlo al arreglo de 
 `imports` en el decorador `@Component`:
 
-```angular-ts
+```ts
 import {ProfilePhoto} from './profile-photo';
 
 @Component({
@@ -70,7 +70,7 @@ import {ProfilePhoto} from './profile-photo';
 export class UserProfile { }
 ```
 
-Por defecto, los componentes de Angular son *independientes* (standalone), lo que significa que puedes agregarlos directamente al arreglo `imports` de otros componentes. Los componentes creados con una versión anterior de Angular pueden especificar `standalone: false` en su decorador `@Component`. Para estos componentes, en su lugar importas el `NgModule` en el que está definido el componente. Consulta la [guía completa de `NgModule`](guide/ngmodules) para detalles.
+Por defecto, los componentes de Angular son _independientes_ (standalone), lo que significa que puedes agregarlos directamente al arreglo `imports` de otros componentes. Los componentes creados con una versión anterior de Angular pueden especificar `standalone: false` en su decorador `@Component`. Para estos componentes, en su lugar importas el `NgModule` en el que está definido el componente. Consulta la [guía completa de `NgModule`](guide/ngmodules) para detalles.
 
 Importante: En versiones de Angular anteriores a 19.0.0, la opción `standalone` por defecto es `false`.
 
@@ -97,8 +97,8 @@ Muestras un componente creando un elemento HTML coincidente en la plantilla de _
 export class ProfilePhoto { }
 
 @Component({
-  imports: [ProfilePhoto],
-  template: `<profile-photo />`
+imports: [ProfilePhoto],
+template: `<profile-photo />`
 })
 export class UserProfile { }
 </docs-code>
@@ -121,5 +121,4 @@ flowchart TD
     E[UserBio]
 ```
 
-
 Esta estructura de árbol es importante para entender varios otros conceptos de Angular, incluyendo [inyección de dependencias](guide/di) y [consultas de componentes hijos](guide/components/queries).
diff --git a/adev-es/src/content/guide/components/content-projection.md b/adev-es/src/content/guide/components/content-projection.md
index 7a5ae1a..efa351c 100644
--- a/adev-es/src/content/guide/components/content-projection.md
+++ b/adev-es/src/content/guide/components/content-projection.md
@@ -18,7 +18,7 @@ export class CustomCard {/* ... */}
 ```angular-ts
 @Component({
   selector: 'custom-card',
-  template: '<div class="card-shadow"> <ng-content></ng-content> </div>',
+  template: '<div class="card-shadow"> <ng-content/> </div>',
 })
 export class CustomCard {/* ... */}
 ```
@@ -177,7 +177,7 @@ elements that don't match one of the component's placeholders do not render into
 
 ## Fallback content
 
-Angular can show *fallback content* for a component's `<ng-content>` placeholder if that component doesn't have any matching child content. You can specify fallback content by adding child content to the `<ng-content>` element itself.
+Angular can show _fallback content_ for a component's `<ng-content>` placeholder if that component doesn't have any matching child content. You can specify fallback content by adding child content to the `<ng-content>` element itself.
 
 ```angular-html
 <!-- Component template -->
diff --git a/adev-es/src/content/guide/components/host-elements.md b/adev-es/src/content/guide/components/host-elements.md
index b9566e0..38f5080 100644
--- a/adev-es/src/content/guide/components/host-elements.md
+++ b/adev-es/src/content/guide/components/host-elements.md
@@ -37,7 +37,7 @@ In the above example, `<profile-photo>` is the host element of the `ProfilePhoto
 
 ## Binding to the host element
 
-A component can bind properties, attributes, and events to its host element. This behaves
+A component can bind properties, attributes, styles and events to its host element. This behaves
 identically to bindings on elements inside the component's template, but instead defined with
 the `host` property in the `@Component` decorator:
 
@@ -48,6 +48,7 @@ the `host` property in the `@Component` decorator:
     'role': 'slider',
     '[attr.aria-valuenow]': 'value',
     '[class.active]': 'isActive()',
+    '[style.background]' : `hasError() ? 'red' : 'green'`,
     '[tabIndex]': 'disabled ? -1 : 0',
     '(keydown)': 'updateValue($event)',
   },
@@ -56,6 +57,7 @@ export class CustomSlider {
   value: number = 0;
   disabled: boolean = false;
   isActive = signal(false);
+  hasError = signal(false);
   updateValue(event: KeyboardEvent) { /* ... */ }
 
   /* ... */
@@ -69,7 +71,7 @@ decorator to class members.
 
 `@HostBinding` lets you bind host properties and attributes to properties and getters:
 
-```angular-ts
+```ts
 @Component({
   /* ... */
 })
@@ -98,8 +100,10 @@ export class CustomSlider {
 }
 ```
 
-**Always prefer using the `host` property over `@HostBinding` and `@HostListener`.** These
+<docs-callout critical title="Prefer using the `host` property over the decorators">
+  **Always prefer using the `host` property over `@HostBinding` and `@HostListener`.** These
 decorators exist exclusively for backwards compatibility.
+</docs-callout>
 
 ## Binding collisions
 
@@ -126,3 +130,58 @@ In cases like this, the following rules determine which value wins:
 - If both values are static, the instance binding wins.
 - If one value is static and the other dynamic, the dynamic value wins.
 - If both values are dynamic, the component's host binding wins.
+
+## Styling with CSS custom properties
+
+Developers often rely on [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) to enable a flexible configuration of their component's styles.
+You can set such custom properties on a host element with a [style binding][style binding](guide/templates/binding#css-style-properties).
+
+```angular-ts
+@Component({
+  /* ... */
+  host: {
+    '[style.--my-background]': 'color()',
+  }
+})
+export class MyComponent {
+  color = signal('lightgreen');
+}
+```
+
+In this example, the `--my-background` CSS custom property is bound to the `color` signal. The value of the custom property will automatically update whenever the `color` signal changes. This will affect the current component and all its children that rely on this custom property.
+
+### Setting custom properties on children compoents
+
+Alternatively, it is also possible to set css custom properties on the host element of children components with a [style binding](guide/templates/binding#css-style-properties).
+
+```angular-ts
+@Component({
+  selector: 'my-component',
+  template: `<my-child [style.--my-background]="color()">`,
+})
+export class MyComponent {
+  color = signal('lightgreen');
+}
+```
+
+## Injecting host element attributes
+
+Components and directives can read static attributes from their host element by using `HostAttributeToken` together with the [`inject`](api/core/inject) function.
+
+```ts
+import { Component, HostAttributeToken, inject } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  ...,
+})
+export class Button {
+  variation = inject(new HostAttributeToken('variation'));
+}
+```
+
+```angular-html
+<app-button variation="primary">Click me</app-button>
+```
+
+HELPFUL: `HostAttributeToken` throws an error if the attribute is missing, unless the injection is marked as optional.
diff --git a/adev-es/src/content/guide/components/inputs.md b/adev-es/src/content/guide/components/inputs.md
index 77cceea..73651d7 100644
--- a/adev-es/src/content/guide/components/inputs.md
+++ b/adev-es/src/content/guide/components/inputs.md
@@ -7,7 +7,7 @@ TIP: If you're familiar with other web frameworks, input properties are similar
 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**:
 
-<docs-code language="ts" highlight="[7]">
+```ts {highlight:[5]}
 import {Component, input} from '@angular/core';
 
 @Component({/*...*/})
@@ -15,7 +15,7 @@ export class CustomSlider {
   // Declare an input named 'value' with a default value of zero.
   value = input(0);
 }
-</docs-code>
+```
 
 This lets you bind to the property in a template:
 
@@ -25,7 +25,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:
 
-```typescript
+```ts
 @Component({/*...*/})
 export class CustomSlider {
   // TypeScript infers that this input is a number, returning InputSignal<number>.
@@ -37,7 +37,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`:
 
-```typescript
+```ts
 @Component({/*...*/})
 export class CustomSlider {
   // Produces an InputSignal<number | undefined> because `value` may not be set.
@@ -57,18 +57,18 @@ 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:
 
-<docs-code language="ts" highlight="[5]">
-import {Component, input} from '@angular/core';
+```ts {highlight:[5]}
+import {Component, input, computed} from '@angular/core';
 
 @Component({/*...*/})
 export class CustomSlider {
-  // Declare an input named 'value' with a default value of zero. 
+  // Declare an input named 'value' with a default value of zero.
   value = input(0);
 
   // Create a computed expression that reads the value input
-  label = computed(() => `The slider's value is ${this.value()}`); 
+  label = computed(() => `The slider's value is ${this.value()}`);
 }
-</docs-code>
+```
 
 Signals created by the `input` function are read-only.
 
@@ -76,13 +76,13 @@ Signals created by the `input` function are read-only.
 
 You can declare that an input is `required` by calling `input.required` instead of `input`:
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({/*...*/})
 export class CustomSlider {
   // Declare a required input named value. Returns an `InputSignal<number>`.
   value = input.required<number>();
 }
-</docs-code>
+```
 
 Angular enforces that required inputs _must_ be set when the component is used in a template. If you try to use a component without specifying all of its required inputs, Angular reports an error at build-time.
 
@@ -96,7 +96,7 @@ The `input` function accepts a config object as a second parameter that lets you
 
 You can specify a `transform` function to change the value of an input when it's set by Angular.
 
-<docs-code language="ts" highlight="[6]">
+```ts {highlight:[6]}
 @Component({
   selector: 'custom-slider',
   /*...*/
@@ -108,7 +108,7 @@ export class CustomSlider {
 function trimString(value: string | undefined): string {
   return value?.trim() ?? '';
 }
-</docs-code>
+```
 
 ```angular-html
 <custom-slider [label]="systemVolume" />
@@ -126,7 +126,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.
 
-<docs-code language="ts">
+```ts
 @Component({/*...*/})
 export class CustomSlider {
   widthPx = input('', {transform: appendPx});
@@ -135,7 +135,7 @@ export class CustomSlider {
 function appendPx(value: number): string {
   return `${value}px`;
 }
-</docs-code>
+```
 
 In the example above, the `widthPx` input accepts a `number` while the `InputSignal` property returns a `string`.
 
@@ -143,15 +143,15 @@ In the example above, the `widthPx` input accepts a `number` while the `InputSig
 
 Angular includes two built-in transform functions for the two most common scenarios: coercing values to boolean and numbers.
 
-<docs-code language="ts">
+```ts
 import {Component, input, booleanAttribute, numberAttribute} from '@angular/core';
 
 @Component({/*...*/})
 export class CustomSlider {
-  disabled = input(false, {transform: booleanAttribute}); 
-  value = input(0, {transform: numberAttribute}); 
+  disabled = input(false, {transform: booleanAttribute});
+  value = input(0, {transform: numberAttribute});
 }
-</docs-code>
+```
 
 `booleanAttribute` imitates the behavior of standard HTML [boolean attributes](https://developer.mozilla.org/docs/Glossary/Boolean/HTML), where the
 _presence_ of the attribute indicates a "true" value. However, Angular's `booleanAttribute` treats the literal string `"false"` as the boolean `false`.
@@ -162,12 +162,12 @@ _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.
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({/*...*/})
 export class CustomSlider {
   value = input(0, {alias: 'sliderValue'});
 }
-</docs-code>
+```
 
 ```angular-html
 <custom-slider [sliderValue]="50" />
@@ -185,14 +185,14 @@ 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.
 
-```typescript
+```ts
 @Component({ /* ... */})
 export class CustomSlider {
   // Define a model input named "value".
   value = model(0);
 
   increment() {
-    // Update the model input with a new value, propagating the value to any bindings. 
+    // Update the model input with a new value, propagating the value to any bindings.
     this.value.update(oldValue => oldValue + 10);
   }
 }
@@ -205,7 +205,7 @@ export class CustomSlider {
   template: `<custom-slider [(value)]="volume" />`,
 })
 export class MediaControls {
-  // Create a writable signal for the `volume` local state. 
+  // Create a writable signal for the `volume` local state.
   volume = signal(0);
 }
 ```
@@ -238,7 +238,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".
 
-```angular-ts
+```ts
 @Directive({ /* ... */ })
 export class CustomCheckbox {
   // This automatically creates an output named "checkedChange".
@@ -273,12 +273,12 @@ 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:
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({...})
 export class CustomSlider {
   @Input() value = 0;
 }
-</docs-code>
+```
 
 Binding to an input is the same in both signal-based and decorator-based inputs:
 
@@ -294,12 +294,12 @@ 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.
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({...})
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
-</docs-code>
+```
 
 If you try to use a component without specifying all of its required inputs, Angular reports an error at build-time.
 
@@ -307,7 +307,7 @@ If you try to use a component without specifying all of its required inputs, Ang
 
 You can specify a `transform` function to change the value of an input when it's set by Angular. This transform function works identically to transform functions for signal-based inputs described above.
 
-<docs-code language="ts" highlight="[6]">
+```ts {highlight:[6]}
 @Component({
   selector: 'custom-slider',
   ...
@@ -316,19 +316,21 @@ export class CustomSlider {
   @Input({transform: trimString}) label = '';
 }
 
-function trimString(value: string | undefined) { return value?.trim() ?? ''; }
-</docs-code>
+function trimString(value: string | undefined) {
+  return value?.trim() ?? '';
+}
+```
 
 #### Input aliases
 
 You can specify the `alias` option to change the name of an input in templates.
 
-<docs-code language="ts" highlight="[3]">
+```ts {highlight:[3]}
 @Component({...})
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }
-</docs-code>
+```
 
 ```angular-html
 <custom-slider [sliderValue]="50" />
@@ -342,7 +344,7 @@ Input aliases work the same way as for signal-based inputs described above.
 
 When using decorator-based inputs, a property implemented with a getter and setter can be an input:
 
-<docs-code language="ts">
+```ts
 export class CustomSlider {
   @Input()
   get value(): number {
@@ -353,11 +355,11 @@ export class CustomSlider {
 
   private internalValue = 0;
 }
-</docs-code>
+```
 
 You can even create a _write-only_ input by only defining a public setter:
 
-<docs-code language="ts">
+```ts
 export class CustomSlider {
   @Input()
   set value(newValue: number) {
@@ -366,7 +368,7 @@ export class CustomSlider {
 
   private internalValue = 0;
 }
-</docs-code>
+```
 
 **Prefer using input transforms instead of getters and setters** if possible.
 
@@ -376,22 +378,22 @@ Avoid complex or costly getters and setters. Angular may invoke an input's sette
 
 In addition to the `@Input` decorator, you can also specify a component's inputs with the `inputs` property in the `@Component` decorator. This can be useful when a component inherits a property from a base class:
 
-<docs-code language="ts" highlight="[4]">
+```ts {highlight:[4]}
 // `CustomSlider` inherits the `disabled` property from `BaseSlider`.
 @Component({
   ...,
   inputs: ['disabled'],
 })
 export class CustomSlider extends BaseSlider { }
-</docs-code>
+```
 
 You can additionally specify an input alias in the `inputs` list by putting the alias after a colon in the string:
 
-<docs-code language="ts" highlight="[4]">
+```ts {highlight:[4]}
 // `CustomSlider` inherits the `disabled` property from `BaseSlider`.
 @Component({
   ...,
   inputs: ['disabled: sliderDisabled'],
 })
 export class CustomSlider extends BaseSlider { }
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/components/lifecycle.md b/adev-es/src/content/guide/components/lifecycle.md
index 09ae04a..6f07542 100644
--- a/adev-es/src/content/guide/components/lifecycle.md
+++ b/adev-es/src/content/guide/components/lifecycle.md
@@ -108,6 +108,8 @@ mapping each component input name to a `SimpleChange` object. Each `SimpleChange
 input's previous value, its current value, and a flag for whether this is the first time the input
 has changed.
 
+You can optionally pass the current class or this as the first generic argument for stronger type checking.
+
 ```ts
 @Component({
   /* ... */
@@ -115,12 +117,11 @@ has changed.
 export class UserProfile {
   name = input('');
 
-  ngOnChanges(changes: SimpleChanges) {
-    for (const inputName in changes) {
-      const inputValues = changes[inputName];
-      console.log(`Previous ${inputName} == ${inputValues.previousValue}`);
-      console.log(`Current ${inputName} == ${inputValues.currentValue}`);
-      console.log(`Is first ${inputName} change == ${inputValues.firstChange}`);
+  ngOnChanges(changes: SimpleChanges<UserProfile>) {
+    if (changes.name) {
+      console.log(`Previous: ${changes.name.previousValue}`);
+      console.log(`Current: ${changes.name.currentValue}`);
+      console.log(`Is first ${changes.name.firstChange}`);
     }
   }
 }
@@ -161,6 +162,12 @@ destroyed.
 You can also use `DestroyRef` to keep setup code close to cleanup code, rather than putting
 all cleanup code in the `ngOnDestroy` method.
 
+##### Detecting instance destruction
+
+`DestroyRef` provides a `destroyed` property that allows checking whether a given instance has already been destroyed. This is useful for avoiding operations on destroyed components, especially when dealing with delayed or asynchronous logic.
+
+By checking `destroyRef.destroyed`, you can prevent executing code after the instance has been cleaned up, avoiding potential errors such as `NG0911: View has already been destroyed.`.
+
 ### ngDoCheck
 
 The `ngDoCheck` method runs before every time Angular checks a component's template for changes.
@@ -237,7 +244,7 @@ See [Using DOM APIs](guide/components/dom-apis) for guidance on working with the
 
 Render callbacks do not run during server-side rendering or during build-time pre-rendering.
 
-#### after*Render phases
+#### after\*Render phases
 
 When using `afterEveryRender` or `afterNextRender`, you can optionally split the work into phases. The
 phase gives you control over the sequencing of DOM operations, letting you sequence _write_
@@ -285,8 +292,8 @@ There are four phases, run in the following order:
 | Phase            | Description                                                                                                                                                                                           |
 | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `earlyRead`      | Use this phase to read any layout-affecting DOM properties and styles that are strictly necessary for subsequent calculation. Avoid this phase if possible, preferring the `write` and `read` phases. |
-| `mixedReadWrite` | Default phase. Use for any operations need to both read and write layout-affecting properties and styles. Avoid this phase if possible, preferring the explicit `write` and `read` phases.            |
 | `write`          | Use this phase to write layout-affecting DOM properties and styles.                                                                                                                                   |
+| `mixedReadWrite` | Default phase. Use for any operations need to both read and write layout-affecting properties and styles. Avoid this phase if possible, preferring the explicit `write` and `read` phases.            |
 | `read`           | Use this phase to read any layout-affecting DOM properties.                                                                                                                                           |
 
 ## Lifecycle interfaces
diff --git a/adev-es/src/content/guide/components/outputs.md b/adev-es/src/content/guide/components/outputs.md
index 16593b4..57a302c 100644
--- a/adev-es/src/content/guide/components/outputs.md
+++ b/adev-es/src/content/guide/components/outputs.md
@@ -4,12 +4,12 @@ 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:
 
-<docs-code language="ts" highlight="3">
+```ts {highlight:[3]}
 @Component({/*...*/})
 export class ExpandablePanel {
   panelClosed = output<void>();
 }
-</docs-code>
+```
 
 ```angular-html
 <expandable-panel (panelClosed)="savePanelState()" />
@@ -17,9 +17,9 @@ export class ExpandablePanel {
 
 The `output` function returns an `OutputEmitterRef`. You can emit an event by calling the `emit` method on the `OutputEmitterRef`:
 
-<docs-code language="ts" highlight="">
+```ts
   this.panelClosed.emit();
-</docs-code>
+```
 
 Angular refers to properties initialized with the `output` function as **outputs**. You can use outputs to raise custom events, similar to native browser events like `click`.
 
@@ -35,7 +35,7 @@ The `output` function has special meaning to the Angular compiler. **You can exc
 
 You can pass event data when calling `emit`:
 
-<docs-code language="ts" highlight="">
+```ts
 // You can emit primitive values.
 this.valueChanged.emit(7);
 
@@ -44,7 +44,7 @@ this.thumbDropped.emit({
   pointerX: 123,
   pointerY: 456,
 })
-</docs-code>
+```
 
 When defining an event listener in a template, you can access the event data from the `$event` variable:
 
@@ -54,7 +54,7 @@ When defining an event listener in a template, you can access the event data fro
 
 Receive the event data in the parent component:
 
-<docs-code language="ts" highlight="">
+```ts
 @Component({
  /*...*/
 })
@@ -64,18 +64,18 @@ export class App {
   }
 }
 
-</docs-code>
+```
 
 ## Customizing output names
 
 The `output` function accepts a parameter that lets you specify a different name for the event in a template:
 
-<docs-code language="ts" highlight="">
+```ts
 @Component({/*...*/})
 export class CustomSlider {
   changed = output({alias: 'valueChanged'});
 }
-</docs-code>
+```
 
 ```angular-html
 <custom-slider (valueChanged)="saveVolume()" />
@@ -100,7 +100,7 @@ someComponentRef.instance.someEventProperty.subscribe(eventData => {
 
 Angular automatically cleans up event subscriptions when it destroys components with subscribers. Alternatively, you can manually unsubscribe from an event. The `subscribe` function returns an `OutputRefSubscription` with an `unsubscribe` method:
 
-```typescript
+```ts
 const eventSubscription = someComponent.someEventProperty.subscribe(eventData => {
   console.log(eventData);
 });
@@ -129,12 +129,12 @@ 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:
 
-<docs-code language="ts" highlight="">
+```ts
 @Component({/*...*/})
 export class ExpandablePanel {
   @Output() panelClosed = new EventEmitter<void>();
 }
-</docs-code>
+```
 
 You can emit an event by calling the `emit` method on the `EventEmitter`.
 
@@ -142,12 +142,12 @@ 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:
 
-<docs-code language="ts" highlight="">
+```ts
 @Component({/*...*/})
 export class CustomSlider {
   @Output('valueChanged') changed = new EventEmitter<number>();
 }
-</docs-code>
+```
 
 ```angular-html
 <custom-slider (valueChanged)="saveVolume()" />
@@ -159,22 +159,22 @@ This alias does not affect usage of the property in TypeScript code.
 
 In addition to the `@Output` decorator, you can also specify a component's outputs with the `outputs` property in the `@Component` decorator. This can be useful when a component inherits a property from a base class:
 
-<docs-code language="ts" highlight="">
+```ts
 // `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
 @Component({
   /*...*/
   outputs: ['valueChanged'],
 })
 export class CustomSlider extends BaseSlider {}
-</docs-code>
+```
 
 You can additionally specify an output alias in the `outputs` list by putting the alias after a colon in the string:
 
-<docs-code language="ts" highlight="">
+```ts
 // `CustomSlider` inherits the `valueChanged` property from `BaseSlider`.
 @Component({
   /*...*/
   outputs: ['valueChanged: volumeChanged'],
 })
 export class CustomSlider extends BaseSlider {}
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/components/programmatic-rendering.md b/adev-es/src/content/guide/components/programmatic-rendering.md
index 678d49d..51887ae 100644
--- a/adev-es/src/content/guide/components/programmatic-rendering.md
+++ b/adev-es/src/content/guide/components/programmatic-rendering.md
@@ -2,16 +2,16 @@
 
 TIP: This guide assumes you've already read the [Essentials Guide](essentials). Read that first if you're new to Angular.
 
-In addition to using a component directly in a template, you can also dynamically render components 
-programmatically. This is helpful for situations when a component is unknown initially (thus can not 
+In addition to using a component directly in a template, you can also dynamically render components
+programmatically. This is helpful for situations when a component is unknown initially (thus can not
 be referenced in a template directly) and it depends on some conditions.
 
 There are two main ways to render a component programmatically: in a template using `NgComponentOutlet`,
-or in your TypeScript code using `ViewContainerRef`. 
+or in your TypeScript code using `ViewContainerRef`.
 
-HELPFUL: for lazy-loading use-cases (for example if you want to delay loading of a heavy component), consider 
-using the built-in [`@defer` feature](/guide/templates/defer) instead. The `@defer` feature allows the code 
-of any components, directives, and pipes inside the `@defer` block to be extracted into separate JavaScript 
+HELPFUL: for lazy-loading use-cases (for example if you want to delay loading of a heavy component), consider
+using the built-in [`@defer` feature](/guide/templates/defer) instead. The `@defer` feature allows the code
+of any components, directives, and pipes inside the `@defer` block to be extracted into separate JavaScript
 chunks automatically and loaded only when necessary, based on the configured triggers.
 
 ## Using NgComponentOutlet
@@ -103,10 +103,10 @@ In the example above, clicking the "Load content" button results in the followin
 
 ## Lazy-loading components
 
-HELPFUL: if you want to lazy-load some components, you may consider using the built-in [`@defer` feature](/guide/templates/defer) 
+HELPFUL: if you want to lazy-load some components, you may consider using the built-in [`@defer` feature](/guide/templates/defer)
 instead.
 
-If your use-case is not covered by the `@defer` feature, you can use either `NgComponentOutlet` or 
+If your use-case is not covered by the `@defer` feature, you can use either `NgComponentOutlet` or
 `ViewContainerRef` with a standard JavaScript [dynamic import](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/import).
 
 ```angular-ts
@@ -119,9 +119,11 @@ If your use-case is not covered by the `@defer` feature, you can use either `NgC
     </section>
     <section>
       <h2>Advanced settings</h2>
-      <button (click)="loadAdvanced()" *ngIf="!advancedSettings">
-        Load advanced settings
-      </button>
+      @if(!advancedSettings) {
+        <button (click)="loadAdvanced()">
+          Load advanced settings
+        </button>
+      }
       <ng-container *ngComponentOutlet="advancedSettings" />
     </section>
   `
@@ -137,3 +139,117 @@ export class AdminSettings {
 ```
 
 The example above loads and displays the `AdvancedSettings` upon receiving a button click.
+
+## Binding inputs, outputs and setting host directives at creation
+
+When dynamically creating components, manually setting inputs and subscribing to outputs can be error-prone. You often need to write extra code just to wire up bindings after the component is instantiated.
+
+To simplify this, both `createComponent` and `ViewContainerRef.createComponent` support passing a `bindings` array with helpers like `inputBinding()`, `outputBinding()`, and `twoWayBinding()` to configure inputs and outputs up front. You can also specify a `directives` array to apply any host directives. This enables creating components programmatically with template-like bindings in a single, declarative call.
+
+### Host view using `ViewContainerRef.createComponent`
+
+`ViewContainerRef.createComponent` creates a component and automatically inserts its host view and host element into the container’s view hierarchy at the container’s location. Use this when the dynamic component should become part of the container’s logical and visual structure (for example, adding list items or inline UI).
+
+By contrast, the standalone `createComponent` API does not attach the new component to any existing view or DOM location — it returns a `ComponentRef` and gives you explicit control over where to place the component’s host element.
+
+```angular-ts
+import { Component, input, model, output } from "@angular/core";
+
+@Component({
+  selector: 'app-warning',
+  template: `
+      @if(isExpanded()) {
+        <section>
+            <p>Warning: Action needed!</p>
+            <button (click)="close.emit(true)">Close</button>
+        </section>
+      }
+  `
+})
+export class AppWarningComponent {
+  readonly canClose = input.required<boolean>();
+  readonly isExpanded = model<boolean>();
+  readonly close = output<boolean>();
+}
+```
+
+```ts
+import { Component, ViewContainerRef, signal, inputBinding, outputBinding, twoWayBinding, inject } from '@angular/core';
+import { FocusTrap } from "@angular/cdk/a11y";
+import { ThemeDirective } from '../theme.directive';
+
+@Component({
+  template: `<ng-container #container />`
+})
+export class HostComponent {
+  private vcr = inject(ViewContainerRef);
+  readonly canClose = signal(true);
+  readonly isExpanded = signal(true);
+
+  showWarning() {
+    const compRef = this.vcr.createComponent(AppWarningComponent, {
+      bindings: [
+        inputBinding('canClose', this.canClose),
+        twoWayBinding('isExpanded', this.isExpanded),
+        outputBinding<boolean>('close', (confirmed) => {
+          console.log('Closed with result:', confirmed);
+        })
+      ],
+      directives: [
+        FocusTrap,
+        { type: ThemeDirective, bindings: [inputBinding('theme', () => 'warning')] }
+      ]
+    });
+  }
+}
+```
+
+In the example above, the dynamic **AppWarningComponent** is created with its `canClose` input bound to a reactive signal, a two-way binding on its `isExpanded` state, and an output listener for `close`. The `FocusTrap` and `ThemeDirective` are attached to the host element via `directives`.
+
+### Popup attached to `document.body` with `createComponent` + `hostElement`
+
+Use this when rendering outside the current view hierarchy (e.g., overlays). The provided `hostElement` becomes the component’s host in the DOM, so Angular doesn’t create a new element matching the selector. Lets you configure **bindings** directly.
+
+```ts
+import {
+  ApplicationRef,
+  createComponent,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  inputBinding,
+  outputBinding,
+} from '@angular/core';
+import { PopupComponent } from './popup.component';
+
+@Injectable({ providedIn: 'root' })
+export class PopupService {
+  private readonly injector = inject(EnvironmentInjector);
+  private readonly appRef = inject(ApplicationRef);
+
+  show(message: string) {
+    // Create a host element for the popup
+    const host = document.createElement('popup-host');
+
+    // Create the component and bind in one call
+    const ref = createComponent(PopupComponent, {
+      environmentInjector: this.injector,
+      hostElement: host,
+      bindings: [
+        inputBinding('message', () => message),
+        outputBinding('closed', () => {
+          document.body.removeChild(host);
+          this.appRef.detachView(ref.hostView);
+          ref.destroy();
+        }),
+      ],
+    });
+
+    // Registers the component’s view so it participates in change detection cycle.
+    this.appRef.attachView(ref.hostView);
+    // Inserts the provided host element into the DOM (outside the normal Angular view hierarchy).
+    // This is what makes the popup visible on screen, typically used for overlays or modals.
+    document.body.appendChild(host);
+  }
+}
+```
diff --git a/adev-es/src/content/guide/components/queries.md b/adev-es/src/content/guide/components/queries.md
index 31b7374..075d2c7 100644
--- a/adev-es/src/content/guide/components/queries.md
+++ b/adev-es/src/content/guide/components/queries.md
@@ -15,7 +15,7 @@ There are two categories of query: **view queries** and **content queries.**
 
 View queries retrieve results from the elements in the component's _view_ — the elements defined in the component's own template. You can query for a single result with the `viewChild` function.
 
-<docs-code language="angular-ts" highlight="[14, 15]">
+```typescript {highlight: [14, 15]}
 @Component({
   selector: 'custom-card-header',
   /*...*/
@@ -32,7 +32,7 @@ export class CustomCard {
   header = viewChild(CustomCardHeader);
   headerText = computed(() => this.header()?.text);
 }
-</docs-code>
+```
 
 In this example, the `CustomCard` component queries for a child `CustomCardHeader` and uses the result in a `computed`.
 
@@ -40,7 +40,7 @@ If the query does not find a result, its value is `undefined`. This may occur if
 
 You can also query for multiple results with the `viewChildren` function.
 
-<docs-code language="angular-ts" highlight="[17, 19, 20, 21, 22, 23]">
+```typescript {highlight: [17]}
 @Component({
   selector: 'custom-card-action',
   /*...*/
@@ -51,8 +51,7 @@ export class CustomCardAction {
 
 @Component({
   selector: 'custom-card',
-  template: `
-    <custom-card-action>Save</custom-card-action>
+  template: `<custom-card-action>Save</custom-card-action>
     <custom-card-action>Cancel</custom-card-action>
   `,
 })
@@ -60,7 +59,7 @@ export class CustomCard {
   actions = viewChildren(CustomCardAction);
   actionsTexts = computed(() => this.actions().map(action => action.text);
 }
-</docs-code>
+```
 
 `viewChildren` creates a signal with an `Array` of the query results.
 
@@ -70,7 +69,7 @@ export class CustomCard {
 
 Content queries retrieve results from the elements in the component's _content_— the elements nested inside the component in the template where it's used. You can query for a single result with the `contentChild` function.
 
-<docs-code language="angular-ts" highlight="[14, 15]">
+```typescript {highlight: [14, 15]}
 @Component({
   selector: 'custom-toggle',
   /*...*/
@@ -81,26 +80,25 @@ export class CustomToggle {
 
 @Component({
   selector: 'custom-expando',
-  /*...*/
+  /* ... */
 })
 export class CustomExpando {
   toggle = contentChild(CustomToggle);
   toggleText = computed(() => this.toggle()?.text);
 }
 
-@Component({ 
-  /* ... */
-  // CustomToggle is used inside CustomExpando as content.  
-  template: `
+@Component({
+/* ... */
+// CustomToggle is used inside CustomExpando as content.
+template: `
     <custom-expando>
       <custom-toggle>Show</custom-toggle>
     </custom-expando>
   `
 })
-export class UserProfile { }
-</docs-code>
 
-In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in a `computed`.
+export class UserProfile { }
+```
 
 If the query does not find a result, its value is `undefined`. This may occur if the target element is absent or hidden by `@if`. Angular keeps the result of `contentChild` up to date as your application state changes.
 
@@ -108,7 +106,7 @@ By default, content queries find only _direct_ children of the component and do
 
 You can also query for multiple results with the `contentChildren` function.
 
-<docs-code language="angular-ts" highlight="[14, 16, 17, 18, 19, 20]">
+```typescript {highlight: [14, 16, 17, 18, 19, 20]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/
@@ -121,6 +119,7 @@ export class CustomMenuItem {
   selector: 'custom-menu',
   /*...*/
 })
+
 export class CustomMenu {
   items = contentChildren(CustomMenuItem);
   itemTexts = computed(() => this.items().map(item => item.text));
@@ -136,7 +135,7 @@ export class CustomMenu {
   `
 })
 export class UserProfile { }
-</docs-code>
+```
 
 `contentChildren` creates a signal with an `Array` of the query results.
 
@@ -146,7 +145,7 @@ export class UserProfile { }
 
 If a child query (`viewChild` or `contentChild`) does not find a result, its value is `undefined`. This may occur if the target element is hidden by a control flow statement like `@if` or `@for`. Because of this, the child queries return a signal that include `undefined` in their value type.
 
-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*.
+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_.
 
 ```angular-ts
 @Component({/* ... */})
@@ -216,6 +215,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({/*...*/})
 export class CustomExpando {
   toggle = contentChild(ExpandoContent, {read: TemplateRef});
@@ -230,9 +230,9 @@ Developers most commonly use `read` to retrieve `ElementRef` and `TemplateRef`.
 ### Content descendants
 
 By default, `contentChildren` queries find only _direct_ children of the component and do not traverse into descendants.
-`contentChild` queries do traverse into descendants by default. 
+`contentChild` queries do traverse into descendants by default.
 
-<docs-code language="angular-ts" highlight="[13, 14, 15, 16]">
+```typescript {highlight: [13, 14, 15, 16]}
 @Component({
   selector: 'custom-expando',
   /*...*/
@@ -244,8 +244,7 @@ export class CustomExpando {
 
 @Component({
   selector: 'user-profile',
-  template: `
-    <custom-expando>
+  template: `     <custom-expando>
       <some-other-component>
         <custom-toggle>Show</custom-toggle>
       </some-other-component>
@@ -253,13 +252,14 @@ export class CustomExpando {
   `
 })
 export class UserProfile { }
-</docs-code>
+```
 
 In the example above, `CustomExpando` cannot find `<custom-toggle>` with `contentChildren` because it is not a direct child of `<custom-expando>`. By setting `descendants: true`, you configure the query to traverse all descendants in the same template. Queries, however, _never_ pierce into components to traverse elements in other templates.
 
 View queries do not have this option because they _always_ traverse into descendants.
 
 ## Decorator-based queries
+
 TIP: While the Angular team recommends using the signal-based query function for new projects, the
 original decorator-based query APIs remain fully supported.
 
@@ -269,7 +269,7 @@ You can alternatively declare queries by adding the corresponding decorator to a
 
 You can query for a single result with the `@ViewChild` decorator.
 
-<docs-code language="angular-ts" highlight="[14, 16, 17, 18]">
+```typescript {highlight: [14, 16, 17, 18]}
 @Component({
   selector: 'custom-card-header',
   /*...*/
@@ -289,7 +289,7 @@ export class CustomCard {
     console.log(this.header.text);
   }
 }
-</docs-code>
+```
 
 In this example, the `CustomCard` component queries for a child `CustomCardHeader` and accesses the result in `ngAfterViewInit`.
 
@@ -299,7 +299,7 @@ Angular keeps the result of `@ViewChild` up to date as your application state ch
 
 You can also query for multiple results with the `@ViewChildren` decorator.
 
-<docs-code language="angular-ts" highlight="[17, 19, 20, 21, 22, 23]">
+```typescript {highlight: [17, 19, 20, 21, 22, 23]}
 @Component({
   selector: 'custom-card-action',
   /*...*/
@@ -324,7 +324,7 @@ export class CustomCard {
     });
   }
 }
-</docs-code>
+```
 
 `@ViewChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
 
@@ -332,7 +332,7 @@ export class CustomCard {
 
 You can query for a single result with the `@ContentChild` decorator.
 
-<docs-code language="angular-ts" highlight="[14, 16, 17, 18, 25]">
+```typescript {highlight: [14, 16, 17, 18, 25]}
 @Component({
   selector: 'custom-toggle',
   /*...*/
@@ -345,6 +345,7 @@ export class CustomToggle {
   selector: 'custom-expando',
   /*...*/
 })
+
 export class CustomExpando {
   @ContentChild(CustomToggle) toggle: CustomToggle;
 
@@ -362,7 +363,7 @@ export class CustomExpando {
   `
 })
 export class UserProfile { }
-</docs-code>
+```
 
 In this example, the `CustomExpando` component queries for a child `CustomToggle` and accesses the result in `ngAfterContentInit`.
 
@@ -372,7 +373,7 @@ Angular keeps the result of `@ContentChild` up to date as your application state
 
 You can also query for multiple results with the `@ContentChildren` decorator.
 
-<docs-code language="angular-ts" highlight="[14, 16, 17, 18, 19, 20]">
+```typescript {highlight: [15, 17, 18, 19, 20, 21]}
 @Component({
   selector: 'custom-menu-item',
   /*...*/
@@ -385,6 +386,7 @@ export class CustomMenuItem {
   selector: 'custom-menu',
   /*...*/
 })
+
 export class CustomMenu {
   @ContentChildren(CustomMenuItem) items: QueryList<CustomMenuItem>;
 
@@ -405,7 +407,7 @@ export class CustomMenu {
   `
 })
 export class UserProfile { }
-</docs-code>
+```
 
 `@ContentChildren` creates a `QueryList` object that contains the query results. You can subscribe to changes to the query results over time via the `changes` property.
 
diff --git a/adev-es/src/content/guide/components/selectors.en.md b/adev-es/src/content/guide/components/selectors.en.md
index eb77b16..b473b4d 100644
--- a/adev-es/src/content/guide/components/selectors.en.md
+++ b/adev-es/src/content/guide/components/selectors.en.md
@@ -118,8 +118,7 @@ prefix your components with `yt-`, with components like `yt-menu`, `yt-player`,
 your selectors like this makes it immediately clear where a particular component comes from. By
 default, the Angular CLI uses `app-`.
 
-Angular uses the `ng` selector prefix for its own framework APIs. Never use `ng` as a selector
-prefix for your own custom components.
+IMPORTANT: Angular uses the `ng` selector prefix for its own framework APIs. Never use `ng` as a selector prefix for your own custom components.
 
 ### When to use an attribute selector
 
diff --git a/adev-es/src/content/guide/components/styling.en.md b/adev-es/src/content/guide/components/styling.en.md
index 25d69d5..9125127 100644
--- a/adev-es/src/content/guide/components/styling.en.md
+++ b/adev-es/src/content/guide/components/styling.en.md
@@ -36,7 +36,7 @@ and [stylus](https://stylus-lang.com).
 ## Style scoping
 
 Every component has a **view encapsulation** setting that determines how the framework scopes a
-component's styles. There are three view encapsulation modes: `Emulated`, `ShadowDom`, and `None`.
+component's styles. There are four view encapsulation modes: `Emulated`, `ShadowDom`, `ExperimentalIsolatedShadowDom`, and `None`.
 You can specify the mode in the `@Component` decorator:
 
 <docs-code language="angular-ts" highlight="[3]">
@@ -83,9 +83,7 @@ using [the web standard Shadow DOM API](https://developer.mozilla.org/docs/Web/W
 When enabling this mode, Angular attaches a shadow root to the component's host element and renders
 the component's template and styles into the corresponding shadow tree.
 
-This mode strictly guarantees that _only_ that component's styles apply to elements in the
-component's template. Global styles cannot affect elements in a shadow tree and styles inside the
-shadow tree cannot affect elements outside of that shadow tree.
+Styles inside the shadow tree cannot affect elements outside of that shadow tree.
 
 Enabling `ShadowDom` encapsulation, however, impacts more than style scoping. Rendering the
 component in a shadow tree affects event propagation, interaction
@@ -93,6 +91,12 @@ with [the `<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Us
 and how browser developer tools show elements. Always understand the full implications of using
 Shadow DOM in your application before enabling this option.
 
+### ViewEncapsulation.ExperimentalIsolatedShadowDom
+
+Behaves as above, except this mode strictly guarantees that _only_ that component's styles apply to elements in the
+component's template. Global styles cannot affect elements in a shadow tree and styles inside the
+shadow tree cannot affect elements outside of that shadow tree.
+
 ### ViewEncapsulation.None
 
 This mode disables all style encapsulation for the component. Any styles associated with the
diff --git a/adev-es/src/content/guide/components/styling.md b/adev-es/src/content/guide/components/styling.md
index 29ef6dc..c09cdf3 100644
--- a/adev-es/src/content/guide/components/styling.md
+++ b/adev-es/src/content/guide/components/styling.md
@@ -1,6 +1,6 @@
 # Estilos en componentes
 
-TIP: Esta guía asume que ya has leído la [Guía de Fundamentos](essentials). Léela primero si eres nuevo en Angular.
+CONSEJO: Esta guía asume que ya has leído la [Guía de Fundamentos](essentials). Léela primero si eres nuevo en Angular.
 
 Los componentes pueden incluir opcionalmente estilos CSS que se aplican al DOM de ese componente:
 
@@ -36,7 +36,7 @@ y [stylus](https://stylus-lang.com).
 ## Alcance de estilos
 
 Cada componente tiene una configuración de **encapsulación de vista** que determina cómo el framework delimita el alcance
-de los estilos de un componente. Hay tres modos de encapsulación de vista: `Emulated`, `ShadowDom`, y `None`.
+de los estilos de un componente. Hay 4 modos de encapsulación de vista: `Emulated`, `ShadowDom`, `ExperimentalIsolatedShadowDom`, y `None`.
 Puedes especificar el modo en el decorador `@Component`:
 
 <docs-code language="angular-ts" highlight="[3]">
@@ -59,13 +59,13 @@ los estilos globales definidos fuera de un componente aún puede afectar element
 con encapsulación emulada.
 
 En modo emulado, Angular admite
-las pseudo-clases [`:host`](https://developer.mozilla.org/es/docs/Web/CSS/:host)
-y [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) 
-sin usar [Shadow DOM](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_shadow_DOM).
+la pseudo-clase [`:host`](https://developer.mozilla.org/docs/Web/CSS/:host).
+Aunque la pseudo-clase [`:host-context()`](https://developer.mozilla.org/docs/Web/CSS/:host-context) está
+deprecada en navegadores modernos, el compilador de Angular proporciona soporte completo para ella. Ambas pseudo-clases
+pueden usarse sin depender de [Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM) nativo.
 Durante la compilación, el framework transforma estas pseudo-clases en atributos para que no
 cumpla con las reglas de estas pseudo-clases nativas en tiempo de ejecución
-(ej. compatibilidad del navegador, especificidad). 
-El modo de encapsulación emulada de Angular no admite ninguna otra pseudo-clase relacionada con Shadow DOM,
+(ej. compatibilidad del navegador, especificidad). El modo de encapsulación emulada de Angular no admite ninguna otra pseudo-clase relacionada con Shadow DOM,
 como `::shadow` o `::part`.
 
 #### `::ng-deep`
@@ -78,20 +78,24 @@ compatibilidad hacia atrás.
 ### ViewEncapsulation.ShadowDom
 
 Este modo delimita el alcance de los estilos dentro de un componente
-usando [la API estándar web de Shadow DOM](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_shadow_DOM).
-Al habilitar este modo, Angular adjunta un shadow root (raíz de sombra) al elemento host del componente 
-y renderiza la plantilla y los estilos del componente en el árbol de sombra (shadow tree) correspondiente.
+usando [la API estándar web de Shadow DOM](https://developer.mozilla.org/docs/Web/Web_Components/Using_shadow_DOM).
+Al habilitar este modo, Angular adjunta un shadow root al elemento host del componente y renderiza
+la plantilla y los estilos del componente en el árbol de sombra correspondiente.
 
-Este modo garantiza estrictamente que _solo_ los estilos de ese componente se apliquen a elementos en la
-plantilla del componente. Los estilos globales no pueden afectar a elementos en un árbol de sombra y los estilos dentro del
-árbol de sombra no pueden afectar a elementos fuera de ese árbol de sombra.
+Los estilos dentro del árbol de sombra no pueden afectar a elementos fuera de ese árbol de sombra.
 
 Habilitar la encapsulación `ShadowDom`, sin embargo, impacta más que el alcance de estilos. Renderizar el
 componente en un árbol de sombra afecta la propagación de eventos, la interacción
-con [la API `<slot>`](https://developer.mozilla.org/es/docs/Web/API/Web_components/Using_templates_and_slots),
+con [la API `<slot>`](https://developer.mozilla.org/docs/Web/Web_Components/Using_templates_and_slots),
 y cómo las herramientas de desarrollador del navegador muestran elementos. Siempre entiende las implicaciones completas de usar
 Shadow DOM en tu aplicación antes de habilitar esta opción.
 
+### ViewEncapsulation.ExperimentalIsolatedShadowDom
+
+Se comporta como se describe arriba, excepto que este modo garantiza estrictamente que _solo_ los estilos de ese componente se apliquen a elementos en la
+plantilla del componente. Los estilos globales no pueden afectar a elementos en un árbol de sombra y los estilos dentro del
+árbol de sombra no pueden afectar a elementos fuera de ese árbol de sombra.
+
 ### ViewEncapsulation.None
 
 Este modo deshabilita toda la encapsulación de estilos para el componente. Cualquier estilo asociado con el
@@ -110,7 +114,7 @@ Angular no admite enlaces dentro de elementos de estilo.
 ## Referenciar archivos de estilo externos
 
 Las plantillas de componentes pueden
-usar [el elemento `<link>`](https://developer.mozilla.org/es/docs/Web/HTML/Reference/Elements/link) para
+usar [el elemento `<link>`](https://developer.mozilla.org/docs/Web/HTML/Element/link) para
 referenciar archivos CSS. Además, tu CSS puede
 usar [la regla at `@import`](https://developer.mozilla.org/es/docs/Web/CSS/@import) para referenciar
 archivos CSS. Angular trata estas referencias como estilos _externos_. Los estilos externos no se ven afectados por
diff --git a/adev-es/src/content/guide/di/creating-and-using-services.md b/adev-es/src/content/guide/di/creating-and-using-services.md
new file mode 100644
index 0000000..f8df513
--- /dev/null
+++ b/adev-es/src/content/guide/di/creating-and-using-services.md
@@ -0,0 +1,105 @@
+# Creating and using services
+
+Services are reusable pieces of code that can be shared across your Angular application. They typically handle data fetching, business logic, or other functionality that multiple components need to access.
+
+## Creating a service
+
+You can create a service with the [Angular CLI](tools/cli) with the following command:
+
+```bash
+ng generate service CUSTOM_NAME
+```
+
+This creates a dedicated `CUSTOM_NAME.ts` file in your `src` directory.
+
+You can also manually create a service by adding the `@Injectable()` decorator to a TypeScript class. This tells Angular that the service can be injected as a dependency.
+
+Here is an example of a service that allows users to add and request data:
+
+```ts
+// 📄 src/app/basic-data-store.ts
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class BasicDataStore {
+  private data: string[] = []
+
+  addData(item: string): void {
+   this.data.push(item)
+  }
+
+  getData(): string[] {
+    return [...this.data]
+  }
+}
+```
+
+## How services become available
+
+When you use `@Injectable({ providedIn: 'root' })` in your service, Angular:
+
+- **Creates a single instance** (singleton) for your entire application
+- **Makes it available everywhere** without any additional configuration
+- **Enables tree-shaking** so the service is only included in your JavaScript bundle if it's actually used
+
+This is the recommended approach for most services.
+
+## Injecting a service
+
+Once you've created a service with `providedIn: 'root'`, you can inject it anywhere in your application using the `inject()` function from `@angular/core`.
+
+### Injecting into a component
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { BasicDataStore } from './basic-data-store';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <div>
+      <p>{{ dataStore.getData() }}</p>
+      <button (click)="dataStore.addData('More data')">
+        Add more data
+      </button>
+    </div>
+  `
+})
+export class ExampleComponent {
+  dataStore = inject(BasicDataStore);
+}
+```
+
+### Injecting into another service
+
+```ts
+import { inject, Injectable } from '@angular/core';
+import { AdvancedDataStore } from './advanced-data-store';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BasicDataStore {
+  private advancedDataStore = inject(AdvancedDataStore);
+  private data: string[] = [];
+
+  addData(item: string): void {
+    this.data.push(item);
+  }
+
+  getData(): string[] {
+    return [...this.data, ...this.advancedDataStore.getData()];
+  }
+}
+```
+
+## Next steps
+
+While `providedIn: 'root'` covers most use cases, Angular offers additional ways to provide services for specialized scenarios:
+
+- **Component-specific instances** - When components need their own isolated service instances
+- **Manual configuration** - For services that require runtime configuration
+- **Factory providers** - For dynamic service creation based on runtime conditions
+- **Value providers** - For providing configuration objects or constants
+
+You can learn more about these advanced patterns in the next guide: [defining dependency providers](/guide/di/defining-dependency-providers).
diff --git a/adev-es/src/content/guide/di/creating-injectable-service.en.md b/adev-es/src/content/guide/di/creating-injectable-service.en.md
index ca3a9bd..f8b15a9 100644
--- a/adev-es/src/content/guide/di/creating-injectable-service.en.md
+++ b/adev-es/src/content/guide/di/creating-injectable-service.en.md
@@ -21,7 +21,7 @@ Angular helps you follow these principles by making it easy to factor your appli
 
 Here's an example of a service class that logs to the browser console:
 
-<docs-code header="src/app/logger.service.ts (class)" language="typescript">
+<docs-code header="logger.service.ts (class)" language="typescript">
 export class Logger {
   log(msg: unknown) { console.log(msg); }
   error(msg: unknown) { console.error(msg); }
@@ -33,23 +33,23 @@ Services can depend on other services.
 For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes.
 That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server:
 
-<docs-code header="src/app/hero.service.ts" language="typescript"
+<docs-code header="hero.service.ts" language="typescript"
            highlight="[7,8,12,13]">
 import { inject } from "@angular/core";
 
 export class HeroService {
-  private heroes: Hero[] = [];
+private heroes: Hero[] = [];
 
-  private backend = inject(BackendService);
-  private logger = inject(Logger);
+private backend = inject(BackendService);
+private logger = inject(Logger);
 
-  async getHeroes() {
-    // Fetch
-    this.heroes = await this.backend.getAll(Hero);
-    // Log
-    this.logger.log(`Fetched ${this.heroes.length} heroes.`);
-    return this.heroes;
-  }
+async getHeroes() {
+// Fetch
+this.heroes = await this.backend.getAll(Hero);
+// Log
+this.logger.log(`Fetched ${this.heroes.length} heroes.`);
+return this.heroes;
+}
 }
 </docs-code>
 
@@ -67,23 +67,23 @@ ng generate service heroes/hero
 
 This command creates the following default `HeroService`:
 
-<docs-code header="src/app/heroes/hero.service.ts (CLI-generated)" language="typescript">
-import { Injectable } from '@angular/core';
+```ts {header: 'heroes/hero.service.ts (CLI-generated)'}
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class HeroService {}
-</docs-code>
+```
 
 The `@Injectable()` decorator specifies that Angular can use this class in the DI system.
 The metadata, `providedIn: 'root'`, means that the `HeroService` is provided throughout the application.
 
 Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
+```ts {header: 'hero.service.ts'}
+import {Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
 
 @Injectable({
   // declares that this service should be created
@@ -95,7 +95,7 @@ export class HeroService {
     return HEROES;
   }
 }
-</docs-code>
+```
 
 For clarity and maintainability, it is recommended that you define components and services in separate files.
 
@@ -106,19 +106,19 @@ To inject a service as a dependency into a component, you can declare a class fi
 The following example specifies the `HeroService` in the `HeroListComponent`.
 The type of `heroService` is `HeroService`.
 
-<docs-code header="src/app/heroes/hero-list.component.ts" language="typescript">
-import { inject } from "@angular/core";
+```ts
+import {inject} from '@angular/core';
 
 export class HeroListComponent {
   private heroService = inject(HeroService);
 }
-</docs-code>
+```
 
 It is also possible to inject a service into a component using the component's constructor:
 
-<docs-code header="src/app/heroes/hero-list.component.ts (constructor signature)" language="typescript">
+```ts {header: 'hero-list.component.ts (constructor signature)'}
   constructor(private heroService: HeroService)
-</docs-code>
+```
 
 The `inject` method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component.
 
@@ -127,11 +127,10 @@ The `inject` method can be used in both classes and functions, while the constru
 When a service depends on another service, follow the same pattern as injecting into a component.
 In the following example, `HeroService` depends on a `Logger` service to report its activities:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[3,9,12]">
-import { inject, Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-import { Logger } from '../logger.service';
+```ts {header: 'hero.service.ts, highlight: [[3],[9],[12]]}
+import {inject, Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
+import {Logger} from '../logger.service';
 
 @Injectable({
   providedIn: 'root',
@@ -144,7 +143,7 @@ export class HeroService {
     return HEROES;
   }
 }
-</docs-code>
+```
 
 In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes.
 
diff --git a/adev-es/src/content/guide/di/creating-injectable-service.md b/adev-es/src/content/guide/di/creating-injectable-service.md
index 3f5a011..8a001f8 100644
--- a/adev-es/src/content/guide/di/creating-injectable-service.md
+++ b/adev-es/src/content/guide/di/creating-injectable-service.md
@@ -21,7 +21,7 @@ Angular te ayuda a seguir estos principios haciendo que sea fácil factorizar la
 
 Aquí tienes un ejemplo de una clase de servicio que registra en la consola del navegador:
 
-<docs-code header="src/app/logger.service.ts (class)" language="typescript">
+<docs-code header="logger.service.ts (class)" language="typescript">
 export class Logger {
   log(msg: unknown) { console.log(msg); }
   error(msg: unknown) { console.error(msg); }
@@ -33,23 +33,23 @@ Los servicios pueden depender de otros servicios.
 Por ejemplo, aquí tienes un `HeroService` que depende del servicio `Logger`, y también usa `BackendService` para obtener héroes.
 Ese servicio a su vez podría depender del servicio `HttpClient` para obtener héroes de forma asíncrona desde un servidor:
 
-<docs-code header="src/app/hero.service.ts" language="typescript"
+<docs-code header="hero.service.ts" language="typescript"
            highlight="[7,8,12,13]">
 import { inject } from "@angular/core";
 
 export class HeroService {
-  private heroes: Hero[] = [];
+private heroes: Hero[] = [];
 
-  private backend = inject(BackendService);
-  private logger = inject(Logger);
+private backend = inject(BackendService);
+private logger = inject(Logger);
 
-  async getHeroes() {
-    // Fetch
-    this.heroes = await this.backend.getAll(Hero);
-    // Log
-    this.logger.log(`Obtenidos ${this.heroes.length} héroes.`);
-    return this.heroes;
-  }
+async getHeroes() {
+// Fetch
+this.heroes = await this.backend.getAll(Hero);
+// Log
+this.logger.log(`Fetched ${this.heroes.length} heroes.`);
+return this.heroes;
+}
 }
 </docs-code>
 
@@ -67,23 +67,23 @@ ng generate service heroes/hero
 
 Este comando crea el siguiente `HeroService` por defecto:
 
-<docs-code header="src/app/heroes/hero.service.ts (CLI-generated)" language="typescript">
-import { Injectable } from '@angular/core';
+```ts {header: 'heroes/hero.service.ts (CLI-generated)'}
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class HeroService {}
-</docs-code>
+```
 
 El decorador `@Injectable()` especifica que Angular puede usar esta clase en el sistema DI.
 Los metadatos, `providedIn: 'root'`, significan que el `HeroService` se provee en toda la aplicación.
 
 Agrega un método `getHeroes()` que devuelva los héroes de `mock.heroes.ts` para obtener los datos simulados de héroes:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
+```ts {header: 'hero.service.ts'}
+import {Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
 
 @Injectable({
   // declara que este servicio debe ser creado
@@ -95,7 +95,7 @@ export class HeroService {
     return HEROES;
   }
 }
-</docs-code>
+```
 
 Para claridad y mantenibilidad, se recomienda que definas componentes y servicios en archivos separados.
 
@@ -106,19 +106,19 @@ Para inyectar un servicio como dependencia en un componente, puedes declarar un
 El siguiente ejemplo especifica el `HeroService` en el `HeroListComponent`.
 El tipo de `heroService` es `HeroService`.
 
-<docs-code header="src/app/heroes/hero-list.component.ts" language="typescript">
-import { inject } from "@angular/core";
+```ts
+import {inject} from '@angular/core';
 
 export class HeroListComponent {
   private heroService = inject(HeroService);
 }
-</docs-code>
+```
 
 También es posible inyectar un servicio en un componente usando el constructor del componente:
 
-<docs-code header="src/app/heroes/hero-list.component.ts (constructor signature)" language="typescript">
+```ts {header: 'hero-list.component.ts (constructor signature)'}
   constructor(private heroService: HeroService)
-</docs-code>
+```
 
 El método `inject` puede ser usado tanto en clases como en funciones, mientras que el método constructor naturalmente solo puede ser usado en un constructor de clase. Sin embargo, en cualquier caso una dependencia solo puede ser inyectada en un [contexto de inyección](guide/di/dependency-injection-context) válido, usualmente en la construcción o inicialización de un componente.
 
@@ -127,11 +127,10 @@ El método `inject` puede ser usado tanto en clases como en funciones, mientras
 Cuando un servicio depende de otro servicio, sigue el mismo patrón que inyectar en un componente.
 En el siguiente ejemplo, `HeroService` depende de un servicio `Logger` para reportar sus actividades:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[3,9,12]">
-import { inject, Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-import { Logger } from '../logger.service';
+```ts {header: 'hero.service.ts', highlight: [[3],[9],[12]]}
+import {inject, Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
+import {Logger} from '../logger.service';
 
 @Injectable({
   providedIn: 'root',
@@ -144,7 +143,7 @@ export class HeroService {
     return HEROES;
   }
 }
-</docs-code>
+```
 
 En este ejemplo, el método `getHeroes()` usa el servicio `Logger` registrando un mensaje cuando obtiene héroes.
 
diff --git a/adev-es/src/content/guide/di/defining-dependency-providers.md b/adev-es/src/content/guide/di/defining-dependency-providers.md
new file mode 100644
index 0000000..3702715
--- /dev/null
+++ b/adev-es/src/content/guide/di/defining-dependency-providers.md
@@ -0,0 +1,923 @@
+# Defining dependency providers
+
+Angular provides two ways to make services available for injection:
+
+1. **Automatic provision** - Using `providedIn` in the `@Injectable` 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.
+
+## Automatic provision for non-class dependencies
+
+While the `@Injectable` decorator with `providedIn: 'root'` works great for services (classes), you might need to provide other types of values globally - like configuration objects, functions, or primitive values. Angular provides `InjectionToken` for this purpose.
+
+### What is an InjectionToken?
+
+An `InjectionToken` is an object that Angular's dependency injection system uses to uniquely identify values for injection. Think of it as a special key that lets you store and retrieve any type of value in Angular's DI system:
+
+```ts
+import { InjectionToken } from '@angular/core';
+
+// Create a token for a string value
+export const API_URL = new InjectionToken<string>('api.url');
+
+// Create a token for a function
+export const LOGGER = new InjectionToken<(msg: string) => void>('logger.function');
+
+// Create a token for a complex type
+export interface Config {
+  apiUrl: string;
+  timeout: number;
+}
+export const CONFIG_TOKEN = new InjectionToken<Config>('app.config');
+```
+
+NOTE: The string parameter (e.g., `'api.url'`) is a description purely for debugging — Angular identifies tokens by their object reference, not this string.
+
+### InjectionToken with `providedIn: 'root'`
+
+An `InjectionToken` that has a `factory` results in `providedIn: 'root'` by default (but can be overidden via the `providedIn` prop).
+
+```ts
+// 📁 /app/config.token.ts
+import { InjectionToken } from '@angular/core';
+
+export interface AppConfig {
+  apiUrl: string;
+  version: string;
+  features: Record<string, boolean>;
+}
+
+// Globally available configuration using providedIn
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config', {
+  providedIn: 'root',
+  factory: () => ({
+    apiUrl: 'https://api.example.com',
+    version: '1.0.0',
+    features: {
+      darkMode: true,
+      analytics: false
+    }
+  })
+});
+
+// No need to add to providers array - available everywhere!
+@Component({
+  selector: 'app-header',
+  template: `<h1>Version: {{ config.version }}</h1>`
+})
+export class HeaderComponent {
+  config = inject(APP_CONFIG); // Automatically available
+}
+```
+
+### When to use InjectionToken with factory functions
+
+InjectionToken with factory functions is ideal when you can't use a class but need to provide dependencies globally:
+
+```ts
+// 📁 /app/logger.token.ts
+import { InjectionToken, inject } from '@angular/core';
+import { APP_CONFIG } from './config.token';
+
+// Logger function type
+export type LoggerFn = (level: string, message: string) => void;
+
+// Global logger function with dependencies
+export const LOGGER_FN = new InjectionToken<LoggerFn>('logger.function', {
+  providedIn: 'root',
+  factory: () => {
+    const config = inject(APP_CONFIG);
+
+    return (level: string, message: string) => {
+      if (config.features.logging !== false) {
+        console[level](`[${new Date().toISOString()}] ${message}`);
+      }
+    };
+  }
+});
+
+// 📁 /app/storage.token.ts
+// Providing browser APIs as tokens
+export const LOCAL_STORAGE = new InjectionToken<Storage>('localStorage', {
+  // providedIn: 'root' is configured as the default
+  factory: () => window.localStorage
+});
+
+export const SESSION_STORAGE = new InjectionToken<Storage>('sessionStorage', {
+  providedIn: 'root',
+  factory: () => window.sessionStorage
+});
+
+// 📁 /app/feature-flags.token.ts
+// Complex configuration with runtime logic
+export const FEATURE_FLAGS = new InjectionToken<Map<string, boolean>>('feature.flags', {
+  providedIn: 'root',
+  factory: () => {
+    const flags = new Map<string, boolean>();
+
+    // Parse from environment or URL params
+    const urlParams = new URLSearchParams(window.location.search);
+    const enableBeta = urlParams.get('beta') === 'true';
+
+    flags.set('betaFeatures', enableBeta);
+    flags.set('darkMode', true);
+    flags.set('newDashboard', false);
+
+    return flags;
+  }
+});
+```
+
+This approach offers several advantages:
+
+- **No manual provider configuration needed** - Works just like `providedIn: 'root'` for services
+- **Tree-shakeable** - Only included if actually used
+- **Type-safe** - Full TypeScript support for non-class values
+- **Can inject other dependencies** - Factory functions can use `inject()` to access other services
+
+## Understanding manual provider configuration
+
+When you need more control than `providedIn: 'root'` offers, you can manually configure providers. Manual configuration through the `providers` array is useful when:
+
+1. **The service doesn't have `providedIn`** - Services without automatic provision must be manually provided
+2. **You want a new instance** - To create a separate instance at the component/directive level instead of using the shared one
+3. **You need runtime configuration** - When service behavior depends on runtime values
+4. **You're providing non-class values** - Configuration objects, functions, or primitive values
+
+### Example: Service without `providedIn`
+
+```ts
+import { Injectable, Component, inject } from '@angular/core';
+
+// Service without providedIn
+@Injectable()
+export class LocalDataStore {
+  private data: string[] = [];
+
+  addData(item: string) {
+    this.data.push(item);
+  }
+}
+
+// Component must provide it
+@Component({
+  selector: 'app-example',
+  // A provider is required here because the `LocalDataStore` service has no providedIn.
+  providers: [LocalDataStore],
+  template: `...`
+})
+export class ExampleComponent {
+  dataStore = inject(LocalDataStore);
+}
+```
+
+### Example: Creating component-specific instances
+
+Services with `providedIn: 'root'` can be overridden at the component level. This ties the instance of the service to the life of a component. As a result, when the component gets destroyed, the provided service is also destroyed as well.
+
+```ts
+import { Injectable, Component, inject } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class DataStore {
+  private data: ListItem[] = [];
+}
+
+// This component gets its own instance
+@Component({
+  selector: 'app-isolated',
+  // Creates new instance of `DataStore` rather than using the root-provided instance.
+  providers: [DataStore],
+  template: `...`
+})
+export class IsolatedComponent {
+  dataStore = inject(DataStore); // Component-specific instance
+}
+```
+
+## Injector hierarchy in Angular
+
+Angular's dependency injection system is hierarchical. When a component requests a dependency, Angular starts with that component's injector and walks up the tree until it finds a provider for that dependency. Each component in your application tree can have its own injector, and these injectors form a hierarchy that mirrors your component tree.
+
+This hierarchy enables:
+
+- **Scoped instances**: Different parts of your app can have different instances of the same service
+- **Override behavior**: Child components can override providers from parent components
+- **Memory efficiency**: Services are only instantiated where needed
+
+In Angular, any element with a component or directive can provide values to all of its descendants.
+
+```mermaid
+graph TD
+    subgraph platform
+        subgraph root
+            direction TB
+            A[SocialApp] --> B[UserProfile]
+            A --> C[FriendList]
+            C --> D[FriendEntry]
+        end
+    end
+```
+
+In the example above:
+
+1. `SocialApp` can provide values for `UserProfile` and `FriendList`
+2. `FriendList` can provide values for injection to `FriendEntry`, but cannot provide values for injection in `UserProfile` because it's not part of the tree
+
+## Declaring a provider
+
+Think of Angular's dependency injection system as a hash map or dictionary. Each provider configuration object defines a key-value pair:
+
+- **Key (Provider identifier)**: The unique identifier you use to request a dependency
+- **Value**: What Angular should return when that token is requested
+
+When manually providing dependencies, you typically see this shorthand syntax:
+
+```angular-ts
+import { Component } from '@angular/core';
+import { LocalService } from './local-service';
+
+@Component({
+  selector: 'app-example',
+  providers: [LocalService]  // Service without providedIn
+})
+export class ExampleComponent { }
+```
+
+This is actually a shorthand for a more detailed provider configuration:
+
+```ts
+{
+  // This is the shorthand version
+  providers: [LocalService],
+
+  // This is the full version
+  providers: [
+    { provide: LocalService, useClass: LocalService }
+  ]
+}
+```
+
+### Provider configuration object
+
+Every provider configuration object has two primary parts:
+
+1. **Provider identifier**: The unique key that Angular uses to get the dependency (set via the `provide` property)
+2. **Value**: The actual dependency that you want Angular to fetch, configured with different keys based on the desired type:
+   - `useClass` - Provides a JavaScript class
+   - `useValue` - Provides a static value
+   - `useFactory` - Provides a factory function that returns the value
+   - `useExisting` - Provides an alias to an existing provider
+
+### Provider identifiers
+
+Provider identifiers allow Angular's dependency injection (DI) system to retrieve a dependency through a unique ID. You can generate provider identifiers in two ways:
+
+1. [Class names](#class-names)
+2. [Injection tokens](#injection-tokens)
+
+#### Class names
+
+Class name use the imported class directly as the identifier:
+
+```angular-ts
+import { Component } from '@angular/core';
+import { LocalService } from './local-service';
+
+@Component({
+  selector: 'app-example',
+  providers: [
+    { provide: LocalService, useClass: LocalService }
+  ]
+})
+export class ExampleComponent { /* ... */ }
+```
+
+The class serves as both the identifier and the implementation, which is why Angular provides the shorthand `providers: [LocalService]`.
+
+#### Injection tokens
+
+Angular provides a built-in [`InjectionToken`](api/core/InjectionToken) class that creates a unique object reference for injectable values or when you want to provide multiple implementations of the same interface.
+
+```ts
+// 📁 /app/tokens.ts
+import { InjectionToken } from '@angular/core';
+import { DataService } from './data-service.interface';
+
+export const DATA_SERVICE_TOKEN = new InjectionToken<DataService>('DataService');
+```
+
+NOTE: The string `'DataService'` is a description used purely for debugging purposes. Angular identifies the token by its object reference, not this string.
+
+Use the token in your provider configuration:
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { LocalDataService } from './local-data-service';
+import { DATA_SERVICE_TOKEN } from './tokens';
+
+@Component({
+  selector: 'app-example',
+  providers: [
+    { provide: DATA_SERVICE_TOKEN, useClass: LocalDataService }
+  ]
+})
+export class ExampleComponent {
+  private dataService = inject(DATA_SERVICE_TOKEN);
+}
+```
+
+#### Can TypeScript interfaces be identifiers for injection?
+
+TypeScript interfaces cannot be used for injection because they don't exist at runtime:
+
+```ts
+// ❌ This won't work!
+interface DataService {
+  getData(): string[];
+}
+
+// Interfaces disappear after TypeScript compilation
+@Component({
+  providers: [
+    { provide: DataService, useClass: LocalDataService } // Error!
+  ]
+})
+export class ExampleComponent {
+  private dataService = inject(DataService); // Error!
+}
+
+// ✅ Use InjectionToken instead
+export const DATA_SERVICE_TOKEN = new InjectionToken<DataService>('DataService');
+
+@Component({
+  providers: [
+    { provide: DATA_SERVICE_TOKEN, useClass: LocalDataService }
+  ]
+})
+export class ExampleComponent {
+  private dataService = inject(DATA_SERVICE_TOKEN); // Works!
+}
+```
+
+The InjectionToken provides a runtime value that Angular's DI system can use, while still maintaining type safety through TypeScript's generic type parameter.
+
+### Provider value types
+
+#### useClass
+
+`useClass` provides a JavaScript class as a dependency. This is the default when using the shorthand syntax:
+
+```ts
+// Shorthand
+providers: [DataService]
+
+// Full syntax
+providers: [
+  { provide: DataService, useClass: DataService }
+]
+
+// Different implementation
+providers: [
+  { provide: DataService, useClass: MockDataService }
+]
+
+// Conditional implementation
+providers: [
+  {
+    provide: StorageService,
+    useClass: environment.production ? CloudStorageService : LocalStorageService
+  }
+]
+```
+
+#### Practical example: Logger substitution
+
+You can substitute implementations to extend functionality:
+
+```ts
+import { Injectable, Component, inject } from '@angular/core';
+
+// Base logger
+@Injectable()
+export class Logger {
+  log(message: string) {
+    console.log(message);
+  }
+}
+
+// Enhanced logger with timestamp
+@Injectable()
+export class BetterLogger extends Logger {
+  override log(message: string) {
+    super.log(`[${new Date().toISOString()}] ${message}`);
+  }
+}
+
+// Logger that includes user context
+@Injectable()
+export class EvenBetterLogger extends Logger {
+  private userService = inject(UserService);
+
+  override log(message: string) {
+    const name = this.userService.user.name;
+    super.log(`Message to ${name}: ${message}`);
+  }
+}
+
+// In your component
+@Component({
+  selector: 'app-example',
+  providers: [
+    UserService, // EvenBetterLogger needs this
+    { provide: Logger, useClass: EvenBetterLogger }
+  ]
+})
+export class ExampleComponent {
+  private logger = inject(Logger); // Gets EvenBetterLogger instance
+}
+```
+
+#### useValue
+
+`useValue` provides any JavaScript data type as a static value:
+
+```ts
+providers: [
+  { provide: API_URL_TOKEN, useValue: 'https://api.example.com' },
+  { provide: MAX_RETRIES_TOKEN, useValue: 3 },
+  { provide: FEATURE_FLAGS_TOKEN, useValue: { darkMode: true, beta: false } }
+]
+```
+
+IMPORTANT: TypeScript types and interfaces cannot serve as dependency values. They exist only at compile-time.
+
+#### Practical example: Application configuration
+
+A common use case for `useValue` is providing application configuration:
+
+```ts
+// Define configuration interface
+export interface AppConfig {
+  apiUrl: string;
+  appTitle: string;
+  features: {
+    darkMode: boolean;
+    analytics: boolean;
+  };
+}
+
+// Create injection token
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
+
+// Define configuration
+const appConfig: AppConfig = {
+  apiUrl: 'https://api.example.com',
+  appTitle: 'My Application',
+  features: {
+    darkMode: true,
+    analytics: false
+  }
+};
+
+// Provide in bootstrap
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: APP_CONFIG, useValue: appConfig }
+  ]
+});
+
+// Use in component
+@Component({
+  selector: 'app-header',
+  template: `<h1>{{ title }}</h1>`
+})
+export class HeaderComponent {
+  private config = inject(APP_CONFIG);
+  title = this.config.appTitle;
+}
+```
+
+#### useFactory
+
+`useFactory` provides a function that generates a new value for injection:
+
+```ts
+export const loggerFactory = (config: AppConfig) => {
+  return new LoggerService(config.logLevel, config.endpoint);
+};
+
+providers: [
+  {
+    provide: LoggerService,
+    useFactory: loggerFactory,
+    deps: [APP_CONFIG]  // Dependencies for the factory function
+  }
+]
+```
+
+You can mark factory dependencies as optional:
+
+```ts
+import { Optional } from '@angular/core';
+
+providers: [
+  {
+    provide: MyService,
+    useFactory: (required: RequiredService, optional?: OptionalService) => {
+      return new MyService(required, optional || new DefaultService());
+    },
+    deps: [RequiredService, [new Optional(), OptionalService]]
+  }
+]
+```
+
+#### Practical example: Configuration-based API client
+
+Here's a complete example showing how to use a factory to create a service with runtime configuration:
+
+```ts
+// Service that needs runtime configuration
+class ApiClient {
+  constructor(
+    private http: HttpClient,
+    private baseUrl: string,
+    private rateLimitMs: number
+  ) {}
+
+  async fetchData(endpoint: string) {
+    // Apply rate limiting based on user tier
+    await this.applyRateLimit();
+    return this.http.get(`${this.baseUrl}/${endpoint}`);
+  }
+
+  private async applyRateLimit() {
+    // Simplified example - real implementation would track request timing
+    return new Promise(resolve => setTimeout(resolve, this.rateLimitMs));
+  }
+}
+
+// Factory function that configures based on user tier
+import { inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+const apiClientFactory = () => {
+  const http = inject(HttpClient);
+  const userService = inject(UserService);
+
+  // Assuming userService provides these values
+  const baseUrl = userService.getApiBaseUrl();
+  const rateLimitMs = userService.getRateLimit();
+
+  return new ApiClient(http, baseUrl, rateLimitMs);
+};
+
+// Provider configuration
+export const apiClientProvider = {
+  provide: ApiClient,
+  useFactory: apiClientFactory
+};
+
+// Usage in component
+@Component({
+  selector: 'app-dashboard',
+  providers: [apiClientProvider]
+})
+export class DashboardComponent {
+  private apiClient = inject(ApiClient);
+}
+```
+
+#### useExisting
+
+`useExisting` creates an alias for a provider that was already defined. Both tokens return the same instance:
+
+```ts
+providers: [
+  NewLogger,  // The actual service
+  { provide: OldLogger, useExisting: NewLogger }  // The alias
+]
+```
+
+IMPORTANT: Don't confuse `useExisting` with `useClass`. `useClass` creates separate instances, while `useExisting` ensures you get the same singleton instance.
+
+### Multiple providers
+
+Use the `multi: true` flag when multiple providers contribute values to the same token:
+
+```ts
+export const INTERCEPTOR_TOKEN = new InjectionToken<Interceptor[]>('interceptors');
+
+providers: [
+  { provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true },
+  { provide: INTERCEPTOR_TOKEN, useClass: LoggingInterceptor, multi: true },
+  { provide: INTERCEPTOR_TOKEN, useClass: RetryInterceptor, multi: true }
+]
+```
+
+When you inject `INTERCEPTOR_TOKEN`, you'll receive an array containing instances of all three interceptors.
+
+## Where can you specify providers?
+
+Angular offers several levels where you can register providers, each with different implications for scope, lifecycle, and performance:
+
+- [**Application bootstrap**](#application-bootstrap) - Global singletons available everywhere
+- [**On an element (component or directive)**](#component-or-directive-providers) - Isolated instances for specific component trees
+- [**Route**](#route-providers) - Feature-specific services for lazy-loaded modules
+
+### Application bootstrap
+
+Use application-level providers in `bootstrapApplication` when:
+
+- **The service is used across multiple feature areas** - Services like HTTP clients, logging, or authentication that many parts of your app need
+- **You want a true singleton** - One instance shared by the entire application
+- **The service has no component-specific configuration** - General-purpose utilities that work the same everywhere
+- **You're providing global configuration** - API endpoints, feature flags, or environment settings
+
+```ts
+// main.ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    { provide: API_BASE_URL, useValue: 'https://api.example.com' },
+    { provide: INTERCEPTOR_TOKEN, useClass: AuthInterceptor, multi: true },
+    LoggingService,  // Used throughout the app
+    { provide: ErrorHandler, useClass: GlobalErrorHandler }
+  ]
+});
+```
+
+**Benefits:**
+
+- Single instance reduces memory usage
+- Available everywhere without additional setup
+- Easier to manage global state
+
+**Drawbacks:**
+
+- Always included in your JavaScript bundle, even if the value is never injected
+- Cannot be easily customized per feature
+- Harder to test individual components in isolation
+
+#### Why provide during bootstrap instead of using `providedIn: 'root'`?
+
+You might want a provider during bootstrap when:
+
+- The provider has side-effects (e.g., installing the client-side router)
+- The provider requires configuration (e.g., routes)
+- You're using Angular's `provideSomething` pattern (e.g., `provideRouter`, `provideHttpClient`)
+
+### Component or directive providers
+
+Use component or directive providers when:
+
+- **The service has component-specific state** - Form validators, component-specific caches, or UI state managers
+- **You need isolated instances** - Each component needs its own copy of the service
+- **The service is only used by one component tree** - Specialized services that don't need global access
+- **You're creating reusable components** - Components that should work independently with their own services
+
+```angular-ts
+// Specialized form component with its own validation service
+@Component({
+  selector: 'app-advanced-form',
+  providers: [
+    FormValidationService,  // Each form gets its own validator
+    { provide: FORM_CONFIG, useValue: { strictMode: true } }
+  ]
+})
+export class AdvancedFormComponent { }
+
+// Modal component with isolated state management
+@Component({
+  selector: 'app-modal',
+  providers: [
+    ModalStateService  // Each modal manages its own state
+  ]
+})
+export class ModalComponent { }
+```
+
+**Benefits:**
+
+- Better encapsulation and isolation
+- Easier to test components individually
+- Multiple instances can coexist with different configurations
+
+**Drawbacks:**
+
+- New instance created for each component (higher memory usage)
+- No shared state between components
+- Must be provided wherever needed
+- Always included in the same JavaScript bundle as the component or directive, even if the value is never injected
+
+NOTE: If multiple directives on the same element provide the same token, one will win, but which one is undefined.
+
+### Route providers
+
+Use route-level providers for:
+
+- **Feature-specific services** - Services only needed for particular routes or feature modules
+- **Lazy-loaded module dependencies** - Services that should only load with specific features
+- **Route-specific configuration** - Settings that vary by application area
+
+```ts
+// routes.ts
+export const routes: Routes = [
+  {
+    path: 'admin',
+    providers: [
+      AdminService,  // Only loaded with admin routes
+      { provide: FEATURE_FLAGS, useValue: { adminMode: true } }
+    ],
+    loadChildren: () => import('./admin/admin.routes')
+  },
+  {
+    path: 'shop',
+    providers: [
+      ShoppingCartService,  // Isolated shopping state
+      PaymentService
+    ],
+    loadChildren: () => import('./shop/shop.routes')
+  }
+];
+```
+
+## Library author patterns
+
+When creating Angular libraries, you often need to provide flexible configuration options for consumers while maintaining clean APIs. Angular's own libraries demonstrate powerful patterns for achieving this.
+
+### The `provide` pattern
+
+Instead of requiring users to manually configure complex providers, library authors can export functions that return provider configurations:
+
+```ts
+// 📁 /libs/analytics/src/providers.ts
+import { InjectionToken, Provider, inject } from '@angular/core';
+
+// Configuration interface
+export interface AnalyticsConfig {
+  trackingId: string;
+  enableDebugMode?: boolean;
+  anonymizeIp?: boolean;
+}
+
+// Internal token for configuration
+const ANALYTICS_CONFIG = new InjectionToken<AnalyticsConfig>('analytics.config');
+
+// Main service that uses the configuration
+export class AnalyticsService {
+  private config = inject(ANALYTICS_CONFIG);
+
+  track(event: string, properties?: any) {
+    // Implementation using config
+  }
+}
+
+// Provider function for consumers
+export function provideAnalytics(config: AnalyticsConfig): Provider[] {
+  return [
+    { provide: ANALYTICS_CONFIG, useValue: config },
+    AnalyticsService
+  ];
+}
+
+// Usage in consumer app
+// main.ts
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAnalytics({
+      trackingId: 'GA-12345',
+      enableDebugMode: !environment.production
+    })
+  ]
+});
+```
+
+### Advanced provider patterns with options
+
+For more complex scenarios, you can combine multiple configuration approaches:
+
+```ts
+// 📁 /libs/http-client/src/provider.ts
+import { Provider, InjectionToken, inject } from '@angular/core';
+
+// Feature flags for optional functionality
+export enum HttpFeatures {
+  Interceptors = 'interceptors',
+  Caching = 'caching',
+  Retry = 'retry'
+}
+
+// Configuration interfaces
+export interface HttpConfig {
+  baseUrl?: string;
+  timeout?: number;
+  headers?: Record<string, string>;
+}
+
+export interface RetryConfig {
+  maxAttempts: number;
+  delayMs: number;
+}
+
+// Internal tokens
+const HTTP_CONFIG = new InjectionToken<HttpConfig>('http.config');
+const RETRY_CONFIG = new InjectionToken<RetryConfig>('retry.config');
+const HTTP_FEATURES = new InjectionToken<Set<HttpFeatures>>('http.features');
+
+// Core service
+class HttpClientService {
+  private config = inject(HTTP_CONFIG, { optional: true });
+  private features = inject(HTTP_FEATURES);
+
+  get(url: string) {
+    // Use config and check features
+  }
+}
+
+// Feature services
+class RetryInterceptor {
+  private config = inject(RETRY_CONFIG);
+  // Retry logic
+}
+
+class CacheInterceptor {
+  // Caching logic
+}
+
+// Main provider function
+export function provideHttpClient(
+  config?: HttpConfig,
+  ...features: HttpFeature[]
+): Provider[] {
+  const providers: Provider[] = [
+    { provide: HTTP_CONFIG, useValue: config || {} },
+    { provide: HTTP_FEATURES, useValue: new Set(features.map(f => f.kind)) },
+    HttpClientService
+  ];
+
+  // Add feature-specific providers
+  features.forEach(feature => {
+    providers.push(...feature.providers);
+  });
+
+  return providers;
+}
+
+// Feature configuration functions
+export interface HttpFeature {
+  kind: HttpFeatures;
+  providers: Provider[];
+}
+
+export function withInterceptors(...interceptors: any[]): HttpFeature {
+  return {
+    kind: HttpFeatures.Interceptors,
+    providers: interceptors.map(interceptor => ({
+      provide: INTERCEPTOR_TOKEN,
+      useClass: interceptor,
+      multi: true
+    }))
+  };
+}
+
+export function withCaching(): HttpFeature {
+  return {
+    kind: HttpFeatures.Caching,
+    providers: [CacheInterceptor]
+  };
+}
+
+export function withRetry(config: RetryConfig): HttpFeature {
+  return {
+    kind: HttpFeatures.Retry,
+    providers: [
+      { provide: RETRY_CONFIG, useValue: config },
+      RetryInterceptor
+    ]
+  };
+}
+
+// Consumer usage with multiple features
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideHttpClient(
+      { baseUrl: 'https://api.example.com' },
+      withInterceptors(AuthInterceptor, LoggingInterceptor),
+      withCaching(),
+      withRetry({ maxAttempts: 3, delayMs: 1000 })
+    )
+  ]
+});
+```
+
+### Why use provider functions instead of direct configuration?
+
+Provider functions offer several advantages for library authors:
+
+1. **Encapsulation** - Internal tokens and implementation details remain private
+2. **Type safety** - TypeScript ensures correct configuration at compile time
+3. **Flexibility** - Easily compose features with `with*` pattern
+4. **Future-proofing** - Internal implementation can change without breaking consumers
+5. **Consistency** - Aligns with Angular's own patterns (`provideRouter`, `provideHttpClient`, etc.)
+
+This pattern is extensively used in Angular's own libraries and is considered a best practice for library authors who need to provide configurable services.
diff --git a/adev-es/src/content/guide/di/dependency-injection-context.en.md b/adev-es/src/content/guide/di/dependency-injection-context.en.md
index b242b87..e2d4c01 100644
--- a/adev-es/src/content/guide/di/dependency-injection-context.en.md
+++ b/adev-es/src/content/guide/di/dependency-injection-context.en.md
@@ -1,32 +1,20 @@
 # Injection context
 
 The dependency injection (DI) system relies internally on a runtime context where the current injector is available.
+
 This means that injectors can only work when code is executed in such a context.
 
 The injection context is available in these situations:
 
-* During construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
-* In the initializer for fields of such classes.
-* In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
-* In the `factory` function specified for an `InjectionToken`.
-* Within a stack frame that runs in an injection context.
+- During construction (via the `constructor`) of a class being instantiated by the DI system, such as an `@Injectable` or `@Component`.
+- In the initializer for fields of such classes.
+- In the factory function specified for `useFactory` of a `Provider` or an `@Injectable`.
+- In the `factory` function specified for an `InjectionToken`.
+- Within a stack frame that runs in an injection context.
 
 Knowing when you are in an injection context will allow you to use the [`inject`](api/core/inject) function to inject instances.
 
-## Class constructors
-
-Every time the DI system instantiates a class, it does so in an injection context. This is handled by the framework itself. The constructor of the class is executed in that runtime context, which also allows injection of a token using the [`inject`](api/core/inject) function.
-
-<docs-code language="typescript" highlight="[[3],[6]]">
-class MyComponent  {
-  private service1: Service1;
-  private service2: Service2 = inject(Service2); // In context
-
-  constructor() {
-    this.service1 = inject(Service1) // In context
-  }
-}
-</docs-code>
+NOTE: For basic examples of using `inject()` in class constructors and field initializers, see the [overview guide](/guide/di#where-can-inject-be-used).
 
 ## Stack frame in context
 
@@ -34,22 +22,21 @@ Some APIs are designed to be run in an injection context. This is the case, for
 
 Here is an example for `CanActivateFn`
 
-<docs-code language="typescript" highlight="[3]">
+```ts {highlight: [3]}
 const canActivateTeam: CanActivateFn =
-    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-      return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
-    };
-</docs-code>
+  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
+  };
+```
 
 ## Run within an injection context
 
 When you want to run a given function in an injection context without already being in one, you can do so with `runInInjectionContext`.
 This requires access to a given injector, like the `EnvironmentInjector`, for example:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[9]">
+```ts {highlight: [9], header"hero.service.ts"}
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class HeroService {
   private environmentInjector = inject(EnvironmentInjector);
@@ -60,13 +47,38 @@ export class HeroService {
     });
   }
 }
-</docs-code>
+```
 
 Note that `inject` will return an instance only if the injector can resolve the required token.
 
 ## Asserts the context
 
-Angular provides the `assertInInjectionContext` helper function to assert that the current context is an injection context.
+Angular provides the `assertInInjectionContext` helper function to assert that the current context is an injection context and throws a clear error if not. Pass a reference to the calling function so the error message points to the correct API entry point. This produces a clearer, more actionable message than the default generic injection error.
+
+```ts
+import { ElementRef, assertInInjectionContext, inject } from '@angular/core';
+
+export function injectNativeElement<T extends Element>(): T {
+    assertInInjectionContext(injectNativeElement);
+    return inject(ElementRef).nativeElement;
+}
+```
+
+You can then call this helper **from an injection context** (constructor, field initializer, provider factory, or code executed via `runInInjectionContext`):
+
+```ts
+import { Component, inject } from '@angular/core';
+import { injectNativeElement } from './dom-helpers';
+
+@Component({ /* … */ })
+export class PreviewCard {
+  readonly hostEl = injectNativeElement<HTMLElement>(); // Field initializer runs in an injection context.
+
+  onAction() {
+    const anotherRef = injectNativeElement<HTMLElement>(); // Fails: runs outside an injection context.
+  }
+}
+```
 
 ## Using DI outside of a context
 
diff --git a/adev-es/src/content/guide/di/dependency-injection-context.md b/adev-es/src/content/guide/di/dependency-injection-context.md
index b4de84f..f1aa7fe 100644
--- a/adev-es/src/content/guide/di/dependency-injection-context.md
+++ b/adev-es/src/content/guide/di/dependency-injection-context.md
@@ -1,32 +1,20 @@
 # Contexto de inyección
 
 El sistema de inyección de dependencias (DI) se basa internamente en un contexto de tiempo de ejecución donde el inyector actual está disponible.
+
 Esto significa que los inyectores solo pueden funcionar cuando el código se ejecuta en dicho contexto.
 
 El contexto de inyección está disponible en estas situaciones:
 
-* Durante la construcción (vía el `constructor`) de una clase siendo instanciada por el sistema DI, como un `@Injectable` o `@Component`.
-* En el inicializador para campos de dichas clases.
-* En la función de fábrica especificada para `useFactory` de un `Provider` o un `@Injectable`.
-* En la función `factory` especificada para un `InjectionToken`.
-* Dentro de un Stack frame que se ejecuta en un contexto de inyección.
+- Durante la construcción (vía el `constructor`) de una clase siendo instanciada por el sistema DI, como un `@Injectable` o `@Component`.
+- En el inicializador para campos de dichas clases.
+- En la función de fábrica especificada para `useFactory` de un `Provider` o un `@Injectable`.
+- En la función `factory` especificada para un `InjectionToken`.
+- Dentro de un Stack frame que se ejecuta en un contexto de inyección.
 
 Saber cuándo estás en un contexto de inyección te permitirá usar la función [`inject`](api/core/inject) para inyectar instancias.
 
-## Constructores de clase
-
-Cada vez que el sistema DI instancia una clase, lo hace en un contexto de inyección. Esto es manejado por el framework mismo. El constructor de la clase se ejecuta en ese contexto de tiempo de ejecución, lo que también permite la inyección de un token usando la función [`inject`](api/core/inject).
-
-<docs-code language="typescript" highlight="[[3],[6]]">
-class MyComponent  {
-  private service1: Service1;
-  private service2: Service2 = inject(Service2); // In context
-
-  constructor() {
-    this.service1 = inject(Service1) // In context
-  }
-}
-</docs-code>
+NOTA: Para ejemplos básicos de usar `inject()` en constructores de clase e inicializadores de campos, consulta la [guía de resumen](/guide/di#where-can-inject-be-used).
 
 ## Stack frame en contexto
 
@@ -34,22 +22,21 @@ Algunas APIs están diseñadas para ejecutarse en un contexto de inyección. Est
 
 Aquí tienes un ejemplo para `CanActivateFn`
 
-<docs-code language="typescript" highlight="[3]">
+```ts {highlight: [3]}
 const canActivateTeam: CanActivateFn =
-    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
-      return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
-    };
-</docs-code>
+  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    return inject(PermissionsService).canActivate(inject(UserToken), route.params.id);
+  };
+```
 
 ## Ejecutar dentro de un contexto de inyección
 
 Cuando quieres ejecutar una función dada en un contexto de inyección sin estar ya en uno, puedes hacerlo con `runInInjectionContext`.
 Esto requiere acceso a un inyector dado, como el `EnvironmentInjector`, por ejemplo:
 
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[9]">
+```ts {highlight: [9], header: "hero.service.ts"}
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class HeroService {
   private environmentInjector = inject(EnvironmentInjector);
@@ -60,13 +47,38 @@ export class HeroService {
     });
   }
 }
-</docs-code>
+```
 
 Ten en cuenta que `inject` devolverá una instancia solo si el inyector puede resolver el token requerido.
 
-## Afirma el contexto
+## Afirmar el contexto
+
+Angular proporciona la función auxiliar `assertInInjectionContext` para afirmar que el contexto actual es un contexto de inyección y lanza un error claro si no lo es. Pasa una referencia a la función que llama para que el mensaje de error apunte al punto de entrada de la API correcto. Esto produce un mensaje más claro y accionable que el error genérico de inyección predeterminado.
+
+```ts
+import { ElementRef, assertInInjectionContext, inject } from '@angular/core';
 
-Angular proporciona la función auxiliar `assertInInjectionContext` para afirmar que el contexto actual es un contexto de inyección.
+export function injectNativeElement<T extends Element>(): T {
+    assertInInjectionContext(injectNativeElement);
+    return inject(ElementRef).nativeElement;
+}
+```
+
+Puedes llamar a esta función auxiliar **desde un contexto de inyección** (constructor, inicializador de campo, fábrica de proveedor, o código ejecutado vía `runInInjectionContext`):
+
+```ts
+import { Component, inject } from '@angular/core';
+import { injectNativeElement } from './dom-helpers';
+
+@Component({ /* … */ })
+export class PreviewCard {
+  readonly hostEl = injectNativeElement<HTMLElement>(); // El inicializador de campo se ejecuta en un contexto de inyección.
+
+  onAction() {
+    const anotherRef = injectNativeElement<HTMLElement>(); // Falla: se ejecuta fuera de un contexto de inyección.
+  }
+}
+```
 
 ## Usando DI fuera de un contexto
 
diff --git a/adev-es/src/content/guide/di/dependency-injection-providers.en.md b/adev-es/src/content/guide/di/dependency-injection-providers.en.md
deleted file mode 100644
index cc51d1a..0000000
--- a/adev-es/src/content/guide/di/dependency-injection-providers.en.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Configuring dependency providers
-
-The previous sections described how to use class instances as dependencies.
-Aside from classes, you can also use values such as `boolean`, `string`, `Date`, and objects as dependencies.
-Angular provides the necessary APIs to make the dependency configuration flexible, so you can make those values available in DI.
-
-## Specifying a provider token
-
-If you specify the service class as the provider token, the default behavior is for the injector to instantiate that class using the `new` operator.
-
-In the following example, the app component provides a `Logger` instance:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-providers: [Logger],
-</docs-code>
-
-You can, however, configure DI to associate the `Logger` provider token with a different class or any other value.
-So when the `Logger` is injected, the configured value is used instead.
-
-In fact, the class provider syntax is a shorthand expression that expands into a provider configuration, defined by the `Provider` interface.
-Angular expands the `providers` value in this case into a full provider object as follows:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[{ provide: Logger, useClass: Logger }]
-</docs-code>
-
-The expanded provider configuration is an object literal with two properties:
-
-- The `provide` property holds the token that serves as the key for consuming the dependency value.
-- The second property is a provider definition object, which tells the injector **how** to create the dependency value. The provider-definition can be one of the following:
-  - `useClass` - this option tells Angular DI to instantiate a provided class when a dependency is injected
-  - `useExisting` - allows you to alias a token and reference any existing one.
-  - `useFactory` - allows you to define a function that constructs a dependency.
-  - `useValue` - provides a static value that should be used as a dependency.
-
-The sections below describe how to use the different provider definitions.
-
-### Class providers: useClass
-
-The `useClass` provider key lets you create and return a new instance of the specified class.
-
-You can use this type of provider to substitute an alternative implementation for a common or default class.
-The alternative implementation can, for example, implement a different strategy, extend the default class, or emulate the behavior of the real class in a test case.
-
-In the following example, `BetterLogger` would be instantiated when the `Logger` dependency is requested in a component or any other class:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[{ provide: Logger, useClass: BetterLogger }]
-</docs-code>
-
-If the alternative class providers have their own dependencies, specify both providers in the providers metadata property of the parent module or component:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[
-  UserService, // dependency needed in `EvenBetterLogger`.
-  { provide: Logger, useClass: EvenBetterLogger },
-]
-</docs-code>
-
-In this example, `EvenBetterLogger` displays the user name in the log message. This logger gets the user from an injected `UserService` instance:
-
-<docs-code header="src/app/even-better-logger.component.ts" language="typescript"
-           highlight="[[3],[6]]">
-@Injectable()
-export class EvenBetterLogger extends Logger {
-  private userService = inject(UserService);
-
-  override log(message: string) {
-    const name = this.userService.user.name;
-    super.log(`Message to ${name}: ${message}`);
-  }
-}
-</docs-code>
-
-Angular DI knows how to construct the `UserService` dependency, since it has been configured above and is available in the injector.
-
-### Alias providers: useExisting
-
-The `useExisting` provider key lets you map one token to another.
-In effect, the first token is an alias for the service associated with the second token, creating two ways to access the same service object.
-
-In the following example, the injector injects the singleton instance of `NewLogger` when the component asks for either the new or the old logger:
-In this way, `OldLogger` is an alias for `NewLogger`.
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
-[
-  NewLogger,
-  // Alias OldLogger w/ reference to NewLogger
-  { provide: OldLogger, useExisting: NewLogger},
-]
-</docs-code>
-
-NOTE: Ensure you do not alias `OldLogger` to `NewLogger` with `useClass`, as this creates two different `NewLogger` instances.
-
-### Factory providers: useFactory
-
-The `useFactory` provider key lets you create a dependency object by calling a factory function.
-With this approach, you can create a dynamic value based on information available in the DI and elsewhere in the app.
-
-In the following example, only authorized users should see secret heroes in the `HeroService`.
-Authorization can change during the course of a single application session, as when a different user logs in .
-
-To keep security-sensitive information in `UserService` and out of `HeroService`, give the `HeroService` constructor a boolean flag to control display of secret heroes:
-
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[[4],[7]]">
-class HeroService {
-  constructor(
-    private logger: Logger,
-    private isAuthorized: boolean) { }
-
-  getHeroes() {
-    const auth = this.isAuthorized ? 'authorized' : 'unauthorized';
-    this.logger.log(`Getting heroes for ${auth} user.`);
-    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
-  }
-}
-</docs-code>
-
-To implement the `isAuthorized` flag, use a factory provider to create a new logger instance for `HeroService`.
-This is necessary as we need to manually pass `Logger` when constructing the hero service:
-
-<docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript">
-const heroServiceFactory = (logger: Logger, userService: UserService) =>
-  new HeroService(logger, userService.user.isAuthorized);
-</docs-code>
-
-The factory function has access to `UserService`.
-You inject both `Logger` and `UserService` into the factory provider so the injector can pass them along to the factory function:
-
-<docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript"
-           highlight="[3,4]">
-export const heroServiceProvider = {
-  provide: HeroService,
-  useFactory: heroServiceFactory,
-  deps: [Logger, UserService]
-};
-</docs-code>
-
-- The `useFactory` field specifies that the provider is a factory function whose implementation is `heroServiceFactory`.
-- The `deps` property is an array of provider tokens.
-The `Logger` and `UserService` classes serve as tokens for their own class providers.
-The injector resolves these tokens and injects the corresponding services into the matching `heroServiceFactory` factory function parameters, based on the order specified.
-
-Capturing the factory provider in the exported variable, `heroServiceProvider`, makes the factory provider reusable.
-
-### Value providers: useValue
-
-The `useValue` key lets you associate a static value with a DI token.
-
-Use this technique to provide runtime configuration constants such as website base addresses and feature flags.
-You can also use a value provider in a unit test to provide mock data in place of a production data service.
-
-The next section provides more information about the `useValue` key.
-
-## Using an `InjectionToken` object
-
-Use an `InjectionToken` object as provider token for non-class dependencies.
-The following example defines a token, `APP_CONFIG`. of the type `InjectionToken`:
-
-<docs-code header="src/app/app.config.ts" language="typescript" highlight="[3]">
-import { InjectionToken } from '@angular/core';
-
-export interface AppConfig {
-  title: string;
-}
-
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config description');
-</docs-code>
-
-The optional type parameter, `<AppConfig>`, and the token description, `app.config description`, specify the token's purpose.
-
-Next, register the dependency provider in the component using the `InjectionToken` object of `APP_CONFIG`:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-const MY_APP_CONFIG_VARIABLE: AppConfig = {
-  title: 'Hello',
-};
-
-providers: [{ provide: APP_CONFIG, useValue: MY_APP_CONFIG_VARIABLE }]
-</docs-code>
-
-Now, inject the configuration object in the constructor body with the `inject` function:
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[2]">
-export class AppComponent {
-  constructor() {
-    const config = inject(APP_CONFIG);
-    this.title = config.title;
-  }
-}
-</docs-code>
-
-### Interfaces and DI
-
-Though the TypeScript `AppConfig` interface supports typing within the class, the `AppConfig` interface plays no role in DI.
-In TypeScript, an interface is a design-time artifact, and does not have a runtime representation, or token, that the DI framework can use.
-
-When the TypeScript transpiles to JavaScript, the interface disappears because JavaScript doesn't have interfaces.
-Because there is no interface for Angular to find at runtime, the interface cannot be a token, nor can you inject it:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-// Can't use interface as provider token
-[{ provide: AppConfig, useValue: MY_APP_CONFIG_VARIABLE })]
-</docs-code>
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[3]">
-export class AppComponent {
-  // Can't inject using the interface as the parameter type
-  private config = inject(AppConfig);
-}
-</docs-code>
diff --git a/adev-es/src/content/guide/di/dependency-injection-providers.md b/adev-es/src/content/guide/di/dependency-injection-providers.md
deleted file mode 100644
index ba1f317..0000000
--- a/adev-es/src/content/guide/di/dependency-injection-providers.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Configurando proveedores de dependencias
-
-Las secciones anteriores describieron cómo usar instancias de clase como dependencias.
-Además de las clases, también puedes usar valores como `boolean`, `string`, `Date` y objetos como dependencias.
-Angular proporciona las APIs necesarias para hacer flexible la configuración de dependencias, para que puedas hacer que esos valores estén disponibles en DI.
-
-## Especificando un token de proveedor
-
-Si especificas la clase de servicio como el token de proveedor, el comportamiento por defecto es que el inyector instancie esa clase usando el operador `new`.
-
-En el siguiente ejemplo, el componente de la aplicación provee una instancia de `Logger`:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-providers: [Logger],
-</docs-code>
-
-Sin embargo, puedes configurar DI para asociar el token de proveedor `Logger` con una clase diferente o cualquier otro valor.
-Así que cuando se inyecte `Logger`, se usará el valor configurado en su lugar.
-
-De hecho, la sintaxis del proveedor de clase es una expresión abreviada que se expande en una configuración de proveedor, definida por la interfaz `Provider`.
-Angular expande el valor `providers` en este caso en un objeto de proveedor completo de la siguiente manera:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[{ provide: Logger, useClass: Logger }]
-</docs-code>
-
-La configuración de proveedor expandida es un objeto literal con dos propiedades:
-
-- La propiedad `provide` contiene el token que sirve como clave para consumir el valor de la dependencia.
-- La segunda propiedad es un objeto de definición de proveedor, que le dice al inyector **cómo** crear el valor de la dependencia. La definición de proveedor puede ser una de las siguientes:
-  - `useClass` - esta opción le dice a Angular DI que instancie una clase proveída cuando se inyecte una dependencia
-  - `useExisting` - te permite crear un alias de un token y referenciar cualquier existente.
-  - `useFactory` - te permite definir una función que construye una dependencia.
-  - `useValue` - provee un valor estático que debe ser usado como dependencia.
-
-Las siguientes secciones describen cómo usar las diferentes definiciones de proveedor.
-
-### Proveedores de clase: useClass
-
-La clave de proveedor `useClass` te permite crear y devolver una nueva instancia de la clase especificada.
-
-Puedes usar este tipo de proveedor para sustituir una implementación alternativa para una clase común o por defecto.
-La implementación alternativa puede, por ejemplo, implementar una estrategia diferente, extender la clase por defecto, o emular el comportamiento de la clase real en un caso de prueba.
-
-En el siguiente ejemplo, `BetterLogger` sería instanciado cuando se solicite la dependencia `Logger` en un componente o cualquier otra clase:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[{ provide: Logger, useClass: BetterLogger }]
-</docs-code>
-
-Si los proveedores de clase alternativa tienen sus propias dependencias, especifica ambos proveedores en la propiedad de metadatos providers del módulo o componente padre:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-[
-  UserService, // dependencia necesaria en `EvenBetterLogger`.
-  { provide: Logger, useClass: EvenBetterLogger },
-]
-</docs-code>
-
-En este ejemplo, `EvenBetterLogger` muestra el nombre del usuario en el mensaje de log. Este logger obtiene el usuario de una instancia inyectada de `UserService`:
-
-<docs-code header="src/app/even-better-logger.component.ts" language="typescript"
-           highlight="[[3],[6]]">
-@Injectable()
-export class EvenBetterLogger extends Logger {
-  private userService = inject(UserService);
-
-  override log(message: string) {
-    const name = this.userService.user.name;
-    super.log(`Mensaje para ${name}: ${message}`);
-  }
-}
-</docs-code>
-
-Angular DI sabe cómo construir la dependencia `UserService`, ya que ha sido configurada arriba y está disponible en el inyector.
-
-### Proveedores de alias: useExisting
-
-La clave de proveedor `useExisting` te permite mapear un token a otro.
-En efecto, el primer token es un alias para el servicio asociado con el segundo token, creando dos formas de acceder al mismo objeto de servicio.
-
-En el siguiente ejemplo, el inyector inyecta la instancia singleton de `NewLogger` cuando el componente solicita el logger nuevo o el viejo:
-De esta manera, `OldLogger` es un alias para `NewLogger`.
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
-[
-  NewLogger,
-  // Alias OldLogger con referencia a NewLogger
-  { provide: OldLogger, useExisting: NewLogger},
-]
-</docs-code>
-
-NOTA: Asegúrate de no crear un alias de `OldLogger` a `NewLogger` con `useClass`, ya que esto crea dos instancias diferentes de `NewLogger`.
-
-### Proveedores de fábrica: useFactory
-
-La clave de proveedor `useFactory` te permite crear un objeto de dependencia llamando a una función de fábrica.
-Con este enfoque, puedes crear un valor dinámico basado en información disponible en DI y en otros lugares de la aplicación.
-
-En el siguiente ejemplo, solo los usuarios autorizados deberían ver héroes secretos en el `HeroService`.
-La autorización puede cambiar durante el curso de una sola sesión de aplicación, como cuando un usuario diferente inicia sesión.
-
-Para mantener la información sensible de seguridad en `UserService` y fuera de `HeroService`, dale al constructor de `HeroService` una bandera booleana para controlar la visualización de héroes secretos:
-
-<docs-code header="src/app/heroes/hero.service.ts" language="typescript"
-           highlight="[[4],[7]]">
-class HeroService {
-  constructor(
-    private logger: Logger,
-    private isAuthorized: boolean) { }
-
-  getHeroes() {
-    const auth = this.isAuthorized ? 'autorizado' : 'no autorizado';
-    this.logger.log(`Obteniendo héroes para usuario ${auth}.`);
-    return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
-  }
-}
-</docs-code>
-
-Para implementar la bandera `isAuthorized`, usa un proveedor de fábrica para crear una nueva instancia de logger para `HeroService`.
-Esto es necesario ya que necesitamos pasar manualmente `Logger` al construir el servicio de héroes:
-
-<docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript">
-const heroServiceFactory = (logger: Logger, userService: UserService) =>
-  new HeroService(logger, userService.user.isAuthorized);
-</docs-code>
-
-La función de fábrica tiene acceso a `UserService`.
-Inyectas tanto `Logger` como `UserService` en el proveedor de fábrica para que el inyector pueda pasarlos a la función de fábrica:
-
-<docs-code header="src/app/heroes/hero.service.provider.ts" language="typescript"
-           highlight="[3,4]">
-export const heroServiceProvider = {
-  provide: HeroService,
-  useFactory: heroServiceFactory,
-  deps: [Logger, UserService]
-};
-</docs-code>
-
-- El campo `useFactory` especifica que el proveedor es una función de fábrica cuya implementación es `heroServiceFactory`.
-- La propiedad `deps` es un array de tokens de proveedor.
-Las clases `Logger` y `UserService` sirven como tokens para sus propios proveedores de clase.
-El inyector resuelve estos tokens e inyecta los servicios correspondientes en los parámetros de la función de fábrica `heroServiceFactory` coincidentes, basándose en el orden especificado.
-
-Capturar el proveedor de fábrica en la variable exportada, `heroServiceProvider`, hace que el proveedor de fábrica sea reutilizable.
-
-### Proveedores de valor: useValue
-
-La clave `useValue` te permite asociar un valor estático con un token DI.
-
-Usa esta técnica para proveer constantes de configuración en tiempo de ejecución como direcciones base de sitios web y banderas de características.
-También puedes usar un proveedor de valor en una prueba unitaria para proveer datos simulados en lugar de un servicio de datos de producción.
-
-La siguiente sección proporciona más información sobre la clave `useValue`.
-
-## Usando un objeto `InjectionToken`
-
-Usa un objeto `InjectionToken` como token de proveedor para dependencias que no son clases.
-El siguiente ejemplo define un token, `APP_CONFIG`. del tipo `InjectionToken`:
-
-<docs-code header="src/app/app.config.ts" language="typescript" highlight="[3]">
-import { InjectionToken } from '@angular/core';
-
-export interface AppConfig {
-  title: string;
-}
-
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config description');
-</docs-code>
-
-El parámetro de tipo opcional, `<AppConfig>`, y la descripción del token, `descripción de app.config`, especifican el propósito del token.
-
-A continuación, registra el proveedor de dependencia en el componente usando el objeto `InjectionToken` de `APP_CONFIG`:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-const MY_APP_CONFIG_VARIABLE: AppConfig = {
-  title: 'Hola',
-};
-
-providers: [{ provide: APP_CONFIG, useValue: MY_APP_CONFIG_VARIABLE }]
-</docs-code>
-
-Ahora, inyecta el objeto de configuración en el cuerpo del constructor con la función `inject`:
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[2]">
-export class AppComponent {
-  constructor() {
-    const config = inject(APP_CONFIG);
-    this.title = config.title;
-  }
-}
-</docs-code>
-
-### Interfaces y DI
-
-Aunque la interfaz `AppConfig` de TypeScript soporta tipado dentro de la clase, la interfaz `AppConfig` no juega ningún papel en DI.
-En TypeScript, una interfaz es un artefacto de tiempo de diseño, y no tiene una representación en tiempo de ejecución, o token, que el framework DI pueda usar.
-
-Cuando TypeScript se transpila a JavaScript, la interfaz desaparece porque JavaScript no tiene interfaces.
-Como no hay interfaz para que Angular encuentre en tiempo de ejecución, la interfaz no puede ser un token, ni puedes inyectarla:
-
-<docs-code header="src/app/app.component.ts" language="typescript">
-// No se puede usar interfaz como token de proveedor
-[{ provide: AppConfig, useValue: MY_APP_CONFIG_VARIABLE })]
-</docs-code>
-
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[3]">
-export class AppComponent {
-  // No se puede inyectar usando la interfaz como el tipo de parámetro
-  private config = inject(AppConfig);
-}
-</docs-code>
diff --git a/adev-es/src/content/guide/di/dependency-injection.en.md b/adev-es/src/content/guide/di/dependency-injection.en.md
deleted file mode 100644
index 95558f9..0000000
--- a/adev-es/src/content/guide/di/dependency-injection.en.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# Understanding dependency injection
-
-Dependency injection, or DI, is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
-
-Two main roles exist in the DI system: dependency consumer and dependency provider.
-
-Angular facilitates the interaction between dependency consumers and dependency providers using an abstraction called `Injector`. When a dependency is requested, the injector checks its registry to see if there is an instance already available there. If not, a new instance is created and stored in the registry. Angular creates an application-wide injector (also known as the "root" injector) during the application bootstrap process. In most cases you don't need to manually create injectors, but you should know that there is a layer that connects providers and consumers.
-
-This topic covers basic scenarios of how a class can act as a dependency. Angular also allows you to use functions, objects, primitive types such as string or Boolean, or any other types as dependencies. For more information, see [Dependency providers](guide/di/dependency-injection-providers).
-
-## Providing a dependency
-
-Consider a class called `HeroService` that needs to act as a dependency in a component.
-
-The first step is to add the `@Injectable` decorator to show that the class can be injected.
-
-<docs-code language="typescript" highlight="[1]">
-@Injectable()
-class HeroService {}
-</docs-code>
-
-The next step is to make it available in the DI by providing it.
-A dependency can be provided in multiple places:
-
-- [**Preferred**: At the application root level using `providedIn`](#preferred-at-the-application-root-level-using-providedin)
-- [At the Component level](#at-the-component-level)
-- [At the application root level using `ApplicationConfig`](#at-the-application-root-level-using-applicationconfig)
-- [`NgModule` based applications](#ngmodule-based-applications)
-
-### **Preferred**: At the application root level using `providedIn`
-
-Providing a service at the application root level using `providedIn` allows injecting the service into all other classes.
-Using `providedIn` enables Angular and JavaScript code optimizers to effectively remove services that are unused (known as tree-shaking).
-
-You can provide a service by using `providedIn: 'root'` in the `@Injectable` decorator:
-
-<docs-code language="typescript" highlight="[2]">
-@Injectable({
-  providedIn: 'root'
-})
-class HeroService {}
-</docs-code>
-
-When you provide the service at the root level, Angular creates a single, shared instance of the `HeroService` and injects it into any class that asks for it.
-
-### At the Component level
-
-You can provide services at `@Component` level by using the `providers` field of the `@Component` decorator.
-In this case the `HeroService` becomes available to all instances of this component and other components and directives used in the template.
-
-For example:
-
-<docs-code language="typescript" highlight="[4]">
-@Component({
-  selector: 'hero-list',
-  template: '...',
-  providers: [HeroService]
-})
-class HeroListComponent {}
-</docs-code>
-
-When you register a provider at the component level, you get a new instance of the service with each new instance of that component.
-
-NOTE: Declaring a service like this causes `HeroService` to always be included in your application— even if the service is unused.
-
-### At the application root level using `ApplicationConfig`
-
-You can use the `providers` field of the `ApplicationConfig` (passed to the `bootstrapApplication` function) to provide a service or other `Injectable` at the application level.
-
-In the example below, the `HeroService` is available to all components, directives, and pipes:
-
-<docs-code language="typescript" highlight="[3]">
-export const appConfig: ApplicationConfig = {
-    providers: [
-      { provide: HeroService },
-    ]
-};
-</docs-code>
-
-Then, in `main.ts`:
-
-<docs-code language="typescript">
-bootstrapApplication(AppComponent, appConfig)
-</docs-code>
-
-NOTE: Declaring a service like this causes `HeroService` to always be included in your application— even if the service is unused.
-
-### `NgModule` based applications
-
-`@NgModule`-based applications use the `providers` field of the `@NgModule` decorator to provide a service or other `Injectable` available at the application level.
-
-A service provided in a module is available to all declarations of the module, or to any other modules which share the same `ModuleInjector`.
-To understand all edge-cases, see [Hierarchical injectors](guide/di/hierarchical-dependency-injection).
-
-NOTE: Declaring a service using `providers` causes the service to be included in your application— even if the service is unused.
-
-## Injecting/consuming a dependency
-
-Use Angular's `inject` function to retrieve dependencies.
-
-```ts
-import {inject, Component} from 'angular/core';
-
-@Component({/* ... */})
-export class UserProfile {
-  // You can use the `inject` function in property initializers.
-  private userClient = inject(UserClient);
-
-  constructor() {
-    // You can also use the `inject` function in a constructor.
-    const logger = inject(Logger);
-  }
-}
-```
-
-You can use the `inject` function in any [injection context](guide/di/dependency-injection-context). Most of the time, this is in a class property initializer or a class constructor for components, directives, services, and pipes.
-
-When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector creates one using the registered provider, and adds it to the injector before returning the service to Angular.
-
-When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
-
-```mermaid
-graph TD;
-subgraph Injector
-serviceA[Service A]
-heroService[HeroService]
-serviceC[Service C]
-serviceD[Service D]
-end
-direction TB
-componentProperty["Component <br> heroService = inject(HeroService)"]
-heroService-->componentProperty
-style componentProperty text-align: left
-```
-
-## What's next
-
-<docs-pill-row>
-  <docs-pill href="/guide/di/creating-injectable-service" title="Creating an injectable service"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/di/dependency-injection.md b/adev-es/src/content/guide/di/dependency-injection.md
deleted file mode 100644
index f34a71b..0000000
--- a/adev-es/src/content/guide/di/dependency-injection.md
+++ /dev/null
@@ -1,140 +0,0 @@
-# Entendiendo la inyección de dependencias
-
-La inyección de dependencias, o DI, es uno de los conceptos fundamentales en Angular. DI está integrado en el framework de Angular y permite que las clases con decoradores de Angular, como Componentes, Directivas, Pipes e Injectables, configuren las dependencias que necesitan.
-
-Existen dos roles principales en el sistema DI: consumidor de dependencias y proveedor de dependencias.
-
-Angular facilita la interacción entre consumidores de dependencias y proveedores de dependencias usando una abstracción llamada `Injector`. Cuando se solicita una dependencia, el inyector verifica su registro para ver si ya hay una instancia disponible allí. Si no, se crea una nueva instancia y se almacena en el registro. Angular crea un inyector de toda la aplicación (también conocido como inyector "raíz") durante el proceso de bootstrap de la aplicación. En la mayoría de los casos no necesitas crear inyectores manualmente, pero debes saber que hay una capa que conecta proveedores y consumidores.
-
-Este tema cubre escenarios básicos de cómo una clase puede actuar como una dependencia. Angular también te permite usar funciones, objetos, tipos primitivos como string o Boolean, o cualquier otro tipo como dependencias. Para más información, consulta [Proveedores de dependencias](guide/di/dependency-injection-providers).
-
-## Proporcionando una dependencia
-
-Considera una clase llamada `HeroService` que necesita actuar como una dependencia en un componente.
-
-El primer paso es agregar el decorador `@Injectable` para mostrar que la clase puede ser inyectada.
-
-<docs-code language="typescript" highlight="[1]">
-@Injectable()
-class HeroService {}
-</docs-code>
-
-El siguiente paso es hacerla disponible en el sistema de ID, proveyéndola. 
-Una dependencia se puede proveer en varios lugares:
-
-- [**Preferido**: A nivel raíz de la aplicación usando `providedIn`](#preferido-a-nivel-raíz-de-la-aplicación-usando-providedin)
-- [A nivel de Componente](#a-nivel-de-componente)
-- [A nivel raíz de la aplicación usando `ApplicationConfig`](#a-nivel-raíz-de-la-aplicación-usando-applicationconfig)
-- [Aplicaciones basadas en `NgModule`](#aplicaciones-basadas-en-ngmodule)
-
-### **Preferido**: A nivel raíz de la aplicación usando `providedIn`
-
-Proveer un servicio a nivel raíz de la aplicación usando `providedIn` permite inyectar el servicio en todas las demás clases.
-Usar `providedIn` permite que Angular y los optimizadores de código JavaScript eliminen efectivamente los servicios que no se usan (conocido como tree-shaking).
-
-Puedes proveer un servicio usando `providedIn: 'root'` en el decorador `@Injectable`:
-
-<docs-code language="typescript" highlight="[2]">
-@Injectable({
-  providedIn: 'root'
-})
-class HeroService {}
-</docs-code>
-
-Cuando provees el servicio a nivel raíz, Angular crea una instancia única y compartida del `HeroService` y la inyecta en cualquier clase que la solicite.
-
-### A nivel de Componente
-
-Puedes proveer servicios a nivel `@Component` usando el campo `providers` del decorador `@Component`.
-En este caso el `HeroService` se vuelve disponible para todas las instancias de este componente y otros componentes y directivas usadas en la plantilla.
-
-Por ejemplo:
-
-<docs-code language="typescript" highlight="[4]">
-@Component({
-  selector: 'hero-list',
-  template: '...',
-  providers: [HeroService]
-})
-class HeroListComponent {}
-</docs-code>
-
-Cuando registras un proveedor a nivel de componente, obtienes una nueva instancia del servicio con cada nueva instancia de ese componente.
-
-NOTA: Declarar un servicio de esta manera hace que `HeroService` siempre se incluya en tu aplicación, incluso si el servicio no se usa.
-
-### A nivel raíz de la aplicación usando `ApplicationConfig`
-
-Puedes usar el campo `providers` de `ApplicationConfig` (pasado a la función `bootstrapApplication`) para proveer un servicio u otro `Injectable` a nivel de aplicación.
-
-En el siguiente ejemplo, el `HeroService` está disponible para todos los componentes, directivas y pipes:
-
-<docs-code language="typescript" highlight="[3]">
-export const appConfig: ApplicationConfig = {
-    providers: [
-      { provide: HeroService },
-    ]
-};
-</docs-code>
-
-Luego, en `main.ts`:
-
-<docs-code language="typescript">
-bootstrapApplication(AppComponent, appConfig)
-</docs-code>
-
-NOTA: Declarar un servicio de esta manera hace que `HeroService` siempre se incluya en tu aplicación, incluso si el servicio no se usa.
-
-### Aplicaciones basadas en `NgModule`
-
-Las aplicaciones basadas en `@NgModule` usan el campo `providers` del decorador `@NgModule` para proveer un servicio u otro `Injectable` disponible a nivel de aplicación.
-
-Un servicio proveído en un módulo está disponible para todas las declaraciones del módulo, o para cualquier otro módulo que comparta el mismo `ModuleInjector`.
-Para entender todos los casos límite, consulta [Inyectores jerárquicos](guide/di/hierarchical-dependency-injection).
-
-NOTA: Declarar un servicio usando `providers` hace que el servicio se incluya en tu aplicación, incluso si el servicio no se usa.
-
-## Inyectando/consumiendo una dependencia
-
-Usa la función `inject` de Angular para recuperar dependencias.
-
-```ts
-import {inject, Component} from 'angular/core';
-
-@Component({/* ... */})
-export class UserProfile {
-  // Puedes usar la función `inject` en inicializadores de propiedades.
-  private userClient = inject(UserClient);
-
-  constructor() {
-    // También puedes usar la función `inject` en un constructor.
-    const logger = inject(Logger);
-  }
-}
-```
-
-Puedes usar la función `inject` en cualquier [contexto de inyección](guide/di/dependency-injection-context). La mayoría de las veces, esto es en un inicializador de propiedad de clase o un constructor de clase para componentes, directivas, servicios y pipes.
-
-Cuando Angular descubre que un componente depende de un servicio, primero verifica si el inyector tiene alguna instancia existente de ese servicio. Si una instancia de servicio solicitada aún no existe, el inyector crea una usando el proveedor registrado, y la agrega al inyector antes de devolver el servicio a Angular.
-
-Cuando todos los servicios solicitados han sido resueltos y devueltos, Angular puede llamar al constructor del componente con esos servicios como argumentos.
-
-```mermaid
-graph TD;
-subgraph Injector
-serviceA[Service A]
-heroService[HeroService]
-serviceC[Service C]
-serviceD[Service D]
-end
-direction TB
-componentProperty["Component <br> heroService = inject(HeroService)"]
-heroService-->componentProperty
-style componentProperty text-align: left
-```
-
-## Próximos pasos
-
-<docs-pill-row>
-  <docs-pill href="/guide/di/creating-injectable-service" title="Creando un servicio inyectable"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/di/di-in-action.en.md b/adev-es/src/content/guide/di/di-in-action.en.md
index 4d1d3b6..843fc1b 100644
--- a/adev-es/src/content/guide/di/di-in-action.en.md
+++ b/adev-es/src/content/guide/di/di-in-action.en.md
@@ -2,40 +2,7 @@
 
 This guide explores additional features of dependency injection in Angular.
 
-## Custom providers with `@Inject`
-
-Using a custom provider allows you to provide a concrete implementation for implicit dependencies, such as built-in browser APIs.
-The following example uses an `InjectionToken` to provide the [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) browser API as a dependency in the `BrowserStorageService`:
-
-<docs-code header="src/app/storage.service.ts" language="typescript"
-           highlight="[[3,6],[12]]">
-import { Inject, Injectable, InjectionToken } from '@angular/core';
-
-export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
-  providedIn: 'root',
-  factory: () => localStorage
-});
-
-@Injectable({
-  providedIn: 'root'
-})
-export class BrowserStorageService {
-  public storage = inject(BROWSER_STORAGE);
-
-  get(key: string) {
-    return this.storage.getItem(key);
-  }
-
-  set(key: string, value: string) {
-    this.storage.setItem(key, value);
-  }
-}
-</docs-code>
-
-The `factory` function returns the `localStorage` property that is attached to the browser's window object.
-The `inject` function initializes the `storage` property with an instance of the token.
-
-This custom provider can now be overridden during testing with a mock API of `localStorage` instead of interacting with real browser APIs.
+NOTE: For comprehensive coverage of InjectionToken and custom providers, see the [defining dependency providers guide](guide/di/defining-dependency-providers#injection-tokens).
 
 ## Inject the component's DOM element
 
@@ -44,42 +11,43 @@ As a result, you might need to access a component's DOM element.
 
 Angular exposes the underlying element of a `@Component` or `@Directive` via injection using the `ElementRef` injection token:
 
-<docs-code language="typescript" highlight="[7]">
-import { Directive, ElementRef } from '@angular/core';
+```ts {highlight:[7]}
+import {Directive, ElementRef, inject} from '@angular/core';
 
 @Directive({
-  selector: '[appHighlight]'
+  selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  private element = inject(ElementRef)
+  private element = inject(ElementRef);
 
   update() {
     this.element.nativeElement.style.color = 'red';
   }
 }
-</docs-code>
+
+```
 
 ## Resolve circular dependencies with a forward reference
 
 The order of class declaration matters in TypeScript.
 You can't refer directly to a class until it's been defined.
 
-This isn't usually a problem, especially if you adhere to the recommended *one class per file* rule.
+This isn't usually a problem, especially if you adhere to the recommended _one class per file_ rule.
 But sometimes circular references are unavoidable.
 For example, when class 'A' refers to class 'B' and 'B' refers to 'A', one of them has to be defined first.
 
-The Angular `forwardRef()` function creates an *indirect* reference that Angular can resolve later.
+The Angular `forwardRef()` function creates an _indirect_ reference that Angular can resolve later.
 
-You face a similar problem when a class makes *a reference to itself*.
+You face a similar problem when a class makes _a reference to itself_.
 For example, in its `providers` array.
 The `providers` array is a property of the `@Component()` decorator function, which must appear before the class definition.
 You can break such circular references by using `forwardRef`.
 
-<docs-code header="app.component.ts" language="typescript" highlight="[4]">
+```typescript {header: 'app.component.ts', highlight: [4]}
 providers: [
   {
     provide: PARENT_MENU_ITEM,
     useExisting: forwardRef(() => MenuItem),
   },
 ],
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/di/di-in-action.md b/adev-es/src/content/guide/di/di-in-action.md
index a4b8571..702c08c 100644
--- a/adev-es/src/content/guide/di/di-in-action.md
+++ b/adev-es/src/content/guide/di/di-in-action.md
@@ -2,40 +2,7 @@
 
 Esta guía explora características adicionales de la inyección de dependencias en Angular.
 
-## Proveedores personalizados con `@Inject`
-
-Usar un proveedor personalizado te permite proveer una implementación concreta para dependencias implícitas, como las APIs del navegador integradas.
-El siguiente ejemplo usa un `InjectionToken` para proveer la API del navegador [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) como dependencia en el `BrowserStorageService`:
-
-<docs-code header="src/app/storage.service.ts" language="typescript"
-           highlight="[[3,6],[12]]">
-import { Inject, Injectable, InjectionToken } from '@angular/core';
-
-export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
-  providedIn: 'root',
-  factory: () => localStorage
-});
-
-@Injectable({
-  providedIn: 'root'
-})
-export class BrowserStorageService {
-  public storage = inject(BROWSER_STORAGE);
-
-  get(key: string) {
-    return this.storage.getItem(key);
-  }
-
-  set(key: string, value: string) {
-    this.storage.setItem(key, value);
-  }
-}
-</docs-code>
-
-La función `factory` devuelve la propiedad `localStorage` que está adjunta al objeto window del navegador.
-La función `inject` inicializa la propiedad `storage` con una instancia del token.
-
-Este proveedor personalizado ahora puede ser sobrescrito durante las pruebas con una API simulada de `localStorage` en lugar de interactuar con las APIs reales del navegador.
+NOTA: Para una cobertura completa de InjectionToken y proveedores personalizados, consulta la [guía de definición de proveedores de dependencias](guide/di/defining-dependency-providers#injection-tokens).
 
 ## Inyectar el elemento DOM del componente
 
@@ -44,42 +11,43 @@ Como resultado, es posible que necesites acceder al elemento DOM de un component
 
 Angular expone el elemento subyacente de un `@Component` o `@Directive` vía inyección usando el token de inyección `ElementRef`:
 
-<docs-code language="typescript" highlight="[7]">
-import { Directive, ElementRef } from '@angular/core';
+```ts {highlight:[7]}
+import {Directive, ElementRef, inject} from '@angular/core';
 
 @Directive({
-  selector: '[appHighlight]'
+  selector: '[appHighlight]',
 })
 export class HighlightDirective {
-  private element = inject(ElementRef)
+  private element = inject(ElementRef);
 
   update() {
     this.element.nativeElement.style.color = 'red';
   }
 }
-</docs-code>
 
-## Resolver dependencias circulares con una referencia anticipada (`forwardRef`)
+```
+
+## Resolver dependencias circulares con una referencia anticipada
 
 El orden de declaración de clases en TypeScript es importante.
 No puedes referenciar directamente una clase hasta que haya sido definida.
 
-Esto no suele ser un problema, especialmente si te adhieres a la regla recomendada de *una clase por archivo*.
+Esto no suele ser un problema, especialmente si te adhieres a la regla recomendada de _una clase por archivo_.
 Pero a veces las referencias circulares son inevitables.
 Por ejemplo, cuando la clase 'A' se refiere a la clase 'B' y 'B' se refiere a 'A', una de ellas tiene que ser definida primero.
 
-La función `forwardRef()` de Angular crea una referencia *indirecta* que Angular puede resolver más tarde.
+La función `forwardRef()` de Angular crea una referencia _indirecta_ que Angular puede resolver más tarde.
 
-Te enfrentas a un problema similar cuando una clase hace *una referencia a sí misma*.
+Te enfrentas a un problema similar cuando una clase hace _una referencia a sí misma_.
 Por ejemplo, en su array `providers`.
 El array `providers` es una propiedad de la función decoradora `@Component()`, que debe aparecer antes de la definición de la clase.
 Puedes romper tales referencias circulares usando `forwardRef`.
 
-<docs-code header="app.component.ts" language="typescript" highlight="[4]">
+```typescript {header: 'app.component.ts', highlight: [4]}
 providers: [
   {
     provide: PARENT_MENU_ITEM,
     useExisting: forwardRef(() => MenuItem),
   },
 ],
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/di/hierarchical-dependency-injection.en.md b/adev-es/src/content/guide/di/hierarchical-dependency-injection.en.md
index 5cceb01..77dbde0 100644
--- a/adev-es/src/content/guide/di/hierarchical-dependency-injection.en.md
+++ b/adev-es/src/content/guide/di/hierarchical-dependency-injection.en.md
@@ -1,23 +1,17 @@
 # Hierarchical injectors
 
-Injectors in Angular have rules that you can leverage to achieve the desired visibility of injectables in your applications.
-By understanding these rules, you can determine whether to declare a provider at the application level, in a Component, or in a Directive.
+This guide provides in-depth coverage of Angular's hierarchical dependency injection system, including resolution rules, modifiers, and advanced patterns.
 
-The applications you build with Angular can become quite large, and one way to manage this complexity is to split up the application into a well-defined tree of components.
-
-There can be sections of your page that work in a completely independent way than the rest of the application, with its own local copies of the services and other dependencies that it needs.
-Some of the services that these sections of the application use might be shared with other parts of the application, or with parent components that are further up in the component tree, while other dependencies are meant to be private.
-
-With hierarchical dependency injection, you can isolate sections of the application and give them their own private dependencies not shared with the rest of the application, or have parent components share certain dependencies with its child components only but not with the rest of the component tree, and so on. Hierarchical dependency injection enables you to share dependencies between different parts of the application only when and if you need to.
+NOTE: For basic concepts about injector hierarchy and provider scoping, see the [defining dependency providers guide](guide/di/defining-dependency-providers#injector-hierarchy-in-angular).
 
 ## Types of injector hierarchies
 
 Angular has two injector hierarchies:
 
-| Injector hierarchies        | Details |
-|:---                         |:---     |
-| `EnvironmentInjector` hierarchy | Configure an `EnvironmentInjector` in this hierarchy using `@Injectable()` or `providers` array in `ApplicationConfig`. |
-| `ElementInjector` hierarchy | Created implicitly at each DOM element. An `ElementInjector` is empty by default unless you configure it in the `providers` property on `@Directive()` or `@Component()`. |
+| Injector hierarchies            | Details                                                                                                                                                                   |
+| :------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `EnvironmentInjector` hierarchy | Configure an `EnvironmentInjector` in this hierarchy using `@Injectable()` or `providers` array in `ApplicationConfig`.                                                   |
+| `ElementInjector` hierarchy     | Created implicitly at each DOM element. An `ElementInjector` is empty by default unless you configure it in the `providers` property on `@Directive()` or `@Component()`. |
 
 <docs-callout title="NgModule Based Applications">
 For `NgModule` based applications, you can provide dependencies with the `ModuleInjector` hierarchy using an `@NgModule()` or `@Injectable()` annotation.
@@ -27,8 +21,8 @@ For `NgModule` based applications, you can provide dependencies with the `Module
 
 The `EnvironmentInjector` can be configured in one of two ways by using:
 
-* The `@Injectable()` `providedIn` property to refer to `root` or `platform`
-* The `ApplicationConfig` `providers` array
+- The `@Injectable()` `providedIn` property to refer to `root` or `platform`
+- The `ApplicationConfig` `providers` array
 
 <docs-callout title="Tree-shaking and @Injectable()">
 
@@ -42,17 +36,16 @@ Tree-shaking is especially useful for a library because the application which us
 
 Provide services using `providedIn` of `@Injectable()` as follows:
 
-<docs-code language="typescript" highlight="[4]">
+```ts {highlight:[4]}
 import { Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'  // <--provides this service in the root EnvironmentInjector
+  providedIn: 'root' // <--provides this service in the root EnvironmentInjector
 })
 export class ItemService {
   name = 'telephone';
 }
-
-</docs-code>
+```
 
 The `@Injectable()` decorator identifies a service class.
 The `providedIn` property configures a specific `EnvironmentInjector`, here `root`, which makes the service available in the `root` `EnvironmentInjector`.
@@ -61,8 +54,8 @@ The `providedIn` property configures a specific `EnvironmentInjector`, here `roo
 
 In the case of `NgModule` based applications, the ModuleInjector can be configured in one of two ways by using:
 
-* The `@Injectable()` `providedIn` property to refer to `root` or `platform`
-* The `@NgModule()` `providers` array
+- The `@Injectable()` `providedIn` property to refer to `root` or `platform`
+- The `@NgModule()` `providers` array
 
 `ModuleInjector` is configured by the `@NgModule.providers` and `NgModule.imports` property. `ModuleInjector` is a flattening of all the providers arrays that can be reached by following the `NgModule.imports` recursively.
 
@@ -74,9 +67,9 @@ There are two more injectors above `root`, an additional `EnvironmentInjector` a
 
 Consider how Angular bootstraps the application with the following in `main.ts`:
 
-<docs-code language="javascript">
+```ts
 bootstrapApplication(AppComponent, appConfig);
-</docs-code>
+```
 
 The `bootstrapApplication()` method creates a child injector of the platform injector which is configured by the `ApplicationConfig` instance.
 This is the `root` `EnvironmentInjector`.
@@ -132,13 +125,13 @@ Angular creates `ElementInjector` hierarchies implicitly for each DOM element.
 Providing a service in the `@Component()` decorator using its `providers` or `viewProviders` property configures an `ElementInjector`.
 For example, the following `TestComponent` configures the `ElementInjector` by providing the service as follows:
 
-<docs-code language="typescript" highlight="[3]">
+```ts {highlight:[3]}
 @Component({
-  …
+  /* … */
   providers: [{ provide: ItemService, useValue: { name: 'lamp' } }]
 })
 export class TestComponent
-</docs-code>
+```
 
 HELPFUL: See the [resolution rules](#resolution-rules) section to understand the relationship between the `EnvironmentInjector` tree, the `ModuleInjector` and the `ElementInjector` tree.
 
@@ -184,17 +177,17 @@ Import each of them from `@angular/core` and use each in the `inject` configurat
 
 Resolution modifiers fall into three categories:
 
-* What to do if Angular doesn't find what you're looking for, that is `optional`
-* Where to start looking, that is `skipSelf`
-* Where to stop looking, `host` and `self`
+- What to do if Angular doesn't find what you're looking for, that is `optional`
+- Where to start looking, that is `skipSelf`
+- Where to stop looking, `host` and `self`
 
 By default, Angular always starts at the current `Injector` and keeps searching all the way up.
 Modifiers allow you to change the starting, or _self_, location and the ending location.
 
 Additionally, you can combine all of the modifiers except:
 
-* `host` and `self`
-* `skipSelf` and `self`.
+- `host` and `self`
+- `skipSelf` and `self`.
 
 ### `optional`
 
@@ -202,11 +195,11 @@ Additionally, you can combine all of the modifiers except:
 This way, if it can't be resolved at runtime, Angular resolves the service as `null`, rather than throwing an error.
 In the following example, the service, `OptionalService`, isn't provided in the service, `ApplicationConfig`, `@NgModule()`, or component class, so it isn't available anywhere in the app.
 
-<docs-code header="src/app/optional/optional.component.ts" language="typescript">
+```ts {header:"src/app/optional/optional.component.ts"}
 export class OptionalComponent {
   public optional? = inject(OptionalService, {optional: true});
 }
-</docs-code>
+```
 
 ### `self`
 
@@ -217,8 +210,7 @@ To avoid errors in this situation, combine `self` with `optional`.
 
 For example, in the following `SelfNoDataComponent`, notice the injected `LeafService` as a property.
 
-<docs-code header="src/app/self-no-data/self-no-data.component.ts" language="typescript"
-           highlight="[7]">
+```ts {header: 'self-no-data.component.ts', highlight: [7]}
 @Component({
   selector: 'app-self-no-data',
   templateUrl: './self-no-data.component.html',
@@ -227,34 +219,43 @@ For example, in the following `SelfNoDataComponent`, notice the injected `LeafSe
 export class SelfNoDataComponent {
   public leaf = inject(LeafService, {optional: true, self: true});
 }
-</docs-code>
+```
 
 In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `self` and `optional` will return `null` because `self` tells the injector to stop searching in the current host element.
 
 Another example shows the component class with a provider for `FlowerService`.
-In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip <code>&#x1F337;</code>.
+In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip 🌷.
 
-<docs-code header="src/app/self/self.component.ts" path="adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
+```ts {header:"src/app/self/self.component.ts"}
+@Component({
+  selector: 'app-self',
+  templateUrl: './self.component.html',
+  styleUrls: ['./self.component.css'],
+  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
+})
+export class SelfComponent {
+  constructor(@Self() public flower: FlowerService) {}
+}
+```
 
 ### `skipSelf`
 
 `skipSelf` is the opposite of `self`.
 With `skipSelf`, Angular starts its search for a service in the parent `ElementInjector`, rather than in the current one.
-So if the parent `ElementInjector` were using the fern <code>&#x1F33F;</code> value for `emoji`, but you had maple leaf <code>&#x1F341;</code> in the component's `providers` array, Angular would ignore maple leaf <code>&#x1F341;</code> and use fern <code>&#x1F33F;</code>.
+So if the parent `ElementInjector` were using the fern <code>🌿</code> value for `emoji`, but you had maple leaf <code>🍁</code> in the component's `providers` array, Angular would ignore maple leaf <code>🍁</code> and use fern <code>🌿</code>.
 
 To see this in code, assume that the following value for `emoji` is what the parent component were using, as in this service:
 
-<docs-code header="src/app/leaf.service.ts" language="typescript">
+```ts {header: 'leaf.service.ts'}
 export class LeafService {
   emoji = '🌿';
 }
-</docs-code>
+```
 
-Imagine that in the child component, you had a different value, maple leaf <code>&#x1F341;</code> but you wanted to use the parent's value instead.
+Imagine that in the child component, you had a different value, maple leaf 🍁 but you wanted to use the parent's value instead.
 This is when you'd use `skipSelf`:
 
-<docs-code header="src/app/skipself/skipself.component.ts" language="typescript"
-           highlight="[[6],[10]]">
+```ts {header:"skipself.component.ts" highlight:[[6],[10]]}
 @Component({
   selector: 'app-skipself',
   templateUrl: './skipself.component.html',
@@ -266,9 +267,9 @@ export class SkipselfComponent {
   // Use skipSelf as inject option
   public leaf = inject(LeafService, {skipSelf: true});
 }
-</docs-code>
+```
 
-In this case, the value you'd get for `emoji` would be fern <code>&#x1F33F;</code>, not maple leaf <code>&#x1F341;</code>.
+In this case, the value you'd get for `emoji` would be fern <code>🌿</code>, not maple leaf <code>🍁</code>.
 
 #### `skipSelf` option with `optional`
 
@@ -277,11 +278,11 @@ Use the `skipSelf` option with `optional` to prevent an error if the value is `n
 In the following example, the `Person` service is injected during property initialization.
 `skipSelf` tells Angular to skip the current injector and `optional` will prevent an error should the `Person` service be `null`.
 
-<docs-code language="typescript">
+```ts
 class Person {
   parent = inject(Person, {optional: true, skipSelf: true})
 }
-</docs-code>
+```
 
 ### `host`
 
@@ -292,34 +293,33 @@ class Person {
 Even if there is a service instance further up the tree, Angular won't continue looking.
 Use `host` as follows:
 
-<docs-code header="src/app/host/host.component.ts" language="typescript"
-           highlight="[[6],[10]]">
+```ts {header:"host.component.ts" highlight:[[6],[9]]}
 @Component({
   selector: 'app-host',
   templateUrl: './host.component.html',
   styleUrls: ['./host.component.css'],
-  //  provide the service
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }]
+  // provide the service
+  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
 export class HostComponent {
   // use host when injecting the service
   flower = inject(FlowerService, {host: true, optional: true});
 }
-</docs-code>
+```
 
-Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip <code>&#x1F337;</code>.
+Since `HostComponent` has the `host` option , no matter what the parent of `HostComponent` might have as a `flower.emoji` value, the `HostComponent` will use tulip <code>🌷</code>.
 
-### Modifiers with constructor injection  
+### Modifiers with constructor injection
 
 Similarly as presented before, the behavior of constructor injection can be modified with `@Optional()`, `@Self()`, `@SkipSelf()` and `@Host()`.
 
 Import each of them from `@angular/core` and use each in the component class constructor when you inject your service.
 
-<docs-code header="src/app/self-no-data/self-no-data.component.ts" language="typescript" highlight="[3]">
+```ts {header:"self-no-data.component.ts" highlight:[2]}
 export class SelfNoDataComponent {
   constructor(@Self() @Optional() public leaf?: LeafService) { }
 }
-</docs-code>
+```
 
 ## Logical structure of the template
 
@@ -329,11 +329,11 @@ Understanding the underlying logical structure of the Angular template will give
 
 Components are used in your templates, as in the following example:
 
-<docs-code language="html">
+```html
 <app-root>
   <app-child></app-child>;
 </app-root>
-</docs-code>
+```
 
 HELPFUL: Usually, you declare the components and their templates in separate files.
 For the purposes of understanding how the injection system works, it is useful to look at them from the point of view of a combined logical tree.
@@ -342,7 +342,7 @@ To mark the locations of where the component templates are located, this guide u
 
 The following is an example of how the `<app-root>` and `<app-child>` view trees are combined into a single logical tree:
 
-<docs-code language="html">
+```html
 <app-root>
   <#VIEW>
     <app-child>
@@ -352,7 +352,7 @@ The following is an example of how the `<app-root>` and `<app-child>` view trees
     </app-child>
   </#VIEW>
 </app-root>
-</docs-code>
+```
 
 Understanding the idea of the `<#VIEW>` demarcation is especially significant when you configure services in the component class.
 
@@ -363,8 +363,8 @@ The following sections demonstrate `providers` and `viewProviders` along with wa
 
 A component class can provide services in two ways:
 
-| Arrays                       | Details |
-|:---                          |:---     |
+| Arrays                       | Details                                        |
+| :--------------------------- | :--------------------------------------------- |
 | With a `providers` array     | `@Component({ providers: [SomeService] })`     |
 | With a `viewProviders` array | `@Component({ viewProviders: [SomeService] })` |
 
@@ -375,40 +375,38 @@ For example, the logical tree will show that `<child-component>` is a direct chi
 In the logical tree, you will see special attributes: `@Provide`, `@Inject`, and `@ApplicationConfig`.
 These aren't real attributes but are here to demonstrate what is going on under the hood.
 
-| Angular service attribute                                                                                          | Details |
-|:---                                                                                                                |:---     |
-| `@Inject(Token)=>Value`     | If `Token` is injected at this location in the logical tree, its value would be `Value`.     |
-| `@Provide(Token=Value)`     | Indicates that `Token` is provided with `Value` at this location in the logical tree.        |
-| `@ApplicationConfig` | Demonstrates that a fallback `EnvironmentInjector` should be used at this location.          |
+| Angular service attribute | Details                                                                                  |
+| :------------------------ | :--------------------------------------------------------------------------------------- |
+| `@Inject(Token)=>Value`   | If `Token` is injected at this location in the logical tree, its value would be `Value`. |
+| `@Provide(Token=Value)`   | Indicates that `Token` is provided with `Value` at this location in the logical tree.    |
+| `@ApplicationConfig`      | Demonstrates that a fallback `EnvironmentInjector` should be used at this location.      |
 
 ### Example app structure
 
-The example application has a `FlowerService` provided in `root` with an `emoji` value of red hibiscus <code>&#x1F33A;</code>.
+The example application has a `FlowerService` provided in `root` with an `emoji` value of red hibiscus <code>🌺</code>.
 
-<docs-code header="src/app/flower.service.ts" language="typescript">
+```ts {header:"lower.service.ts"}
 @Injectable({
   providedIn: 'root'
 })
 export class FlowerService {
   emoji = '🌺';
 }
-</docs-code>
+```
 
 Consider an application with only an `AppComponent` and a `ChildComponent`.
 The most basic rendered view would look like nested HTML elements such as the following:
 
-<docs-code language="html">
-
+```html
 <app-root> <!-- AppComponent selector -->
-  <app-child> <!-- ChildComponent selector -->
-  </app-child>
+<app-child> <!-- ChildComponent selector -->
+</app-child>
 </app-root>
-
-</docs-code>
+```
 
 However, behind the scenes, Angular uses a logical view representation as follows when resolving injection requests:
 
-<docs-code language="html">
+```html
 <app-root> <!-- AppComponent selector -->
   <#VIEW>
     <app-child> <!-- ChildComponent selector -->
@@ -417,7 +415,7 @@ However, behind the scenes, Angular uses a logical view representation as follow
     </app-child>
   </#VIEW>
 </app-root>
-</docs-code>
+```
 
 The `<#VIEW>` here represents an instance of a template.
 Notice that each component has its own `<#VIEW>`.
@@ -426,57 +424,55 @@ Knowledge of this structure can inform how you provide and inject your services,
 
 Now, consider that `<app-root>` injects the `FlowerService`:
 
-<docs-code header="src/app/app.component.ts" language="typescript">
+```typescript
 export class AppComponent  {
   flower = inject(FlowerService);
 }
-</docs-code>
+```
 
 Add a binding to the `<app-root>` template to visualize the result:
 
-<docs-code header="src/app/app.component.html" language="html">
+```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
-</docs-code>
+```
 
 The output in the view would be:
 
-<docs-code language="shell">
-Emoji from FlowerService: &#x1F33A;
-</docs-code>
+```shell
+Emoji from FlowerService: 🌺
+```
 
 In the logical tree, this would be represented as follows:
 
-<docs-code language="html" highlight="[[1],[2],[4]]">
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
+        @Inject(FlowerService) flower=>"🌺">
   <#VIEW>
-    <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
+    <p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
     <app-child>
       <#VIEW>
       </#VIEW>
     </app-child>
   </#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 When `<app-root>` requests the `FlowerService`, it is the injector's job to resolve the `FlowerService` token.
 The resolution of the token happens in two phases:
 
 1. The injector determines the starting location in the logical tree and an ending location of the search.
-    The injector begins with the starting location and looks for the token at each view level in the logical tree.
-    If the token is found it is returned.
+   The injector begins with the starting location and looks for the token at each view level in the logical tree.
+   If the token is found it is returned.
 
 1. If the token is not found, the injector looks for the closest parent `EnvironmentInjector` to delegate the request to.
 
 In the example case, the constraints are:
 
 1. Start with `<#VIEW>` belonging to `<app-root>` and end with `<app-root>`.
-
-    * Normally the starting point for search is at the point of injection.
-        However, in this case `<app-root>` is a component. `@Component`s are special in that they also include their own `viewProviders`, which is why the search starts at `<#VIEW>` belonging to `<app-root>`.
-        This would not be the case for a directive matched at the same location.
-    * The ending location happens to be the same as the component itself, because it is the topmost component in this application.
+   - Normally the starting point for search is at the point of injection.
+     However, in this case `<app-root>` is a component. `@Component`s are special in that they also include their own `viewProviders`, which is why the search starts at `<#VIEW>` belonging to `<app-root>`.
+     This would not be the case for a directive matched at the same location.
+   - The ending location happens to be the same as the component itself, because it is the topmost component in this application.
 
 1. The `EnvironmentInjector` provided by the `ApplicationConfig` acts as the fallback injector when the injection token can't be found in the `ElementInjector` hierarchies.
 
@@ -484,61 +480,59 @@ In the example case, the constraints are:
 
 Now, in the `ChildComponent` class, add a provider for `FlowerService` to demonstrate more complex resolution rules in the upcoming sections:
 
-<docs-code header="src/app/child.component.ts" language="typescript"
-           highlight="[[5,6],[10]]">
+```ts
 @Component({
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
   // use the providers array to provide a service
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
+  providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
 })
 export class ChildComponent {
   // inject the service
   flower = inject(FlowerService);
 }
-</docs-code>
+```
 
 Now that the `FlowerService` is provided in the `@Component()` decorator, when the `<app-child>` requests the service, the injector has only to look as far as the `ElementInjector` in the `<app-child>`.
 It won't have to continue the search any further through the injector tree.
 
 The next step is to add a binding to the `ChildComponent` template.
 
-<docs-code header="src/app/child.component.html" language="html">
+```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
-</docs-code>
+```
 
 To render the new values, add `<app-child>` to the bottom of the `AppComponent` template so the view also displays the sunflower:
 
-<docs-code language="shell">
+```shell
 Child Component
-Emoji from FlowerService: &#x1F33B;
-</docs-code>
+Emoji from FlowerService: 🌻
+```
 
 In the logical tree, this is represented as follows:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW>
-    <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
-    <app-child @Provide(FlowerService="&#x1F33B;")
-               @Inject(FlowerService)=>"&#x1F33B;"> <!-- search ends here -->
-      <#VIEW> <!-- search starts here -->
-        <h2>Child Component</h2>
-        <p>Emoji from FlowerService: {{flower.emoji}} (&#x1F33B;)</p>
-      </#VIEW>
-    </app-child>
-  </#VIEW>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW>
+
+<p>Emoji from FlowerService: {{flower.emoji}} (🌺)</p>
+<app-child @Provide(FlowerService="🌻")
+@Inject(FlowerService)=>"🌻"> <!-- search ends here -->
+<#VIEW> <!-- search starts here -->
+<h2>Child Component</h2>
+<p>Emoji from FlowerService: {{flower.emoji}} (🌻)</p>
+</#VIEW>
+</app-child>
+</#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 When `<app-child>` requests the `FlowerService`, the injector begins its search at the `<#VIEW>` belonging to `<app-child>` \(`<#VIEW>` is included because it is injected from `@Component()`\) and ends with `<app-child>`.
-In this case, the `FlowerService` is resolved in the `providers` array with sunflower <code>&#x1F33B;</code> of the `<app-child>`.
+In this case, the `FlowerService` is resolved in the `providers` array with sunflower <code>🌻</code> of the `<app-child>`.
 The injector doesn't have to look any further in the injector tree.
-It stops as soon as it finds the `FlowerService` and never sees the red hibiscus <code>&#x1F33A;</code>.
+It stops as soon as it finds the `FlowerService` and never sees the red hibiscus <code>🌺</code>.
 
 ### Using the `viewProviders` array
 
@@ -551,97 +545,92 @@ For step-by-step instructions, continue with this section.
 If you can set it up on your own, skip ahead to [Modifying service availability](#visibility-of-provided-tokens).
 
 For demonstration, we are building an `AnimalService` to demonstrate `viewProviders`.
-First, create an `AnimalService` with an `emoji` property of whale <code>&#x1F433;</code>:
+First, create an `AnimalService` with an `emoji` property of whale <code>🐳</code>:
 
-<docs-code header="src/app/animal.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
+```typescript
+import {Injectable} from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AnimalService {
   emoji = '🐳';
 }
-</docs-code>
+```
 
 Following the same pattern as with the `FlowerService`, inject the `AnimalService` in the `AppComponent` class:
 
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
+```ts
 export class AppComponent {
-    public flower = inject(FlowerService);
-    public animal = inject(AnimalService);
+  public flower = inject(FlowerService);
+  public animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 HELPFUL: You can leave all the `FlowerService` related code in place as it will allow a comparison with the `AnimalService`.
 
 Add a `viewProviders` array and inject the `AnimalService` in the `<app-child>` class, too, but give `emoji` a different value.
-Here, it has a value of dog <code>&#x1F436;</code>.
+Here, it has a value of dog 🐶.
 
-<docs-code header="src/app/child.component.ts" language="typescript"
-           highlight="[[7],[11]]">
+```typescript
 @Component({
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
   // provide services
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
-  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
+  providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
+  viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
 })
 export class ChildComponent {
   // inject services
-  flower = inject(FlowerService); 
-  animal = inject(AnimalService)
-...
+  flower = inject(FlowerService);
+  animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 Add bindings to the `ChildComponent` and the `AppComponent` templates.
 In the `ChildComponent` template, add the following binding:
 
-<docs-code header="src/app/child.component.html" language="html">
+```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
-</docs-code>
+```
 
 Additionally, add the same to the `AppComponent` template:
 
-<docs-code header="src/app/app.component.html" language="html">
+```html
 <p>Emoji from AnimalService: {{animal.emoji}}</p>s
-</docs-code>
+```
 
 Now you should see both values in the browser:
 
-<docs-code hideCopy language="shell">
-
+```shell
 AppComponent
-Emoji from AnimalService: &#x1F433;
+Emoji from AnimalService: 🐳
 
 Child Component
-Emoji from AnimalService: &#x1F436;
-
-</docs-code>
+Emoji from AnimalService: 🐶
+```
 
 The logic tree for this example of `viewProviders` is as follows:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-         @Inject(AnimalService) animal=>"&#x1F433;">
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-            @Inject(AnimalService=>"&#x1F436;")>
-       <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
-       <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService) animal=>"🐳">
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService=>"🐶")>
 
-</docs-code>
+<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
+<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
 Just as with the `FlowerService` example, the `AnimalService` is provided in the `<app-child>` `@Component()` decorator.
-This means that since the injector first looks in the `ElementInjector` of the component, it finds the `AnimalService` value of dog <code>&#x1F436;</code>.
+This means that since the injector first looks in the `ElementInjector` of the component, it finds the `AnimalService` value of dog <code>🐶</code>.
 It doesn't need to continue searching the `ElementInjector` tree, nor does it need to search the `ModuleInjector`.
 
 ### `providers` vs. `viewProviders`
@@ -653,36 +642,33 @@ To see the difference between using `providers` and `viewProviders`, add another
 `InspectorComponent` will be a child of the `ChildComponent`.
 In `inspector.component.ts`, inject the `FlowerService` and `AnimalService` during property initialization:
 
-<docs-code header="src/app/inspector/inspector.component.ts" language="typescript">
+```typescript
 export class InspectorComponent {
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 You do not need a `providers` or `viewProviders` array.
 Next, in `inspector.component.html`, add the same markup from previous components:
 
-<docs-code header="src/app/inspector/inspector.component.html" language="html">
+```html
 <p>Emoji from FlowerService: {{flower.emoji}}</p>
 <p>Emoji from AnimalService: {{animal.emoji}}</p>
-</docs-code>
+```
 
 Remember to add the `InspectorComponent` to the `ChildComponent` `imports` array.
 
-<docs-code header="src/app/child/child.component.ts" language="typescript"
-           highlight="[3]">
+```ts
 @Component({
   ...
   imports: [InspectorComponent]
 })
-
-</docs-code>
+```
 
 Next, add the following to `child.component.html`:
 
-<docs-code header="src/app/child/child.component.html" language="html"
-           highlight="[3,9]">
+```html
 ...
 
 <div class="container">
@@ -692,72 +678,71 @@ Next, add the following to `child.component.html`:
 <h3>Inside the view</h3>
 
 <app-inspector></app-inspector>
-</docs-code>
+```
 
 `<ng-content>` allows you to project content, and `<app-inspector>` inside the `ChildComponent` template makes the `InspectorComponent` a child component of `ChildComponent`.
 
 Next, add the following to `app.component.html` to take advantage of content projection.
 
-<docs-code header="src/app/app.component.html" language="html" highlight="[2]">
+```html
 <app-child>
   <app-inspector></app-inspector>
 </app-child>
-</docs-code>
+```
 
 The browser now renders the following, omitting the previous examples for brevity:
 
-<docs-code hideCopy language="shell">
+```shell
 ...
 Content projection
 
-Emoji from FlowerService: &#x1F33B;
-Emoji from AnimalService: &#x1F433;
+Emoji from FlowerService: 🌻
+Emoji from AnimalService: 🐳
 
-Emoji from FlowerService: &#x1F33B;
-Emoji from AnimalService: &#x1F436;
-
-</docs-code>
+Emoji from FlowerService: 🌻
+Emoji from AnimalService: 🐶
+```
 
 These four bindings demonstrate the difference between `providers` and `viewProviders`.
-Remember that the dog emoji <code>&#x1F436;</code> is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content.
-Instead, the projected content sees the whale <code>&#x1F433;</code>.
+Remember that the dog emoji <code>🐶</code> is declared inside the `<#VIEW>` of `ChildComponent` and isn't visible to the projected content.
+Instead, the projected content sees the whale <code>🐳</code>.
 
-However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>&#x1F436;</code>.
+However, in the next output section though, the `InspectorComponent` is an actual child component of `ChildComponent`, `InspectorComponent` is inside the `<#VIEW>`, so when it asks for the `AnimalService`, it sees the dog <code>🐶</code>.
 
 The `AnimalService` in the logical tree would look like this:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-         @Inject(AnimalService) animal=>"&#x1F433;">
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-            @Inject(AnimalService=>"&#x1F436;")>
-        <!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
-        <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+@Inject(AnimalService) animal=>"🐳">
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService=>"🐶")>
+
+<!-- ^^using viewProviders means AnimalService is available in <#VIEW>-->
+<p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
 
         <div class="container">
           <h3>Content projection</h3>
-          <app-inspector @Inject(AnimalService) animal=>"&#x1F433;">
-            <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F433;)</p>
+          <app-inspector @Inject(AnimalService) animal=>"🐳">
+            <p>Emoji from AnimalService: {{animal.emoji}} (🐳)</p>
           </app-inspector>
         </div>
 
         <app-inspector>
-          <#VIEW @Inject(AnimalService) animal=>"&#x1F436;">
-            <p>Emoji from AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+          <#VIEW @Inject(AnimalService) animal=>"🐶">
+            <p>Emoji from AnimalService: {{animal.emoji}} (🐶)</p>
           </#VIEW>
         </app-inspector>
       </#VIEW>
     </app-child>
-  </#VIEW>
-</app-root>
 
-</docs-code>
+</#VIEW>
+</app-root>
+```
 
-The projected content of `<app-inspector>` sees the whale <code>&#x1F433;</code>, not the dog <code>&#x1F436;</code>, because the dog <code>&#x1F436;</code> is inside the `<app-child>` `<#VIEW>`.
-The `<app-inspector>` can only see the dog <code>&#x1F436;</code> if it is also within the `<#VIEW>`.
+The projected content of `<app-inspector>` sees the whale <code>🐳</code>, not the dog <code>🐶</code>, because the dog <code>🐶</code> is inside the `<app-child>` `<#VIEW>`.
+The `<app-inspector>` can only see the dog <code>🐶</code> if it is also within the `<#VIEW>`.
 
 ### Visibility of provided tokens
 
@@ -767,157 +752,149 @@ To do this, place visibility configuration at the point of injection, that is, w
 To alter where the injector starts looking for `FlowerService`, add `skipSelf` to the `<app-child>` `inject()` invocation where `FlowerService` is injected.
 This invocation is a property initializer the `<app-child>` as shown in `child.component.ts`:
 
-<docs-code language="typescript">
-flower = inject(FlowerService, { skipSelf: true })
-</docs-code>
+```typescript
+  flower = inject(FlowerService, { skipSelf: true })
+```
 
 With `skipSelf`, the `<app-child>` injector doesn't look to itself for the `FlowerService`.
 Instead, the injector starts looking for the `FlowerService` at the `ElementInjector` of the `<app-root>`, where it finds nothing.
-Then, it goes back to the `<app-child>` `ModuleInjector` and finds the red hibiscus <code>&#x1F33A;</code> value, which is available because `<app-child>` and `<app-root>` share the same `ModuleInjector`.
+Then, it goes back to the `<app-child>` `ModuleInjector` and finds the red hibiscus <code>🌺</code> value, which is available because `<app-child>` and `<app-root>` share the same `ModuleInjector`.
 The UI renders the following:
 
-<docs-code hideCopy language="shell">
-
-Emoji from FlowerService: &#x1F33A;
-
-</docs-code>
+```shell
+Emoji from FlowerService: 🌺
+```
 
 In a logical tree, this same idea might look like this:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW>
-    <app-child @Provide(FlowerService="&#x1F33B;")>
-      <#VIEW @Inject(FlowerService, SkipSelf)=>"&#x1F33A;">
-        <!-- With SkipSelf, the injector looks to the next injector up the tree (app-root) -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW>
+<app-child @Provide(FlowerService="🌻")>
+<#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">
 
-</docs-code>
+<!-- With SkipSelf, the injector looks to the next injector up the tree (app-root) -->
 
-Though `<app-child>` provides the sunflower <code>&#x1F33B;</code>, the application renders the red hibiscus <code>&#x1F33A;</code> because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent.
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
+
+Though `<app-child>` provides the sunflower <code>🌻</code>, the application renders the red hibiscus <code>🌺</code> because `skipSelf` causes the current injector (`app-child`) to skip itself and look to its parent.
 
 If you now add `host` (in addition to the `skipSelf`), the result will be `null`.
 This is because `host` limits the upper bound of the search to the `app-child` `<#VIEW>`.
 Here's the idea in the logical tree:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW> <!-- end search here with null-->
-    <app-child @Provide(FlowerService="&#x1F33B;")> <!-- start search here -->
-      <#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null>
-      </#VIEW>
-      </app-parent>
-  </#VIEW>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW> <!-- end search here with null-->
+<app-child @Provide(FlowerService="🌻")> <!-- start search here -->
+<#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null>
+</#VIEW>
+</app-parent>
+</#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 Here, the services and their values are the same, but `host` stops the injector from looking any further than the `<#VIEW>` for `FlowerService`, so it doesn't find it and returns `null`.
 
 ### `skipSelf` and `viewProviders`
 
-Remember, `<app-child>` provides the `AnimalService` in the `viewProviders` array with the value of dog <code>&#x1F436;</code>.
-Because the injector has only to look at the `ElementInjector` of the `<app-child>` for the `AnimalService`, it never sees the whale <code>&#x1F433;</code>.
+Remember, `<app-child>` provides the `AnimalService` in the `viewProviders` array with the value of dog <code>🐶</code>.
+Because the injector has only to look at the `ElementInjector` of the `<app-child>` for the `AnimalService`, it never sees the whale <code>🐳</code>.
 
-As in the `FlowerService` example, if you add `skipSelf` to the `inject()` of `AnimalService`, the injector won't look in the  `ElementInjector` of the current `<app-child>` for the `AnimalService`.
+As in the `FlowerService` example, if you add `skipSelf` to the `inject()` of `AnimalService`, the injector won't look in the `ElementInjector` of the current `<app-child>` for the `AnimalService`.
 Instead, the injector will begin at the `<app-root>` `ElementInjector`.
 
-<docs-code language="typescript" highlight="[5]">
+```typescript
 @Component({
   selector: 'app-child',
   …
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F436;' } },
+    { provide: AnimalService, useValue: { emoji: '🐶' } },
   ],
 })
-</docs-code>
+```
 
 The logical tree looks like this with `skipSelf` in `<app-child>`:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;")>
-  <#VIEW><!-- search begins here -->
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             @Inject(AnimalService, SkipSelf=>"&#x1F433;")>
-        <!--Add skipSelf -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService=>"🐳")>
+<#VIEW><!-- search begins here -->
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService, SkipSelf=>"🐳")>
 
-</docs-code>
+<!--Add skipSelf -->
+
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
-With `skipSelf` in the `<app-child>`, the injector begins its search for the `AnimalService` in the `<app-root>` `ElementInjector` and finds whale <code>&#x1F433;</code>.
+With `skipSelf` in the `<app-child>`, the injector begins its search for the `AnimalService` in the `<app-root>` `ElementInjector` and finds whale 🐳.
 
 ### `host` and `viewProviders`
 
-If you just use `host` for the injection of `AnimalService`, the result is dog <code>&#x1F436;</code> because the injector finds the `AnimalService` in the `<app-child>` `<#VIEW>` itself.
+If you just use `host` for the injection of `AnimalService`, the result is dog <code>🐶</code> because the injector finds the `AnimalService` in the `<app-child>` `<#VIEW>` itself.
 The `ChildComponent` configures the `viewProviders` so that the dog emoji is provided as `AnimalService` value.
 You can also see `host` the `inject()`:
 
-<docs-code language="typescript" highlight="[[5],[9]]">
+```typescript
 @Component({
   selector: 'app-child',
   …
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F436;' } },
+    { provide: AnimalService, useValue: { emoji: '🐶' } },
   ]
 })
 export class ChildComponent {
   animal = inject(AnimalService, { host: true })
 }
-</docs-code>
+```
 
 `host: true` causes the injector to look until it encounters the edge of the `<#VIEW>`.
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;")>
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             inject(AnimalService, {host: true}=>"&#x1F436;")> <!-- host stops search here -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
+@Inject(AnimalService=>"🐳")>
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+inject(AnimalService, {host: true}=>"🐶")> <!-- host stops search here -->
+</#VIEW>
+</app-child>
+</#VIEW>
 </app-root>
+```
 
-</docs-code>
-
-Add a `viewProviders` array with a third animal, hedgehog <code>&#x1F994;</code>, to the `app.component.ts` `@Component()` metadata:
+Add a `viewProviders` array with a third animal, hedgehog <code>🦔</code>, to the `app.component.ts` `@Component()` metadata:
 
-<docs-code language="typescript" highlight="[6]">
+```typescript
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F994;' } },
+    { provide: AnimalService, useValue: { emoji: '🦔' } },
   ],
 })
-
-</docs-code>
+```
 
 Next, add `skipSelf` along with `host` to the `inject()` for the `AnimalService` injection in `child.component.ts`.
 Here are `host` and `skipSelf` in the `animal` property initialization:
 
-<docs-code language="typescript" highlight="[4]">
+```typescript
 export class ChildComponent {
   animal = inject(AnimalService, { host: true, skipSelf: true });
 }
-
-</docs-code>
+```
 
 <!-- TODO: This requires a rework. It seems not well explained what `viewProviders`/`injectors` is here
   and how `host` works.
@@ -930,26 +907,25 @@ However, the `AnimalService`, which is provided in the `AppComponent` `viewProvi
 
 The logical tree representation shows why this is:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(AnimalService=>"&#x1F433;")>
-  <#VIEW @Provide(AnimalService="&#x1F994;")
-         @Inject(AnimalService, @Optional)=>"&#x1F994;">
-    <!-- ^^skipSelf starts here,  host stops here^^ -->
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"&#x1F994;">
-               <!-- Add skipSelf ^^-->
-      </#VIEW>
-      </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService=>"🐳")>
+<#VIEW @Provide(AnimalService="🦔")
+@Inject(AnimalService, @Optional)=>"🦔">
 
-</docs-code>
+<!-- ^^skipSelf starts here,  host stops here^^ -->
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔">
+<!-- Add skipSelf ^^-->
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
 `skipSelf`, causes the injector to start its search for the `AnimalService` at the `<app-root>`, not the `<app-child>`, where the request originates, and `host` stops the search at the `<app-root>` `<#VIEW>`.
-Since `AnimalService` is provided by way of the `viewProviders` array, the injector finds hedgehog <code>&#x1F994;</code> in the `<#VIEW>`.
+Since `AnimalService` is provided by way of the `viewProviders` array, the injector finds hedgehog <code>🦔</code> in the `<#VIEW>`.
 
 ## Example: `ElementInjector` use cases
 
@@ -966,15 +942,14 @@ If you later modify the `VillainsService`, you could break something in other co
 
 Instead, you should provide the `VillainsService` in the `providers` metadata of the `VillainsListComponent` like this:
 
-<docs-code header="src/app/villains-list.component.ts (metadata)" language="typescript"
-           highlight="[4]">
+```typescript
 @Component({
   selector: 'app-villains-list',
   templateUrl: './villains-list.component.html',
-  providers: [VillainsService]
+  providers: [VillainsService],
 })
 export class VillainsListComponent {}
-</docs-code>
+```
 
 By providing `VillainsService` in the `VillainsListComponent` metadata and nowhere else, the service becomes available only in the `VillainsListComponent` and its subcomponent tree.
 
@@ -993,9 +968,9 @@ Each selected hero tax return opens in its own component and multiple returns ca
 
 Each tax return component has the following characteristics:
 
-* Is its own tax return editing session
-* Can change a tax return without affecting a return in another component
-* Has the ability to save the changes to its tax return or cancel them
+- Is its own tax return editing session
+- Can change a tax return without affecting a return in another component
+- Has the ability to save the changes to its tax return or cancel them
 
 Suppose that the `HeroTaxReturnComponent` had logic to manage and restore changes.
 That would be a straightforward task for a hero tax return.
@@ -1005,10 +980,10 @@ You could delegate that management to a helper service, as this example does.
 The `HeroTaxReturnService` caches a single `HeroTaxReturn`, tracks changes to that return, and can save or restore it.
 It also delegates to the application-wide singleton `HeroService`, which it gets by injection.
 
-<docs-code header="src/app/hero-tax-return.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroesService } from './heroes.service';
+```typescript
+import {inject, Injectable} from '@angular/core';
+import {HeroTaxReturn} from './hero';
+import {HeroesService} from './heroes.service';
 
 @Injectable()
 export class HeroTaxReturnService {
@@ -1019,7 +994,7 @@ export class HeroTaxReturnService {
 
   set taxReturn(htr: HeroTaxReturn) {
     this.originalTaxReturn = htr;
-    this.currentTaxReturn  = htr.clone();
+    this.currentTaxReturn = htr.clone();
   }
 
   get taxReturn(): HeroTaxReturn {
@@ -1035,20 +1010,20 @@ export class HeroTaxReturnService {
     this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
   }
 }
-</docs-code>
+```
 
 Here is the `HeroTaxReturnComponent` that makes use of `HeroTaxReturnService`.
 
-<docs-code header="src/app/hero-tax-return.component.ts" language="typescript">
-import { Component, EventEmitter, input, output } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroTaxReturnService } from './hero-tax-return.service';
+```typescript
+import {Component, input, output} from '@angular/core';
+import {HeroTaxReturn} from './hero';
+import {HeroTaxReturnService} from './hero-tax-return.service';
 
 @Component({
   selector: 'app-hero-tax-return',
   templateUrl: './hero-tax-return.component.html',
-  styleUrls: [ './hero-tax-return.component.css' ],
-  providers: [ HeroTaxReturnService ]
+  styleUrls: ['./hero-tax-return.component.css'],
+  providers: [HeroTaxReturnService],
 })
 export class HeroTaxReturnComponent {
   message = '';
@@ -1064,17 +1039,19 @@ export class HeroTaxReturnComponent {
   constructor() {
     effect(() => {
       this.heroTaxReturnService.taxReturn = this.taxReturn();
-    })
+    });
   }
 
   private heroTaxReturnService = inject(HeroTaxReturnService);
 
-  onCanceled()  {
+  onCanceled() {
     this.flashMessage('Canceled');
     this.heroTaxReturnService.restoreTaxReturn();
   }
 
-  onClose() { this.close.emit(); }
+  onClose() {
+    this.close.emit();
+  }
 
   onSaved() {
     this.flashMessage('Saved');
@@ -1083,10 +1060,10 @@ export class HeroTaxReturnComponent {
 
   flashMessage(msg: string) {
     this.message = msg;
-    setTimeout(() => this.message = '', 500);
+    setTimeout(() => (this.message = ''), 500);
   }
 }
-</docs-code>
+```
 
 The _tax-return-to-edit_ arrives by way of the `input` property, which is implemented with getters and setters.
 The setter initializes the component's own instance of the `HeroTaxReturnService` with the incoming return.
@@ -1098,9 +1075,9 @@ Every component would share the same service instance, and each component would
 
 To prevent this, configure the component-level injector of `HeroTaxReturnComponent` to provide the service, using the `providers` property in the component metadata.
 
-<docs-code header="src/app/hero-tax-return.component.ts (providers)" language="typescript">
-providers: [HeroTaxReturnService]
-</docs-code>
+```typescript
+  providers: [HeroTaxReturnService]
+```
 
 The `HeroTaxReturnComponent` has its own provider of the `HeroTaxReturnService`.
 Recall that every component _instance_ has its own injector.
@@ -1116,7 +1093,7 @@ For example, consider a `Car` component that includes tire service information a
 
 The root injector, marked as (A), uses _generic_ providers for details about `CarService` and `EngineService`.
 
-1. `Car` component (A).  Component (A) displays tire service data about a car and specifies generic services to provide more information about the car.
+1. `Car` component (A). Component (A) displays tire service data about a car and specifies generic services to provide more information about the car.
 
 2. Child component (B). Component (B) defines its own, _specialized_ providers for `CarService` and `EngineService` that have special capabilities suitable for what's going on in component (B).
 
@@ -1141,9 +1118,9 @@ Behind the scenes, each component sets up its own injector with zero, one, or mo
 
 When you resolve an instance of `Car` at the deepest component (C), its injector produces:
 
-* An instance of `Car` resolved by injector (C)
-* An `Engine` resolved by injector (B)
-* Its `Tires` resolved by the root injector (A).
+- An instance of `Car` resolved by injector (C)
+- An `Engine` resolved by injector (B)
+- Its `Tires` resolved by the root injector (A).
 
 ```mermaid
 graph BT;
diff --git a/adev-es/src/content/guide/di/hierarchical-dependency-injection.md b/adev-es/src/content/guide/di/hierarchical-dependency-injection.md
index 87bfb1a..f424898 100644
--- a/adev-es/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev-es/src/content/guide/di/hierarchical-dependency-injection.md
@@ -1,23 +1,17 @@
 # Inyectores jerárquicos
 
-Los inyectores en Angular tienen reglas que puedes aprovechar para lograr la visibilidad deseada de inyectables en tus aplicaciones.
-Al entender estas reglas, puedes determinar si declarar un proveedor a nivel de aplicación, en un Componente, o en una Directiva.
+Esta guía proporciona una cobertura en profundidad del sistema de inyección de dependencias jerárquico de Angular, incluyendo reglas de resolución, modificadores y patrones avanzados.
 
-Las aplicaciones que construyes con Angular pueden volverse bastante grandes, y una forma de manejar esta complejidad es dividir la aplicación en un árbol bien definido de componentes.
-
-Puede haber secciones de tu página que funcionen de una manera completamente independiente al resto de la aplicación, con sus propias copias locales de los servicios y otras dependencias que necesita.
-Algunos de los servicios que estas secciones de la aplicación usan podrían ser compartidos con otras partes de la aplicación, o con componentes padre que están más arriba en el árbol de componentes, mientras que otras dependencias están destinadas a ser privadas.
-
-Con la inyección de dependencias jerárquica, puedes aislar secciones de la aplicación y darles sus propias dependencias privadas no compartidas con el resto de la aplicación, o hacer que los componentes padre compartan ciertas dependencias con sus componentes hijo únicamente pero no con el resto del árbol de componentes, y así sucesivamente. La inyección de dependencias jerárquica te permite compartir dependencias entre diferentes partes de la aplicación solo cuando y si las necesitas.
+NOTA: Para conceptos básicos sobre la jerarquía de inyectores y el alcance de proveedores, consulta la [guía de definición de proveedores de dependencias](guide/di/defining-dependency-providers#injector-hierarchy-in-angular).
 
 ## Tipos de jerarquías de inyectores
 
 Angular tiene dos jerarquías de inyectores:
 
-| Jerarquías de inyectores        | Detalles |
-|:---                         |:---     |
-| Jerarquía `EnvironmentInjector` | Configura un `EnvironmentInjector` en esta jerarquía usando `@Injectable()` o array `providers` en `ApplicationConfig`. |
-| Jerarquía `ElementInjector` | Creada implícitamente en cada elemento DOM. Un `ElementInjector` está vacío por defecto a menos que lo configures en la propiedad `providers` en `@Directive()` o `@Component()`. |
+| Jerarquías de inyectores        | Detalles                                                                                                                                                                         |
+|:------------------------------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Jerarquía `EnvironmentInjector` | Configura un `EnvironmentInjector` en esta jerarquía usando `@Injectable()` o array `providers` en `ApplicationConfig`.                                                            |
+| Jerarquía `ElementInjector`     | Creada implícitamente en cada elemento DOM. Un `ElementInjector` está vacío por defecto a menos que lo configures en la propiedad `providers` en `@Directive()` o `@Component()`. |
 
 <docs-callout title="Aplicaciones basadas en NgModule">
 Para aplicaciones basadas en `NgModule`, puedes proveer dependencias con la jerarquía `ModuleInjector` usando una anotación `@NgModule()` o `@Injectable()`.
@@ -27,8 +21,8 @@ Para aplicaciones basadas en `NgModule`, puedes proveer dependencias con la jera
 
 El `EnvironmentInjector` puede ser configurado de una de dos maneras usando:
 
-* La propiedad `providedIn` de `@Injectable()` para referirse a `root` o `platform`
-* El array `providers` de `ApplicationConfig`
+- La propiedad `providedIn` de `@Injectable()` para referirse a `root` o `platform`
+- El array `providers` de `ApplicationConfig`
 
 <docs-callout title="Tree-shaking y @Injectable()">
 
@@ -42,17 +36,16 @@ El tree-shaking es especialmente útil para una biblioteca porque la aplicación
 
 Provee servicios usando `providedIn` de `@Injectable()` de la siguiente manera:
 
-<docs-code language="typescript" highlight="[4]">
+```ts {highlight:[4]}
 import { Injectable } from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'  // <--provee este servicio en el EnvironmentInjector raíz
+  providedIn: 'root' // <--provee este servicio en el EnvironmentInjector raíz
 })
 export class ItemService {
   name = 'telephone';
 }
-
-</docs-code>
+```
 
 El decorador `@Injectable()` identifica una clase de servicio.
 La propiedad `providedIn` configura un `EnvironmentInjector` específico, en este caso `root`, que hace que el servicio esté disponible en el `EnvironmentInjector` `root`.
@@ -61,8 +54,8 @@ La propiedad `providedIn` configura un `EnvironmentInjector` específico, en est
 
 En el caso de aplicaciones basadas en `NgModule`, el ModuleInjector puede ser configurado de una de dos maneras usando:
 
-* La propiedad `providedIn` de `@Injectable()` para referirse a `root` o `platform`
-* El array `providers` de `@NgModule()`
+- La propiedad `providedIn` de `@Injectable()` para referirse a `root` o `platform`
+- El array `providers` de `@NgModule()`
 
 `ModuleInjector` está configurado por la propiedad `@NgModule.providers` y `NgModule.imports`. `ModuleInjector` es un aplanamiento de todos los arrays de proveedores que pueden ser alcanzados siguiendo `NgModule.imports` recursivamente.
 
@@ -74,9 +67,9 @@ Hay dos inyectores más arriba de `root`, un `EnvironmentInjector` adicional y `
 
 Considera cómo Angular inicializa la aplicación con lo siguiente en `main.ts`:
 
-<docs-code language="javascript">
+```ts
 bootstrapApplication(AppComponent, appConfig);
-</docs-code>
+```
 
 El método `bootstrapApplication()` crea un inyector hijo del inyector de plataforma que se configura mediante la la instancia `ApplicationConfig`.
 Este es el `EnvironmentInjector` `root`.
@@ -90,7 +83,7 @@ El siguiente inyector padre en la jerarquía es el `NullInjector()`, que está e
 Si has ido tan arriba en el árbol que estás buscando un servicio en el `NullInjector()`, obtendrás un error a menos que hayas usado `@Optional()` porque en última instancia, todo termina en el `NullInjector()` y devuelve un error o, en el caso de `@Optional()`, `null`.
 Para más información sobre `@Optional()`, consulta la [sección `@Optional()`](#optional) de esta guía.
 
-El siguiente diagrama representa la relación entre el `ModuleInjector` `root` y sus inyectores padre como describen los párrafos anteriores.
+El siguiente diagrama representa la relación entre el `root` `ModuleInjector` y sus inyectores padre como describen los párrafos anteriores.
 
 ```mermaid
 stateDiagram-v2
@@ -132,18 +125,18 @@ Angular crea jerarquías de `ElementInjector` implícitamente para cada elemento
 Proveer un servicio en el decorador `@Component()` usando su propiedad `providers` o `viewProviders` configura un `ElementInjector`.
 Por ejemplo, el siguiente `TestComponent` configura el `ElementInjector` proveyendo el servicio de la siguiente manera:
 
-<docs-code language="typescript" highlight="[3]">
+```ts {highlight:[3]}
 @Component({
-  …
+  /* … */
   providers: [{ provide: ItemService, useValue: { name: 'lamp' } }]
 })
 export class TestComponent
-</docs-code>
+```
 
-ÚTIL: Consulta la sección [reglas de resolución](#resolution-rules) para entender la relación entre el árbol `EnvironmentInjector`, el `ModuleInjector` y el árbol `ElementInjector`.
+ÚTIL: Consulta la sección [reglas de resolución](#reglas-de-resolución) para entender la relación entre el árbol `EnvironmentInjector`, el `ModuleInjector` y el árbol `ElementInjector`.
 
 Cuando provees servicios en un componente, ese servicio está disponible por medio del `ElementInjector` en esa instancia de componente.
-También puede ser visible en componentes/directivas hijo basándose en las reglas de visibilidad descritas en la sección [reglas de resolución](#resolution-rules).
+También puede ser visible en componentes/directivas hijo basándose en las reglas de visibilidad descritas en la sección [reglas de resolución](#reglas-de-resolución).
 
 Cuando la instancia del componente se destruye, también se destruye esa instancia del servicio.
 
@@ -184,17 +177,17 @@ Importa cada uno de ellos desde `@angular/core` y usa cada uno en la configuraci
 
 Los modificadores de resolución caen en tres categorías:
 
-* Qué hacer si Angular no encuentra lo que estás buscando, eso es `optional`
-* Dónde empezar a buscar, eso es `skipSelf`
-* Dónde parar de buscar, `host` y `self`
+- Qué hacer si Angular no encuentra lo que estás buscando, eso es `optional`
+- Dónde empezar a buscar, eso es `skipSelf`
+- Dónde parar de buscar, `host` y `self`
 
 Por defecto, Angular siempre comienza en el `Injector` actual y sigue buscando todo el camino hacia arriba.
 Los modificadores te permiten cambiar la ubicación de inicio, o _self_, y la ubicación de finalización.
 
 Además, puedes combinar todos los modificadores excepto:
 
-* `host` y `self`
-* `skipSelf` y `self`.
+- `host` y `self`
+- `skipSelf` y `self`.
 
 ### `optional`
 
@@ -202,11 +195,11 @@ Además, puedes combinar todos los modificadores excepto:
 De esta manera, si no puede ser resuelto en tiempo de ejecución, Angular resuelve el servicio como `null`, en lugar de lanzar un error.
 En el siguiente ejemplo, el servicio, `OptionalService`, no está proveído en el servicio, `ApplicationConfig`, `@NgModule()`, o clase de componente, por lo que no está disponible en ningún lugar de la aplicación.
 
-<docs-code header="src/app/optional/optional.component.ts" language="typescript">
+```ts {header:"optional/optional.component.ts"}
 export class OptionalComponent {
   public optional? = inject(OptionalService, {optional: true});
 }
-</docs-code>
+```
 
 ### `self`
 
@@ -217,8 +210,7 @@ Para evitar errores en esta situación, combina `self` con `optional`.
 
 Por ejemplo, en el siguiente `SelfNoDataComponent`, nota el `LeafService` inyectado como una propiedad.
 
-<docs-code header="src/app/self-no-data/self-no-data.component.ts" language="typescript"
-           highlight="[7]">
+```ts {header: 'self-no-data.component.ts', highlight: [7]}
 @Component({
   selector: 'app-self-no-data',
   templateUrl: './self-no-data.component.html',
@@ -227,34 +219,43 @@ Por ejemplo, en el siguiente `SelfNoDataComponent`, nota el `LeafService` inyect
 export class SelfNoDataComponent {
   public leaf = inject(LeafService, {optional: true, self: true});
 }
-</docs-code>
+```
 
-In this example, there is a parent provider and injecting the service will return the value, however, injecting the service with `self` and `optional` will return `null` because `self` tells the injector to stop searching in the current host element.
+En este ejemplo, hay un proveedor padre e inyectar el servicio devolverá el valor, sin embargo, inyectar el servicio con `self` y `optional` devolverá `null` porque `self` le dice al inyector que deje de buscar en el elemento host actual.
 
 Otro ejemplo muestra la clase de componente con un proveedor para `FlowerService`.
-En este caso, el inyector no busca más allá del `ElementInjector` actual porque encuentra el `FlowerService` y devuelve el tulipán <code>&#x1F337;</code>.
+En este caso, el inyector no busca más allá del `ElementInjector` actual porque encuentra el `FlowerService` y devuelve el tulipán <code>🌷</code>.
 
-<docs-code header="src/app/self/self.component.ts" path="adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
+```ts {header:"self/self.component.ts"}
+@Component({
+  selector: 'app-self',
+  templateUrl: './self.component.html',
+  styleUrls: ['./self.component.css'],
+  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
+})
+export class SelfComponent {
+  constructor(@Self() public flower: FlowerService) {}
+}
+```
 
 ### `skipSelf`
 
 `skipSelf` es lo opuesto a `self`.
 Con `skipSelf`, Angular comienza su búsqueda de un servicio en el `ElementInjector` padre, en lugar del actual.
-Así que si el `ElementInjector` padre estuviera usando el valor de helecho <code>&#x1F33F;</code> para `emoji`, pero tuvieras hoja de arce <code>&#x1F341;</code> en el array `providers` del componente, Angular ignoraría la hoja de arce <code>&#x1F341;</code> y usaría el helecho <code>&#x1F33F;</code>.
+Así que si el `ElementInjector` padre estuviera usando el valor de helecho <code>🌿</code> para `emoji`, pero tuvieras hoja de arce <code>🍁</code> en el array `providers` del componente, Angular ignoraría la hoja de arce <code>🍁</code> y usaría el helecho <code>🌿</code>.
 
 Para ver esto en código, asume que el siguiente valor para `emoji` es lo que el componente padre estaría usando, como en este servicio:
 
-<docs-code header="src/app/leaf.service.ts" language="typescript">
+```ts {header: 'leaf.service.ts'}
 export class LeafService {
   emoji = '🌿';
 }
-</docs-code>
+```
 
-Imagina que en el componente hijo, tenías un valor diferente, hoja de arce <code>&#x1F341;</code> pero querías usar el valor del padre en su lugar.
+Imagina que en el componente hijo, tenías un valor diferente, hoja de arce <code>🍁</code> pero querías usar el valor del padre en su lugar.
 Esto es cuando usarías `skipSelf`:
 
-<docs-code header="src/app/skipself/skipself.component.ts" language="typescript"
-           highlight="[[6],[10]]">
+```ts {header:"skipself.component.ts" highlight:[[6],[10]]}
 @Component({
   selector: 'app-skipself',
   templateUrl: './skipself.component.html',
@@ -266,9 +267,9 @@ export class SkipselfComponent {
   // Usa skipSelf como opción de inyección
   public leaf = inject(LeafService, {skipSelf: true});
 }
-</docs-code>
+```
 
-En este caso, el valor que obtendrías para `emoji` sería helecho <code>&#x1F33F;</code>, no hoja de arce <code>&#x1F341;</code>.
+En este caso, el valor que obtendrías para `emoji` sería helecho <code>🌿</code>, no hoja de arce <code>🍁</code>.
 
 #### Opción `skipSelf` con `optional`
 
@@ -277,11 +278,11 @@ Usa la opción `skipSelf` con `optional` para prevenir un error si el valor es `
 En el siguiente ejemplo, el servicio `Person` se inyecta durante la inicialización de la propiedad.
 `skipSelf` le dice a Angular que omita el inyector actual y `optional` prevendrá un error si el servicio `Person` es `null`.
 
-<docs-code language="typescript">
+```ts
 class Person {
   parent = inject(Person, {optional: true, skipSelf: true})
 }
-</docs-code>
+```
 
 ### `host`
 
@@ -292,22 +293,21 @@ class Person {
 Incluso si hay una instancia de servicio más arriba en el árbol, Angular no continuará buscando.
 Usa `host` de la siguiente manera:
 
-<docs-code header="src/app/host/host.component.ts" language="typescript"
-           highlight="[[6],[10]]">
+```ts {header:"host.component.ts" highlight:[[6],[9]]}
 @Component({
   selector: 'app-host',
   templateUrl: './host.component.html',
   styleUrls: ['./host.component.css'],
   //  provee el servicio
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌷' } }]
+  providers: [{provide: FlowerService, useValue: {emoji: '🌷'}}],
 })
 export class HostComponent {
   // usa host cuando inyectes el servicio
   flower = inject(FlowerService, {host: true, optional: true});
 }
-</docs-code>
+```
 
-Dado que `HostComponent` tiene la opción `host`, sin importar lo que el padre de `HostComponent` pueda tener como valor `flower.emoji`, el `HostComponent` usará tulipán <code>&#x1F337;</code>.
+Dado que `HostComponent` tiene la opción `host`, sin importar lo que el padre de `HostComponent` pueda tener como valor `flower.emoji`, el `HostComponent` usará tulipán <code>🌷</code>.
 
 ### Modificadores con inyección de constructor  
 
@@ -315,11 +315,11 @@ De manera similar a como se presentó antes, el comportamiento de la inyección
 
 Importa cada uno de ellos desde `@angular/core` y usa cada uno en el constructor de la clase de componente cuando inyectes tu servicio.
 
-<docs-code header="src/app/self-no-data/self-no-data.component.ts" language="typescript" highlight="[3]">
+```ts {header:"self-no-data.component.ts" highlight:[2]}
 export class SelfNoDataComponent {
   constructor(@Self() @Optional() public leaf?: LeafService) { }
 }
-</docs-code>
+```
 
 ## Estructura lógica de la plantilla
 
@@ -329,20 +329,20 @@ Entender la estructura lógica subyacente de la plantilla de Angular te dará un
 
 Los componentes se usan en tus plantillas, como en el siguiente ejemplo:
 
-<docs-code language="html">
+```html
 <app-root>
   <app-child></app-child>;
 </app-root>
-</docs-code>
+```
 
-ÚTIL: Usualmente, declaras los componentes y sus plantillas en archivos separados.
+ÚTIL:: Usualmente, declaras los componentes y sus plantillas en archivos separados.
 Para los propósitos de entender cómo funciona el sistema de inyección, es útil mirarlos desde el punto de vista de un árbol lógico combinado.
 El término _lógico_ lo distingue del árbol de renderizado, que es el árbol DOM de tu aplicación.
 Para marcar las ubicaciones de dónde están ubicadas las plantillas de componentes, esta guía usa el pseudo-elemento `<#VIEW>`, que en realidad no existe en el árbol de renderizado y está presente solo para propósitos de modelo mental.
 
 El siguiente es un ejemplo de cómo los árboles de vista `<app-root>` y `<app-child>` se combinan en un solo árbol lógico:
 
-<docs-code language="html">
+```html
 <app-root>
   <#VIEW>
     <app-child>
@@ -352,7 +352,7 @@ El siguiente es un ejemplo de cómo los árboles de vista `<app-root>` y `<app-c
     </app-child>
   </#VIEW>
 </app-root>
-</docs-code>
+```
 
 Entender la idea de la demarcación `<#VIEW>` es especialmente significativo cuando configuras servicios en la clase de componente.
 
@@ -363,8 +363,8 @@ Las siguientes secciones demuestran `providers` y `viewProviders` junto con form
 
 Una clase de componente puede proveer servicios de dos maneras:
 
-| Arrays                       | Detalles |
-|:---                          |:---     |
+| Arrays                       | Detalles                                       |
+|:---------------------------- |:---------------------------------------------- |
 | Con un array `providers`     | `@Component({ providers: [SomeService] })`     |
 | Con un array `viewProviders` | `@Component({ viewProviders: [SomeService] })` |
 
@@ -375,40 +375,38 @@ Por ejemplo, el árbol lógico mostrará que `<child-component>` es un hijo dire
 En el árbol lógico, verás atributos especiales: `@Provide`, `@Inject`, y `@ApplicationConfig`.
 Estos no son atributos reales pero están aquí para demostrar lo que está pasando internamente.
 
-| Atributo de servicio Angular                                                                                           | Detalles |
-|:---                                                                                                                |:---     |
-| `@Inject(Token)=>Value`     | Si `Token` se inyecta en esta ubicación en el árbol lógico, su valor sería `Value`.     |
-| `@Provide(Token=Value)`     | Indica que `Token` se provee con `Value` en esta ubicación en el árbol lógico.        |
-| `@ApplicationConfig` | Demuestra que se debe usar un `EnvironmentInjector` de respaldo en esta ubicación.          |
+| Atributo de servicio Angular  | Detalles                                                                                |
+|:----------------------------- |:--------------------------------------------------------------------------------------- |
+| `@Inject(Token)=>Value`       | Si `Token` se inyecta en esta ubicación en el árbol lógico, su valor sería `Value`.     |
+| `@Provide(Token=Value)`       | Indica que `Token` se provee con `Value` en esta ubicación en el árbol lógico.          |
+| `@ApplicationConfig`           | Demuestra que se debe usar un `EnvironmentInjector` de respaldo en esta ubicación.      |
 
 ### Estructura de aplicación de ejemplo
 
-La aplicación de ejemplo tiene un `FlowerService` proveído en `root` con un valor `emoji` de hibisco rojo <code>&#x1F33A;</code>.
+La aplicación de ejemplo tiene un `FlowerService` proveído en `root` con un valor `emoji` de hibisco rojo <code>🌺</code>.
 
-<docs-code header="src/app/flower.service.ts" language="typescript">
+```ts {header:"flower.service.ts"}
 @Injectable({
   providedIn: 'root'
 })
 export class FlowerService {
   emoji = '🌺';
 }
-</docs-code>
+```
 
 Considera una aplicación con solo un `AppComponent` y un `ChildComponent`.
 La vista renderizada más básica se vería como elementos HTML anidados como los siguientes:
 
-<docs-code language="html">
-
+```html
 <app-root> <!-- selector de AppComponent -->
-  <app-child> <!-- selector de ChildComponent -->
-  </app-child>
+<app-child> <!-- selector de ChildComponent  -->
+</app-child>
 </app-root>
-
-</docs-code>
+```
 
 Sin embargo, detrás de escena, Angular utiliza una representación de vista lógica de la siguiente manera al resolver las solicitudes de inyección:
 
-<docs-code language="html">
+```html
 <app-root> <!-- selector de AppComponent -->
   <#VIEW>
     <app-child> <!-- selector de ChildComponent -->
@@ -417,7 +415,7 @@ Sin embargo, detrás de escena, Angular utiliza una representación de vista ló
     </app-child>
   </#VIEW>
 </app-root>
-</docs-code>
+```
 
 El `<#VIEW>` aquí representa una instancia de una plantilla.
 Nota que cada componente tiene su propio `<#VIEW>`.
@@ -426,39 +424,38 @@ El conocimiento de esta estructura puede informar cómo provees e inyectas tus s
 
 Ahora, considera que `<app-root>` inyecta el `FlowerService`:
 
-<docs-code header="src/app/app.component.ts" language="typescript">
+```typescript
 export class AppComponent  {
   flower = inject(FlowerService);
 }
-</docs-code>
+```
 
 Agrega un enlace a la plantilla `<app-root>` para visualizar el resultado:
 
-<docs-code header="src/app/app.component.html" language="html">
+```html
 <p>Emoji de FlowerService: {{flower.emoji}}</p>
-</docs-code>
+```
 
 La salida en la vista sería:
 
-<docs-code language="shell">
-Emoji from FlowerService: &#x1F33A;
-</docs-code>
+```shell
+Emoji de FlowerService: 🌺
+```
 
 En el árbol lógico, esto se representaría como sigue:
 
-<docs-code language="html" highlight="[[1],[2],[4]]">
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
+        @Inject(FlowerService) flower=>"🌺">
   <#VIEW>
-    <p>Emoji de FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
+    <p>Emoji de FlowerService: {{flower.emoji}} (🌺)</p>
     <app-child>
       <#VIEW>
       </#VIEW>
     </app-child>
   </#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 Cuando `<app-root>` solicita el `FlowerService`, es trabajo del inyector resolver el token `FlowerService`.
 La resolución del token sucede en dos fases:
@@ -472,11 +469,10 @@ La resolución del token sucede en dos fases:
 En el caso del ejemplo, las restricciones son:
 
 1. Comienza con `<#VIEW>` perteneciente a `<app-root>` y termina con `<app-root>`.
-
-    * Normalmente el punto de partida para la búsqueda es en el punto de inyección.
+    - Normalmente el punto de partida para la búsqueda es en el punto de inyección.
         Sin embargo, en este caso `<app-root>` es un componente. Los `@Component`s son especiales en que también incluyen sus propios `viewProviders`, por lo que la búsqueda comienza en `<#VIEW>` perteneciente a `<app-root>`.
         Este no sería el caso para una directiva coincidente en la misma ubicación.
-    * La ubicación de finalización resulta ser la misma que el componente mismo, porque es el componente superior en esta aplicación.
+    - La ubicación de finalización resulta ser la misma que el componente mismo, porque es el componente superior en esta aplicación.
 
 1. El `EnvironmentInjector` proveído por el `ApplicationConfig` actúa como el inyector de respaldo cuando el token de inyección no puede ser encontrado en las jerarquías `ElementInjector`.
 
@@ -484,61 +480,59 @@ En el caso del ejemplo, las restricciones son:
 
 Ahora, en la clase `ChildComponent`, agrega un proveedor para `FlowerService` para demostrar reglas de resolución más complejas en las próximas secciones:
 
-<docs-code header="src/app/child.component.ts" language="typescript"
-           highlight="[[5,6],[10]]">
+```ts
 @Component({
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
   // usa el array providers para proveer un servicio
-  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
+  providers: [{provide: FlowerService, useValue: {emoji: '🌻'}}],
 })
 export class ChildComponent {
   // inyecta el servicio
   flower = inject(FlowerService);
 }
-</docs-code>
+```
 
 Ahora que el `FlowerService` está proveído en el decorador `@Component()`, cuando `<app-child>` solicita el servicio, el inyector solo tiene que mirar tan lejos como el `ElementInjector` en `<app-child>`.
 No tendrá que continuar la búsqueda más allá a través del árbol de inyectores.
 
 El siguiente paso es agregar un enlace a la plantilla `ChildComponent`.
 
-<docs-code header="src/app/child.component.html" language="html">
+```html
 <p>Emoji de FlowerService: {{flower.emoji}}</p>
-</docs-code>
+```
 
 Para renderizar los nuevos valores, agrega `<app-child>` al final de la plantilla `AppComponent` para que la vista también muestre el girasol:
 
-<docs-code language="shell">
+```shell
 Child Component
-Emoji de FlowerService: &#x1F33B;
-</docs-code>
+Emoji de FlowerService: 🌻
+```
 
 En el árbol lógico, esto se representa de la siguiente manera:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW>
-    <p>Emoji de FlowerService: {{flower.emoji}} (&#x1F33A;)</p>
-    <app-child @Provide(FlowerService="&#x1F33B;")
-               @Inject(FlowerService)=>"&#x1F33B;"> <!-- la búsqueda termina aquí -->
-      <#VIEW> <!-- la búsqueda comienza aquí -->
-        <h2>Child Component</h2>
-        <p>Emoji de FlowerService: {{flower.emoji}} (&#x1F33B;)</p>
-      </#VIEW>
-    </app-child>
-  </#VIEW>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW>
+
+<p>Emoji de FlowerService: {{flower.emoji}} (🌺)</p>
+<app-child @Provide(FlowerService="🌻")
+@Inject(FlowerService)=>"🌻"> <!-- la búsqueda termina aquí -->
+<#VIEW> <!-- la búsqueda inicia aquí -->
+<h2>Child Component</h2>
+<p>Emoji de FlowerService: {{flower.emoji}} (🌻)</p>
+</#VIEW>
+</app-child>
+</#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 Cuando `<app-child>` solicita el `FlowerService`, el inyector comienza su búsqueda en el `<#VIEW>` perteneciente a `<app-child>` \(`<#VIEW>` está incluido porque se inyecta desde `@Component()`\) y termina con `<app-child>`.
-En este caso, el `FlowerService` se resuelve en el array `providers` con girasol <code>&#x1F33B;</code> del `<app-child>`.
+En este caso, el `FlowerService` se resuelve en el array `providers` con girasol <code>🌻</code> del `<app-child>`.
 El inyector no tiene que buscar más en el árbol de inyectores.
-Se detiene tan pronto como encuentra el `FlowerService` y nunca ve el hibisco rojo <code>&#x1F33A;</code>.
+Se detiene tan pronto como encuentra el `FlowerService` y nunca ve el hibisco rojo <code>🌺</code>.
 
 ### Usando el array `viewProviders`
 
@@ -548,100 +542,95 @@ Usar `viewProviders` hace que los servicios sean visibles en el `<#VIEW>`.
 ÚTIL: Los pasos son los mismos que usar el array `providers`, con la excepción de usar el array `viewProviders` en su lugar.
 
 Para instrucciones paso a paso, continúa con esta sección.
-Si puedes configurarlo por tu cuenta, salta adelante a [Modificando la disponibilidad del servicio](#visibility-of-provided-tokens).
+Si puedes configurarlo por tu cuenta, salta adelante a [Modificando la disponibilidad del servicio](#visibilidad-de-tokens-proveídos).
 
 Para demostración, estamos construyendo un `AnimalService` para demostrar `viewProviders`.
-Primero, crea un `AnimalService` con una propiedad `emoji` de ballena <code>&#x1F433;</code>:
+Primero, crea un `AnimalService` con una propiedad `emoji` de ballena <code>🐳</code>:
 
-<docs-code header="src/app/animal.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
+```typescript
+import {Injectable} from '@angular/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AnimalService {
   emoji = '🐳';
 }
-</docs-code>
+```
 
 Siguiendo el mismo patrón que con el `FlowerService`, inyecta el `AnimalService` en la clase `AppComponent`:
 
-<docs-code header="src/app/app.component.ts" language="typescript" highlight="[4]">
+```ts
 export class AppComponent {
-    public flower = inject(FlowerService);
-    public animal = inject(AnimalService);
+  public flower = inject(FlowerService);
+  public animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 ÚTIL: Puedes dejar todo el código relacionado con `FlowerService` en su lugar, ya que permitirá una comparación con el `AnimalService`.
 
 Agrega un array `viewProviders` e inyecta el `AnimalService` en la clase `<app-child>` también, pero dale a `emoji` un valor diferente.
-Aquí, tiene un valor de perro <code>&#x1F436;</code>.
+Aquí, tiene un valor de perro <code>🐶</code>.
 
-<docs-code header="src/app/child.component.ts" language="typescript"
-           highlight="[[7],[11]]">
+```typescript
 @Component({
   selector: 'app-child',
   templateUrl: './child.component.html',
   styleUrls: ['./child.component.css'],
   // provee servicios
   providers: [{ provide: FlowerService, useValue: { emoji: '��' } }],
-  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
+  viewProviders: [{provide: AnimalService, useValue: {emoji: '🐶'}}],
 })
 export class ChildComponent {
   // inyecta servicios
-  flower = inject(FlowerService); 
-  animal = inject(AnimalService)
-...
+  flower = inject(FlowerService);
+  animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 Agrega enlaces a la plantilla `ChildComponent` y la plantilla `AppComponent`.
 En la plantilla `ChildComponent`, agrega el siguiente enlace:
 
-<docs-code header="src/app/child.component.html" language="html">
+```html
 <p>Emoji de AnimalService: {{animal.emoji}}</p>
-</docs-code>
+```
 
 Además, agrega lo mismo a la plantilla `AppComponent`:
 
-<docs-code header="src/app/app.component.html" language="html">
-<p>Emoji de AnimalService: {{animal.emoji}}</p>s
-</docs-code>
+```html
+<p>Emoji de AnimalService: {{animal.emoji}}</p>
+```
 
 Ahora deberías ver ambos valores en el navegador:
 
-<docs-code hideCopy language="shell">
-
+```shell
 AppComponent
-Emoji de AnimalService: &#x1F433;
+Emoji de AnimalService: 🐳
 
 Child Component
-Emoji de AnimalService: &#x1F436;
-
-</docs-code>
+Emoji de AnimalService: 🐶
+```
 
 El árbol lógico para este ejemplo de `viewProviders` es como sigue:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-         @Inject(AnimalService) animal=>"&#x1F433;">
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-            @Inject(AnimalService=>"&#x1F436;")>
-       <!-- ^^usar viewProviders significa que AnimalService está disponible en <#VIEW>-->
-       <p>Emoji de AnimalService: {{animal.emoji}} (&#x1F436;)</p>
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService) animal=>"🐳">
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService=>"🐶")>
 
-</docs-code>
+<!-- ^^usar viewProviders significa que AnimalService está disponible en <#VIEW>-->
+<p>Emoji de AnimalService: {{animal.emoji}} (🐶)</p>
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
 Así como con el ejemplo de `FlowerService`, el `AnimalService` está proveído en el decorador `@Component()` de `<app-child>`.
-Esto significa que como el inyector primero busca en el `ElementInjector` del componente, encuentra el valor `AnimalService` de perro <code>&#x1F436;</code>.
+Esto significa que como el inyector primero busca en el `ElementInjector` del componente, encuentra el valor `AnimalService` de perro <code>🐶</code>.
 No necesita continuar buscando en el árbol `ElementInjector`, ni necesita buscar en el `ModuleInjector`.
 
 ### `providers` vs. `viewProviders`
@@ -653,36 +642,33 @@ Para ver la diferencia entre usar `providers` y `viewProviders`, agrega otro com
 `InspectorComponent` será un hijo del `ChildComponent`.
 En `inspector.component.ts`, inyecta el `FlowerService` y `AnimalService` durante la inicialización de la propiedad:
 
-<docs-code header="src/app/inspector/inspector.component.ts" language="typescript">
+```typescript
 export class InspectorComponent {
   flower = inject(FlowerService);
   animal = inject(AnimalService);
 }
-</docs-code>
+```
 
 No necesitas un array `providers` o `viewProviders`.
 A continuación, en `inspector.component.html`, agrega la misma plantilla de componentes anteriores:
 
-<docs-code header="src/app/inspector/inspector.component.html" language="html">
+```html
 <p>Emoji de FlowerService: {{flower.emoji}}</p>
 <p>Emoji de AnimalService: {{animal.emoji}}</p>
-</docs-code>
+```
 
 Recuerda agregar el `InspectorComponent` al array `imports` de `ChildComponent`.
 
-<docs-code header="src/app/child/child.component.ts" language="typescript"
-           highlight="[3]">
+```ts
 @Component({
   ...
   imports: [InspectorComponent]
 })
-
-</docs-code>
+```
 
 A continuación, agrega lo siguiente a `child.component.html`:
 
-<docs-code header="src/app/child/child.component.html" language="html"
-           highlight="[3,9]">
+```html
 ...
 
 <div class="container">
@@ -692,72 +678,71 @@ A continuación, agrega lo siguiente a `child.component.html`:
 <h3>Dentro de la vista</h3>
 
 <app-inspector></app-inspector>
-</docs-code>
+```
 
 `<ng-content>` te permite proyectar contenido, y `<app-inspector>` dentro de la plantilla `ChildComponent` hace que el `InspectorComponent` sea un componente hijo de `ChildComponent`.
 
 A continuación, agrega lo siguiente a `app.component.html` para aprovechar la proyección de contenido.
 
-<docs-code header="src/app/app.component.html" language="html" highlight="[2]">
+```html
 <app-child>
   <app-inspector></app-inspector>
 </app-child>
-</docs-code>
+```
 
 El navegador ahora renderiza lo siguiente, omitiendo los ejemplos anteriores por brevedad:
 
-<docs-code hideCopy language="shell">
+```shell
 ...
 Proyección de contenido
 
-Emoji de FlowerService: &#x1F33B;
-Emoji de AnimalService: &#x1F433;
+Emoji de FlowerService: 🌻
+Emoji de AnimalService: 🐳
 
-Emoji de FlowerService: &#x1F33B;
-Emoji de AnimalService: &#x1F436;
-
-</docs-code>
+Emoji de FlowerService: 🌻
+Emoji de AnimalService: 🐶
+```
 
 Estos cuatro enlaces demuestran la diferencia entre `providers` y `viewProviders`.
-Recuerda que el emoji de perro <code>&#x1F436;</code> está declarado dentro del `<#VIEW>` de `ChildComponent` y no es visible al contenido proyectado.
-En su lugar, el contenido proyectado ve la ballena <code>&#x1F433;</code>.
+Recuerda que el emoji de perro <code>🐶</code> está declarado dentro del `<#VIEW>` de `ChildComponent` y no es visible al contenido proyectado.
+En su lugar, el contenido proyectado ve la ballena <code>🐳</code>.
 
-Sin embargo, en la siguiente sección de salida, aunque el `InspectorComponent` es un componente hijo real de `ChildComponent`, `InspectorComponent` está dentro del `<#VIEW>`, así que cuando pide el `AnimalService`, ve el perro <code>&#x1F436;</code>.
+Sin embargo, en la siguiente sección de salida, aunque el `InspectorComponent` es un componente hijo real de `ChildComponent`, `InspectorComponent` está dentro del `<#VIEW>`, así que cuando pide el `AnimalService`, ve el perro <code>🐶</code>.
 
 El `AnimalService` en el árbol lógico se vería así:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-         @Inject(AnimalService) animal=>"&#x1F433;">
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-            @Inject(AnimalService=>"&#x1F436;")>
-        <!-- ^^usar viewProviders significa que AnimalService está disponible en <#VIEW>-->
-        <p>Emoji de AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+@Inject(AnimalService) animal=>"🐳">
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService=>"🐶")>
+
+<!-- ^^usar viewProviders significa que AnimalService está disponible en <#VIEW>-->
+<p>Emoji de AnimalService: {{animal.emoji}} (🐶)</p>
 
         <div class="container">
           <h3>Proyección de contenido</h3>
-          <app-inspector @Inject(AnimalService) animal=>"&#x1F433;">
-            <p>Emoji de AnimalService: {{animal.emoji}} (&#x1F433;)</p>
+          <app-inspector @Inject(AnimalService) animal=>"🐳">
+            <p>Emoji de AnimalService: {{animal.emoji}} (🐳)</p>
           </app-inspector>
         </div>
 
         <app-inspector>
-          <#VIEW @Inject(AnimalService) animal=>"&#x1F436;">
-            <p>Emoji de AnimalService: {{animal.emoji}} (&#x1F436;)</p>
+          <#VIEW @Inject(AnimalService) animal=>"🐶">
+            <p>Emoji de AnimalService: {{animal.emoji}} (🐶)</p>
           </#VIEW>
         </app-inspector>
       </#VIEW>
     </app-child>
-  </#VIEW>
-</app-root>
 
-</docs-code>
+</#VIEW>
+</app-root>
+```
 
-El contenido proyectado de `<app-inspector>` ve la ballena <code>&#x1F433;</code>, no el perro <code>&#x1F436;</code>, porque el perro <code>&#x1F436;</code> está dentro del `<#VIEW>` de `<app-child>`.
-El `<app-inspector>` solo puede ver el perro <code>&#x1F436;</code> si también está dentro del `<#VIEW>`.
+El contenido proyectado de `<app-inspector>` ve la ballena <code>🐳</code>, no el perro <code>🐶</code>, porque el perro <code>🐶</code> está dentro del `<#VIEW>` de `<app-child>`.
+El `<app-inspector>` solo puede ver el perro <code>🐶</code> si también está dentro del `<#VIEW>`.
 
 ### Visibilidad de tokens proveídos
 
@@ -767,157 +752,149 @@ Para hacer esto, coloca la configuración de visibilidad en el punto de inyecci
 Para alterar dónde el inyector comienza a buscar `FlowerService`, agrega `skipSelf` a la invocación `inject()` de `<app-child>` donde se inyecta `FlowerService`.
 Esta invocación es un inicializador de propiedad del `<app-child>` como se muestra en `child.component.ts`:
 
-<docs-code language="typescript">
-flower = inject(FlowerService, { skipSelf: true })
-</docs-code>
+```typescript
+  flower = inject(FlowerService, { skipSelf: true })
+```
 
 Con `skipSelf`, el inyector de `<app-child>` no busca en sí mismo el `FlowerService`.
 En su lugar, el inyector comienza a buscar el `FlowerService` en el `ElementInjector` del `<app-root>`, donde no encuentra nada.
-Luego, regresa al `ModuleInjector` de `<app-child>` y encuentra el valor de hibisco rojo <code>&#x1F33A;</code>, que está disponible porque `<app-child>` y `<app-root>` comparten el mismo `ModuleInjector`.
+Luego, regresa al `ModuleInjector` de `<app-child>` y encuentra el valor de hibisco rojo <code>🌺</code>, que está disponible porque `<app-child>` y `<app-root>` comparten el mismo `ModuleInjector`.
 La UI renderiza lo siguiente:
 
-<docs-code hideCopy language="shell">
-
-Emoji de FlowerService: &#x1F33A;
-
-</docs-code>
+```shell
+Emoji de FlowerService: 🌺
+```
 
 En un árbol lógico, esta misma idea podría verse así:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW>
-    <app-child @Provide(FlowerService="&#x1F33B;")>
-      <#VIEW @Inject(FlowerService, SkipSelf)=>"&#x1F33A;">
-        <!-- Con SkipSelf, el inyector busca en el siguiente inyector arriba en el árbol (app-root) -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW>
+<app-child @Provide(FlowerService="🌻")>
+<#VIEW @Inject(FlowerService, SkipSelf)=>"🌺">
 
-</docs-code>
+<!-- Con SkipSelf, el inyector busca en el siguiente inyector arriba en el árbol (app-root) -->
 
-Aunque `<app-child>` provee el girasol <code>&#x1F33B;</code>, la aplicación renderiza el hibisco rojo <code>&#x1F33A;</code> porque `skipSelf` hace que el inyector actual (`app-child`) se omita a sí mismo y busque en su padre.
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
+
+Aunque `<app-child>` provee el girasol <code>🌻</code>, la aplicación renderiza el hibisco rojo <code>🌺</code> porque `skipSelf` hace que el inyector actual (`app-child`) se omita a sí mismo y busque en su padre.
 
 Si ahora agregas `host` (además del `skipSelf`), el resultado será `null`.
 Esto es porque `host` limita el límite superior de la búsqueda al `<#VIEW>` de `app-child`.
 Aquí está la idea en el árbol lógico:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(FlowerService) flower=>"&#x1F33A;">
-  <#VIEW> <!-- la búsqueda termina aquí con null-->
-    <app-child @Provide(FlowerService="&#x1F33B;")> <!-- comienza búsqueda aquí -->
-      <#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null>
-      </#VIEW>
-      </app-parent>
-  </#VIEW>
+@Inject(FlowerService) flower=>"🌺">
+<#VIEW> <!-- la búsqueda termina aquí con null -->
+<app-child @Provide(FlowerService="🌻")> <!-- la búsqueda inicia aquí -->
+<#VIEW inject(FlowerService, {skipSelf: true, host: true, optional:true})=>null>
+</#VIEW>
+</app-parent>
+</#VIEW>
 </app-root>
-
-</docs-code>
+```
 
 Aquí, los servicios y sus valores son los mismos, pero `host` detiene al inyector de buscar más allá del `<#VIEW>` para `FlowerService`, así que no lo encuentra y devuelve `null`.
 
 ### `skipSelf` y `viewProviders`
 
-Recuerda, `<app-child>` provee el `AnimalService` en el array `viewProviders` con el valor de perro <code>&#x1F436;</code>.
-Como el inyector solo tiene que mirar el `ElementInjector` de `<app-child>` para el `AnimalService`, nunca ve la ballena <code>&#x1F433;</code>.
+Recuerda, `<app-child>` provee el `AnimalService` en el array `viewProviders` con el valor de perro <code>🐶</code>.
+Como el inyector solo tiene que mirar el `ElementInjector` de `<app-child>` para el `AnimalService`, nunca ve la ballena <code>🐳</code>.
 
 Como en el ejemplo de `FlowerService`, si agregas `skipSelf` al `inject()` de `AnimalService`, el inyector no buscará en el `ElementInjector` del `<app-child>` actual para el `AnimalService`.
 En su lugar, el inyector comenzará en el `ElementInjector` de `<app-root>`.
 
-<docs-code language="typescript" highlight="[5]">
+```typescript
 @Component({
   selector: 'app-child',
   …
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F436;' } },
+    { provide: AnimalService, useValue: { emoji: '🐶' } },
   ],
 })
-</docs-code>
+```
 
 El árbol lógico con `skipSelf` en `<app-child>` se ve así:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;")>
-  <#VIEW><!-- la busqueda inicia aquí-->
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             @Inject(AnimalService, SkipSelf=>"&#x1F433;")>
-        <!--Agregar skipSelf -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService=>"🐳")>
+<#VIEW><!-- la búsqueda inicia aquí  -->
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+@Inject(AnimalService, SkipSelf=>"🐳")>
 
-</docs-code>
+<!--Add skipSelf -->
+
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
 Con `skipSelf` en `<app-child>`, el inyector comienza su búsqueda del `AnimalService` en el `ElementInjector` de `<app-root> `y encuentra la ballena <code>🐳</code>.
 
 ### `host` y `viewProviders`
 
-Si solo usas `host` para la inyección de `AnimalService`, el resultado es perro <code>&#x1F436;</code> porque el inyector encuentra el `AnimalService` en el `<#VIEW>` de `<app-child>` mismo.
+Si solo usas `host` para la inyección de `AnimalService`, el resultado es perro <code>🐶</code> porque el inyector encuentra el `AnimalService` en el `<#VIEW>` de `<app-child>` mismo.
 El `ChildComponent` configura los `viewProviders` para que el emoji de perro se provea como valor de `AnimalService`.
 También puedes ver `host` en el `inject()`:
 
-<docs-code language="typescript" highlight="[[5],[9]]">
+```typescript
 @Component({
   selector: 'app-child',
   …
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F436;' } },
+    { provide: AnimalService, useValue: { emoji: '🐶' } },
   ]
 })
 export class ChildComponent {
   animal = inject(AnimalService, { host: true })
 }
-</docs-code>
+```
 
 `host: true` hace que el inyector busque hasta que encuentre el borde del `<#VIEW>`.
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-          @Inject(AnimalService=>"&#x1F433;">
-  <#VIEW>
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             inject(AnimalService, {host: true}=>"&#x1F436;")> <!-- host detiene la búsqueda aquí -->
-      </#VIEW>
-    </app-child>
-  </#VIEW>
+@Inject(AnimalService=>"🐳")>
+<#VIEW>
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+inject(AnimalService, {host: true}=>"🐶")> <!-- el host detiene la búsqueda aquí" -->
+</#VIEW>
+</app-child>
+</#VIEW>
 </app-root>
+```
 
-</docs-code>
-
-Agrega un array `viewProviders` con un tercer animal, erizo <code>&#x1F994;</code>, a los metadatos `@Component()` de `app.component.ts`:
+Agrega un array `viewProviders` con un tercer animal, erizo <code>🦔</code>, a los metadatos `@Component()` de `app.component.ts`:
 
-<docs-code language="typescript" highlight="[6]">
+```typescript
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
   viewProviders: [
-    { provide: AnimalService, useValue: { emoji: '&#x1F994;' } },
+    { provide: AnimalService, useValue: { emoji: '🦔' } },
   ],
 })
-
-</docs-code>
+```
 
 A continuación, agrega `skipSelf` junto con `host` al `inject()` para la inyección de `AnimalService` en `child.component.ts`.
 Aquí están `host` y `skipSelf` en la inicialización de la propiedad `animal`:
 
-<docs-code language="typescript" highlight="[4]">
+```typescript
 export class ChildComponent {
   animal = inject(AnimalService, { host: true, skipSelf: true });
 }
-
-</docs-code>
+```
 
 <!-- TODO: This requires a rework. It seems not well explained what `viewProviders`/`injectors` is here
   and how `host` works.
@@ -930,26 +907,25 @@ Sin embargo, el `AnimalService`, que se provee en el array `viewProviders` de `A
 
 La representación del árbol lógico muestra por qué esto es así:
 
-<docs-code language="html">
-
+```html
 <app-root @ApplicationConfig
-        @Inject(AnimalService=>"&#x1F433;">
-  <#VIEW @Provide(AnimalService="&#x1F994;")
-         @Inject(AnimalService, @Optional)=>"&#x1F994;">
-    <!-- ^^skipSelf comienza aquí, host detiene aquí^^ -->
-    <app-child>
-      <#VIEW @Provide(AnimalService="&#x1F436;")
-             inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"&#x1F994;">
-               <!-- Agregar skipSelf ^^-->
-      </#VIEW>
-      </app-child>
-  </#VIEW>
-</app-root>
+@Inject(AnimalService=>"🐳")>
+<#VIEW @Provide(AnimalService="🦔")
+@Inject(AnimalService, @Optional)=>"🦔">
 
-</docs-code>
+<!-- ^^skipSelf inicia aquí, host detiene aquí^^ -->
+<app-child>
+<#VIEW @Provide(AnimalService="🐶")
+inject(AnimalService, {skipSelf:true, host: true, optional: true})=>"🦔">
+<!-- Agregar skipSelf -->
+</#VIEW>
+</app-child>
+</#VIEW>
+</app-root>
+```
 
 `skipSelf`, hace que el inyector comience su búsqueda del `AnimalService` en `<app-root>`, no en `<app-child>`, donde se origina la solicitud, y `host` detiene la búsqueda en el `<#VIEW>` de `<app-root>`.
-Como `AnimalService` se provee por medio del array `viewProviders`, el inyector encuentra el erizo <code>&#x1F994;</code> en el `<#VIEW>`.
+Como `AnimalService` se provee por medio del array `viewProviders`, el inyector encuentra el erizo <code>🦔</code> en el `<#VIEW>`.
 
 ## Ejemplo: Casos de uso de `ElementInjector`
 
@@ -966,15 +942,14 @@ Si más tarde modificas el `VillainsService`, podrías romper algo en otros comp
 
 En su lugar, deberías proveer el `VillainsService` en los metadatos `providers` del `VillainsListComponent` así:
 
-<docs-code header="src/app/villains-list.component.ts (metadatos)" language="typescript"
-           highlight="[4]">
+```typescript
 @Component({
   selector: 'app-villains-list',
   templateUrl: './villains-list.component.html',
-  providers: [VillainsService]
+  providers: [VillainsService],
 })
 export class VillainsListComponent {}
-</docs-code>
+```
 
 Al proveer `VillainsService` en los metadatos de `VillainsListComponent` y en ningún otro lugar, el servicio se vuelve disponible solo en el `VillainsListComponent` y su árbol de subcomponentes.
 
@@ -993,9 +968,9 @@ Cada declaración de impuestos de héroe seleccionada se abre en su propio compo
 
 Cada componente de declaración de impuestos tiene las siguientes características:
 
-* Es su propia sesión de edición de declaración de impuestos
-* Puede cambiar una declaración de impuestos sin afectar una declaración en otro componente
-* Tiene la capacidad de guardar los cambios en su declaración de impuestos o cancelarlos
+- Es su propia sesión de edición de declaración de impuestos
+- Puede cambiar una declaración de impuestos sin afectar una declaración en otro componente
+- Tiene la capacidad de guardar los cambios en su declaración de impuestos o cancelarlos
 
 Supongamos que el `HeroTaxReturnComponent` tenía lógica para manejar y restaurar cambios.
 Eso sería una tarea sencilla para una declaración de impuestos de héroe.
@@ -1005,10 +980,10 @@ Podrías delegar ese manejo a un servicio auxiliar, como hace este ejemplo.
 El `HeroTaxReturnService` almacena en caché una sola `HeroTaxReturn`, rastrea los cambios en esa declaración, y puede guardarla o restaurarla.
 También delega al singleton de toda la aplicación `HeroService`, que obtiene por inyección.
 
-<docs-code header="src/app/hero-tax-return.service.ts" language="typescript">
-import { Injectable } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroesService } from './heroes.service';
+```typescript
+import {inject, Injectable} from '@angular/core';
+import {HeroTaxReturn} from './hero';
+import {HeroesService} from './heroes.service';
 
 @Injectable()
 export class HeroTaxReturnService {
@@ -1019,7 +994,7 @@ export class HeroTaxReturnService {
 
   set taxReturn(htr: HeroTaxReturn) {
     this.originalTaxReturn = htr;
-    this.currentTaxReturn  = htr.clone();
+    this.currentTaxReturn = htr.clone();
   }
 
   get taxReturn(): HeroTaxReturn {
@@ -1035,20 +1010,20 @@ export class HeroTaxReturnService {
     this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
   }
 }
-</docs-code>
+```
 
 Aquí está el `HeroTaxReturnComponent` que hace uso de `HeroTaxReturnService`.
 
-<docs-code header="src/app/hero-tax-return.component.ts" language="typescript">
-import { Component, EventEmitter, input, output } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroTaxReturnService } from './hero-tax-return.service';
+```typescript
+import {Component, input, output} from '@angular/core';
+import {HeroTaxReturn} from './hero';
+import {HeroTaxReturnService} from './hero-tax-return.service';
 
 @Component({
   selector: 'app-hero-tax-return',
   templateUrl: './hero-tax-return.component.html',
-  styleUrls: [ './hero-tax-return.component.css' ],
-  providers: [ HeroTaxReturnService ]
+  styleUrls: ['./hero-tax-return.component.css'],
+  providers: [HeroTaxReturnService],
 })
 export class HeroTaxReturnComponent {
   message = '';
@@ -1064,17 +1039,19 @@ export class HeroTaxReturnComponent {
   constructor() {
     effect(() => {
       this.heroTaxReturnService.taxReturn = this.taxReturn();
-    })
+    });
   }
 
   private heroTaxReturnService = inject(HeroTaxReturnService);
 
-  onCanceled()  {
+  onCanceled() {
     this.flashMessage('Canceled');
     this.heroTaxReturnService.restoreTaxReturn();
   }
 
-  onClose() { this.close.emit(); }
+  onClose() {
+    this.close.emit();
+  }
 
   onSaved() {
     this.flashMessage('Saved');
@@ -1083,10 +1060,10 @@ export class HeroTaxReturnComponent {
 
   flashMessage(msg: string) {
     this.message = msg;
-    setTimeout(() => this.message = '', 500);
+    setTimeout(() => (this.message = ''), 500);
   }
 }
-</docs-code>
+```
 
 La _tax-return-to-edit_ llega por medio de la propiedad `input`, que se implementa con getters y setters.
 El setter inicializa la propia instancia del componente del `HeroTaxReturnService` con la declaración entrante.
@@ -1098,9 +1075,9 @@ Cada componente compartiría la misma instancia del servicio, y cada componente
 
 Para prevenir esto, configura el inyector a nivel de componente de `HeroTaxReturnComponent` para proveer el servicio, usando la propiedad `providers` en los metadatos del componente.
 
-<docs-code header="src/app/hero-tax-return.component.ts (providers)" language="typescript">
-providers: [HeroTaxReturnService]
-</docs-code>
+```typescript
+  providers: [HeroTaxReturnService]
+```
 
 El `HeroTaxReturnComponent` tiene su propio proveedor del `HeroTaxReturnService`.
 Recuerda que cada _instancia_ de componente tiene su propio inyector.
@@ -1141,9 +1118,9 @@ Detrás de escena, cada componente configura su propio inyector con cero, uno o
 
 Cuando resuelves una instancia de `Car` en el componente más profundo (C), su inyector produce:
 
-* Una instancia de `Car` resuelta por el inyector (C)
-* Un `Engine` resuelto por el inyector (B)
-* Sus `Tires` resueltos por el inyector raíz (A).
+- Una instancia de `Car` resuelta por el inyector (C)
+- Un `Engine` resuelto por el inyector (B)
+- Sus `Tires` resueltos por el inyector raíz (A).
 
 ```mermaid
 graph BT;
diff --git a/adev-es/src/content/guide/di/lightweight-injection-tokens.en.md b/adev-es/src/content/guide/di/lightweight-injection-tokens.en.md
index b20c8e3..bb28b41 100644
--- a/adev-es/src/content/guide/di/lightweight-injection-tokens.en.md
+++ b/adev-es/src/content/guide/di/lightweight-injection-tokens.en.md
@@ -1,7 +1,7 @@
 # Optimizing client application size with lightweight injection tokens
 
 This page provides a conceptual overview of a dependency injection technique that is recommended for library developers.
-Designing your library with *lightweight injection tokens* helps optimize the bundle size of client applications that use your library.
+Designing your library with _lightweight injection tokens_ helps optimize the bundle size of client applications that use your library.
 
 You can manage the dependency structure among your components and injectable services to optimize bundle size by using tree-shakable providers.
 This normally ensures that if a provided component or service is never actually used by the application, the compiler can remove its code from the bundle.
@@ -22,17 +22,18 @@ To prevent the retention of unused components, your library should use the light
 To better explain the condition under which token retention occurs, consider a library that provides a library-card component.
 This component contains a body and can contain an optional header:
 
-<docs-code language="html">
+```angular-html
 
 <lib-card>;
-  <lib-header>…</lib-header>;
+<lib-header>…</lib-header>;
 </lib-card>;
-
-</docs-code>
+```
 
 In a likely implementation, the `<lib-card>` component uses `@ContentChild()` or `@ContentChildren()` to get `<lib-header>` and `<lib-body>`, as in the following:
 
-<docs-code language="typescript" highlight="[12]">
+```ts {highlight: [14]}
+import {Component, ContentChild} from '@angular/core';
+
 @Component({
   selector: 'lib-header',
   …,
@@ -44,26 +45,25 @@ class LibHeaderComponent {}
   …,
 })
 class LibCardComponent {
-  @ContentChild(LibHeaderComponent) header: LibHeaderComponent|null = null;
+  @ContentChild(LibHeaderComponent) header: LibHeaderComponent | null = null;
 }
-
-</docs-code>
+```
 
 Because `<lib-header>` is optional, the element can appear in the template in its minimal form, `<lib-card></lib-card>`.
 In this case, `<lib-header>` is not used and you would expect it to be tree-shaken, but that is not what happens.
 This is because `LibCardComponent` actually contains two references to the `LibHeaderComponent`:
 
-<docs-code language="typescript">
+```ts
 @ContentChild(LibHeaderComponent) header: LibHeaderComponent;
-</docs-code>
+```
 
-* One of these reference is in the *type position*-- that is, it specifies `LibHeaderComponent` as a type: `header: LibHeaderComponent;`.
-* The other reference is in the *value position*-- that is, LibHeaderComponent is the value of the `@ContentChild()` parameter decorator: `@ContentChild(LibHeaderComponent)`.
+- One of these reference is in the _type position_-- that is, it specifies `LibHeaderComponent` as a type: `header: LibHeaderComponent;`.
+- The other reference is in the _value position_-- that is, LibHeaderComponent is the value of the `@ContentChild()` parameter decorator: `@ContentChild(LibHeaderComponent)`.
 
 The compiler handles token references in these positions differently:
 
-* The compiler erases *type position* references after conversion from TypeScript, so they have no impact on tree-shaking.
-* The compiler must keep *value position* references at runtime, which **prevents** the component from being tree-shaken.
+- The compiler erases _type position_ references after conversion from TypeScript, so they have no impact on tree-shaking.
+- The compiler must keep _value position_ references at runtime, which **prevents** the component from being tree-shaken.
 
 In the example, the compiler retains the `LibHeaderComponent` token that occurs in the value position.
 This prevents the referenced component from being tree-shaken, even if the application does not actually use `<lib-header>` anywhere.
@@ -74,18 +74,18 @@ If `LibHeaderComponent` 's code, template, and styles combine to become too larg
 The tree-shaking problem arises when a component is used as an injection token.
 There are two cases when that can happen:
 
-* The token is used in the value position of a [content query](guide/components/queries#content-queries).
-* The token is used as a type specifier for constructor injection.
+- The token is used in the value position of a [content query](guide/components/queries#content-queries).
+- The token is used as a type specifier for constructor injection.
 
 In the following example, both uses of the `OtherComponent` token cause retention of `OtherComponent`, preventing it from being tree-shaken when it is not used:
 
-<docs-code language="typescript" highlight="[[2],[4]]">
+```ts {highlight: [[2],[4]]}
 class MyComponent {
   constructor(@Optional() other: OtherComponent) {}
 
-  @ContentChild(OtherComponent) other: OtherComponent|null;
+  @ContentChild(OtherComponent) other: OtherComponent | null;
 }
-</docs-code>
+```
 
 Although tokens used only as type specifiers are removed when converted to JavaScript, all tokens used for dependency injection are needed at runtime.
 These effectively change `constructor(@Optional() other: OtherComponent)` to `constructor(@Optional() @Inject(OtherComponent) other)`.
@@ -100,14 +100,12 @@ The abstract class is retained, not tree-shaken, but it is small and has no mate
 
 The following example shows how this works for the `LibHeaderComponent`:
 
-<docs-code language="typescript" language="[[1],[6],[17]]">
+```ts {highlight: [[1],[5], [15]]}
 abstract class LibHeaderToken {}
 
 @Component({
   selector: 'lib-header',
-  providers: [
-    {provide: LibHeaderToken, useExisting: LibHeaderComponent}
-  ]
+  providers: [{provide: LibHeaderToken, useExisting: LibHeaderComponent}],
   …,
 })
 class LibHeaderComponent extends LibHeaderToken {}
@@ -117,9 +115,9 @@ class LibHeaderComponent extends LibHeaderToken {}
   …,
 })
 class LibCardComponent {
-  @ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
+  @ContentChild(LibHeaderToken) header: LibHeaderToken | null = null;
 }
-</docs-code>
+```
 
 In this example, the `LibCardComponent` implementation no longer refers to `LibHeaderComponent` in either the type position or the value position.
 This lets full tree-shaking of `LibHeaderComponent` take place.
@@ -132,9 +130,9 @@ You can safely use that token as the provider in the component definition, allow
 To summarize, the lightweight injection token pattern consists of the following:
 
 1. A lightweight injection token that is represented as an abstract class.
-1. A component definition that implements the abstract class.
-1. Injection of the lightweight pattern, using `@ContentChild()` or `@ContentChildren()`.
-1. A provider in the implementation of the lightweight injection token which associates the lightweight injection token with the implementation.
+2. A component definition that implements the abstract class.
+3. Injection of the lightweight pattern, using `@ContentChild()` or `@ContentChildren()`.
+4. A provider in the implementation of the lightweight injection token which associates the lightweight injection token with the implementation.
 
 ### Use the lightweight injection token for API definition
 
@@ -146,17 +144,14 @@ This lets the parent communicate with the child, if it is present, in a type-saf
 For example, the `LibCardComponent` now queries `LibHeaderToken` rather than `LibHeaderComponent`.
 The following example shows how the pattern lets `LibCardComponent` communicate with the `LibHeaderComponent` without actually referring to `LibHeaderComponent`:
 
-<docs-code language="typescript" highlight="[[3],[13,16],[27]]">
+```ts {highlight: [[2],[9],[11],[19]]}
 abstract class LibHeaderToken {
   abstract doSomething(): void;
 }
 
 @Component({
   selector: 'lib-header',
-  providers: [
-    {provide: LibHeaderToken, useExisting: LibHeaderComponent}
-  ]
-  …,
+  providers: [{provide: LibHeaderToken, useExisting: LibHeaderComponent}],
 })
 class LibHeaderComponent extends LibHeaderToken {
   doSomething(): void {
@@ -166,10 +161,9 @@ class LibHeaderComponent extends LibHeaderToken {
 
 @Component({
   selector: 'lib-card',
-  …,
 })
-class LibCardComponent implement AfterContentInit {
-  @ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
+class LibCardComponent implements AfterContentInit {
+  @ContentChild(LibHeaderToken) header: LibHeaderToken | null = null;
 
   ngAfterContentInit(): void {
     if (this.header !== null) {
@@ -177,7 +171,7 @@ class LibCardComponent implement AfterContentInit {
     }
   }
 }
-</docs-code>
+```
 
 In this example, the parent queries the token to get the child component, and stores the resulting component reference if it is present.
 Before calling a method in the child, the parent component checks to see if the child component is present.
diff --git a/adev-es/src/content/guide/di/lightweight-injection-tokens.md b/adev-es/src/content/guide/di/lightweight-injection-tokens.md
index a8ce304..9809594 100644
--- a/adev-es/src/content/guide/di/lightweight-injection-tokens.md
+++ b/adev-es/src/content/guide/di/lightweight-injection-tokens.md
@@ -1,7 +1,7 @@
 # Optimizando el tamaño de la aplicación con tokens de inyección ligeros
 
 Esta página proporciona una visión conceptual de una técnica de inyección de dependencias que se recomienda para desarrolladores de librerías.
-Diseñar tu librería con *tokens de inyección ligeros* ayuda a optimizar el tamaño del paquete de las aplicaciones cliente que usan tu librería.
+Diseñar tu librería con _tokens de inyección ligeros_ ayuda a optimizar el tamaño del paquete de las aplicaciones cliente que usan tu librería.
 
 Puedes gestionar la estructura de dependencias entre tus componentes y servicios inyectables para optimizar el tamaño del paquete usando proveedores tree-shakable.
 Esto normalmente asegura que si un componente o servicio provisto nunca se usa realmente por la aplicación, el compilador puede eliminar su código del paquete.
@@ -22,17 +22,18 @@ Para prevenir la retención de componentes no utilizados, tu librería debería
 Para explicar mejor la condición bajo la cual ocurre la retención de tokens, considera una librería que proporciona un componente library-card.
 Este componente contiene un cuerpo y puede contener un encabezado opcional:
 
-<docs-code language="html">
+```angular-html
 
 <lib-card>;
-  <lib-header>…</lib-header>;
+<lib-header>…</lib-header>;
 </lib-card>;
-
-</docs-code>
+```
 
 En una implementación probable, el componente `<lib-card>` usa `@ContentChild()` o `@ContentChildren()` para obtener `<lib-header>` y `<lib-body>`, como en el siguiente ejemplo:
 
-<docs-code language="typescript" highlight="[12]">
+```ts {highlight: [14]}
+import {Component, ContentChild} from '@angular/core';
+
 @Component({
   selector: 'lib-header',
   …,
@@ -44,26 +45,25 @@ class LibHeaderComponent {}
   …,
 })
 class LibCardComponent {
-  @ContentChild(LibHeaderComponent) header: LibHeaderComponent|null = null;
+  @ContentChild(LibHeaderComponent) header: LibHeaderComponent | null = null;
 }
-
-</docs-code>
+```
 
 Dado que `<lib-header>` es opcional, el elemento puede aparecer en la plantilla en su forma mínima, `<lib-card></lib-card>`.
 En este caso, `<lib-header>` no se usa y esperarías que sea tree-shaken, pero eso no es lo que sucede.
 Esto es porque `LibCardComponent` en realidad contiene dos referencias al `LibHeaderComponent`:
 
-<docs-code language="typescript">
-@ContentChild(LibHeaderComponent) header: LibHeaderComponent;
-</docs-code>
+```ts
+@ContentChild(LibHeaderComponent) header: LibHeaderComponent | null;
+```
 
-* Una de estas referencias está en la *posición de tipo*: es decir, especifica `LibHeaderComponent` como un tipo: `header: LibHeaderComponent;`.
-* La otra referencia está en la *posición de valor*: es decir, LibHeaderComponent es el valor del decorador de parámetro `@ContentChild()`: `@ContentChild(LibHeaderComponent)`.
+- Una de estas referencias está en la _posición de tipo_: es decir, especifica `LibHeaderComponent` como un tipo: `header: LibHeaderComponent;`.
+- La otra referencia está en la _posición de valor_: es decir, LibHeaderComponent es el valor del decorador de parámetro `@ContentChild()`: `@ContentChild(LibHeaderComponent)`.
 
 El compilador maneja las referencias de tokens en estas posiciones de manera diferente:
 
-* El compilador borra las referencias de *posición de tipo* después de la conversión desde TypeScript, por lo que no tienen impacto en tree-shaking.
-* El compilador debe mantener las referencias de *posición de valor* en tiempo de ejecución, lo que **previene** que el componente sea tree-shaken.
+- El compilador borra las referencias de _posición de tipo_ después de la conversión desde TypeScript, por lo que no tienen impacto en tree-shaking.
+- El compilador debe mantener las referencias de _posición de valor_ en tiempo de ejecución, lo que **previene** que el componente sea tree-shaken.
 
 En el ejemplo, el compilador retiene el token `LibHeaderComponent` que ocurre en la posición de valor.
 Esto previene que el componente referenciado sea tree-shaken, incluso si la aplicación no usa realmente `<lib-header>` en ningún lugar.
@@ -74,18 +74,18 @@ Si el código, plantilla y estilos de `LibHeaderComponent` se combinan para volv
 El problema de tree-shaking surge cuando un componente se usa como un token de inyección.
 Hay dos casos cuando eso puede suceder:
 
-* El token se usa en la posición de valor de una [consulta de contenido](guide/components/queries#content-queries).
-* El token se usa como un especificador de tipo para inyección de constructor.
+- El token se usa en la posición de valor de una [consulta de contenido](guide/components/queries#content-queries).
+- El token se usa como un especificador de tipo para inyección de constructor.
 
 En el siguiente ejemplo, ambos usos del token `OtherComponent` causan retención de `OtherComponent`, previniendo que sea tree-shaken cuando no se usa:
 
-<docs-code language="typescript" highlight="[[2],[4]]">
+```ts {highlight: [[2],[4]]}
 class MyComponent {
   constructor(@Optional() other: OtherComponent) {}
 
   @ContentChild(OtherComponent) other: OtherComponent|null;
 }
-</docs-code>
+```
 
 Aunque los tokens usados solo como especificadores de tipo se eliminan cuando se convierten a JavaScript, todos los tokens usados para inyección de dependencias se necesitan en tiempo de ejecución.
 Estos efectivamente cambian `constructor(@Optional() other: OtherComponent)` a `constructor(@Optional() @Inject(OtherComponent) other)`.
@@ -100,14 +100,12 @@ La clase abstracta se retiene, no es tree-shaken, pero es pequeña y no tiene un
 
 El siguiente ejemplo muestra cómo esto funciona para el `LibHeaderComponent`:
 
-<docs-code language="typescript" language="[[1],[6],[17]]">
+```ts {highlight: [[1],[5], [15]]}
 abstract class LibHeaderToken {}
 
 @Component({
   selector: 'lib-header',
-  providers: [
-    {provide: LibHeaderToken, useExisting: LibHeaderComponent}
-  ]
+  providers: [{provide: LibHeaderToken, useExisting: LibHeaderComponent}],
   …,
 })
 class LibHeaderComponent extends LibHeaderToken {}
@@ -117,9 +115,9 @@ class LibHeaderComponent extends LibHeaderToken {}
   …,
 })
 class LibCardComponent {
-  @ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
+  @ContentChild(LibHeaderToken) header: LibHeaderToken | null = null;
 }
-</docs-code>
+```
 
 En este ejemplo, la implementación de `LibCardComponent` ya no se refiere a `LibHeaderComponent` ni en la posición de tipo ni en la posición de valor.
 Esto permite que ocurra tree-shaking completo de `LibHeaderComponent`.
@@ -146,17 +144,14 @@ Esto permite que el padre se comunique con el hijo, si está presente, de una ma
 Por ejemplo, el `LibCardComponent` ahora consulta `LibHeaderToken` en lugar de `LibHeaderComponent`.
 El siguiente ejemplo muestra cómo el patrón permite que `LibCardComponent` se comunique con el `LibHeaderComponent` sin referirse realmente a `LibHeaderComponent`:
 
-<docs-code language="typescript" highlight="[[3],[13,16],[27]]">
+```ts {highlight: [[2],[9],[11],[19]]}
 abstract class LibHeaderToken {
   abstract doSomething(): void;
 }
 
 @Component({
   selector: 'lib-header',
-  providers: [
-    {provide: LibHeaderToken, useExisting: LibHeaderComponent}
-  ]
-  …,
+  providers: [ {provide: LibHeaderToken, useExisting: LibHeaderComponent}]
 })
 class LibHeaderComponent extends LibHeaderToken {
   doSomething(): void {
@@ -166,9 +161,8 @@ class LibHeaderComponent extends LibHeaderToken {
 
 @Component({
   selector: 'lib-card',
-  …,
 })
-class LibCardComponent implement AfterContentInit {
+class LibCardComponent implements AfterContentInit {
   @ContentChild(LibHeaderToken) header: LibHeaderToken|null = null;
 
   ngAfterContentInit(): void {
@@ -177,7 +171,7 @@ class LibCardComponent implement AfterContentInit {
     }
   }
 }
-</docs-code>
+```
 
 En este ejemplo, el padre consulta el token para obtener el componente hijo, y almacena la referencia del componente resultante si está presente.
 Antes de llamar un método en el hijo, el componente padre verifica si el componente hijo está presente.
@@ -190,4 +184,4 @@ La guía de estilo de Angular sugiere que nombres los componentes usando el sufi
 El ejemplo "LibHeaderComponent" sigue esta convención.
 
 Deberías mantener la relación entre el componente y su token mientras aún los distingues.
-El estilo recomendado es usar el nombre base del componente con el sufijo "`Token`" para nombrar tus tokens de inyección ligeros: "`LibHeaderToken`."
+El estilo recomendado es usar el nombre base del componente con el sufijo "`Token`" para nombrar tus tokens de inyección ligeros: "`LibHeaderToken`".
diff --git a/adev-es/src/content/guide/di/overview.en.md b/adev-es/src/content/guide/di/overview.en.md
index 1620a7e..03de6b1 100644
--- a/adev-es/src/content/guide/di/overview.en.md
+++ b/adev-es/src/content/guide/di/overview.en.md
@@ -1,29 +1,154 @@
 <docs-decorative-header title="Dependency injection in Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
-"DI" is a design pattern and mechanism for creating and delivering some parts of an app to other parts of an app that require them.
+
+Dependency Injection (DI) is a design pattern used to organize and share code across an application.
 </docs-decorative-header>
 
 TIP: Check out Angular's [Essentials](essentials/dependency-injection) before diving into this comprehensive guide.
 
-When you develop a smaller part of your system, like a module or a class, you may need to use features from other classes. For example, you may need an HTTP service to make backend calls. Dependency Injection, or DI, is a design pattern and mechanism for creating and delivering some parts of an application to other parts of an application that require them. Angular supports this design pattern and you can use it in your applications to increase flexibility and modularity.
-
-In Angular, dependencies are typically services, but they also can be values, such as strings or functions. An injector for an application (created automatically during bootstrap) instantiates dependencies when needed, using a configured provider of the service or value.
-
-## Learn about Angular dependency injection
-
-<docs-card-container>
-  <docs-card title="Understanding dependency injection" href="/guide/di/dependency-injection">
-    Learn basic principles of dependency injection in Angular.
-  </docs-card>
-  <docs-card title="Creating and injecting service" href="/guide/di/creating-injectable-service">
-    Describes how to create a service and inject it in other services and components.
-  </docs-card>
-  <docs-card title="Configuring dependency providers" href="/guide/di/dependency-injection-providers">
-    Describes how to configure dependencies using the providers field on the @Component and @NgModule decorators. Also describes how to use InjectionToken to provide and inject values in DI, which can be helpful when you want to use a value other than classes as dependencies.
-  </docs-card>
-    <docs-card title="Injection context" href="/guide/di/dependency-injection-context">
-    Describes what an injection context is and how to use the DI system where you need it.
-  </docs-card>
-  <docs-card title="Hierarchical injectors" href="/guide/di/hierarchical-dependency-injection">
-    Hierarchical DI enables you to share dependencies between different parts of the application only when and if you need to. This is an advanced topic.
-  </docs-card>
-</docs-card-container>
+As an application grows, developers often need to reuse and share features across different parts of the codebase. [Dependency Injection (DI)](https://en.wikipedia.org/wiki/Dependency_injection) is a design pattern used to organize and share code across an application by allowing you to "inject" features into different parts.
+
+Dependency injection is a popular pattern because it allows developers to address common challenges such as:
+
+- **Improved code maintainability**: Dependency injection allows cleaner separation of concerns which enables easier refactoring and reducing code duplication.
+- **Scalability**: Modular functionality can be reused across multiple contexts and allows for easier scaling.
+- **Better testing**: DI allows unit tests to easily use [test doubles](https://en.wikipedia.org/wiki/Test_double) for situations when using a real implementation is not practical.
+
+## How does dependency injection work in Angular?
+
+A dependency is any object, value, function or service that a class needs to work but does not create itself. In other words, it creates a relationship between different parts of your application since it wouldn't work without the dependency.
+
+There are two ways that code interacts with any dependency injection system:
+
+- Code can _provide_, or make available, values.
+- Code can _inject_, or ask for, those values as dependencies.
+
+"Values," in this context, can be any JavaScript value, including objects and functions. Common types of injected dependencies include:
+
+- **Configuration values**: Environment-specific constants, API URLs, feature flags, etc.
+- **Factories**: Functions that create objects or values based on runtime conditions
+- **Services**: Classes that provide common functionality, business logic, or state
+
+Angular components and directives automatically participate in DI, meaning that they can inject dependencies _and_ they are available to be injected.
+
+## What are services?
+
+An Angular _service_ is a TypeScript class decorated with `@Injectable`, which makes an instance of the class available to be injected as a dependency. Services are the most common way of sharing data and functionality across an application.
+
+Common types of services include:
+
+- **Data clients:** Abstracts the details of making requests to a server for data retrieval and mutation
+- **State management:** Defines state shared across multiple components or pages
+- **Authentication and authorization:** Manages user authentication, token storage, and access control
+- **Logging and error handling:** Establishes a common API for logging or communicating error states to the user
+- **Event handling and dispatch:** Handles events or notifications that are not associated with a specific component, or for dispatching events and notifications to components, following the [observer pattern](https://en.wikipedia.org/wiki/Observer_pattern)
+- **Utility functions:** Offers reusable utility functions like data formatting, validation, or calculations
+
+The following example declares a service named `AnalyticsLogger`:
+
+```ts
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class AnalyticsLogger {
+  trackEvent(category: string, value: string) {
+    console.log('Analytics event logged:', {
+      category,
+      value,
+      timestamp: new Date().toISOString()
+    })
+  }
+}
+```
+
+NOTE: The `providedIn: 'root'` option makes this service available throughout your entire application as a singleton. This is the recommended approach for most services.
+
+## Injecting dependencies with `inject()`
+
+You can inject dependencies using Angular's `inject()` function.
+
+Here is an example of a navigation bar that injects `AnalyticsLogger` and Angular `Router` service to allow users to navigate to a different page while tracking the event.
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AnalyticsLogger } from './analytics-logger';
+
+@Component({
+  selector: 'app-navbar',
+  template: `
+    <a href="#" (click)="navigateToDetail($event)">Detail Page</a>
+  `,
+})
+export class NavbarComponent {
+  private router = inject(Router);
+  private analytics = inject(AnalyticsLogger);
+
+  navigateToDetail(event: Event) {
+    event.preventDefault();
+    this.analytics.trackEvent('navigation', '/details');
+    this.router.navigate(['/details']);
+  }
+}
+```
+
+### Where can `inject()` be used?
+
+You can inject dependencies during construction of a component, directive, or service. The call to `inject` can appear in either the `constructor` or in a field initializer. Here are some common examples:
+
+```ts
+@Component({...})
+export class MyComponent {
+  // ✅ In class field initializer
+  private service = inject(MyService);
+
+  // ✅ In constructor body
+  private anotherService: MyService;
+
+  constructor() {
+    this.anotherService = inject(MyService);
+  }
+}
+```
+
+```ts
+@Directive({...})
+export class MyDirective {
+  // ✅ In class field initializer
+  private element = inject(ElementRef);
+}
+```
+
+```ts
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class MyService {
+  // ✅ In a service
+  private http = inject(HttpClient);
+}
+```
+
+```ts
+export const authGuard = () => {
+  // ✅ In a route guard
+  const auth = inject(AuthService);
+  return auth.isAuthenticated();
+}
+```
+
+Angular uses the term "injection context" to describe any place in your code where you can call `inject`. While component, directive, and service construction is the most common, see [injection contexts](/guide/di/dependency-injection-context) for more details.
+
+For more information, see the [inject API docs](api/core/inject#usage-notes).
+
+## Next steps
+
+Now that you understand the fundamentals of dependency injection in Angular, you're ready to learn how to create your own services.
+
+The next guide, [Creating and using services](guide/di/creating-and-using-services), will show you:
+
+- How to create a service with the Angular CLI or manually
+- How the `providedIn: 'root'` pattern works
+- How to inject services into components and other services
+
+This covers the most common use case for services in Angular applications.
diff --git a/adev-es/src/content/guide/di/overview.md b/adev-es/src/content/guide/di/overview.md
index d8b5440..2c8d3a0 100644
--- a/adev-es/src/content/guide/di/overview.md
+++ b/adev-es/src/content/guide/di/overview.md
@@ -1,29 +1,154 @@
 <docs-decorative-header title="Inyección de dependencias en Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
-"DI" es un patrón de diseño y mecanismo para crear y entregar algunas partes de una aplicación a otras partes de la aplicación que las requieren.
+
+La Inyección de Dependencias (DI) es un patrón de diseño usado para organizar y compartir código a través de una aplicación.
 </docs-decorative-header>
 
 CONSEJO: Consulta los [Fundamentos](essentials/dependency-injection) de Angular antes de sumergirte en esta guía completa.
 
-Cuando desarrollas una parte más pequeña de tu sistema, como un módulo o una clase, es posible que necesites usar características de otras clases. Por ejemplo, es posible que necesites un servicio HTTP para hacer llamadas al backend. La Inyección de Dependencias, o DI, es un patrón de diseño y mecanismo para crear y entregar algunas partes de una aplicación a otras partes de la aplicación que las requieren. Angular soporta este patrón de diseño y puedes usarlo en tus aplicaciones para aumentar la flexibilidad y modularidad.
-
-En Angular, las dependencias son típicamente servicios, pero también pueden ser valores, como cadenas o funciones. Un inyector para una aplicación (creado automáticamente durante la inicizalición) instancia las dependencias cuando es necesario, usando un proveedor configurado del servicio o valor.
-
-## Aprende sobre la inyección de dependencias de Angular
-
-<docs-card-container>
-  <docs-card title="Entendiendo la inyección de dependencias" href="/guide/di/dependency-injection">
-    Aprende los principios básicos de la inyección de dependencias en Angular.
-  </docs-card>
-  <docs-card title="Creando e inyectando servicios" href="/guide/di/creating-injectable-service">
-    Describe cómo crear un servicio e inyectarlo en otros servicios y componentes.
-  </docs-card>
-  <docs-card title="Configurando proveedores de dependencias" href="/guide/di/dependency-injection-providers">
-    Describe cómo configurar dependencias usando el campo providers en los decoradores @Component y @NgModule. También describe cómo usar InjectionToken para proporcionar e inyectar valores en DI, lo cual puede ser útil cuando quieres usar un valor que no sean clases como dependencias.
-  </docs-card>
-    <docs-card title="Contexto de inyección" href="/guide/di/dependency-injection-context">
-    Describe qué es un contexto de inyección y cómo usar el sistema DI donde lo necesites.
-  </docs-card>
-  <docs-card title="Inyectores jerárquicos" href="/guide/di/hierarchical-dependency-injection">
-    La DI jerárquica te permite compartir dependencias entre diferentes partes de la aplicación solo cuando y si las necesitas. Este es un tema avanzado.
-  </docs-card>
-</docs-card-container>
+A medida que una aplicación crece, los desarrolladores a menudo necesitan reutilizar y compartir características en diferentes partes del código base. [La Inyección de Dependencias (DI)](https://es.wikipedia.org/wiki/Inyecci%C3%B3n_de_dependencias) es un patrón de diseño usado para organizar y compartir código a través de una aplicación permitiéndote "inyectar" características en diferentes partes.
+
+La inyección de dependencias es un patrón popular porque permite a los desarrolladores abordar desafíos comunes como:
+
+- **Mejor mantenibilidad del código**: La inyección de dependencias permite una separación más limpia de responsabilidades que facilita la refactorización y reduce la duplicación de código.
+- **Escalabilidad**: La funcionalidad modular puede reutilizarse en múltiples contextos y permite un escalado más fácil.
+- **Mejor testing**: DI permite que las pruebas unitarias usen fácilmente [dobles de prueba](https://es.wikipedia.org/wiki/Test_double) para situaciones en las que usar una implementación real no es práctico.
+
+## ¿Cómo funciona la inyección de dependencias en Angular?
+
+Una dependencia es cualquier objeto, valor, función o servicio que una clase necesita para funcionar pero que no crea por sí misma. En otras palabras, crea una relación entre diferentes partes de tu aplicación ya que no funcionaría sin la dependencia.
+
+Hay dos formas en que el código interactúa con cualquier sistema de inyección de dependencias:
+
+- El código puede _proporcionar_, o hacer disponibles, valores.
+- El código puede _inyectar_, o solicitar, esos valores como dependencias.
+
+"Valores", en este contexto, pueden ser cualquier valor de JavaScript, incluyendo objetos y funciones. Los tipos comunes de dependencias inyectadas incluyen:
+
+- **Valores de configuración**: Constantes específicas del entorno, URLs de API, flags de características, etc.
+- **Fábricas**: Funciones que crean objetos o valores basados en condiciones de tiempo de ejecución
+- **Servicios**: Clases que proporcionan funcionalidad común, lógica de negocio o estado
+
+Los componentes y directivas de Angular participan automáticamente en DI, lo que significa que pueden inyectar dependencias _y_ están disponibles para ser inyectados.
+
+## ¿Qué son los servicios?
+
+Un _servicio_ de Angular es una clase TypeScript decorada con `@Injectable`, que hace que una instancia de la clase esté disponible para ser inyectada como dependencia. Los servicios son la forma más común de compartir datos y funcionalidad a través de una aplicación.
+
+Los tipos comunes de servicios incluyen:
+
+- **Clientes de datos:** Abstrae los detalles de hacer solicitudes a un servidor para recuperación y mutación de datos
+- **Gestión de estado:** Define estado compartido a través de múltiples componentes o páginas
+- **Autenticación y autorización:** Gestiona la autenticación de usuarios, almacenamiento de tokens y control de acceso
+- **Registro y manejo de errores:** Establece una API común para registrar o comunicar estados de error al usuario
+- **Manejo y envío de eventos:** Maneja eventos o notificaciones que no están asociados con un componente específico, o para enviar eventos y notificaciones a componentes, siguiendo el [patrón observador](https://es.wikipedia.org/wiki/Observador_(patr%C3%B3n_de_dise%C3%B1o))
+- **Funciones de utilidad:** Ofrece funciones de utilidad reutilizables como formateo de datos, validación o cálculos
+
+El siguiente ejemplo declara un servicio llamado `AnalyticsLogger`:
+
+```ts
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class AnalyticsLogger {
+  trackEvent(category: string, value: string) {
+    console.log('Analytics event logged:', {
+      category,
+      value,
+      timestamp: new Date().toISOString()
+    })
+  }
+}
+```
+
+NOTA: La opción `providedIn: 'root'` hace que este servicio esté disponible en toda tu aplicación como un singleton. Este es el enfoque recomendado para la mayoría de los servicios.
+
+## Inyectando dependencias con `inject()`
+
+Puedes inyectar dependencias usando la función `inject()` de Angular.
+
+Aquí hay un ejemplo de una barra de navegación que inyecta `AnalyticsLogger` y el servicio `Router` de Angular para permitir a los usuarios navegar a una página diferente mientras rastrea el evento.
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AnalyticsLogger } from './analytics-logger';
+
+@Component({
+  selector: 'app-navbar',
+  template: `
+    <a href="#" (click)="navigateToDetail($event)">Detail Page</a>
+  `,
+})
+export class NavbarComponent {
+  private router = inject(Router);
+  private analytics = inject(AnalyticsLogger);
+
+  navigateToDetail(event: Event) {
+    event.preventDefault();
+    this.analytics.trackEvent('navigation', '/details');
+    this.router.navigate(['/details']);
+  }
+}
+```
+
+### ¿Dónde se puede usar `inject()`?
+
+Puedes inyectar dependencias durante la construcción de un componente, directiva o servicio. La llamada a `inject` puede aparecer en el `constructor` o en un inicializador de campo. Aquí hay algunos ejemplos comunes:
+
+```ts
+@Component({...})
+export class MyComponent {
+  // ✅ En inicializador de campo de clase
+  private service = inject(MyService);
+
+  // ✅ En cuerpo del constructor
+  private anotherService: MyService;
+
+  constructor() {
+    this.anotherService = inject(MyService);
+  }
+}
+```
+
+```ts
+@Directive({...})
+export class MyDirective {
+  // ✅ En inicializador de campo de clase
+  private element = inject(ElementRef);
+}
+```
+
+```ts
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class MyService {
+  // ✅ En un servicio
+  private http = inject(HttpClient);
+}
+```
+
+```ts
+export const authGuard = () => {
+  // ✅ En un guard de ruta
+  const auth = inject(AuthService);
+  return auth.isAuthenticated();
+}
+```
+
+Angular usa el término "contexto de inyección" para describir cualquier lugar en tu código donde puedes llamar a `inject`. Aunque la construcción de componentes, directivas y servicios es la más común, consulta [contextos de inyección](/guide/di/dependency-injection-context) para más detalles.
+
+Para más información, consulta la [documentación de la API inject](api/core/inject#usage-notes).
+
+## Próximos pasos
+
+Ahora que entiendes los fundamentos de la inyección de dependencias en Angular, estás listo para aprender cómo crear tus propios servicios.
+
+La siguiente guía, [Creando y usando servicios](guide/di/creating-and-using-services), te mostrará:
+
+- Cómo crear un servicio con Angular CLI o manualmente
+- Cómo funciona el patrón `providedIn: 'root'`
+- Cómo inyectar servicios en componentes y otros servicios
+
+Esto cubre el caso de uso más común para servicios en aplicaciones Angular.
diff --git a/adev-es/src/content/guide/directives/attribute-directives.en.md b/adev-es/src/content/guide/directives/attribute-directives.en.md
index 69403a0..4d39ac9 100644
--- a/adev-es/src/content/guide/directives/attribute-directives.en.md
+++ b/adev-es/src/content/guide/directives/attribute-directives.en.md
@@ -8,36 +8,34 @@ This section walks you through creating a highlight directive that sets the back
 
 1. To create a directive, use the CLI command [`ng generate directive`](tools/cli/schematics).
 
-    <docs-code language="shell">
+   ```shell
+   ng generate directive highlight
+   ```
 
-    ng generate directive highlight
+   The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
 
-    </docs-code>
+   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.0.ts"/>
 
-    The CLI creates `src/app/highlight.directive.ts`, a corresponding test file `src/app/highlight.directive.spec.ts`.
-
-    <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.0.ts"/>
-
-    The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
+   The `@Directive()` decorator's configuration property specifies the directive's CSS attribute selector, `[appHighlight]`.
 
 1. Import `ElementRef` from `@angular/core`.
-    `ElementRef` grants direct access to the host DOM element through its `nativeElement` property.
+   `ElementRef` grants direct access to the host DOM element through its `nativeElement` property.
 
 1. Add `ElementRef` in the directive's `constructor()` to [inject](guide/di) 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="src/app/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"/>
 
-HELPFUL: Directives *do not* support namespaces.
+HELPFUL: Directives _do not_ support namespaces.
 
-<docs-code header="src/app/app.component.avoid.html (unsupported)" path="adev/src/content/examples/attribute-directives/src/app/app.component.avoid.html" visibleRegion="unsupported"/>
+<docs-code header="app.component.avoid.html (unsupported)" path="adev/src/content/examples/attribute-directives/src/app/app.component.avoid.html" visibleRegion="unsupported"/>
 
 ## Applying an attribute directive
 
 1. To use the `HighlightDirective`, add a `<p>` element to the HTML template with the directive as an attribute.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" visibleRegion="applied"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" visibleRegion="applied"/>
 
 Angular creates an instance of the `HighlightDirective` class and injects a reference to the `<p>` element into the directive's constructor, which sets the `<p>` element's background style to yellow.
 
@@ -45,21 +43,21 @@ Angular creates an instance of the `HighlightDirective` class and injects a refe
 
 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. Import `HostListener` from '@angular/core'.
+1. Configure host event bindings using the `host` property in the `@Directive()` decorator.
 
-    <docs-code header="src/app/highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="imports"/>
+<docs-code header="src/app/highlight.directive.ts (decorator)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="decorator"/>
 
-1. Add two event handlers that respond when the mouse enters or leaves, each with the `@HostListener()` decorator.
+1. Add two event handler methods, and map host element events to them via the `host` property.
 
-    <docs-code header="src/app/highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="mouse-methods"/>
+<docs-code header="highlight.directive.ts (mouse-methods)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="mouse-methods"/>
 
-Subscribe to events of the DOM element that hosts an attribute directive, the `<p>` in this case, with the `@HostListener()` decorator.
+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="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
+<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.
 
@@ -71,26 +69,25 @@ This section walks you through setting the highlight color while applying the `H
 
 1. In `highlight.directive.ts`, import `Input` from `@angular/core`.
 
-    <docs-code header="src/app/highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="imports"/>
-
-1. Add an `appHighlight` `input` property.
+<docs-code header="highlight.directive.ts (imports)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="imports"/>
 
-    <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="input"/>
+2. Add an `appHighlight` `input` property.
 
-    The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding.
+   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="input"/>
 
-2. In `app.component.ts`, add a `color` property to the `AppComponent`.
+   The `input()` function adds metadata to the class that makes the directive's `appHighlight` property available for binding.
 
-    <docs-code header="src/app/app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" visibleRegion="class"/>
+3. In `app.component.ts`, add a `color` property to the `AppComponent`.
 
-3. 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.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" visibleRegion="class"/>
 
-    <docs-code header="src/app/app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="color"/>
+4. To simultaneously apply the directive and the color, use property binding with the `appHighlight` directive selector, setting it equal to `color`.
 
-    The `[appHighlight]` attribute binding performs two tasks:
+   <docs-code header="app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="color"/>
 
-    * Applies the highlighting directive to the `<p>` element
-    * Sets the directive's highlight color with a property binding
+   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
 
@@ -98,38 +95,38 @@ This section guides you through adding radio buttons to bind your color choice t
 
 1. Add markup to `app.component.html` for choosing a color as follows:
 
-    <docs-code header="src/app/app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="v2"/>
+<docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="v2"/>
 
 1. Revise the `AppComponent.color` so that it has no initial value.
 
-    <docs-code header="src/app/app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" visibleRegion="class"/>
+<docs-code header="app.component.ts (class)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" visibleRegion="class"/>
 
 1. 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="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="mouse-enter"/>
+<docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="mouse-enter"/>
 
 1. 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">
+<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`.
+1. Add a second `input()` property to `HighlightDirective` called `defaultColor`.
 
-    <docs-code header="src/app/highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="defaultColor"/>
+<docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="defaultColor"/>
 
 1. 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="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="mouse-enter"/>
+<docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="mouse-enter"/>
 
 1. 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 it is static.
+   In this case, the `defaultColor` binding doesn't use square brackets, `[]`, because it is static.
 
-    <docs-code header="src/app/app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="defaultColor"/>
+   <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="defaultColor"/>
 
-    As with components, you can add multiple directive property bindings to a host element.
+   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.
@@ -143,12 +140,12 @@ To prevent expression evaluation in the browser, add `ngNonBindable` to the host
 
 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="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="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="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable-with-directive"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="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-es/src/content/guide/directives/attribute-directives.md b/adev-es/src/content/guide/directives/attribute-directives.md
index ccbf106..e782f2b 100644
--- a/adev-es/src/content/guide/directives/attribute-directives.md
+++ b/adev-es/src/content/guide/directives/attribute-directives.md
@@ -8,17 +8,15 @@ Esta sección te guía a través de la creación de una directiva de resaltado q
 
 1. Para crear una directiva, usa el comando CLI [`ng generate directive`](tools/cli/schematics).
 
-    <docs-code language="shell">
+   ```shell
+   ng generate directive highlight
+   ```
 
-    ng generate directive highlight
+   El CLI crea `src/app/highlight.directive.ts`, un archivo de prueba correspondiente `src/app/highlight.directive.spec.ts`.
 
-    </docs-code>
+   <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.0.ts"/>
 
-    El CLI crea `src/app/highlight.directive.ts`, un archivo de prueba correspondiente `src/app/highlight.directive.spec.ts`.
-
-    <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.0.ts"/>
-
-    La propiedad de configuración del decorador `@Directive()` especifica el selector de atributo CSS de la directiva, `[appHighlight]`.
+   La propiedad de configuración del decorador `@Directive()` especifica el selector de atributo CSS de la directiva, `[appHighlight]`.
 
 1. Importa `ElementRef` desde `@angular/core`.
     `ElementRef` otorga acceso directo al elemento DOM host a través de su propiedad `nativeElement`.
@@ -27,17 +25,17 @@ Esta sección te guía a través de la creación de una directiva de resaltado q
 
 1. Añade lógica a la clase `HighlightDirective` que establece el fondo a amarillo.
 
-    <docs-code header="src/app/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"/>
 
-ÚTIL: Las directivas *no* soportan espacios de nombres.
+ÚTIL: Las directivas _no_ soportan espacios de nombres.
 
-<docs-code header="src/app/app.component.avoid.html (no soportado)" path="adev/src/content/examples/attribute-directives/src/app/app.component.avoid.html" visibleRegion="unsupported"/>
+<docs-code header="app.component.avoid.html (no soportado)" path="adev/src/content/examples/attribute-directives/src/app/app.component.avoid.html" visibleRegion="unsupported"/>
 
 ## Aplicando una directiva de atributo
 
 1. Para usar `HighlightDirective`, añade un elemento `<p>` a la plantilla HTML con la directiva como atributo.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" visibleRegion="applied"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.html" visibleRegion="applied"/>
 
 Angular crea una instancia de la clase `HighlightDirective` e inyecta una referencia al elemento `<p>` en el constructor de la directiva, que establece el estilo de fondo del elemento `<p>` a amarillo.
 
@@ -45,21 +43,21 @@ Angular crea una instancia de la clase `HighlightDirective` e inyecta una refere
 
 Esta sección te muestra cómo detectar cuando un usuario pasa el mouse sobre o fuera del elemento y responder estableciendo o limpiando el color de resaltado.
 
-1. Importa `HostListener` desde '@angular/core'.
+1. Configura las vinculaciones de eventos del host usando la propiedad `host` en el decorador `@Directive()`.
 
-    <docs-code header="src/app/highlight.directive.ts (importaciones)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="imports"/>
+    <docs-code header="src/app/highlight.directive.ts (decorador)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="decorator"/>
 
 1. Añade dos manejadores de eventos que responden cuando el mouse entra o sale, cada uno con el decorador `@HostListener()`.
 
-    <docs-code header="src/app/highlight.directive.ts (métodos-mouse)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="mouse-methods"/>
+    <docs-code header="highlight.directive.ts (métodos-mouse)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts" visibleRegion="mouse-methods"/>
 
-Suscríbete a eventos del elemento DOM que aloja una directiva de atributo, el `<p>` en este caso, con el decorador `@HostListener()`.
+Suscríbete a los eventos del elemento del DOM que hospeda una directiva de atributo (en este caso, el `<p>`) configurando los listeners de eventos en la [propiedad host](guide/components/host-elements#binding-to-the-host-element) de la directiva.
 
 ÚTIL: Los manejadores delegan a un método auxiliar, `highlight()`, que establece el color en el elemento DOM host, `el`.
 
 La directiva completa es la siguiente:
 
-<docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.2.ts"/>
 
 El color de fondo aparece cuando el puntero se desplaza sobre el elemento de párrafo y desaparece cuando el puntero se mueve fuera.
 
@@ -71,26 +69,25 @@ Esta sección te guía a través de establecer el color de resaltado mientras ap
 
 1. En `highlight.directive.ts`, importa `Input` desde `@angular/core`.
 
-    <docs-code header="src/app/highlight.directive.ts (importaciones)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="imports"/>
+<docs-code header="highlight.directive.ts (importaciones)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="imports"/>
 
-1. Añade una propiedad `input` `appHighlight`.
+2. Añade una propiedad `input` `appHighlight`.
 
-    <docs-code header="src/app/highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="input"/>
+    <docs-code header="highlight.directive.ts" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="input"/>
 
     La función `input()` añade metadatos a la clase que hace que la propiedad `appHighlight` de la directiva esté disponible para enlace.
 
-2. En `app.component.ts`, añade una propiedad `color` al `AppComponent`.
+3. En `app.component.ts`, añade una propiedad `color` al `AppComponent`.
 
-    <docs-code header="src/app/app.component.ts (clase)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" visibleRegion="class"/>
+    <docs-code header="app.component.ts (clase)" path="adev/src/content/examples/attribute-directives/src/app/app.component.1.ts" visibleRegion="class"/>
 
-3. Para aplicar simultáneamente la directiva y el color, usa enlace de propiedad con el selector de directiva `appHighlight`, estableciéndolo igual a `color`.
+4. Para aplicar simultáneamente la directiva y el color, usa enlace de propiedad con el selector de directiva `appHighlight`, estableciéndolo igual a `color`.
 
     <docs-code header="src/app/app.component.html (color)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="color"/>
 
     El enlace de atributo `[appHighlight]` realiza dos tareas:
-
-    * Aplica la directiva de resaltado al elemento `<p>`
-    * Establece el color de resaltado de la directiva con un enlace de propiedad
+    - Aplica la directiva de resaltado al elemento `<p>`
+    - Establece el color de resaltado de la directiva con un enlace de propiedad
 
 ### Estableciendo el valor con entrada de usuario
 
@@ -98,15 +95,15 @@ Esta sección te guía a través de añadir botones de radio para vincular tu el
 
 1. Añade marcado a `app.component.html` para elegir un color de la siguiente manera:
 
-    <docs-code header="src/app/app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="v2"/>
+    <docs-code header="app.component.html (v2)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="v2"/>
 
 1. Revisa `AppComponent.color` para que no tenga valor inicial.
 
-    <docs-code header="src/app/app.component.ts (clase)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" visibleRegion="class"/>
+    <docs-code header="app.component.ts (clase)" path="adev/src/content/examples/attribute-directives/src/app/app.component.ts" visibleRegion="class"/>
 
 1. En `highlight.directive.ts`, revisa el método `onMouseEnter` para que primero trate de resaltar con `appHighlight` y recurra a `red` si `appHighlight` es `undefined`.
 
-    <docs-code header="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="mouse-enter"/>
+    <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.3.ts" visibleRegion="mouse-enter"/>
 
 1. Ejecuta tu aplicación para verificar que el usuario puede elegir el color con los botones de radio.
 
@@ -118,16 +115,16 @@ Esta sección te guía a través de configurar tu aplicación para que el desarr
 
 1. Añade una segunda propiedad `Input()` a `HighlightDirective` llamada `defaultColor`.
 
-    <docs-code header="src/app/highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="defaultColor"/>
+    <docs-code header="highlight.directive.ts (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="defaultColor"/>
 
 1. Revisa el `onMouseEnter` de la directiva para que primero trate de resaltar con `appHighlight`, luego con `defaultColor`, y finalmente con `red` si ambas propiedades son `undefined`.
 
-    <docs-code header="src/app/highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="mouse-enter"/>
+    <docs-code header="highlight.directive.ts (mouse-enter)" path="adev/src/content/examples/attribute-directives/src/app/highlight.directive.ts" visibleRegion="mouse-enter"/>
 
 1. Para enlazar a `AppComponent.color` y usar "violet" como el color por defecto, añade el siguiente HTML.
     En este caso, el enlace `defaultColor` no usa corchetes, `[]`, porque es estático.
 
-    <docs-code header="src/app/app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="defaultColor"/>
+    <docs-code header="app.component.html (defaultColor)" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="defaultColor"/>
 
     Como con los componentes, puedes agreg múltiples enlaces de propiedad de directiva a un elemento host.
 
@@ -143,12 +140,12 @@ Para prevenir la evaluación de expresiones en el navegador, añade `ngNonBindab
 
 En el siguiente ejemplo, la expresión `{{ 1 + 1 }}` se renderiza tal como está en tu editor de código, y no muestra `2`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable"/>
 
 Aplicar `ngNonBindable` a un elemento detiene el enlace para los elementos hijos de ese elemento.
 Sin embargo, `ngNonBindable` aún permite que las directivas funcionen en el elemento donde aplicas `ngNonBindable`.
 En el siguiente ejemplo, la directiva `appHighlight` sigue activa pero Angular no evalúa la expresión `{{ 1 + 1 }}`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable-with-directive"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/attribute-directives/src/app/app.component.html" visibleRegion="ngNonBindable-with-directive"/>
 
 Si aplicas `ngNonBindable` a un elemento padre, Angular desactiva la interpolación y el enlace de cualquier tipo, como enlace de propiedad o enlace de evento, para los hijos del elemento.
diff --git a/adev-es/src/content/guide/directives/directive-composition-api.en.md b/adev-es/src/content/guide/directives/directive-composition-api.en.md
index c898326..53694c0 100644
--- a/adev-es/src/content/guide/directives/directive-composition-api.en.md
+++ b/adev-es/src/content/guide/directives/directive-composition-api.en.md
@@ -3,13 +3,13 @@
 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*.
+decorator. We call such directives _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.
diff --git a/adev-es/src/content/guide/directives/directive-composition-api.md b/adev-es/src/content/guide/directives/directive-composition-api.md
index 8bde5e9..992c64f 100644
--- a/adev-es/src/content/guide/directives/directive-composition-api.md
+++ b/adev-es/src/content/guide/directives/directive-composition-api.md
@@ -3,13 +3,13 @@
 Las directivas de Angular ofrecen una excelente manera de encapsular comportamientos reutilizables: las directivas pueden aplicar atributos, 
 clases CSS y escuchadores de eventos a un elemento.
 
-La *API de composición de directivas* te permite aplicar directivas al elemento host de un componente desde 
-*dentro* de la clase TypeScript del componente.
+La _API de composición de directivas_ te permite aplicar directivas al elemento host de un componente desde 
+_dentro_ de la clase TypeScript del componente.
 
 ## Añadiendo directivas a un componente
 
 Se aplican directivas a un componente añadiendo una propiedad `hostDirectives` al decorador de un componente. 
-Llamamos a tales directivas *directivas host*.
+Llamamos a tales directivas _directivas host_.
 
 En este ejemplo, aplicamos la directiva `MenuBehavior` 
 al elemento host de `AdminMenu`. Esto funciona de manera similar a aplicar `MenuBehavior` al elemento `<admin-menu>` en una plantilla.
diff --git a/adev-es/src/content/guide/directives/overview.en.md b/adev-es/src/content/guide/directives/overview.en.md
index 07a62d2..2ea7047 100644
--- a/adev-es/src/content/guide/directives/overview.en.md
+++ b/adev-es/src/content/guide/directives/overview.en.md
@@ -38,7 +38,7 @@ HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/
 
 To use `NgClass`, add it to the component's `imports` list.
 
-<docs-code header="src/app/app.component.ts (NgClass import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-class"/>
+<docs-code header="app.component.ts (NgClass import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-class"/>
 
 ### Using `NgClass` with an expression
 
@@ -46,7 +46,7 @@ On the element you'd like to style, add `[ngClass]` and set it equal to an expre
 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="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="special-div"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="special-div"/>
 
 ### Using `NgClass` with a method
 
@@ -57,11 +57,11 @@ Because `isSpecial` is true, `ngClass` applies the class of `special` to the `<d
    If a key is `true`, `ngClass` adds the class.
    If a key is `false`, `ngClass` removes the class.
 
-   <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setClasses"/>
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setClasses"/>
 
 1. In the template, add the `ngClass` property binding to `currentClasses` to set the element's classes:
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgClass-1"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="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.
@@ -75,7 +75,7 @@ HELPFUL: To add or remove a _single_ style, use [style bindings](guide/templates
 
 To use `NgStyle`, add it to the component's `imports` list.
 
-<docs-code header="src/app/app.component.ts (NgStyle import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-style"/>
+<docs-code header="app.component.ts (NgStyle import)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-style"/>
 
 Use `NgStyle` to set multiple inline styles simultaneously, based on the state of the component.
 
@@ -83,11 +83,11 @@ Use `NgStyle` to set multiple inline styles simultaneously, based on the state o
 
    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="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setStyles"/>
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setStyles"/>
 
 1. To set the element's styles, add an `ngStyle` property binding to `currentStyles`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgStyle-2"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="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.
@@ -101,7 +101,7 @@ Use `<ng-container>` when there's no single element to host the directive.
 
 Here's a conditional paragraph using `<ng-container>`.
 
-<docs-code header="src/app/app.component.html (ngif-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="ngif-ngcontainer"/>
+<docs-code header="app.component.html (ngif-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="ngif-ngcontainer"/>
 
 <img alt="ngcontainer paragraph with proper style" src="assets/images/guide/structural-directives/good-paragraph.png">
 
@@ -111,7 +111,7 @@ Here's a conditional paragraph using `<ng-container>`.
 
 1. To conditionally exclude an `<option>`, wrap the `<option>` in an `<ng-container>`.
 
-   <docs-code header="src/app/app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="select-ngcontainer"/>
+   <docs-code header="app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="select-ngcontainer"/>
 
    <img alt="ngcontainer options work properly" src="assets/images/guide/structural-directives/select-ngcontainer-anim.gif">
 
diff --git a/adev-es/src/content/guide/directives/overview.md b/adev-es/src/content/guide/directives/overview.md
index 7c09775..276667a 100644
--- a/adev-es/src/content/guide/directives/overview.md
+++ b/adev-es/src/content/guide/directives/overview.md
@@ -38,7 +38,7 @@ Añade o elimina múltiples clases CSS simultáneamente con `ngClass`.
 
 Para usar `NgClass`, añádelo a la lista de `imports` del componente.
 
-<docs-code header="src/app/app.component.ts (importación de NgClass)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-class"/>
+<docs-code header="app.component.ts (importación de NgClass)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-class"/>
 
 ### Usando `NgClass` con una expresión
 
@@ -46,7 +46,7 @@ En el elemento que quieres estilizar, añade `[ngClass]` y configúralo igual a
 En este caso, `isSpecial` es un booleano configurado como `true` en `app.component.ts`.
 Como `isSpecial` es verdadero, `ngClass` aplica la clase `special` al `<div>`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="special-div"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="special-div"/>
 
 ### Usando `NgClass` con un método
 
@@ -57,12 +57,11 @@ Como `isSpecial` es verdadero, `ngClass` aplica la clase `special` al `<div>`.
    Si una clave es `true`, `ngClass` añade la clase.
    Si una clave es `false`, `ngClass` elimina la clase.
 
-   <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setClasses"/>
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setClasses"/>
 
 1. En la plantilla, añade el enlace de propiedad `ngClass` a `currentClasses` para configurar las clases del elemento:
 
-
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgClass-1"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgClass-1"/>
 
 Para este caso de uso, Angular aplica las clases en la inicialización y en caso de cambios causados por reasignar el objeto `currentClasses`.
 El ejemplo completo llama a `setCurrentClasses()` inicialmente con `ngOnInit()` cuando el usuario hace clic en el botón `Refresh currentClasses`.
@@ -76,7 +75,7 @@ Estos pasos no son necesarios para implementar `ngClass`.
 
 Para usar `NgStyle`, añádelo a la lista de `imports` del componente.
 
-<docs-code header="src/app/app.component.ts (importación de NgStyle)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-style"/>
+<docs-code header="app.component.ts (importación de NgStyle)" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="import-ng-style"/>
 
 Usa `NgStyle` para configurar múltiples estilos en línea simultáneamente, basándose en el estado del componente.
 
@@ -84,11 +83,11 @@ Usa `NgStyle` para configurar múltiples estilos en línea simultáneamente, bas
 
    En el siguiente ejemplo, `setCurrentStyles()` configura la propiedad `currentStyles` con un objeto que define tres estilos, basándose en el estado de otras tres propiedades del componente.
 
-   <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setStyles"/>
+   <docs-code header="app.component.ts" path="adev/src/content/examples/built-in-directives/src/app/app.component.ts" visibleRegion="setStyles"/>
 
 1. Para configurar los estilos del elemento, añade un enlace de propiedad `ngStyle` a `currentStyles`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgStyle-2"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/built-in-directives/src/app/app.component.html" visibleRegion="NgStyle-2"/>
 
 Para este caso de uso, Angular aplica los estilos en la inicialización y en caso de cambios.
 Para hacer esto, el ejemplo completo llama a `setCurrentStyles()` inicialmente con `ngOnInit()` y cuando las propiedades dependientes cambian a través de un clic de botón.
@@ -102,7 +101,7 @@ Usa `<ng-container>` cuando no hay un solo elemento para alojar la directiva.
 
 Aquí hay un párrafo condicional usando `<ng-container>`.
 
-<docs-code header="src/app/app.component.html (ngif-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="ngif-ngcontainer"/>
+<docs-code header="app.component.html (ngif-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="ngif-ngcontainer"/>
 
 <img alt="párrafo ngcontainer con estilo apropiado" src="assets/images/guide/structural-directives/good-paragraph.png">
 
@@ -112,7 +111,7 @@ Aquí hay un párrafo condicional usando `<ng-container>`.
 
 1. Para excluir condicionalmente una `<option>`, envuelve la `<option>` en un `<ng-container>`.
 
-   <docs-code header="src/app/app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="select-ngcontainer"/>
+   <docs-code header="app.component.html (select-ngcontainer)" path="adev/src/content/examples/structural-directives/src/app/app.component.html" visibleRegion="select-ngcontainer"/>
 
    <img alt="las opciones ngcontainer funcionan correctamente" src="assets/images/guide/structural-directives/select-ngcontainer-anim.gif">
 
diff --git a/adev-es/src/content/guide/directives/structural-directives.en.md b/adev-es/src/content/guide/directives/structural-directives.en.md
index 7a4b531..727a925 100644
--- a/adev-es/src/content/guide/directives/structural-directives.en.md
+++ b/adev-es/src/content/guide/directives/structural-directives.en.md
@@ -130,7 +130,7 @@ When you write your own structural directives, use the following syntax:
 
 <docs-code hideCopy language="typescript">
 
-*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
+_:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )_"
 
 </docs-code>
 
@@ -154,23 +154,23 @@ let = "let" :local "=" :export ";"?
 
 Angular translates structural directive shorthand into the normal binding syntax as follows:
 
-| Shorthand | Translation |
-|:--- |:--- |
-| `prefix` and naked `expression` | `[prefix]="expression"` |
-| `keyExp` | `[prefixKey]="expression"` (The `prefix` is added to the `key`) |
-| `let local` | `let-local="export"` |
+| Shorthand                       | Translation                                                     |
+| :------------------------------ | :-------------------------------------------------------------- |
+| `prefix` and naked `expression` | `[prefix]="expression"`                                         |
+| `keyExp`                        | `[prefixKey]="expression"` (The `prefix` is added to the `key`) |
+| `let local`                     | `let-local="export"`                                            |
 
 ### Shorthand examples
 
 The following table provides shorthand examples:
 
-| Shorthand | How Angular interprets the syntax |
-|:--- |:--- |
-| `*myDir="let item of [1,2,3]"` | `<ng-template myDir let-item [myDirOf]="[1, 2, 3]">` |
+| Shorthand                                                             | How Angular interprets the syntax                                                                             |
+| :-------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
+| `*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">` |
-| `*myDir="exp as value"` | `<ng-template [myDir]="exp" let-value="myDir">` |
+| `*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
 
@@ -178,11 +178,11 @@ You can improve template type checking for custom directives by adding template
 These guards help the Angular template type checker find mistakes in the template at compile time, which can avoid runtime errors.
 Two different types of guards are possible:
 
-* `ngTemplateGuard_(input)` lets you control how an input expression should be narrowed based on the type of a specific input.
-* `ngTemplateContextGuard` is used to determine the type of the context object for the template, based on the type of the directive itself.
+- `ngTemplateGuard_(input)` lets you control how an input expression should be narrowed based on the type of a specific input.
+- `ngTemplateContextGuard` is used to determine the type of the context object for the template, based on the type of the directive itself.
 
 This section provides examples of both kinds of guards.
-For more information, see [Template type checking](tools/cli/template-typecheck "Template type-checking guide").
+For more information, see [Template type checking](tools/cli/template-typecheck 'Template type-checking guide').
 
 ### Type narrowing with template guards
 
@@ -190,8 +190,8 @@ A structural directive in a template controls whether that template is rendered
 
 There are two narrowings which are possible with input guards:
 
-* Narrowing the input expression based on a TypeScript type assertion function.
-* Narrowing the input expression based on its truthiness.
+- Narrowing the input expression based on a TypeScript type assertion function.
+- Narrowing the input expression based on its truthiness.
 
 To narrow the input expression by defining a type assertion function:
 
diff --git a/adev-es/src/content/guide/directives/structural-directives.md b/adev-es/src/content/guide/directives/structural-directives.md
index 2c7e5a5..05a305d 100644
--- a/adev-es/src/content/guide/directives/structural-directives.md
+++ b/adev-es/src/content/guide/directives/structural-directives.md
@@ -130,7 +130,7 @@ Cuando escribas tus propias directivas estructurales, usa la siguiente sintaxis:
 
 <docs-code hideCopy language="typescript">
 
-*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
+_:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )_"
 
 </docs-code>
 
@@ -142,35 +142,35 @@ keyExp = :key ":"? :expression ("as" :local)? ";"?
 let = "let" :local "=" :export ";"?
 ```
 
-| Palabra clave      | Detalles                                            |
-| :----------- | :------------------------------------------------- |
-| `prefix`     | Clave de atributo HTML                                 |
-| `key`        | Clave de atributo HTML                                 |
-| `local`      | Nombre de variable local usado en la plantilla           |
-| `export`     | Valor exportado por la directiva bajo un nombre dado |
-| `expression` | Expresión estándar de Angular                        |
+| Palabra clave  | Detalles                                             |
+| :------------- | :--------------------------------------------------- |
+| `prefix`        | Clave de atributo HTML                               |
+| `key`          | Clave de atributo HTML                               |
+| `local`        | Nombre de variable local usado en la plantilla       |
+| `export`       | Valor exportado por la directiva bajo un nombre dado |
+| `expression`   | Expresión estándar de Angular                        |
 
 ### Cómo Angular traduce la sintaxis abreviada
 
 Angular translates structural directive shorthand into the normal binding syntax as follows:
 
-| Shorthand | Translation |
-|:--- |:--- |
-| `prefix` and naked `expression` | `[prefix]="expression"` |
-| `keyExp` | `[prefixKey]="expression"` (The `prefix` is added to the `key`) |
-| `let local` | `let-local="export"` |
+| Shorthand                      | Translation                                                   |
+|:------------------------------ |:------------------------------------------------------------- |
+| `prefix` and naked `expression` | `[prefix]="expression"`                                        |
+| `keyExp`                       | `[prefixKey]="expression"` (The `prefix` is added to the `key`) |
+| `let local`                    | `let-local="export"`                                          |
 
 ## Ejemplos de sintaxis abreviada
 
 La siguiente tabla proporciona ejemplos de sintaxis abreviada:
 
-| Sintaxis abreviada | Cómo Angular interpreta la sintaxis |
-|:--- |:--- |
-| `*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">` |
-| `*myDir="exp as value"` | `<ng-template [myDir]="exp" let-value="myDir">` |
+| Sintaxis abreviada                                                        | Cómo Angular interpreta la sintaxis                                                                           |
+|:------------------------------------------------------------------------- |:------------------------------------------------------------------------------------------------------------- |
+| `*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">`                     |
+| `*myDir="exp as value"`                                                   | `<ng-template [myDir]="exp" let-value="myDir">`                                                               |
 
 ## Mejorando la verificación de tipos de plantilla para directivas personalizadas
 
@@ -178,8 +178,8 @@ Puedes mejorar la verificación de tipos de plantilla para directivas personaliz
 Estos guardias ayudan al verificador de tipos de plantilla de Angular a encontrar errores en la plantilla en tiempo de compilación, lo que puede evitar errores en tiempo de ejecución.
 Dos tipos diferentes de guardias son posibles:
 
-* `ngTemplateGuard_(input)` te permite controlar cómo una expresión de entrada debe estrecharse basándose en el tipo de una entrada específica.
-* `ngTemplateContextGuard` se usa para determinar el tipo del objeto de contexto para la plantilla, basándose en el tipo de la directiva misma.
+- `ngTemplateGuard_(input)` te permite controlar cómo una expresión de entrada debe estrecharse basándose en el tipo de una entrada específica.
+- `ngTemplateContextGuard` se usa para determinar el tipo del objeto de contexto para la plantilla, basándose en el tipo de la directiva misma.
 
 Esta sección proporciona ejemplos de ambos tipos de guardias.
 Para más información, consulta [Verificación de tipos de plantilla](tools/cli/template-typecheck "Guía de verificación de tipos de plantilla").
@@ -190,8 +190,8 @@ Una directiva estructural en una plantilla controla si esa plantilla se renderiz
 
 Hay dos estrechamientos que son posibles con guardias de entrada:
 
-* Estrechar la expresión de entrada basándose en una función de aserción de tipo TypeScript.
-* Estrechar la expresión de entrada basándose en su veracidad.
+- Estrechar la expresión de entrada basándose en una función de aserción de tipo TypeScript.
+- Estrechar la expresión de entrada basándose en su veracidad.
 
 Para estrechar la expresión de entrada definiendo una función de aserción de tipo:
 
diff --git a/adev-es/src/content/guide/drag-drop.en.md b/adev-es/src/content/guide/drag-drop.en.md
index 50f89e3..9962c92 100644
--- a/adev-es/src/content/guide/drag-drop.en.md
+++ b/adev-es/src/content/guide/drag-drop.en.md
@@ -1,7 +1,9 @@
 # Drag and drop
 
 ## Overview
+
 This page describes the drag and drop directives which lets you quickly create drag and drop interfaces with the following:
+
 - Free dragging
 - Create a list of reorderable draggable elements
 - Transfer draggable elements between lists
@@ -19,38 +21,36 @@ For the full API reference, please see the [Angular CDK's drag and drop API refe
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the drag and drop directives, first install `@angular/cdk` from npm. You can do this from your terminal using Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ### Importing drag and drop
 
 To use drag and drop, import what you need from the directives in your component.
 
-<docs-code language="typescript">
+```ts
 import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'my-custom-component',
   templateUrl: 'my-custom-component.html',
-  standalone: true,
   imports: [CdkDrag],
 })
 export class DragDropExample {}
-</docs-code>
+```
 
 ## Create draggable elements
 
 You can make any element draggable by adding the `cdkDrag` directive. By default, all draggable elements support free dragging.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.css"/>
 </docs-code-multifile>
 
-
 ## Create a list of reorderable draggable elements
 
 Add the `cdkDropList` directive to a parent element to group draggable elements into a reorderable collection. This defines where draggable elements can be dropped. The draggable elements in the drop list group rearrange automatically as an element moves.
@@ -58,22 +58,23 @@ Add the `cdkDropList` directive to a parent element to group draggable elements
 The drag and drop directives don't update your data model. To update the data model, listen to the `cdkDropListDropped` event (once the user finishes dragging) and update the data model manually.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sorting/app/app.component.css"/>
 </docs-code-multifile>
 
-You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST).
+You can use the `CDK_DROP_LIST` injection token that can be used to reference instances of `cdkDropList`. For more information see the [dependency injection guide](/guide/di) and the [drop list injection token API](api/cdk/drag-drop/CDK_DROP_LIST).
 
 ## Transfer draggable elements between lists
 
 The `cdkDropList` directive supports transferring draggable elements between connected drop lists. There are two ways to connect one or more `cdkDropList` instances together:
+
 - Set the `cdkDropListConnectedTo` property to another drop list.
 - Wrap the elements in an element with the `cdkDropListGroup` attribute.
 
 The `cdkDropListConnectedTo` directive works both with a direct reference to another `cdkDropList` or by referencing the id of another drop container.
 
-<docs-code language="html">
+```html
 <!-- This is valid -->
 <div cdkDropList #listOne="cdkDropList" [cdkDropListConnectedTo]="[listTwo]"></div>
 <div cdkDropList #listTwo="cdkDropList" [cdkDropListConnectedTo]="[listOne]"></div>
@@ -81,48 +82,48 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
 <!-- This is valid as well -->
 <div cdkDropList id="list-one" [cdkDropListConnectedTo]="['list-two']"></div>
 <div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
-</docs-code>
+```
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.css"/>
 </docs-code-multifile>
 
 Use the `cdkDropListGroup` directive if you have an unknown number of connected drop lists to set up the connection automatically. Any new `cdkDropList` that is added under a group automatically connects to all other lists.
 
-<docs-code language="html">
+```html
 <div cdkDropListGroup>
   <!-- All lists in here will be connected. -->
   @for (list of lists; track list) {
     <div cdkDropList></div>
   }
 </div>
-</docs-code>
+```
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.css"/>
 </docs-code-multifile>
 
-You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP).
+You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to reference instances of `cdkDropListGroup`. For more information see the [dependency injection guide](/guide/di) and the [drop list group injection token API](api/cdk/drag-drop/CDK_DROP_LIST_GROUP).
 
 ### Selective dragging
 
 By default, a user can move `cdkDrag` elements from one container into another connected container. For more fine-grained control over which elements can be dropped into a container, use `cdkDropListEnterPredicate`. Angular calls the predicate whenever a draggable element enters a new container. Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.css"/>
 </docs-code-multifile>
 
 ## Attach data
 
 You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by setting `cdkDragData` or `cdkDropListData`, respectively. You can bind to the events fired from both directives that will include this data, allowing you to easily identify the origin of the drag or drop interaction.
 
-<docs-code language="html">
+```html
 @for (list of lists; track list) {
   <div cdkDropList [cdkDropListData]="list" (cdkDropListDropped)="drop($event)">
     @for (item of list; track item) {
@@ -130,7 +131,7 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s
     }
   </div>
 }
-</docs-code>
+```
 
 ## Dragging customizations
 
@@ -139,13 +140,12 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s
 By default, the user can drag the entire `cdkDrag` element to move it around. To restrict the user to only be able to do so using a handle element, add the `cdkDragHandle` directive to an element inside of `cdkDrag`. You can have as many `cdkDragHandle` elements as you want.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.css"/>
 </docs-code-multifile>
 
-
-You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE).
+You can use the `CDK_DRAG_HANDLE` injection token that can be used to reference instances of `cdkDragHandle`. For more information see the [dependency injection guide](/guide/di) and the [drag handle injection token API](api/cdk/drag-drop/CDK_DRAG_HANDLE).
 
 ### Customize drag preview
 
@@ -156,12 +156,12 @@ To customize the preview, provide a custom template via `*cdkDragPreview`. The c
 The cloned element removes its id attribute in order to avoid having multiple elements with the same id on the page. This will cause any CSS that targets that id not to be applied.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.css"/>
 </docs-code-multifile>
 
-You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW).
+You can use the `CDK_DRAG_PREVIEW` injection token that can be used to reference instances of `cdkDragPreview`. For more information see the [dependency injection guide](/guide/di) and the [drag preview injection token API](api/cdk/drag-drop/CDK_DRAG_PREVIEW).
 
 ### Customize drag insertion point
 
@@ -169,25 +169,25 @@ By default, Angular inserts the `cdkDrag` preview into the `<body>` of the page
 
 You can change where Angular inserts the preview using the `cdkDragPreviewContainer` input on `cdkDrag`. The possible values are:
 
-| Value                         | Description                                                                             | Advantages                                                                                                                  | Disadvantages                                                                                                                                                             |
-|:---                           |:---                                                                                     |:---                                                                                                                         |:---                                                                                                                                                                       |
-| `global`                      | Default value. Angular inserts the preview into the <body> or the closest shadow root.  | Preview won't be affected by `z-index` or `overflow: hidden`. It also won't affect `:nth-child` selectors and flex layouts. | Doesn't retain inherited styles.                                                                                                                                          |
-| `parent`                      | Angular inserts the preview inside the parent of the element that is being dragged.     | Preview inherits the same styles as the dragged element.                                                                    | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. |
-| `ElementRef` or `HTMLElement` | Angular inserts the preview into the specified element.                                 | Preview inherits styles from the specified container element.                                                               | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. |
+| Value                         | Description                                                                            | Advantages                                                                                                                  | Disadvantages                                                                                                                                                             |
+| :---------------------------- | :------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `global`                      | Default value. Angular inserts the preview into the <body> or the closest shadow root. | Preview won't be affected by `z-index` or `overflow: hidden`. It also won't affect `:nth-child` selectors and flex layouts. | Doesn't retain inherited styles.                                                                                                                                          |
+| `parent`                      | Angular inserts the preview inside the parent of the element that is being dragged.    | Preview inherits the same styles as the dragged element.                                                                    | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. |
+| `ElementRef` or `HTMLElement` | Angular inserts the preview into the specified element.                                | Preview inherits styles from the specified container element.                                                               | Preview may be clipped by `overflow: hidden` or be placed under other elements due to `z-index`. Furthermore, it can affect `:nth-child` selectors and some flex layouts. |
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `previewContainer` within the config if the value is `global` or `parent`. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `previewContainer` within the config if the value is `global` or `parent`. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### Customize drag placeholder
 
 While a `cdkDrag` element is being dragged, the directive creates a placeholder element that shows where the element will be placed when dropped. By default, the placeholder is a clone of the element that is being dragged. You can replace the placeholder with a custom one using the `*cdkDragPlaceholder` directive:
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.css"/>
 </docs-code-multifile>
 
-You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](https://angular.dev/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER).
+You can use the `CDK_DRAG_PLACEHOLDER` injection token that can be used to reference instances of `cdkDragPlaceholder`. For more information see the [dependency injection guide](/guide/di) and the [drag placeholder injection token API](api/cdk/drag-drop/CDK_DRAG_PLACEHOLDER).
 
 ### Customize drag root element
 
@@ -196,21 +196,21 @@ Set the `cdkDragRootElement` attribute if there's an element that you want to ma
 The attribute accepts a selector and looks up the DOM until it finds an element that matches the selector. If an element is found, it becomes draggable. This is useful for cases such as making a dialog draggable.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/root-element/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `rootElementSelector` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### Set DOM position of a draggable element
 
 By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM position only when a user manually moves the element. Use the `cdkDragFreeDragPosition` input to explicitly set the element’s position. A common use case for this is restoring a draggable element's position after a user has navigated away and then returned.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.css"/>
 </docs-code-multifile>
 
 ### Restrict movement within an element
@@ -218,24 +218,24 @@ By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM
 To stop the user from being able to drag a `cdkDrag` element outside of another element, pass a CSS selector to the `cdkDragBoundary` attribute. This attribute accepts a selector and looks up the DOM until it finds an element that matches it. If a match is found, the element becomes the boundary that the draggable element can't be dragged outside of `cdkDragBoundary` can also be used when `cdkDrag` is placed inside a `cdkDropList`.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/boundary/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update boundaryElement within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### 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.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `lockAxis` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### Delay dragging
 
@@ -244,24 +244,24 @@ By default when the user puts their pointer down on a `cdkDrag`, the dragging se
 You can delay the dragging sequence using the `cdkDragStartDelay` input. The input waits for the user to hold down their pointer for the specified number of milliseconds before dragging the element.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dragStartDelay within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### Disable dragging
 
 If you want to disable dragging for a particular drag item, set the `cdkDragDisabled` input on a `cdkDrag` item to true or false. You can disable an entire list using the `cdkDropListDisabled` input on a `cdkDropList`. It is also possible to disable a specific handle via `cdkDragHandleDisabled` on `cdkDragHandle`.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config.  For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `draggingDisabled` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ## Sorting customizations
 
@@ -270,12 +270,12 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `d
 By default, the `cdkDropList` directive assumes lists are vertical. This can be changed by setting the `cdkDropListOrientation` property to horizontal.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `listOrientation` within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### List wrapping
 
@@ -284,9 +284,9 @@ By default, the `cdkDropList` sorts the draggable elements by moving them around
 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.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.css"/>
 </docs-code-multifile>
 
 ### Selective sorting
@@ -294,23 +294,22 @@ If you have a sortable list that needs to wrap onto new lines, you can set `cdkD
 By default, `cdkDrag` elements are sorted into any position inside of a `cdkDropList`. To change this behavior, set the `cdkDropListSortPredicate` attribute which takes in a function. The predicate function is called whenever a draggable element is about to be moved into a new index within the drop list. If the predicate returns true, the item will be moved into the new index, otherwise it will keep its current position.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.css"/>
 </docs-code-multifile>
 
-
 ### Disable sorting
 
 There are cases where draggable elements can be dragged out of one `cdkDropList` into another, however the user shouldn't be able to sort them within the source list. For these cases, add the `cdkDropListSortingDisabled` attribute to prevent the draggable elements in a `cdkDropList` from sorting. This preserves the dragged element's initial position in the source list if it does not get dragged to a new valid position.
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.css"/>
 </docs-code-multifile>
 
-Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](https://angular.dev/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
+Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update sortingDisabled within the config. For more information see the [dependency injection guide](/guide/di), [drag config injection token API](api/cdk/drag-drop/CDK_DRAG_CONFIG), and the [drag drop config API](api/cdk/drag-drop/DragDropConfig).
 
 ### Copying items between lists
 
@@ -321,41 +320,41 @@ To enable copying, you can set the `cdkDropListHasAnchor` input. This tells the
 Combining `cdkDropListHasAnchor` with `cdkDropListSortingDisabled` makes it possible to construct a list from which a user can copy items without being able to reorder the source list (e.g. a product list and a shopping cart).
 
 <docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts">
-  <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html"/>
-  <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts"/>
-  <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css"/>
+  <docs-code header="app.component.html" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.html"/>
+  <docs-code header="app.component.ts" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.ts"/>
+  <docs-code header="app.component.css" path="adev/src/content/examples/drag-drop/src/copy-list/app/app.component.css"/>
 </docs-code-multifile>
 
 ## Customize animations
 
 Drag and drop supports animations for both:
+
 - Sorting an draggable element inside a list
 - Moving the draggable element from the position that the user dropped it to the final position inside the list
 
 To set up your animations, define a CSS transition that targets the transform property. The following classes can be used for animations:
 
-| CSS class name      | Result of adding transition                                                                                                                                                                                 |
-|:---                 |:---                                                                                                                                                                                                         |
-| .cdk-drag           | Animate draggable elements as they are being sorted.                                                                                                                                                        |
-| .cdk-drag-animating | Animate the draggable element from its dropped position to the final position within the `cdkDropList`.<br><br>This CSS class is applied to a `cdkDrag` element only when the dragging action has stopped.  |
+| CSS class name      | Result of adding transition                                                                                                                                                                                |
+| :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| .cdk-drag           | Animate draggable elements as they are being sorted.                                                                                                                                                       |
+| .cdk-drag-animating | Animate the draggable element from its dropped position to the final position within the `cdkDropList`.<br><br>This CSS class is applied to a `cdkDrag` element only when the dragging action has stopped. |
 
 ## Styling
 
 Both `cdkDrag` and `cdkDropList` directives only apply essential styles needed for functionality. Applications can customize their styles by targeting these specified CSS classes.
 
-
-| CSS class name            | Description                                                                                                                                                                                                                                                                                             |
-|:---                       |:---                                                                                                                                                                                                                                                                                                     |
-| .cdk-drop-list            | Selector for the `cdkDropList` container elements.                                                                                                                                                                                                                                                      |
-| .cdk-drag                 | Selector for `cdkDrag` elements.                                                                                                                                                                                                                                                                        |
-| .cdk-drag-disabled        | Selector for disabled `cdkDrag` elements.                                                                                                                                                                                                                                                               |
-| .cdk-drag-handle          | Selector for the host element of the `cdkDragHandle`.                                                                                                                                                                                                                                                   |
-| .cdk-drag-preview         | Selector for the drag preview element. This is the element that appears next to the cursor as a user drags an element in a sortable list.<br><br>The element looks exactly like the element that is being dragged unless customized with a custom template through `*cdkDragPreview`.                   |
-| .cdk-drag-placeholder     | Selector for the drag placeholder element. This is the element that is shown in the spot where the draggable element will be dragged to once the dragging action ends.<br><br>This element looks exactly like the element that is being sorted unless customized with the cdkDragPlaceholder directive. |
-| .cdk-drop-list-dragging   | Selector for `cdkDropList` container element that has a draggable element currently being dragged.                                                                                                                                                                                                      |
-| .cdk-drop-list-disabled   | Selector for `cdkDropList` container elements that are disabled.                                                                                                                                                                                                                                        |
-| .cdk-drop-list-receiving  | Selector for `cdkDropList` container element that has a draggable element it can receive from a connected drop list that is currently being dragged.                                                                                                                                                    |
-| .cdk-drag-anchor          | Selector for the anchor element that is created when `cdkDropListHasAnchor` is enabled. This element indicates the position from which the dragged item started.                                                                                                                                         |
+| CSS class name           | Description                                                                                                                                                                                                                                                                                             |
+| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| .cdk-drop-list           | Selector for the `cdkDropList` container elements.                                                                                                                                                                                                                                                      |
+| .cdk-drag                | Selector for `cdkDrag` elements.                                                                                                                                                                                                                                                                        |
+| .cdk-drag-disabled       | Selector for disabled `cdkDrag` elements.                                                                                                                                                                                                                                                               |
+| .cdk-drag-handle         | Selector for the host element of the `cdkDragHandle`.                                                                                                                                                                                                                                                   |
+| .cdk-drag-preview        | Selector for the drag preview element. This is the element that appears next to the cursor as a user drags an element in a sortable list.<br><br>The element looks exactly like the element that is being dragged unless customized with a custom template through `*cdkDragPreview`.                   |
+| .cdk-drag-placeholder    | Selector for the drag placeholder element. This is the element that is shown in the spot where the draggable element will be dragged to once the dragging action ends.<br><br>This element looks exactly like the element that is being sorted unless customized with the cdkDragPlaceholder directive. |
+| .cdk-drop-list-dragging  | Selector for `cdkDropList` container element that has a draggable element currently being dragged.                                                                                                                                                                                                      |
+| .cdk-drop-list-disabled  | Selector for `cdkDropList` container elements that are disabled.                                                                                                                                                                                                                                        |
+| .cdk-drop-list-receiving | Selector for `cdkDropList` container element that has a draggable element it can receive from a connected drop list that is currently being dragged.                                                                                                                                                    |
+| .cdk-drag-anchor         | Selector for the anchor element that is created when `cdkDropListHasAnchor` is enabled. This element indicates the position from which the dragged item started.                                                                                                                                        |
 
 ## Dragging in a scrollable container
 
diff --git a/adev-es/src/content/guide/elements.md b/adev-es/src/content/guide/elements.md
index 9d2a298..421af2c 100644
--- a/adev-es/src/content/guide/elements.md
+++ b/adev-es/src/content/guide/elements.md
@@ -18,22 +18,31 @@ Once a custom element is added to the DOM for any page, it looks and behaves lik
 
 To add the `@angular/elements` package to your workspace, run the following command:
 
-<docs-code language="shell">
-
-npm install @angular/elements --save
-
-</docs-code>
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install @angular/elements
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add @angular/elements
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add @angular/elements
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add @angular/elements
+  </docs-code>
+</docs-code-multifile>
 
 ### How it works
 
 The `createCustomElement()` function converts a component into a class that can be registered with the browser as a custom element.
 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:
 
-<docs-code language="html">
+```html
 
 <my-popup message="Use Angular!"></my-popup>
 
-</docs-code>
+```
 
 When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM.
 The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data.
@@ -58,14 +67,14 @@ One regular Angular component and a second one using the custom element.
 A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs.
 Component properties and logic maps directly into HTML attributes and the browser's event system.
 
-* The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element.
+- The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element.
   It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions.
   The resulting attribute names use dash-separated lowercase.
   For example, for a component with `inputProp = input({alias: 'myInputProp'})`, the corresponding custom element defines an attribute `my-input-prop`.
 
-* Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
-    For example, for a component `with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
-    If you provide an alias, that value is used; for example, `clicks = output<string>({alias: 'myClick'});` results in dispatch events with the name "myClick".
+- Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/docs/Web/API/CustomEvent), with the name of the custom event matching the output name.
+  For example, for a component `with valueChanged = output()`, the corresponding custom element dispatches events with the name "valueChanged", and the emitted data is stored on the event's `detail` property.
+  If you provide an alias, that value is used; for example, `clicks = output<string>({alias: 'myClick'});` results in dispatch events with the name "myClick".
 
 For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events).
 
@@ -81,7 +90,7 @@ The following Popup Service example application defines a component that you can
 | Files                | Details                                                                                                                                                                                                                      |
 | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `popup.component.ts` | Defines a simple pop-up element that displays an input message, with some animation and styling.                                                                                                                             |
-| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.        |  |
+| `popup.service.ts`   | Creates an injectable service that provides two different ways to invoke the `PopupComponent`; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method.        |
 | `app.component.ts`   | Defines the application's root component, which uses the `PopupService` to add the pop-up to the DOM at run time. When the application runs, the root component's constructor converts `PopupComponent` to a custom element. |
 
 For comparison, the demo shows both methods.
@@ -109,33 +118,33 @@ For example, our `popup-element` has a `message` property of type `string`.
 There are a few options if you want to get correct types for your custom elements.
 Assume you create a `my-dialog` custom element based on the following component:
 
-<docs-code language="typescript">
+```ts
 
 @Component(…)
 class MyDialog {
   content =  input(string);
 }
 
-</docs-code>
+```
 
 The most straightforward way to get accurate typings is to cast the return value of the relevant DOM methods to the correct type.
 For that, use the `NgElement` and `WithProperties` types \(both exported from `@angular/elements`\):
 
-<docs-code language="typescript">
+```ts
 
 const aDialog = document.createElement('my-dialog') as NgElement & WithProperties<{content: string}>;
 aDialog.content = 'Hello, world!';
-aDialog.content = 123;  // <-- ERROR: TypeScript knows this should be a string.
-aDialog.body = 'News';  // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
+aDialog.content = 123; // <-- ERROR: TypeScript knows this should be a string.
+aDialog.body = 'News'; // <-- ERROR: TypeScript knows there is no `body` property on `aDialog`.
 
-</docs-code>
+```
 
 This is a good way to quickly get TypeScript features, such as type checking and autocomplete support, for your custom element.
 But it can get cumbersome if you need it in several places, because you have to cast the return type on every occurrence.
 
 An alternative way, that only requires defining each custom element's type once, is augmenting the `HTMLElementTagNameMap`, which TypeScript uses to infer the type of a returned element based on its tag name \(for DOM methods such as `document.createElement()`, `document.querySelector()`, etc.\):
 
-<docs-code language="typescript">
+```ts
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -145,18 +154,18 @@ declare global {
   }
 }
 
-</docs-code>
+```
 
 Now, TypeScript can infer the correct type the same way it does for built-in elements:
 
-<docs-code language="typescript">
+```ts
 
 document.createElement('div')               //--> HTMLDivElement (built-in element)
 document.querySelector('foo')               //--> Element        (unknown element)
 document.createElement('my-dialog')         //--> NgElement & WithProperties<{content: string}> (custom element)
 document.querySelector('my-other-element')  //--> NgElement & WithProperties<{foo: 'bar'}>      (custom element)
 
-</docs-code>
+```
 
 ## Limitations
 
diff --git a/adev-es/src/content/guide/forms/dynamic-forms.en.md b/adev-es/src/content/guide/forms/dynamic-forms.en.md
index bab82a4..4bd92ae 100644
--- a/adev-es/src/content/guide/forms/dynamic-forms.en.md
+++ b/adev-es/src/content/guide/forms/dynamic-forms.en.md
@@ -47,7 +47,7 @@ The example includes the `DynamicFormQuestionComponent`, which defines a questio
 
 The following `QuestionBase` is a base class for a set of controls that can represent the question and its answer in the form.
 
-<docs-code header="src/app/question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
+<docs-code header="question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
 
 ### Define control classes
 
@@ -68,7 +68,7 @@ A dynamic form uses a service to create grouped sets of input controls, based on
 The following `QuestionControlService` collects a set of `FormGroup` instances that consume the metadata from the question model.
 You can specify default values and validation rules.
 
-<docs-code header="src/app/question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
+<docs-code header="question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
 
 ## Compose dynamic form contents
 
@@ -76,7 +76,7 @@ The dynamic form itself is represented by a container component, which you add i
 Each question is represented in the form component's template by an `<app-question>` tag, which matches an instance of `DynamicFormQuestionComponent`.
 
 The `DynamicFormQuestionComponent` is responsible for rendering the details of an individual question based on values in the data-bound question object.
-The form relies on a [`[formGroup]` directive](api/forms/FormGroupDirective "API reference") to connect the template HTML to the underlying control objects.
+The form relies on a [`[formGroup]` directive](api/forms/FormGroupDirective 'API reference') to connect the template HTML to the underlying control objects.
 The `DynamicFormQuestionComponent` creates form groups and populates them with controls defined in the question model, specifying display and validation rules.
 
 <docs-code-multifile>
@@ -87,7 +87,7 @@ The `DynamicFormQuestionComponent` creates form groups and populates them with c
 The goal of the `DynamicFormQuestionComponent` is to present question types defined in your model.
 You only have two types of questions at this point but you can imagine many more.
 The `@switch` block in the template determines which type of question to display.
-The switch uses directives with the [`formControlName`](api/forms/FormControlName "FormControlName directive API reference") and [`formGroup`](api/forms/FormGroupDirective "FormGroupDirective API reference") selectors.
+The switch uses directives with the [`formControlName`](api/forms/FormControlName 'FormControlName directive API reference') and [`formGroup`](api/forms/FormGroupDirective 'FormGroupDirective API reference') selectors.
 Both directives are defined in `ReactiveFormsModule`.
 
 ### Supply data
@@ -100,7 +100,7 @@ To maintain the questionnaire as requirements change, you only need to add, upda
 
 The `QuestionService` supplies a set of questions in the form of an array bound to `input()` questions.
 
-<docs-code header="src/app/question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
+<docs-code header="question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
 
 ## Create a dynamic form template
 
diff --git a/adev-es/src/content/guide/forms/dynamic-forms.md b/adev-es/src/content/guide/forms/dynamic-forms.md
index f95d9c6..3227a3a 100644
--- a/adev-es/src/content/guide/forms/dynamic-forms.md
+++ b/adev-es/src/content/guide/forms/dynamic-forms.md
@@ -47,7 +47,7 @@ El ejemplo incluye el `DynamicFormQuestionComponent`, que define una pregunta co
 
 El siguiente `QuestionBase` es una clase base para un conjunto de controles que pueden representar la pregunta y su respuesta en el formulario.
 
-<docs-code header="src/app/question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
+<docs-code header="question-base.ts" path="adev/src/content/examples/dynamic-form/src/app/question-base.ts"/>
 
 ### Define clases de control
 
@@ -68,7 +68,7 @@ Un formulario dinámico usa un servicio para crear conjuntos agrupados de contro
 El siguiente `QuestionControlService` recopila un conjunto de instancias de `FormGroup` que consumen los metadatos del modelo de preguntas.
 Puedes especificar valores por defecto y reglas de validación.
 
-<docs-code header="src/app/question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
+<docs-code header="question-control.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question-control.service.ts"/>
 
 ## Compón el contenido del formulario dinámico
 
@@ -100,7 +100,7 @@ Para mantener el cuestionario a medida que cambian los requisitos, solo necesita
 
 El `QuestionService` proporciona un conjunto de preguntas en forma de un array vinculado a `input()` questions.
 
-<docs-code header="src/app/question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
+<docs-code header="question.service.ts" path="adev/src/content/examples/dynamic-form/src/app/question.service.ts"/>
 
 ## Crea una plantilla de formulario dinámico
 
@@ -136,6 +136,6 @@ La siguiente figura muestra el formulario final.
 ## Próximos pasos
 
 <docs-pill-row>
-  <docs-pill title="Validating form input" href="guide/forms/reactive-forms#validating-form-input" />
-  <docs-pill title="Form validation guide" href="guide/forms/form-validation" />
+  <docs-pill title="Validar entrada de formulario" href="guide/forms/reactive-forms#validating-form-input" />
+  <docs-pill title="Guía de validación de formularios" href="guide/forms/form-validation" />
 </docs-pill-row>
diff --git a/adev-es/src/content/guide/forms/form-validation.en.md b/adev-es/src/content/guide/forms/form-validation.en.md
index 014599e..4e9b634 100644
--- a/adev-es/src/content/guide/forms/form-validation.en.md
+++ b/adev-es/src/content/guide/forms/form-validation.en.md
@@ -13,27 +13,26 @@ Every time the value of a form control changes, Angular runs validation and gene
 You can then inspect the control's state by exporting `ngModel` to a local template variable.
 The following example exports `NgModel` into a variable called `name`:
 
-<docs-code header="template/actor-form-template.component.html (name)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form-template.component.html (name)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-with-error-msg"/>
 
 Notice the following features illustrated by the example.
 
-* The `<input>` element carries the HTML validation attributes: `required` and `minlength`.
-    It also carries a custom validator directive, `forbiddenName`.
-    For more information, see the [Custom validators](#defining-custom-validators) section.
+- The `<input>` element carries the HTML validation attributes: `required` and `minlength`.
+  It also carries a custom validator directive, `forbiddenName`.
+  For more information, see the [Custom validators](#defining-custom-validators) section.
 
-* `#name="ngModel"` exports `NgModel` into a local variable called `name`.
-    `NgModel` mirrors many of the properties of its underlying `FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`.
-    For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl) API reference.
+- `#name="ngModel"` exports `NgModel` into a local variable called `name`.
+  `NgModel` mirrors many of the properties of its underlying `FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`.
+  For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl) API reference.
+  - The outermost `@if` reveals a set of nested messages but only if the `name` is invalid and the control is either `dirty` or `touched`.
 
-  * The outermost `@if` reveals a set of nested messages but only if the `name` is invalid and the control is either `dirty` or `touched`.
-
-  * Each nested `@if` can present a custom message for one of the possible validation errors.
-        There are messages for `required`, `minlength`, and `forbiddenName`.
+  - Each nested `@if` can present a custom message for one of the possible validation errors.
+    There are messages for `required`, `minlength`, and `forbiddenName`.
 
 HELPFUL: To prevent the validator from displaying errors before the user has a chance to edit the form, you should check for either the `dirty` or `touched` states in a control.
 
-* When the user changes the value in the watched field, the control is marked as "dirty"
-* When the user blurs the form control element, the control is marked as "touched"
+- When the user changes the value in the watched field, the control is marked as "dirty"
+- When the user blurs the form control element, the control is marked as "touched"
 
 ## Validating input in reactive forms
 
@@ -45,8 +44,8 @@ Angular then calls these functions whenever the value of the control changes.
 
 Validator functions can be either synchronous or asynchronous.
 
-| Validator type   | Details |
-|:---              |:---     |
+| Validator type   | Details                                                                                                                                                                                                                 |
+| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Sync validators  | Synchronous functions that take a control instance and immediately return either a set of validation errors or `null`. Pass these in as the second argument when you instantiate a `FormControl`.                       |
 | Async validators | Asynchronous functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or `null`. Pass these in as the third argument when you instantiate a `FormControl`. |
 
@@ -63,7 +62,7 @@ For a full list of built-in validators, see the [Validators](api/forms/Validator
 To update the actor form to be a reactive form, use some of the same
 built-in validators —this time, in function form, as in the following example.
 
-<docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
+<docs-code header="actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
 
 In this example, the `name` control sets up two built-in validators —`Validators.required` and `Validators.minLength(4)`— and one custom validator, `forbiddenNameValidator`.
 
@@ -75,9 +74,9 @@ In a reactive form, you can always access any form control through the `get` met
 
 If you look at the template for the `name` input again, it is fairly similar to the template-driven example.
 
-<docs-code header="reactive/actor-form-reactive.component.html (name with error msg)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form-reactive.component.html (name with error msg)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="name-with-error-msg"/>
 
-This form differs from the template-driven version in that it no longer exports any directives. Instead, it uses the `name` getter defined in  the component class.
+This form differs from the template-driven version in that it no longer exports any directives. Instead, it uses the `name` getter defined in the component class.
 
 Notice that the `required` attribute is still present in the template. Although it's not necessary for validation, it should be retained for accessibility purposes.
 
@@ -88,15 +87,15 @@ The built-in validators don't always match the exact use case of your applicatio
 Consider the `forbiddenNameValidator` function from the previous example.
 Here's what the definition of that function looks like.
 
-<docs-code header="shared/forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="custom-validator"/>
+<docs-code header="forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="custom-validator"/>
 
-The function is a factory that takes a regular expression to detect a *specific* forbidden name and returns a validator function.
+The function is a factory that takes a regular expression to detect a _specific_ forbidden name and returns a validator function.
 
 In this sample, the forbidden name is "bob", so the validator rejects any actor name containing "bob".
 Elsewhere it could reject "alice" or any name that the configuring regular expression matches.
 
 The `forbiddenNameValidator` factory returns the configured validator function.
-That function takes an Angular control object and returns *either* null if the control value is valid *or* a validation error object.
+That function takes an Angular control object and returns _either_ null if the control value is valid _or_ a validation error object.
 The validation error object typically has a property whose name is the validation key, `'forbiddenName'`, and whose value is an arbitrary dictionary of values that you could insert into an error message, `{name}`.
 
 Custom async validators are similar to sync validators, but they must instead return a Promise or observable that later emits null or a validation error object.
@@ -106,7 +105,7 @@ In the case of an observable, the observable must complete, at which point the f
 
 In reactive forms, add a custom validator by passing the function directly to the `FormControl`.
 
-<docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="custom-validator"/>
+<docs-code header="actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="custom-validator"/>
 
 ### Adding custom validators to template-driven forms
 
@@ -116,20 +115,20 @@ For example, the corresponding `ForbiddenValidatorDirective` serves as a wrapper
 Angular recognizes the directive's role in the validation process because the directive registers itself with the `NG_VALIDATORS` provider, as shown in the following example.
 `NG_VALIDATORS` is a predefined provider with an extensible collection of validators.
 
-<docs-code header="shared/forbidden-name.directive.ts (providers)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive-providers"/>
+<docs-code header="forbidden-name.directive.ts (providers)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive-providers"/>
 
 The directive class then implements the `Validator` interface, so that it can easily integrate with Angular forms.
 Here is the rest of the directive to help you get an idea of how it all comes together.
 
-<docs-code header="shared/forbidden-name.directive.ts (directive)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive"/>
+<docs-code header="forbidden-name.directive.ts (directive)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive"/>
 
 Once the `ForbiddenValidatorDirective` is ready, you can add its selector, `appForbiddenName`, to any input element to activate it.
 For example:
 
-<docs-code header="template/actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
+<docs-code header="actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
 
 HELPFUL: Notice that the custom validation directive is instantiated with `useExisting` rather than `useClass`.
-The registered validator must be *this instance* of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
+The registered validator must be _this instance_ of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
 
 If you were to replace `useExisting` with `useClass`, then you'd be registering a new class instance, one that doesn't have a `forbiddenName`.
 
@@ -139,14 +138,14 @@ Angular automatically mirrors many control properties onto the form control elem
 Use these classes to style form control elements according to the state of the form.
 The following classes are currently supported.
 
-* `.ng-valid`
-* `.ng-invalid`
-* `.ng-pending`
-* `.ng-pristine`
-* `.ng-dirty`
-* `.ng-untouched`
-* `.ng-touched`
-* `.ng-submitted` \(enclosing form element only\)
+- `.ng-valid`
+- `.ng-invalid`
+- `.ng-pending`
+- `.ng-pristine`
+- `.ng-dirty`
+- `.ng-untouched`
+- `.ng-touched`
+- `.ng-submitted` \(enclosing form element only\)
 
 In the following example, the actor form uses the `.ng-valid` and `.ng-invalid` classes to
 set the color of each form control's border.
@@ -155,14 +154,14 @@ set the color of each form control's border.
 
 ## Cross-field validation
 
-A cross-field validator is a [custom validator](#defining-custom-validators "Read about custom validators") that compares the values of different fields in a form and accepts or rejects them in combination.
+A cross-field validator is a [custom validator](#defining-custom-validators 'Read about custom validators') that compares the values of different fields in a form and accepts or rejects them in combination.
 For example, you might have a form that offers mutually incompatible options, so that if the user can choose A or B, but not both.
 Some field values might also depend on others; a user might be allowed to choose B only if A is also chosen.
 
 The following cross validation examples show how to do the following:
 
-* Validate reactive or template-based form input based on the values of two sibling controls,
-* Show a descriptive error message after the user interacted with the form and the validation failed.
+- Validate reactive or template-based form input based on the values of two sibling controls,
+- Show a descriptive error message after the user interacted with the form and the validation failed.
 
 The examples use cross-validation to ensure that actors do not reuse the same name in their role by filling out the Actor Form.
 The validators do this by checking that the actor names and roles do not match.
@@ -171,15 +170,13 @@ The validators do this by checking that the actor names and roles do not match.
 
 The form has the following structure:
 
-<docs-code language="javascript">
-
+```ts
 const actorForm = new FormGroup({
   'name': new FormControl(),
   'role': new FormControl(),
-  'skill': new FormControl()
+  'skill': new FormControl(),
 });
-
-</docs-code>
+```
 
 Notice that the `name` and `role` are sibling controls.
 To evaluate both controls in a single custom validator, you must perform the validation in a common ancestor control: the `FormGroup`.
@@ -187,19 +184,20 @@ You query the `FormGroup` for its child controls so that you can compare their v
 
 To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
 
-<docs-code language="javascript">
-
-const actorForm = new FormGroup({
-  'name': new FormControl(),
-  'role': new FormControl(),
-  'skill': new FormControl()
-}, { validators: unambiguousRoleValidator });
-
-</docs-code>
+```ts
+const actorForm = new FormGroup(
+  {
+    'name': new FormControl(),
+    'role': new FormControl(),
+    'skill': new FormControl(),
+  },
+  {validators: unambiguousRoleValidator},
+);
+```
 
 The validator code is as follows.
 
-<docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-validator"/>
+<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-validator"/>
 
 The `unambiguousRoleValidator` validator implements the `ValidatorFn` interface.
 It takes an Angular control object as an argument and returns either null if the form is valid, or `ValidationErrors` otherwise.
@@ -211,7 +209,7 @@ If they do match, the actor's role is ambiguous and the validator must mark the
 
 To provide better user experience, the template shows an appropriate error message when the form is invalid.
 
-<docs-code header="reactive/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="cross-validation-error-message"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="cross-validation-error-message"/>
 
 This `@if` displays the error if the `FormGroup` has the cross validation error returned by the `unambiguousRoleValidator` validator, but only if the user finished [interacting with the form](#control-status-css-classes).
 
@@ -220,16 +218,16 @@ This `@if` displays the error if the `FormGroup` has the cross validation error
 For a template-driven form, you must create a directive to wrap the validator function.
 You provide that directive as the validator using the [`NG_VALIDATORS` token](/api/forms/NG_VALIDATORS), as shown in the following example.
 
-<docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-directive"/>
+<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-directive"/>
 
 You must add the new directive to the HTML template.
 Because the validator must be registered at the highest level in the form, the following template puts the directive on the `form` tag.
 
-<docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-register-validator"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-register-validator"/>
 
 To provide better user experience, an appropriate error message appears when the form is invalid.
 
-<docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-error-message"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-error-message"/>
 
 This is the same in both template-driven and reactive forms.
 
@@ -238,9 +236,9 @@ This is the same in both template-driven and reactive forms.
 Asynchronous validators implement the `AsyncValidatorFn` and `AsyncValidator` interfaces.
 These are very similar to their synchronous counterparts, with the following differences.
 
-* The `validate()` functions must return a Promise or an observable,
-* The observable returned must be finite, meaning it must complete at some point.
-    To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as `first`, `last`, `take`, or `takeUntil`.
+- The `validate()` functions must return a Promise or an observable,
+- The observable returned must be finite, meaning it must complete at some point.
+  To convert an infinite observable into a finite one, pipe the observable through a filtering operator such as `first`, `last`, `take`, or `takeUntil`.
 
 Asynchronous validation happens after the synchronous validation, and is performed only if the synchronous validation is successful.
 This check lets forms avoid potentially expensive async validation processes \(such as an HTTP request\) if the more basic validation methods have already found invalid input.
@@ -251,13 +249,13 @@ Inspect the control's `pending` property and use it to give visual feedback abou
 A common UI pattern is to show a spinner while the async validation is being performed.
 The following example shows how to achieve this in a template-driven form.
 
-<docs-code language="html">
-
+```angular-html
 <input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
+
 @if(model.pending) {
   <app-spinner />
 }
-</docs-code>
+```
 
 ### Implementing a custom async validator
 
@@ -267,15 +265,15 @@ To validate the potential role entry, the validator must initiate an asynchronou
 
 The following code creates the validator class, `UniqueRoleValidator`, which implements the `AsyncValidator` interface.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator"/>
+<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator"/>
 
 The `actorsService` property is initialized with an instance of the `ActorsService` token, which defines the following interface.
 
-<docs-code language="typescript">
+```ts
 interface ActorsService {
   isRoleTaken: (role: string) => Observable<boolean>;
 }
-</docs-code>
+```
 
 In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available.
 From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface.
@@ -298,7 +296,7 @@ The `pending` flag is set to `false`, and the form validity is updated.
 
 To use an async validator in reactive forms, begin by injecting the validator into a property of the component class.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-inject"/>
+<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-inject"/>
 
 Then, pass the validator function directly to the `FormControl` to apply it.
 
@@ -306,7 +304,7 @@ In the following example, the `validate` function of `UnambiguousRoleValidator`
 The value of `asyncValidators` can be either a single async validator function, or an array of functions.
 To learn more about `FormControl` options, see the [AbstractControlOptions](api/forms/AbstractControlOptions) API reference.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-usage"/>
+<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-usage"/>
 
 ### Adding async validators to template-driven forms
 
@@ -314,11 +312,11 @@ To use an async validator in template-driven forms, create a new directive and r
 
 In the example below, the directive injects the `UniqueRoleValidator` class that contains the actual validation logic and invokes it in the `validate` function, triggered by Angular when validation should happen.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator-directive"/>
+<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator-directive"/>
 
 Then, as with synchronous validators, add the directive's selector to an input to activate it.
 
-<docs-code header="template/actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="role-input"/>
+<docs-code header="actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="role-input"/>
 
 ### Optimizing performance of async validators
 
@@ -331,15 +329,15 @@ You can delay updating the form validity by changing the `updateOn` property fro
 
 With template-driven forms, set the property in the template.
 
-<docs-code language="html">
+```angular-html
 <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
-</docs-code>
+```
 
 With reactive forms, set the property in the `FormControl` instance.
 
-<docs-code language="typescript">
+```ts
 new FormControl('', {updateOn: 'blur'});
-</docs-code>
+```
 
 ## Interaction with native HTML form validation
 
diff --git a/adev-es/src/content/guide/forms/form-validation.md b/adev-es/src/content/guide/forms/form-validation.md
index c41c9db..6953df7 100644
--- a/adev-es/src/content/guide/forms/form-validation.md
+++ b/adev-es/src/content/guide/forms/form-validation.md
@@ -13,22 +13,21 @@ Cada vez que cambia el valor de un control de formulario, Angular ejecuta la val
 Luego puedes inspeccionar el estado del control exportando `ngModel` a una variable de plantilla local.
 El siguiente ejemplo exporta `NgModel` a una variable llamada `name`:
 
-<docs-code header="template/actor-form-template.component.html (name)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form-template.component.html (nombre)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-with-error-msg"/>
 
 Observa las siguientes características ilustradas en el ejemplo.
 
-* El elemento `<input>` lleva los atributos de validación HTML: `required` y `minlength`.
-    También lleva una directiva validadora personalizada, `forbiddenName`.
-    Para más información, consulta la sección [Validadores personalizados](#defining-custom-validators).
+- El elemento `<input>` lleva los atributos de validación HTML: `required` y `minlength`.
+  También lleva una directiva validadora personalizada, `forbiddenName`.
+  Para más información, consulta la sección [Validadores personalizados](#definiendo-validadores-personalizados).
 
-* `#name="ngModel"` exporta `NgModel` a una variable local llamada `name`.
-    `NgModel` refleja muchas de las propiedades de su instancia `FormControl` subyacente, por lo que puedes usar esto en la plantilla para verificar estados de control como `valid` y `dirty`.
-    Para una lista completa de propiedades de control, consulta la referencia de la API [AbstractControl](api/forms/AbstractControl).
+- `#name="ngModel"` exporta `NgModel` a una variable local llamada `name`.
+  `NgModel` refleja muchas de las propiedades de su instancia `FormControl` subyacente, por lo que puedes usar esto en la plantilla para verificar estados de control como `valid` y `dirty`.
+  Para una lista completa de propiedades de control, consulta la referencia de la API [AbstractControl](api/forms/AbstractControl).
+  - El `@if` más externo revela un conjunto de mensajes anidados pero solo si `name` es inválido y el control está `dirty` o `touched`.
 
-  * El `@if` más externo revela un conjunto de mensajes anidados pero solo si `name` es inválido y el control está `dirty` o `touched`.
-
-  * Cada `@if` anidado puede presentar un mensaje personalizado para uno de los posibles errores de validación.
-        Hay mensajes para `required`, `minlength`, y `forbiddenName`.
+  - Cada `@if` anidado puede presentar un mensaje personalizado para uno de los posibles errores de validación.
+    Hay mensajes para `required`, `minlength`, y `forbiddenName`.
 
 CONSEJO: Para evitar que el validador muestre errores antes de que el usuario tenga la oportunidad de editar el formulario, debes verificar los estados `dirty` o `touched` en un control.
 
@@ -45,9 +44,9 @@ Angular luego llama a estas funciones cada vez que el valor del control cambia.
 
 Las funciones de validador pueden ser síncronas o asíncronas.
 
-| Tipo de validador   | Detalles |
-|:---              |:---     |
-| Validadores síncronos  | Funciones síncronas que toman una instancia de control e inmediatamente devuelven un conjunto de errores de validación o `null`. Pásalos como el segundo argumento cuando instancies un `FormControl`.                       |
+| Tipo de validador      | Detalles                                                                                                                                                                                                                         |
+|:---------------------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Validadores síncronos  | Funciones síncronas que toman una instancia de control e inmediatamente devuelven un conjunto de errores de validación o `null`. Pásalos como el segundo argumento cuando instancies un `FormControl`.                           |
 | Validadores asíncronos | Funciones asíncronas que toman una instancia de control y devuelven una Promesa u Observable que luego emite un conjunto de errores de validación o `null`. Pásalos como el tercer argumento cuando instancies un `FormControl`. |
 
 Por razones de rendimiento, Angular solo ejecuta validadores asíncronos si todos los validadores síncronos pasan. 
@@ -55,7 +54,7 @@ Cada uno debe completarse antes de que se establezcan los errores.
 
 ### Funciones de validación integradas
 
-Puedes optar por [escribir tus propias funciones de validador](#defining-custom-validators), o puedes usar algunos de los validadores incorporados de Angular.
+Puedes optar por [escribir tus propias funciones de validador](#definiendo-validadores-personalizados), o puedes usar algunos de los validadores incorporados de Angular.
 
 Los mismos validadores integrados que están disponibles como atributos en formularios basados en plantillas, como `required` y `minlength`, están todos disponibles para usar como funciones de la clase `Validators`.
 Para una lista completa de validadores integrados, consulta la referencia de la API [Validators](api/forms/Validators).
@@ -63,7 +62,7 @@ Para una lista completa de validadores integrados, consulta la referencia de la
 Para actualizar el formulario de actor para que sea un formulario reactivo, usa algunos de los mismos
 validadores integrados esta vez, en forma de función, como en el siguiente ejemplo.
 
-<docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
+<docs-code header="actor-form-reactive.component.ts (funciones de validación)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="form-group"/>
 
 En este ejemplo, el control `name` configura dos validadores integrados, `Validators.required` y `Validators.minLength(4)`, y un validador personalizado, `forbiddenNameValidator`.
 
@@ -75,7 +74,7 @@ En un formulario reactivo, siempre puedes acceder a cualquier control de formula
 
 Si miras la plantilla para la entrada `name` nuevamente, es bastante similar al ejemplo basado en plantillas.
 
-<docs-code header="reactive/actor-form-reactive.component.html (name with error msg)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form-reactive.component.html (nombre con mensaje de errror)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="name-with-error-msg"/>
 
 Este formulario difiere de la versión basada en plantillas en que ya no exporta ninguna directiva. En su lugar, utiliza el getter `name` definido en la clase del componente.
 
@@ -88,15 +87,15 @@ Los validadores integrados no siempre coinciden con el caso de uso exacto de tu
 Considera la función `forbiddenNameValidator` del ejemplo anterior.
 Así es como se ve la definición de esa función.
 
-<docs-code header="shared/forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="custom-validator"/>
+<docs-code header="forbidden-name.directive.ts (forbiddenNameValidator)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="custom-validator"/>
 
-La función es una fábrica que toma una expresión regular para detectar un nombre prohibido *específico* y devuelve una función validadora.
+La función es una fábrica que toma una expresión regular para detectar un nombre prohibido _específico_ y devuelve una función validadora.
 
 En esta muestra, el nombre prohibido es "bob", por lo que el validador rechaza cualquier nombre de actor que contenga "bob".
 En otro lugar podría rechazar "alice" o cualquier nombre que coincida con la expresión regular configurada.
 
 La fábrica `forbiddenNameValidator` devuelve la función validadora configurada.
-Esa función toma un objeto de control de Angular y devuelve *ya sea* null si el valor del control es válido *o* un objeto de error de validación.
+Esa función toma un objeto de control de Angular y devuelve _ya sea_ null si el valor del control es válido _o_ un objeto de error de validación.
 El objeto de error de validación típicamente tiene una propiedad cuyo nombre es la clave de validación, `'forbiddenName'`, y cuyo valor es un diccionario arbitrario de valores que podrías insertar en un mensaje de error, `{name}`.
 
 Los validadores asíncronos personalizados son similares a los validadores síncronos, pero deben devolver una Promise u observable que más tarde emita null o un objeto de error de validación.
@@ -106,7 +105,7 @@ En el caso de un observable, el observable debe completarse, momento en el cual
 
 En formularios reactivos, agrega un validador personalizado pasando la función directamente al `FormControl`.
 
-<docs-code header="reactive/actor-form-reactive.component.ts (validator functions)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="custom-validator"/>
+<docs-code header="actor-form-reactive.component.ts (funciones de validación)" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.1.ts" visibleRegion="custom-validator"/>
 
 ### Añadiendo validadores personalizados a formularios basados en plantillas
 
@@ -116,17 +115,17 @@ Por ejemplo, la directiva `ForbiddenValidatorDirective` correspondiente sirve co
 Angular reconoce el papel de la directiva en el proceso de validación porque la directiva se registra con el proveedor `NG_VALIDATORS`, como se muestra en el siguiente ejemplo.
 `NG_VALIDATORS` es un proveedor predefinido con una colección extensible de validadores.
 
-<docs-code header="shared/forbidden-name.directive.ts (providers)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive-providers"/>
+<docs-code header="forbidden-name.directive.ts (proveedores)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive-providers"/>
 
 La clase de directiva luego implementa la interfaz `Validator`, para que pueda integrarse fácilmente con formularios de Angular.
 Aquí está el resto de la directiva para ayudarte a entender cómo todo se une.
 
-<docs-code header="shared/forbidden-name.directive.ts (directive)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive"/>
+<docs-code header="forbidden-name.directive.ts (directiva)" path="adev/src/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts" visibleRegion="directive"/>
 
 Una vez que `ForbiddenValidatorDirective` esté lista, puedes agregar su selector, `appForbiddenName`, a cualquier elemento de entrada para activarlo.
 Por ejemplo:
 
-<docs-code header="template/actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
+<docs-code header="actor-form-template.component.html (forbidden-name-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="name-input"/>
 
 CONSEJO: Observa que la directiva de validación personalizada se instancia con `useExisting` en lugar de `useClass`.
 El validador registrado debe ser *esta instancia* de `ForbiddenValidatorDirective` —la instancia en el formulario con su propiedad `forbiddenName` vinculada a "bob".
@@ -139,14 +138,14 @@ Angular automáticamente refleja muchas propiedades de control en el elemento de
 Usa estas clases para estilizar elementos de control de formulario según el estado del formulario.
 Las siguientes clases están actualmente soportadas.
 
-* `.ng-valid`
-* `.ng-invalid`
-* `.ng-pending`
-* `.ng-pristine`
-* `.ng-dirty`
-* `.ng-untouched`
-* `.ng-touched`
-* `.ng-submitted` \(solo elemento de formulario contenedor\)
+- `.ng-valid`
+- `.ng-invalid`
+- `.ng-pending`
+- `.ng-pristine`
+- `.ng-dirty`
+- `.ng-untouched`
+- `.ng-touched`
+- `.ng-submitted` \(solo elemento de formulario contenedor\)
 
 En el siguiente ejemplo, el formulario de actor usa las clases `.ng-valid` y `.ng-invalid` para
 establecer el color del borde de cada control de formulario.
@@ -155,14 +154,14 @@ establecer el color del borde de cada control de formulario.
 
 ## Validación entre campos
 
-Un validador entre campos es un [validador personalizado](#defining-custom-validators "Leer sobre validadores personalizados") que compara los valores de diferentes campos en un formulario y los acepta o rechaza en combinación.
+Un validador entre campos es un [validador personalizado](#definiendo-validadores-personalizados "Leer sobre validadores personalizados") que compara los valores de diferentes campos en un formulario y los acepta o rechaza en combinación.
 Por ejemplo, podrías tener un formulario que ofrece opciones mutuamente incompatibles, de modo que si el usuario puede elegir A o B, pero no ambos.
 Algunos valores de campo también podrían depender de otros; un usuario podría estar permitido elegir B solo si A también está elegido.
 
 Los siguientes ejemplos de validación cruzada muestran cómo hacer lo siguiente:
 
-* Validar entrada de formulario reactivo o basado en plantillas según los valores de dos controles hermanos,
-* Mostrar un mensaje de error descriptivo después de que el usuario interactuó con el formulario y la validación falló.
+- Validar entrada de formulario reactivo o basado en plantillas según los valores de dos controles hermanos,
+- Mostrar un mensaje de error descriptivo después de que el usuario interactuó con el formulario y la validación falló.
 
 Los ejemplos usan validación cruzada para asegurar que los actores no reutilicen el mismo nombre en su rol llenando el Formulario de Actor.
 Los validadores hacen esto verificando que los nombres de actor y roles no coincidan.
@@ -171,15 +170,13 @@ Los validadores hacen esto verificando que los nombres de actor y roles no coinc
 
 El formulario tiene la siguiente estructura:
 
-<docs-code language="javascript">
-
+```ts
 const actorForm = new FormGroup({
   'name': new FormControl(),
   'role': new FormControl(),
-  'skill': new FormControl()
+  'skill': new FormControl(),
 });
-
-</docs-code>
+```
 
 Observa que `name` y `role` son controles hermanos.
 Para evaluar ambos controles en un solo validador personalizado, debes realizar la validación en un control ancestro común: el `FormGroup`.
@@ -187,19 +184,20 @@ Consultas el `FormGroup` para sus controles hijos para que puedas comparar sus v
 
 Para agregar un validador al `FormGroup`, pasa el nuevo validador como segundo argumento en la creación.
 
-<docs-code language="javascript">
-
-const actorForm = new FormGroup({
-  'name': new FormControl(),
-  'role': new FormControl(),
-  'skill': new FormControl()
-}, { validators: unambiguousRoleValidator });
-
-</docs-code>
+```ts
+const actorForm = new FormGroup(
+  {
+    'name': new FormControl(),
+    'role': new FormControl(),
+    'skill': new FormControl(),
+  },
+  {validators: unambiguousRoleValidator},
+);
+```
 
 El código del validador es el siguiente.
 
-<docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-validator"/>
+<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-validator"/>
 
 El validador `unambiguousRoleValidator` implementa la interfaz `ValidatorFn`.
 Toma un objeto de control de Angular como argumento y devuelve null si el formulario es válido, o `ValidationErrors` en caso contrario.
@@ -211,25 +209,25 @@ Si coinciden, el rol del actor es ambiguo y el validador debe marcar el formular
 
 Para proporcionar una mejor experiencia de usuario, la plantilla muestra un mensaje de error apropiado cuando el formulario es inválido.
 
-<docs-code header="reactive/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="cross-validation-error-message"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html" visibleRegion="cross-validation-error-message"/>
 
-Este `@if` muestra el error si el `FormGroup` tiene el error de validación cruzada devuelto por el validador `unambiguousRoleValidator`, pero solo si el usuario terminó de [interactuar con el formulario](#control-status-css-classes).
+Este `@if` muestra el error si el `FormGroup` tiene el error de validación cruzada devuelto por el validador `unambiguousRoleValidator`, pero solo si el usuario terminó de [interactuar con el formulario](#clases-css-de-estado-de-control).
 
 ### Agregar validación cruzada a formularios basados en plantillas
 
 Para un formulario basado en plantillas, debes crear una directiva para envolver la función validadora.
 Proporcionas esa directiva como el validador usando el [token `NG_VALIDATORS`](/api/forms/NG_VALIDATORS), como se muestra en el siguiente ejemplo.
 
-<docs-code header="shared/unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-directive"/>
+<docs-code header="unambiguous-role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/unambiguous-role.directive.ts" visibleRegion="cross-validation-directive"/>
 
 Debes agregar la nueva directiva a la plantilla HTML.
 Debido a que el validador debe registrarse en el nivel más alto del formulario, la siguiente plantilla coloca la directiva en la etiqueta `form`.
 
-<docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-register-validator"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-register-validator"/>
 
 Para proporcionar una mejor experiencia de usuario, aparece un mensaje de error apropiado cuando el formulario es inválido.
 
-<docs-code header="template/actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-error-message"/>
+<docs-code header="actor-form-template.component.html" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="cross-validation-error-message"/>
 
 Esto es igual tanto en formularios basados en plantillas como reactivos.
 
@@ -238,9 +236,9 @@ Esto es igual tanto en formularios basados en plantillas como reactivos.
 Los validadores asíncronos implementan las interfaces `AsyncValidatorFn` y `AsyncValidator`.
 Estos son muy similares a sus contrapartes síncronas, con las siguientes diferencias.
 
-* Las funciones `validate()` deben devolver una Promise u observable,
-* El observable devuelto debe ser finito, lo que significa que debe completarse en algún momento.
-    Para convertir un observable infinito en uno finito, canaliza el observable a través de un operador de filtrado como `first`, `last`, `take`, o `takeUntil`.
+- Las funciones `validate()` deben devolver una Promise u observable,
+- El observable devuelto debe ser finito, lo que significa que debe completarse en algún momento.
+- Para convertir un observable infinito en uno finito, canaliza el observable a través de un operador de filtrado como `first`, `last`, `take`, o `takeUntil`.
 
 La validación asíncrona ocurre después de la validación síncrona, y se realiza solo si la validación síncrona es exitosa.
 Esta verificación permite que los formularios eviten procesos de validación asíncrona potencialmente costosos \(como una solicitud HTTP\) si los métodos de validación más básicos ya han encontrado entrada inválida.
@@ -251,13 +249,13 @@ Inspecciona la propiedad `pending` del control y úsala para dar retroalimentaci
 Un patrón de UI común es mostrar un spinner mientras se realiza la validación asíncrona.
 El siguiente ejemplo muestra cómo lograr esto en un formulario basado en plantillas.
 
-<docs-code language="html">
-
+```angular-html
 <input [(ngModel)]="name" #model="ngModel" appSomeAsyncValidator>
+
 @if(model.pending) {
   <app-spinner />
 }
-</docs-code>
+```
 
 ### Implementar un validador asíncrono personalizado
 
@@ -267,15 +265,15 @@ Para validar la posible entrada de rol, el validador debe iniciar una operación
 
 El siguiente código crea la clase de validador, `UniqueRoleValidato`r`, que implementa la interfaz `AsyncValidator`.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator"/>
+<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator"/>
 
 La propiedad `actorsService` se inicializa con una instancia del token `ActorsService`, que define la siguiente interfaz.
 
-<docs-code language="typescript">
+```ts
 interface ActorsService {
   isRoleTaken: (role: string) => Observable<boolean>;
 }
-</docs-code>
+```
 
 En una aplicación del mundo real, `ActorsService` sería responsable de hacer una solicitud HTTP a la base de datos de actores para verificar si el rol está disponible.
 Desde el punto de vista del validador, la implementación real del servicio no es importante, por lo que el ejemplo puede codificar contra la interfaz `ActorsService`.
@@ -298,7 +296,7 @@ La bandera `pending` se establece en `false`, y la validez del formulario se act
 
 Para usar un validador asíncrono en formularios reactivos, comienza inyectando el validador en una propiedad de la clase del componente.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-inject"/>
+<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-inject"/>
 
 Luego, pasa la función validadora directamente al `FormControl` para aplicarla.
 
@@ -306,7 +304,7 @@ En el siguiente ejemplo, la función `validate` de `UnambiguousRoleValidator` se
 El valor de `asyncValidators` puede ser una sola función validadora asíncrona, o un array de funciones.
 Para aprender más sobre las opciones de `FormControl`, consulta la referencia de la API [AbstractControlOptions](api/forms/AbstractControlOptions).
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-usage"/>
+<docs-code header="actor-form-reactive.component.2.ts" path="adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.2.ts" visibleRegion="async-validator-usage"/>
 
 ### Agregar validadores asíncronos a formularios basados en plantillas
 
@@ -314,11 +312,11 @@ Para usar un validador asíncrono en formularios basados en plantillas, crea una
 
 En el ejemplo de abajo, la directiva inyecta la clase `UniqueRoleValidator` que contiene la lógica de validación real y la invoca en la función `validate`, activada por Angular cuando debe ocurrir la validación.
 
-<docs-code path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator-directive"/>
+<docs-code header="role.directive.ts" path="adev/src/content/examples/form-validation/src/app/shared/role.directive.ts" visibleRegion="async-validator-directive"/>
 
 Luego, como con los validadores síncronos, agrega el selector de la directiva a una entrada para activarla.
 
-<docs-code header="template/actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="role-input"/>
+<docs-code header="actor-form-template.component.html (unique-unambiguous-role-input)" path="adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html" visibleRegion="role-input"/>
 
 ### Optimizar el rendimiento de validadores asíncronos
 
@@ -331,15 +329,15 @@ Puedes retrasar la actualización de la validez del formulario cambiando la prop
 
 Con formularios basados en plantillas, establece la propiedad en la plantilla.
 
-<docs-code language="html">
+```angular-html
 <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">
-</docs-code>
+```
 
 Con formularios reactivos, establece la propiedad en la instancia `FormControl`.
 
-<docs-code language="typescript">
+```ts
 new FormControl('', {updateOn: 'blur'});
-</docs-code>
+```
 
 ## Interacción con validación nativa de formularios HTML
 
diff --git a/adev-es/src/content/guide/forms/overview.en.md b/adev-es/src/content/guide/forms/overview.en.md
index 58757a2..79c669b 100644
--- a/adev-es/src/content/guide/forms/overview.en.md
+++ b/adev-es/src/content/guide/forms/overview.en.md
@@ -5,8 +5,11 @@ Handling user input with forms is the cornerstone of many common applications.
 Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
 
 Angular provides two different approaches to handling user input through forms: reactive and template-driven.
+
 Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
 
+TIP: If you're looking for the new experimental Signal Forms, check out our [essential Signal Forms guide](/essentials/signal-forms)!
+
 This guide provides information to help you decide which type of form works best for your situation.
 It introduces the common building blocks used by both approaches.
 It also summarizes the key differences between the two approaches, and demonstrates those differences in the context of setup, data flow, and testing.
@@ -70,7 +73,7 @@ The `[formControl]` directive links the explicitly created `FormControl` instanc
 The following component implements an input field for a single control, using reactive forms.
 In this example, the form model is the `FormControl` instance.
 
-<docs-code path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts"/>
+<docs-code language="angular-ts" path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts"/>
 
 IMPORTANT: In reactive forms, the form model is the source of truth; it provides the value and status of the form element at any given point in time, through the `[formControl]` directive on the `<input>` element.
 
@@ -81,7 +84,7 @@ The directive `NgModel` creates and manages a `FormControl` instance for a given
 
 The following component implements the same input field for a single control, using template-driven forms.
 
-<docs-code path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts"/>
+<docs-code language="angular-ts" path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts"/>
 
 IMPORTANT: In a template-driven form the source of truth is the template. The `NgModel` directive automatically manages the `FormControl` instance for you.
 
diff --git a/adev-es/src/content/guide/forms/overview.md b/adev-es/src/content/guide/forms/overview.md
index 9daa52d..8b36de2 100644
--- a/adev-es/src/content/guide/forms/overview.md
+++ b/adev-es/src/content/guide/forms/overview.md
@@ -4,9 +4,12 @@ Manejar la entrada del usuario con formularios es la piedra angular de muchas ap
 
 Las aplicaciones usan formularios para permitir a los usuarios iniciar sesión, actualizar un perfil, ingresar información confidencial y realizar muchas otras tareas de entrada de datos.
 
-Angular proporciona dos enfoques diferentes para manejar la entrada del usuario a través de formularios: reactivos y basados en plantillas. 
+Angular proporciona dos enfoques diferentes para manejar la entrada del usuario a través de formularios: reactivos y basados en plantillas.
+
 Ambos capturan los eventos de entrada del usuario desde la vista, validan la entrada del usuario, crean un modelo de formulario y un modelo de datos para actualizar, y proporcionan una forma de rastrear los cambios.
 
+CONSEJO: Si estás buscando los nuevos formularios experimentales Signal Forms, consulta nuestra [guía esencial de Signal Forms](/essentials/signal-forms)!
+
 Esta guía proporciona información para ayudarte a decidir qué tipo de formulario funciona mejor para tu situación.
 Introduce los bloques de construcción comunes utilizados por ambos enfoques.
 También resume las diferencias clave entre los dos enfoques y demuestra esas diferencias en el contexto de configuración, flujo de datos y pruebas.
@@ -27,10 +30,10 @@ La siguiente tabla resume las diferencias clave entre los formularios reactivos
 
 |                                                   | Reactivos                             | Basados en plantillas                |
 | :------------------------------------------------ | :----------------------------------- | :------------------------------ |
-| [Configuración del modelo del formulario](#setting-up-the-form-model) | Explícita, creada en la clase del componente | Implícita, creada por directivas |
-| [Modelo de datos](#mutability-of-the-data-model)       | Estructurado e inmutable             | No estructurado y mutable
-| [Flujo de datos](#data-flow-in-forms)                  | Síncrono                          | Asíncrono                    |
-| [Validación del formulario](#form-validation)               | Funciones                            | Directivas                      |
+| [Configurando el modelo del formulario](#configurando-el-modelo-del-formulario) | Explícita, creada en la clase del componente | Implícita, creada por directivas |
+| [Mutabilidad del modelo de datos](#mutabilidad-del-modelo-de-datos)       | Estructurado e inmutable             | No estructurado y mutable
+| [Flujo de datos](#flujo-de-datos-en-formularios)                  | Síncrono                          | Asíncrono                    |
+| [Validación del formulario](#validación-de-formularios)               | Funciones                            | Directivas                      |
 
 ### Escalabilidad
 
@@ -42,11 +45,11 @@ Proporcionan acceso directo a la API de formularios subyacente y usan [flujo de
 Los formularios reactivos requieren menos configuración para las pruebas, y las pruebas no requieren una comprensión profunda de la detección de cambios para probar correctamente las actualizaciones y validación del formulario.
 
 Los formularios basados en plantillas se centran en escenarios simples y no son tan reutilizables. 
-Abstraen la API de formularios subyacente y usan [flujo de datos asíncrono](#flujo-de-datos-en-formularios-basados-en-plantilla) entre la vista y el modelo de datos.
+Abstraen la API de formularios subyacente y usan [flujo de datos asíncrono](#flujo-de-datos-en-formularios-basados-en-plantillas) entre la vista y el modelo de datos.
 La abstracción de los formularios basados en plantillas también afecta las pruebas.
 Las pruebas dependen profundamente de la ejecución manual de la detección de cambios para ejecutarse correctamente y requieren más configuración.
 
-## Configurando el modelo de formulario
+## Configurando el modelo del formulario
 
 Tanto los formularios reactivos como los basados en plantillas rastrean los cambios de valor entre los elementos de entrada del formulario con los que los usuarios interactúan y los datos del formulario en el modelo de tu componente. 
 Los dos enfoques comparten bloques de construcción subyacentes, pero difieren en cómo creas y gestionas las instancias de control de formulario comunes.
@@ -70,7 +73,7 @@ La directiva `[formControl]` vincula la instancia de `FormControl` explícitamen
 El siguiente componente implementa un campo de entrada para un control único, usando formularios reactivos.
 En este ejemplo, el modelo de formulario es la instancia de `FormControl`.
 
-<docs-code path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts"/>
+<docs-code language="angular-ts" path="adev/src/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts"/>
 
 IMPORTANTE: En formularios reactivos, el modelo de formulario es la fuente de la verdad; proporciona el valor y el estado del elemento del formulario en cualquier momento dado, a través de la directiva `[formControl]` en el elemento `<input>`.
 
@@ -81,7 +84,7 @@ La directiva `NgModel` crea y gestiona una instancia de `FormControl` para un el
 
 El siguiente componente implementa el mismo campo de entrada para un control único, usando formularios basados en plantillas.
 
-<docs-code path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts"/>
+<docs-code language="angular-ts" path="adev/src/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts"/>
 
 IMPORTANTE: En un formulario basado en plantillas, la fuente de verdad es la plantilla. La directiva `NgModel` gestiona automáticamente la instancia de `FormControl` por ti.
 
diff --git a/adev-es/src/content/guide/forms/reactive-forms.en.md b/adev-es/src/content/guide/forms/reactive-forms.en.md
index d1fd267..b88663d 100644
--- a/adev-es/src/content/guide/forms/reactive-forms.en.md
+++ b/adev-es/src/content/guide/forms/reactive-forms.en.md
@@ -36,19 +36,19 @@ In the example, the user enters their name into an input field, captures that in
 <docs-step title="Generate a new component and import the ReactiveFormsModule">
 Use the CLI command `ng generate component` to generate a component in your project and import `ReactiveFormsModule` from the `@angular/forms` package and add it to your Component's `imports` array.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="imports" />
+<docs-code header="name-editor.component.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="imports" />
 </docs-step>
 
 <docs-step title="Declare a FormControl instance">
 Use the constructor of `FormControl` to set its initial value, which in this case is an empty string. By creating these controls in your component class, you get immediate access to listen for, update, and validate the state of the form input.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="create-control"/>
+<docs-code header="name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="create-control"/>
 </docs-step>
 
 <docs-step title="Register the control in the template">
 After you create the control in the component class, you must associate it with a form control element in the template. Update the template with the form control using the `formControl` binding provided by `FormControlDirective`, which is also included in the `ReactiveFormsModule`.
 
-<docs-code header="src/app/name-editor/name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="control-binding" />
+<docs-code header="name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="control-binding" />
 
 Using the template binding syntax, the form control is now registered to the `name` input element in the template. The form control and DOM element communicate with each other: the view reflects changes in the model, and the model reflects changes in the view.
 </docs-step>
@@ -56,7 +56,7 @@ Using the template binding syntax, the form control is now registered to the `na
 <docs-step title="Display the component">
 The `FormControl` assigned to the `name` property is displayed when the `<app-name-editor>` component is added to a template.
 
-<docs-code header="src/app/app.component.html (name editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
+<docs-code header="app.component.html (name editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
 </docs-step>
 </docs-workflow>
 
@@ -69,7 +69,7 @@ You can display the value in the following ways.
 
 The following example shows you how to display the current value using interpolation in the template.
 
-<docs-code header="src/app/name-editor/name-editor.component.html (control value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
+<docs-code header="name-editor.component.html (control value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
 
 The displayed value changes as you update the form control element.
 
@@ -86,12 +86,12 @@ For example, when retrieving form data from a backend API or service, use the `s
 
 The following example adds a method to the component class to update the value of the control to _Nancy_ using the `setValue()` method.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
+<docs-code header="name-editor.component.ts (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
 
 Update the template with a button to simulate a name update.
 When you click the **Update Name** button, the value entered in the form control element is reflected as its current value.
 
-<docs-code header="src/app/name-editor/name-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
+<docs-code header="name-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
 
 The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value.
 
@@ -114,11 +114,11 @@ The following example shows how to manage multiple form control instances in a s
 
 Generate a `ProfileEditor` component and import the `FormGroup` and `FormControl` classes from the `@angular/forms` package.
 
-<docs-code language="shell">
+```shell
 ng generate component ProfileEditor
-</docs-code>
+```
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
+<docs-code header="profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
 
 To add a form group to this component, take the following steps.
 
@@ -133,7 +133,7 @@ Create a property in the component class named `profileForm` and set the propert
 
 For the profile form, add two form control instances with the names `firstName` and `lastName`
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
+<docs-code header="profile-editor.component.ts (form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
 
 The individual form controls are now collected within a group. A `FormGroup` instance provides its model value as an object reduced from the values of each control in the group. A form group instance has the same properties (such as `value` and `untouched`) and methods (such as `setValue()`) as a form control instance.
 </docs-step>
@@ -141,7 +141,7 @@ The individual form controls are now collected within a group. A `FormGroup` ins
 <docs-step title="Associate the FormGroup model and view">
 A form group tracks the status and changes for each of its controls, so if one of the controls changes, the parent control also emits a new status or value change. The model for the group is maintained from its members. After you define the model, you must update the template to reflect the model in the view.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
+<docs-code header="profile-editor.component.html (template form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
 
 Just as a form group contains a group of controls, the _profileForm_ `FormGroup` is bound to the `form` element with the `FormGroup` directive, creating a communication layer between the model and the form containing the inputs. The `formControlName` input provided by the `FormControlName` directive binds each individual input to the form control defined in `FormGroup`. The form controls communicate with their respective elements. They also communicate changes to the form group instance, which provides the source of truth for the model value.
 </docs-step>
@@ -149,17 +149,17 @@ Just as a form group contains a group of controls, the _profileForm_ `FormGroup`
 <docs-step title="Save form data">
 The `ProfileEditor` component accepts input from the user, but in a real scenario you want to capture the form value and make it available for further processing outside the component. The `FormGroup` directive listens for the `submit` event emitted by the `form` element and emits an `ngSubmit` event that you can bind to a callback function. Add an `ngSubmit` event listener to the `form` tag with the `onSubmit()` callback method.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
+<docs-code header="profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
 
 The `onSubmit()` method in the `ProfileEditor` component captures the current value of `profileForm`. Use `EventEmitter` to keep the form encapsulated and to provide the form value outside the component. The following example uses `console.warn` to log a message to the browser console.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
+<docs-code header="profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
 
 The `submit` event is emitted by the `form` tag using the built-in DOM event. You trigger the event by clicking a button with `submit` type. This lets the user press the **Enter** key to submit the completed form.
 
 Use a `button` element to add a button to the bottom of the form to trigger the form submission.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit button)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
+<docs-code header="profile-editor.component.html (submit button)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
 
 The button in the preceding snippet also has a `disabled` binding attached to it to disable the button when `profileForm` is invalid. You aren't performing any validation yet, so the button is always enabled. Basic form validation is covered in the [Validating form input](#validating-form-input) section.
 </docs-step>
@@ -167,7 +167,7 @@ The button in the preceding snippet also has a `disabled` binding attached to it
 <docs-step title="Display the component">
 To display the `ProfileEditor` component that contains the form, add it to a component template.
 
-<docs-code header="src/app/app.component.html (profile editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
+<docs-code header="app.component.html (profile editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
 
 `ProfileEditor` lets you manage the form control instances for the `firstName` and `lastName` controls within the form group instance.
 
@@ -191,7 +191,7 @@ A name and address are typical examples of such nested groups, and are used in t
 <docs-step title="Create a nested group">
 To create a nested group in `profileForm`, add a nested `address` element to the form group instance.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
+<docs-code header="profile-editor.component.ts (nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
 
 In this example, `address group` combines the current `firstName` and `lastName` controls with the new `street`, `city`, `state`, and `zip` controls. Even though the `address` element in the form group is a child of the overall `profileForm` element in the form group, the same rules apply with value and status changes. Changes in status and value from the nested form group propagate to the parent form group, maintaining consistency with the overall model.
 </docs-step>
@@ -199,7 +199,7 @@ In this example, `address group` combines the current `firstName` and `lastName`
 <docs-step title="Group the nested form in the template">
 After you update the model in the component class, update the template to connect the form group instance and its input elements. Add the `address` form group containing the `street`, `city`, `state`, and `zip` fields to the `ProfileEditor` template.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
+<docs-code header="profile-editor.component.html (template nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
 
 The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas.
 
@@ -223,11 +223,11 @@ The strict checks of the `setValue()` method help catch nesting errors in comple
 
 In `ProfileEditorComponent`, use the `updateProfile` method with the following example to update the first name and street address for the user.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="patch-value"/>
+<docs-code header="profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="patch-value"/>
 
 Simulate an update by adding a button to the template to update the user profile on demand.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
+<docs-code header="profile-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
 
 When a user clicks the button, the `profileForm` model is updated with new values for `firstName` and `street`. Notice that `street` is provided in an object inside the `address` property.
 This is necessary because the `patchValue()` method applies the update against the model structure.
@@ -250,28 +250,28 @@ The following examples show how to refactor the `ProfileEditor` component to use
 <docs-step title="Import the FormBuilder class">
 Import the `FormBuilder` class from the `@angular/forms` package.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
+<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
 
 </docs-step>
 
 <docs-step title="Inject the FormBuilder service">
 The `FormBuilder` service is an injectable provider from the reactive forms module. Use the `inject()` function to inject this dependency in your component.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (property init)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
+<docs-code header="profile-editor.component.ts (property init)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
 
 </docs-step>
 <docs-step title="Generate form controls">
 The `FormBuilder` service has three methods: `control()`, `group()`, and `array()`. These are factory methods for generating instances in your component classes including form controls, form groups, and form arrays. Use the `group` method to create the `profileForm` controls.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
+<docs-code header="profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
 
 In the preceding example, you use the `group()` method with the same object to define the properties in the model. The value for each control name is an array containing the initial value as the first item in the array.
 
 TIP: You can define the control with just the initial value, but if your controls need sync or async validation, add sync and async validators as the second and third items in the array. Compare using the form builder to creating the instances manually.
 
   <docs-code-multifile>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (instances)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="profile-editor.component.ts (instances)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
   </docs-code-multifile>
 </docs-step>
 
@@ -298,13 +298,13 @@ Reactive forms include a set of validator functions for common use cases. These
 
 Import the `Validators` class from the `@angular/forms` package.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
+<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
 </docs-step>
 
 <docs-step title="Make a field required">
 In the `ProfileEditor` component, add the `Validators.required` static method as the second item in the array for the `firstName` control.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (required validator)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
+<docs-code header="profile-editor.component.ts (required validator)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
 </docs-step>
 
 <docs-step title="Display form status">
@@ -312,7 +312,7 @@ When you add a required field to the form control, its initial status is invalid
 
 Display the current status of `profileForm` using interpolation.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (display status)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
+<docs-code header="profile-editor.component.html (display status)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
 
 The **Submit** button is disabled because `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the **Submit** button is enabled.
 
@@ -339,7 +339,7 @@ The following example shows you how to manage an array of _aliases_ in `ProfileE
 <docs-step title="Import the `FormArray` class">
 Import the `FormArray` class from `@angular/forms` to use for type information. The `FormBuilder` service is ready to create a `FormArray` instance.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
+<docs-code header="profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
 </docs-step>
 
 <docs-step title="Define a `FormArray` control">
@@ -347,7 +347,7 @@ You can initialize a form array with any number of controls, from zero to many,
 
 Use the `FormBuilder.array()` method to define the array, and the `FormBuilder.control()` method to populate the array with an initial control.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases form array)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
+<docs-code header="profile-editor.component.ts (aliases form array)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
 
 The aliases control in the form group instance is now populated with a single control until more controls are added dynamically.
 </docs-step>
@@ -357,11 +357,11 @@ A getter provides access to the aliases in the form array instance compared to r
 
 Use the getter syntax to create an `aliases` class property to retrieve the alias's form array control from the parent form group.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
+<docs-code header="profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
 
-Because the returned control is of the type `AbstractControl`, you need to provide an explicit type to access the method syntax for the form array instance. Define a method to dynamically insert an alias control into the alias's form array. The `FormArray.push()` method inserts the control as a new item in the array.
+Because the returned control is of the type `AbstractControl`, you need to provide an explicit type to access the method syntax for the form array instance. Define a method to dynamically insert an alias control into the alias's form array. The `FormArray.push()` method inserts the control as a new item in the array, and you can also pass an array of controls to FormArray.push() to register multiple controls at once.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
+<docs-code header="profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
 
 In the template, each control is displayed as a separate input field.
 
@@ -373,7 +373,7 @@ To attach the aliases from your form model, you must add it to the template. Sim
 
 Add the following template HTML after the `<div>` closing the `formGroupName` element.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (aliases form array template)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
+<docs-code header="profile-editor.component.html (aliases form array template)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
 
 The `@for` block iterates over each form control instance provided by the aliases form array instance. Because form array elements are unnamed, you assign the index to the `i` variable and pass it to each control to bind it to the `formControlName` input.
 
@@ -388,6 +388,135 @@ Initially, the form contains one `Alias` field. To add another field, click the
 
 </docs-workflow>
 
+## Unified control state change events
+
+All form controls expose a single unified stream of **control state change events** through the `events` observable on `AbstractControl` (`FormControl`, `FormGroup`, `FormArray`, and `FormRecord`).
+This unified stream lets you react to **value**, **status**, **pristine**, **touched** and **reset** state changes and also for **form-level actions** such as **submit** , allowing you to handle all updates with a one subscription instead of wiring multiple observables.
+
+### Event types
+
+Each item emitted by `events` is an instance of a specific event class:
+
+- **`ValueChangeEvent`** — when the control’s **value** changes.
+- **`StatusChangeEvent`** — when the control’s **validation status** updates to one of the `FormControlStatus` values (`VALID`, `INVALID`, `PENDING`, or `DISABLED`).
+- **`PristineChangeEvent`** — when the control’s **pristine/dirty** state changes.
+- **`TouchedChangeEvent`** — when the control’s **touched/untouched** state changes.
+- **`FormResetEvent`** — when a control or form is reset, either via the `reset()` API or a native action.
+- **`FormSubmittedEvent`** — when the form is submitted.
+
+All event classes extend `ControlEvent` and include a `source` reference to the `AbstractControl` that originated the change, which is useful in large forms.
+
+```ts
+import { Component } from '@angular/core';
+import {
+  FormControl,
+  ValueChangeEvent,
+  StatusChangeEvent,
+  PristineChangeEvent,
+  TouchedChangeEvent,
+  FormResetEvent,
+  FormSubmittedEvent,
+  ReactiveFormsModule,
+  FormGroup,
+} from '@angular/forms';
+
+@Component({/* ... */ })
+export class UnifiedEventsBasicComponent {
+  form = new FormGroup({
+    username: new FormControl(''),
+  });
+
+  constructor() {
+    this.form.events.subscribe((e) => {
+      if (e instanceof ValueChangeEvent) {
+        console.log('Value changed to: ', e.value);
+      }
+
+      if (e instanceof StatusChangeEvent) {
+        console.log('Status changed to: ', e.status);
+      }
+
+      if (e instanceof PristineChangeEvent) {
+        console.log('Pristine status changed to: ', e.pristine);
+      }
+
+      if (e instanceof TouchedChangeEvent) {
+        console.log('Touched status changed to: ', e.touched);
+      }
+
+      if (e instanceof FormResetEvent) {
+        console.log('Form was reset');
+      }
+
+      if (e instanceof FormSubmittedEvent) {
+        console.log('Form was submitted');
+      }
+    });
+  }
+}
+```
+
+### Filtering specific events
+
+Prefer RxJS operators when you only need a subset of event types.
+
+```ts
+import { filter } from 'rxjs/operators';
+import { StatusChangeEvent } from '@angular/forms';
+
+control.events
+  .pipe(filter((e) => e instanceof StatusChangeEvent))
+  .subscribe((e) => console.log('Status:', e.status));
+```
+
+### Unifying from multiple subscriptions
+
+**Before**
+
+```ts
+import { combineLatest } from 'rxjs/operators';
+
+combineLatest([control.valueChanges, control.statusChanges])
+  .subscribe(([value, status]) => { /* ... */ });
+```
+
+**After**
+
+```ts
+control.events.subscribe((e) => {
+  // Handle ValueChangeEvent, StatusChangeEvent, etc.
+});
+```
+
+NOTE: On value change, the emit happens right after a value of this control is updated. The value of a parent control (for example if this FormControl is a part of a FormGroup) is updated later, so accessing a value of a parent control (using the `value` property) from the callback of this event might result in getting a value that has not been updated yet. Subscribe to the `events` of the parent control instead.
+
+## Utility functions for narrowing form control types
+
+Angular provides four utility functions that help determine the concrete type of an `AbstractControl`. These functions act as **type guards** and narrow the control type when they return `true`, which lets you safely access subtype-specific properties inside the same block.
+
+| Utility function | Details                                             |
+| :--------------- | :-------------------------------------------------- |
+| `isFormControl`  | Returns `true` when the control is a `FormControl`. |
+| `isFormGroup`    | Returns `true` when the control is a `FormGroup`    |
+| `isFormRecord`   | Returns `true` when the control is a `FormRecord`   |
+| `isFormArray`    | Returns `true` when the control is a `FormArray`    |
+
+These helpers are particularly useful in **custom validators**, where the function signature receives an `AbstractControl`, but the logic is intended for a specific control kind.
+
+```ts
+import { AbstractControl, isFormArray } from '@angular/forms';
+
+export function positiveValues(control: AbstractControl) {
+    if (!isFormArray(control)) {
+        return null; // Not a FormArray: validator is not applicable.
+    }
+
+    // Safe to access FormArray-specific API after narrowing.
+    const hasNegative = control.controls.some(c => c.value < 0);
+    return hasNegative ? { positiveValues: true } : null;
+}
+```
+
 ## Reactive forms API summary
 
 The following table lists the base classes and services used to create and manage reactive form controls.
diff --git a/adev-es/src/content/guide/forms/reactive-forms.md b/adev-es/src/content/guide/forms/reactive-forms.md
index 10d6baa..dfa81d8 100644
--- a/adev-es/src/content/guide/forms/reactive-forms.md
+++ b/adev-es/src/content/guide/forms/reactive-forms.md
@@ -10,7 +10,7 @@ Cada cambio en el estado del formulario devuelve un nuevo estado, lo que mantien
 Los formularios reactivos se construyen alrededor de flujos observables, donde las entradas y los valores del formulario se proporcionan como flujos de valores de entrada, a los que se puede acceder de forma síncrona.
 
 Los formularios reactivos también proporcionan un camino directo hacia las pruebas porque tienes la seguridad de que tus datos son consistentes y predecibles cuando se solicitan.
-Cualquier consumidor de los flujos tiene puede manipular esos datos de forma segura.
+Cualquier consumidor de los flujos puede manipular esos datos de forma segura.
 
 Los formularios reactivos difieren de los [formularios basados en plantillas](guide/forms/template-driven-forms) de maneras distintas.
 Los formularios reactivos proporcionan acceso síncrono al modelo de datos, inmutabilidad con operadores observables y seguimiento de cambios a través de flujos observables.
@@ -36,19 +36,19 @@ En el ejemplo, el usuario ingresa su nombre en un campo de entrada, captura ese
 <docs-step title="Generar un nuevo componente e importar ReactiveFormsModule">
 Usa el comando CLI `ng generate component` para generar un componente en tu proyecto e importa `ReactiveFormsModule` del paquete `@angular/forms` y agrégalo al array de `imports` de tu Componente.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts (excerpt)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="imports" />
+<docs-code header="name-editor.component.ts (extracto)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="imports" />
 </docs-step>
 
 <docs-step title="Declarar una instancia de FormControl">
 Usa el constructor de `FormControl` para establecer su valor inicial, que en este caso es una cadena vacía. Al crear estos controles en tu clase de componente, obtienes acceso inmediato para escuchar, actualizar y validar el estado de la entrada del formulario.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="create-control"/>
+<docs-code header="name-editor.component.ts" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="create-control"/>
 </docs-step>
 
 <docs-step title="Registrar el control en la plantilla">
 Después de crear el control en la clase del componente, debes asociarlo con un control de formulario en la plantilla. Actualiza la plantilla con el control de formulario usando el enlace `formControl` proporcionado por `FormControlDirective`, que también está incluido en `ReactiveFormsModule`.
 
-<docs-code header="src/app/name-editor/name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="control-binding" />
+<docs-code header="name-editor.component.html" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="control-binding" />
 
 Usando la sintaxis de enlace de plantilla, el control de formulario ahora está registrado en el elemento de entrada `name` de la plantilla. El control de formulario y el elemento DOM se comunican entre sí: la vista refleja cambios en el modelo, y el modelo refleja los cambios en la vista.
 </docs-step>
@@ -56,7 +56,7 @@ Usando la sintaxis de enlace de plantilla, el control de formulario ahora está
 <docs-step title="Mostrar el componente">
 El `FormControl` asignado a la propiedad `name` se muestra cuando el componente `<app-name-editor>` se agrega a una plantilla.
 
-<docs-code header="src/app/app.component.html (editor de nombre)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
+<docs-code header="app.component.html (editor de nombre)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-name-editor"/>
 </docs-step>
 </docs-workflow>
 
@@ -69,12 +69,12 @@ Puedes mostrar el valor de las siguientes maneras:
 
 El siguiente ejemplo te muestra cómo mostrar el valor actual usando interpolación en la plantilla. 
 
-<docs-code header="src/app/name-editor/name-editor.component.html (control value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
+<docs-code header="name-editor.component.html (valor de control)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="display-value"/>
 
 El valor mostrado cambia a medida que actualizas el control del formulario.
 
 Los formularios reactivos proporcionan acceso a información sobre un control dado a través de propiedades y métodos proporcionados con cada instancia.
-Estas propiedades y métodos de la clase subyacente [AbstractControl](api/forms/AbstractControl 'Referencia de API') se usan para controlar el estado del formulario y determinar cuándo mostrar mensajes al manejar [validación de entrada](#validating-form-input 'Aprende más sobre validación de la entrada de formulario').
+Estas propiedades y métodos de la clase subyacente [AbstractControl](api/forms/AbstractControl 'Referencia de API') se usan para controlar el estado del formulario y determinar cuándo mostrar mensajes al manejar [validación de entrada](#validando-la-entrada-de-formulario 'Aprende más sobre validación de la entrada de formulario').
 
 Lee sobre otras propiedades y métodos de `FormControl` en la [Referencia de API](api/forms/FormControl 'Referencia de sintaxis detallada').
 
@@ -86,17 +86,17 @@ Por ejemplo, cuando recuperas datos del formulario desde una API o servicio back
 
 El siguiente ejemplo agrega un método a la clase del componente para actualizar el valor del control a _Nancy_ usando el método `setValue()`.
 
-<docs-code header="src/app/name-editor/name-editor.component.ts (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
+<docs-code header="name-editor.component.ts (actualizar valor)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.ts" visibleRegion="update-value"/>
 
 Actualiza la plantilla con un botón para simular una actualización de nombre.
 Cuando haces clic en el botón **Actualizar Nombre**, el valor ingresado en el control del formulario se refleja como su valor actual.
 
-<docs-code header="src/app/name-editor/name-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
+<docs-code header="name-editor.component.html (actualizar valor)" path="adev/src/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html" visibleRegion="update-value"/>
 
 El modelo del formulario es la fuente de la verdad para el control. Por lo tanto, cuando haces clic en el botón, el valor de la entrada cambia dentro de la clase del componente, sobrescribiendo su valor actual.
 
-ÚTIL: En este ejemplo, estás usando un control único.
-Cuando uses el método `setValue()` con una instancia de [grupo de formulario](#grouping-form-controls) o [array de formulario](#creating-dynamic-forms), el valor necesita coincidir con la estructura del grupo o array.
+CONSEJO: En este ejemplo, estás usando un control único.
+Cuando uses el método `setValue()` con una instancia de [grupo de formulario](#agrupando-controles-de-formulario) o [array de formulario](#creando-formularios-dinámicos), el valor necesita coincidir con la estructura del grupo o array.
 
 ## Agrupando controles de formulario
 
@@ -105,8 +105,8 @@ Los formularios reactivos proporcionan dos formas de agrupar múltiples controle
 
 | Grupos de formulario | Detalle                                                                                                                                                                                                                                                |
 | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Form group  | Define un formulario con un conjunto fijo de controles que puedes gestionar juntos. Los conceptos básicos del grupo de formulario se discuten en esta sección. También puedes [anidar grupos de formulario](#creating-nested-form-groups 'Ver más sobre anidar grupos') para crear formularios más complejos. |
-| Form array  | Define un formulario dinámico, en los que puedes agregar y eliminar controles en tiempo de ejecución. También puedes anidar arrays de formulario para crear formularios más complejos. Para más sobre esta opción, consulta [Crear formularios dinámicos](#creating-dynamic-forms).                              |
+| Form group  | Define un formulario con un conjunto fijo de controles que puedes gestionar juntos. Los conceptos básicos del grupo de formulario se discuten en esta sección. También puedes [anidar grupos de formulario](#creando-grupos-de-formulario-anidados 'Ver más sobre anidar grupos') para crear formularios más complejos. |
+| Form array  | Define un formulario dinámico, en los que puedes agregar y eliminar controles en tiempo de ejecución. También puedes anidar arrays de formulario para crear formularios más complejos. Para más sobre esta opción, consulta [Crear formularios dinámicos](#creando-formularios-dinámicos).                              |
 
 Al igual que una instancia de `FormControl` (control de formulario) te da control sobre un solo campo de entrada, una instancia de `FormGroup` (grupo de formulario) rastrea el estado del formulario de un grupo de instancias de `FormControl` (por ejemplo, un formulario). 
 Cada control en una instancia de `FormGroup` se rastrea por nombre al crear el grupo. 
@@ -118,7 +118,7 @@ Genera un componente `ProfileEditor` e importa las clases `FormGroup` y `FormCon
 ng generate component ProfileEditor
 </docs-code>
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (imports)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
+<docs-code header="profile-editor.component.ts (importaciones)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="imports"/>
 
 Para agregar un grupo de formulario a este componente, sigue los siguientes pasos.
 
@@ -133,7 +133,7 @@ Crea una propiedad en la clase del componente llamada `profileForm` y establece
 
 Para el formulario de perfil, agrega dos instancias de `FormControl` con los nombres `firstName` y `lastName`
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (grupo de formulario)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
+<docs-code header="profile-editor.component.ts (grupo de formulario)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup"/>
 
 Los controles de formulario individuales ahora están recopilados dentro de un grupo. Una instancia de `FormGroup` proporciona su valor de modelo como un objeto reducido de los valores de cada control en el grupo. Una instancia de `FormGroup` tiene las mismas propiedades \(como `value` y `untouched`\) y métodos \(como `setValue()`\) que una instancia de control de formulario.
 </docs-step>
@@ -141,7 +141,7 @@ Los controles de formulario individuales ahora están recopilados dentro de un g
 <docs-step title="Asociar el modelo y vista de FormGroup">
 Un grupo de formulario rastrea el estado y los cambios para cada uno de sus controles, por lo que si uno de los controles cambia, el control padre también emite un nuevo estado o cambio de valor. El modelo para el grupo se mantiene a partir de sus miembros. Después de definir el modelo, debes actualizar la plantilla para reflejar el modelo en la vista.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
+<docs-code header="profile-editor.component.html (grupo de formulario de plantilla)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroup"/>
 
 Así como un grupo de formulario contiene un grupo de controles, el `FormGroup` _profileForm_ está vinculado al elemento `form` con la directiva `FormGroup`, creando una capa de comunicación entre el modelo y el formulario que contiene las entradas. La entrada `formControlName` proporcionada por la directiva `FormControlName` vincula cada entrada individual al control de formulario definido en `FormGroup`. Los controles de formulario se comunican con sus respectivos elementos. También comunican cambios a la instancia de `FormGroup`, que proporciona la fuente de verdad para el valor del modelo.
 </docs-step>
@@ -149,25 +149,25 @@ Así como un grupo de formulario contiene un grupo de controles, el `FormGroup`
 <docs-step title="Guardar datos del formulario">
 El componente `ProfileEditor` acepta entrada del usuario, pero en un escenario real quieres capturar el valor del formulario y hacerlo disponible para procesamiento adicional fuera del componente. La directiva `FormGroup` escucha el evento `submit` emitido por el elemento `form` y emite un evento `ngSubmit` que puedes vincular a una función de callback. Agrega un listener de evento `ngSubmit` a la etiqueta `form` con el método de callback `onSubmit()`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit event)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
+<docs-code header="profile-editor.component.html (evento de envío)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="ng-submit"/>
 
 El método `onSubmit()` en el componente `ProfileEditor` captura el valor actual de `profileForm`. Usa `EventEmitter` para mantener el formulario encapsulado y proporcionar el valor del formulario fuera del componente. El siguiente ejemplo usa `console.warn` para registrar un mensaje en la consola del navegador.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (submit method)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
+<docs-code header="profile-editor.component.ts (método de envío)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="on-submit"/>
 
 El evento `submit` es emitido por la etiqueta `form` usando el evento DOM integrado. Activas el evento haciendo clic en un botón con tipo `submit`. Esto permite que el usuario presionar la tecla **Enter** para enviar el formulario completado.
 
 Usa un elemento `button` para agregar un botón al final del formulario para activar el envío del formulario.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (submit button)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
+<docs-code header="profile-editor.component.html (botón de envío)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="submit-button"/>
 
-El botón en el fragmento anterior también tiene un enlace `disabled` adjunto para deshabilitar el botón cuando `profileForm` es inválido. Aún no estás realizando ninguna validación, así que el botón siempre está habilitado. La validación básica de formularios se cubre en la sección [Validar entrada de formulario](#validating-form-input).
+El botón en el fragmento anterior también tiene un enlace `disabled` adjunto para deshabilitar el botón cuando `profileForm` es inválido. Aún no estás realizando ninguna validación, así que el botón siempre está habilitado. La validación básica de formularios se cubre en la sección [Validar entrada de formulario](#validando-la-entrada-de-formulario).
 </docs-step>
 
 <docs-step title="Mostrar el componente">
 Para mostrar el componente `ProfileEditor` que contiene el formulario, agrégalo a una plantilla de componente.
 
-<docs-code header="src/app/app.component.html (profile editor)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
+<docs-code header="app.component.html (editor de perfil)" path="adev/src/content/examples/reactive-forms/src/app/app.component.1.html" visibleRegion="app-profile-editor"/>
 
 `ProfileEditor` te permite gestionar las instancias de `FormControl` para los controles `firstName` y `lastName` dentro de la instancia de `FormGroup`.
 
@@ -188,10 +188,10 @@ Algunos tipos de información naturalmente caen en el mismo grupo.
 Un nombre y dirección son ejemplos típicos de tales grupos anidados, y se usan en los siguientes ejemplos.
 
 <docs-workflow>
-<docs-step title="Crear un grupo anidadop">
+<docs-step title="Crear un grupo anidado">
 Para crear un grupo anidado en `profileForm`, agrega un elemento anidado `address` a la instancia de `FormGroup`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
+<docs-code header="profile-editor.component.ts (grupo de formulario anidado)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="nested-formgroup"/>
 
 En este ejemplo, `address group` combina los controles actuales `firstName` y `lastName` con los nuevos controles `street`, `city`, `state`, y `zip`. Aunque el elemento `address` en el grupo de formulario es un hijo del elemento general `profileForm` en el grupo de formulario, las mismas reglas se aplican con cambios de valor y estado. Los cambios en estado y valor del grupo de formulario anidado se propagan al grupo de formulario padre, manteniendo consistencia con el modelo general.
 </docs-step>
@@ -199,7 +199,7 @@ En este ejemplo, `address group` combina los controles actuales `firstName` y `l
 <docs-step title="Agrupar el formulario anidado en la plantilla">
 Después de actualizar el modelo en la clase del componente, actualiza la plantilla para conectar la instancia de `FormGroup` y sus elementos de entrada. Agrega el grupo de formulario `address` que contiene los campos `street`, `city`, `state`, y `zip` a la plantilla `ProfileEditor`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (template nested form group)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
+<docs-code header="profile-editor.component.html (grupo de formulario anidado de plantilla)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="formgroupname"/>
 
 El formulario `ProfileEditor` se muestra como un grupo, pero el modelo se descompone más para representar las áreas de agrupación lógica.
 
@@ -223,11 +223,11 @@ Las verificaciones estrictas del método `setValue()` ayudan a detectar errores
 
 En `ProfileEditorComponent`, usa el método `updateProfile` con el siguiente ejemplo para actualizar el nombre y la dirección de la calle para el usuario.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="patch-value"/>
+<docs-code header="profile-editor.component.ts (patch value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="patch-value"/>
 
 Simula una actualización agregando un botón a la plantilla para actualizar el perfil del usuario bajo demanda.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (update value)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
+<docs-code header="profile-editor.component.html (actualizar valor)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html" visibleRegion="patch-value"/>
 
 Cuando un usuario hace clic en el botón, el modelo `profileForm` se actualiza con nuevos valores para `firstName` y `street`. Observa que `street` se proporciona en un objeto dentro de la propiedad `address`.
 Esto es necesario porque el método `patchValue()` aplica la actualización contra la estructura del modelo.
@@ -250,28 +250,28 @@ Los siguientes ejemplos muestran cómo refactorizar el componente `ProfileEditor
 <docs-step title="Importar la clase FormBuilder">
 Importa la clase `FormBuilder` del paquete `@angular/forms`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
+<docs-code header="profile-editor.component.ts (importar)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder-imports"/>
 
 </docs-step>
 
 <docs-step title="Inyectar el servicio FormBuilder">
 El servicio `FormBuilder` es un proveedor inyectable del módulo de formularios reactivos. Usa la función `inject()` para inyectar esta dependencia en tu componente.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (property init)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
+<docs-code header="profile-editor.component.ts (inicialización de propiedad)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="inject-form-builder"/>
 
 </docs-step>
 <docs-step title="Generar controles de formulario">
 El servicio `FormBuilder` tiene tres métodos: `control()`, `group()` y `array()`. Estos son métodos de fábrica para generar instancias en tus clases de componente incluyendo controles de formulario, grupos de formulario y arrays de formulario. Usa el método `group` para crear los controles de `profileForm`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
+<docs-code header="profile-editor.component.ts (constructor de formulario)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-builder"/>
 
 En el ejemplo anterior, usas el método `group()` con el mismo objeto para definir las propiedades en el modelo. El valor para cada nombre de control es un array que contiene el valor inicial como el primer elemento en el array.
 
-SUGERENCIA:  Puedes definir el control con solo el valor inicial, pero si tus controles necesitan validación síncrona o asíncrona, agrega validadores síncronos y asíncronos como el segundo y tercer elemento en el array. Compara usar el form builder con crear las instancias manualmente.
+CONSEJO: Puedes definir el control con solo el valor inicial, pero si tus controles necesitan validación síncrona o asíncrona, agrega validadores síncronos y asíncronos como el segundo y tercer elemento en el array. Compara usar el form builder con crear las instancias manualmente.
 
   <docs-code-multifile>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (instances)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
-    <docs-code header="src/app/profile-editor/profile-editor.component.ts (form builder)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="profile-editor.component.ts (instancias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.ts" visibleRegion="formgroup-compare"/>
+    <docs-code header="profile-editor.component.ts (constructor de formulario)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="formgroup-compare"/>
   </docs-code-multifile>
 </docs-step>
 
@@ -298,13 +298,13 @@ Los formularios reactivos incluyen un conjunto de funciones validadoras para cas
 
 Importa la clase `Validators` del paquete `@angular/forms`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
+<docs-code header="profile-editor.component.ts (importar)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="validator-imports"/>
 </docs-step>
 
 <docs-step title="Hacer un campo requerido">
 En el componente `ProfileEditor`, agrega el método estático `Validators.required` como el segundo elemento en el array para el control `firstName`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (required validator)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
+<docs-code header="profile-editor.component.ts (validador requerido)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="required-validator"/>
 </docs-step>
 
 <docs-step title="Mostrar estado del formulario">
@@ -312,7 +312,7 @@ Cuando agregas un campo requerido a un control del formulario, su estado inicial
 
 Muestra el estado actual de `profileForm` usando interpolación.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (display status)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
+<docs-code header="profile-editor.component.html (mostrar estado)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="display-status"/>
 
 El botón **Submit** está deshabilitado porque `profileForm` es inválido debido al control de formulario `firstName` requerido. Después de completar la entrada `firstName`, el formulario se vuelve válido y el botón **Submit** se habilita.
 
@@ -339,7 +339,7 @@ El siguiente ejemplo te muestra cómo gestionar un array de _alias_ en `ProfileE
 <docs-step title="Importar la clase `FormArray`">
 Importa la clase `FormArray` de `@angular/forms` para usar para información de tipo. El servicio `FormBuilder` está listo para crear una instancia de `FormArray`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (import)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
+<docs-code header="profile-editor.component.ts (importar)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.2.ts" visibleRegion="form-array-imports"/>
 </docs-step>
 
 <docs-step title="Definir un control `FormArray`">
@@ -347,7 +347,7 @@ Puedes inicializar un array de formulario con cualquier número de controles, de
 
 Usa el método `FormBuilder.array()` para definir el array, y el método `FormBuilder.control()` para poblar el array con un control inicial.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases form array)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
+<docs-code header="profile-editor.component.ts (array de formulario de alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases"/>
 
 El control de alias dentro de la instancia de `FormGroup` ahora está poblado con un control único hasta que se agreguen más controles dinámicamente.
 </docs-step>
@@ -357,11 +357,11 @@ Un _getter_ proporciona acceso a los alias en la instancia de `FormArray` compar
 
 Usa la sintaxis getter para crear una propiedad de clase `aliases` para recuperar el control del `FormArray` de alias del grupo de formulario padre.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (aliases getter)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
+<docs-code header="profile-editor.component.ts (getter de alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="aliases-getter"/>
 
-Debido a que el control devuelto es del tipo `AbstractControl`, necesitas proporcionar un tipo explícito para acceder a la sintaxis del método para la instancia de `FormArray`. Define un método para insertar dinámicamente un control de alias en el array de formulario de alias. El método `FormArray.push()` inserta el control como un nuevo elemento en el array.
+Debido a que el control devuelto es del tipo `AbstractControl`, necesitas proporcionar un tipo explícito para acceder a la sintaxis del método para la instancia de `FormArray`. Define un método para insertar dinámicamente un control de alias en el array de formulario de alias. El método `FormArray.push()` inserta el control como un nuevo elemento en el array, y también puedes pasar un array de controles a `FormArray.push()` para registrar múltiples controles a la vez.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.ts (add alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
+<docs-code header="profile-editor.component.ts (agregar alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts" visibleRegion="add-alias"/>
 
 En la plantilla, cada control se muestra como un campo de entrada separado.
 
@@ -373,7 +373,7 @@ Para adjuntar los alias de tu modelo de formulario, debes agregarlo a la plantil
 
 Agrega el siguiente HTML de plantilla después del `<div>` que cierra el elemento `formGroupName`.
 
-<docs-code header="src/app/profile-editor/profile-editor.component.html (aliases form array template)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
+<docs-code header="profile-editor.component.html (plantilla de array de formulario de alias)" path="adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html" visibleRegion="formarrayname"/>
 
 El bloque `@for` itera sobre cada instancia de `FormControl` proporcionada por la instancia de `FormArray` de alias. Debido a que los elementos del `FormArray` no tienen nombre, asignas el índice a la variable `i` y lo pasas a cada control para vincularlo a la entrada `formControlName`.
 
@@ -388,6 +388,135 @@ Inicialmente, el formulario contiene un campo `Alias`. Para agregar otro campo,
 
 </docs-workflow>
 
+## Eventos unificados de cambio de estado de control
+
+Todos los controles de formulario exponen un único flujo unificado de **eventos de cambio de estado de control** a través del observable `events` en `AbstractControl` (`FormControl`, `FormGroup`, `FormArray`, y `FormRecord`).
+Este flujo unificado te permite reaccionar a cambios de estado de **valor**, **estado**, **pristine**, **touched** y **reset**, y también para **acciones a nivel de formulario** como **submit**, permitiéndote manejar todas las actualizaciones con una sola suscripción en lugar de conectar múltiples observables.
+
+### Tipos de eventos
+
+Cada elemento emitido por `events` es una instancia de una clase de evento específica:
+
+- **`ValueChangeEvent`** — cuando el **valor** del control cambia.
+- **`StatusChangeEvent`** — cuando el **estado de validación** del control se actualiza a uno de los valores de `FormControlStatus` (`VALID`, `INVALID`, `PENDING`, o `DISABLED`).
+- **`PristineChangeEvent`** — cuando el estado **pristine/dirty** del control cambia.
+- **`TouchedChangeEvent`** — cuando el estado **touched/untouched** del control cambia.
+- **`FormResetEvent`** — cuando un control o formulario se restablece, ya sea mediante la API `reset()` o una acción nativa.
+- **`FormSubmittedEvent`** — cuando se envía el formulario.
+
+Todas las clases de eventos extienden `ControlEvent` e incluyen una referencia `source` al `AbstractControl` que originó el cambio, lo cual es útil en formularios grandes.
+
+```ts
+import { Component } from '@angular/core';
+import {
+  FormControl,
+  ValueChangeEvent,
+  StatusChangeEvent,
+  PristineChangeEvent,
+  TouchedChangeEvent,
+  FormResetEvent,
+  FormSubmittedEvent,
+  ReactiveFormsModule,
+  FormGroup,
+} from '@angular/forms';
+
+@Component({/* ... */ })
+export class UnifiedEventsBasicComponent {
+  form = new FormGroup({
+    username: new FormControl(''),
+  });
+
+  constructor() {
+    this.form.events.subscribe((e) => {
+      if (e instanceof ValueChangeEvent) {
+        console.log('Value changed to: ', e.value);
+      }
+
+      if (e instanceof StatusChangeEvent) {
+        console.log('Status changed to: ', e.status);
+      }
+
+      if (e instanceof PristineChangeEvent) {
+        console.log('Pristine status changed to: ', e.pristine);
+      }
+
+      if (e instanceof TouchedChangeEvent) {
+        console.log('Touched status changed to: ', e.touched);
+      }
+
+      if (e instanceof FormResetEvent) {
+        console.log('Form was reset');
+      }
+
+      if (e instanceof FormSubmittedEvent) {
+        console.log('Form was submitted');
+      }
+    });
+  }
+}
+```
+
+### Filtrar eventos específicos
+
+Prefiere operadores RxJS cuando solo necesites un subconjunto de tipos de eventos.
+
+```ts
+import { filter } from 'rxjs/operators';
+import { StatusChangeEvent } from '@angular/forms';
+
+control.events
+  .pipe(filter((e) => e instanceof StatusChangeEvent))
+  .subscribe((e) => console.log('Status:', e.status));
+```
+
+### Unificar desde múltiples suscripciones
+
+**Antes**
+
+```ts
+import { combineLatest } from 'rxjs/operators';
+
+combineLatest([control.valueChanges, control.statusChanges])
+  .subscribe(([value, status]) => { /* ... */ });
+```
+
+**Después**
+
+```ts
+control.events.subscribe((e) => {
+  // Manejar ValueChangeEvent, StatusChangeEvent, etc.
+});
+```
+
+NOTA: En el cambio de valor, la emisión ocurre justo después de que se actualiza el valor de este control. El valor de un control padre (por ejemplo, si este FormControl es parte de un FormGroup) se actualiza más tarde, por lo que acceder al valor de un control padre (usando la propiedad `value`) desde el callback de este evento podría resultar en obtener un valor que aún no se ha actualizado. Suscríbete a los `events` del control padre en su lugar.
+
+## Funciones de utilidad para restringir tipos de control de formulario
+
+Angular proporciona cuatro funciones de utilidad que ayudan a determinar el tipo concreto de un `AbstractControl`. Estas funciones actúan como **type guards** y restringen el tipo de control cuando devuelven `true`, lo que te permite acceder de forma segura a propiedades específicas del subtipo dentro del mismo bloque.
+
+| Función de utilidad | Detalles                                             |
+| :--------------- | :-------------------------------------------------- |
+| `isFormControl`  | Devuelve `true` cuando el control es un `FormControl`. |
+| `isFormGroup`    | Devuelve `true` cuando el control es un `FormGroup`    |
+| `isFormRecord`   | Devuelve `true` cuando el control es un `FormRecord`   |
+| `isFormArray`    | Devuelve `true` cuando el control es un `FormArray`    |
+
+Estos ayudantes son particularmente útiles en **validadores personalizados**, donde la firma de la función recibe un `AbstractControl`, pero la lógica está destinada a un tipo de control específico.
+
+```ts
+import { AbstractControl, isFormArray } from '@angular/forms';
+
+export function positiveValues(control: AbstractControl) {
+    if (!isFormArray(control)) {
+        return null; // No es un FormArray: el validador no es aplicable.
+    }
+
+    // Seguro para acceder a la API específica de FormArray después de restringir.
+    const hasNegative = control.controls.some(c => c.value < 0);
+    return hasNegative ? { positiveValues: true } : null;
+}
+```
+
 ## Resumen de API de formularios reactivos
 
 La siguiente tabla lista las clases base y servicios usados para crear y gestionar controles de formulario reactivo.
@@ -395,21 +524,21 @@ Para detalles completos de sintaxis, consulta la documentación de referencia de
 
 ### Clases
 
-| Clase             | Detailles                                                                                                                                                                                 |
-| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `AbstractControl` | La clase base abstracta para las clases concretas de control de formulario `FormControl`, `FormGroup`, y `FormArray`. Proporciona sus comportamientos y propiedades comunes.                           |
-| `FormControl`     | Gestiona el valor y estado de validez de un control de formulario individual. Corresponde a un control de formulario HTML como `<input>` o `<select>`.                                            |
+| Clase             | Detalles                                                                                                                                                                                                       |
+| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `AbstractControl` | La clase base abstracta para las clases concretas de control de formulario `FormControl`, `FormGroup`, y `FormArray`. Proporciona sus comportamientos y propiedades comunes.                                   |
+| `FormControl`     | Gestiona el valor y estado de validez de un control de formulario individual. Corresponde a un control de formulario HTML como `<input>` o `<select>`.                                                         |
 | `FormGroup`       | Gestiona el valor y estado de validez de un grupo de instancias de `AbstractControl`. Las propiedades del grupo incluyen sus controles hijos. El formulario de nivel superior en tu componente es `FormGroup`. |
-| `FormArray`       | Gestiona el valor y estado de validez de un array indexado numéricamente de instancias de `AbstractControl`.                                                                                      |
-| `FormBuilder`     | Un servicio inyectable que proporciona métodos de fábrica para crear instancias de control.                                                                                                     |
-| `FormRecord`      | Rastrea el valor y estado de validez de una colección de instancias de `FormControl`, cada una de las cuales tiene el mismo tipo de valor.                                                                  |
+| `FormArray`       | Gestiona el valor y estado de validez de un array indexado numéricamente de instancias de `AbstractControl`.                                                                                                   |
+| `FormBuilder`     | Un servicio inyectable que proporciona métodos de fábrica para crear instancias de control.                                                                                                                    |
+| `FormRecord`      | Rastrea el valor y estado de validez de una colección de instancias de `FormControl`, cada una de las cuales tiene el mismo tipo de valor.                                                                     |
 
 ### Directivas
 
-| Directiva              | Detalles                                                                                    |
-| :--------------------- | :----------------------------------------------------------------------------------------- |
-| `FormControlDirective` | Sincroniza una instancia `FormControl` independiente a un elemento de control de formulario.                       |
+| Directiva              | Detalles                                                                                                              |
+| :--------------------- | :-------------------------------------------------------------------------------------------------------------------- |
+| `FormControlDirective` | Sincroniza una instancia `FormControl` independiente a un elemento de control de formulario.                          |
 | `FormControlName`      | Sincroniza `FormControl` en una instancia existente de `FormGroup` a un elemento de control de formulario por nombre. |
-| `FormGroupDirective`   | Sincroniza una instancia existente de `FormGroup` a un elemento DOM.                                   |
-| `FormGroupName`        | Sincroniza una instancia anidada de `FormGroup` a un elemento DOM.                                      |
-| `FormArrayName`        | Sincroniza una instancia anidada de `FormArray` a un elemento DOM.                                      |
+| `FormGroupDirective`   | Sincroniza una instancia existente de `FormGroup` a un elemento DOM.                                                  |
+| `FormGroupName`        | Sincroniza una instancia anidada de `FormGroup` a un elemento DOM.                                                    |
+| `FormArrayName`        | Sincroniza una instancia anidada de `FormArray` a un elemento DOM.                                                    |
diff --git a/adev-es/src/content/guide/forms/signals/comparison.md b/adev-es/src/content/guide/forms/signals/comparison.md
new file mode 100644
index 0000000..d2690a9
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/comparison.md
@@ -0,0 +1,163 @@
+# Comparison with other form approaches
+
+Angular provides three approaches to building forms: Signal Forms, Reactive Forms, and Template-driven Forms. Each has distinct patterns for managing state, validation, and data flow. This guide helps you understand the differences and choose the right approach for your project.
+
+NOTE: Signal Forms are [experimental](reference/releases#experimental) as of Angular v21. The API may change before stabilizing.
+
+## Quick comparison
+
+| Feature          | Signal Forms                       | Reactive Forms                        | Template-driven Forms   |
+| ---------------- | ---------------------------------- | ------------------------------------- | ----------------------- |
+| Source of truth  | User-defined writable signal model | `FormControl`/`FormGroup`             | User model in component |
+| Type safety      | Inferred from model                | Explicit with typed forms             | Minimal                 |
+| Validation       | Schema with path-based validators  | List of validators passed to Controls | Directive-based         |
+| State management | Signal-based                       | Observable-based                      | Angular-managed         |
+| Setup            | Signal + schema function           | FormControl tree                      | NgModel in template     |
+| Best for         | Signal-based apps                  | Complex forms                         | Simple forms            |
+| Learning curve   | Medium                             | Medium-High                           | Low                     |
+| Status           | Experimental (v21+)                | Stable                                | Stable                  |
+
+## By example: Login form
+
+The best way to understand the differences is to see the same form implemented in all three approaches.
+
+<docs-code-multifile>
+  <docs-code header="Signal forms" path="adev/src/content/examples/signal-forms/src/comparison/app/signal-forms.ts"/>
+  <docs-code header="Reactive forms" path="adev/src/content/examples/signal-forms/src/comparison/app/reactive-forms.ts"/>
+  <docs-code header="Template-driven forms" path="adev/src/content/examples/signal-forms/src/comparison/app/template-driven-forms.ts"/>
+</docs-code-multifile>
+
+## Understanding the differences
+
+The three approaches make different design choices that affect how you write and maintain your forms. These differences stem from where each approach stores form state and how it manages validation.
+
+### Where your form data lives
+
+The most fundamental difference is where each approach considers the "source of truth" for form values.
+
+Signal Forms stores data in a writable signal. When you need the current form values, you call the signal:
+
+```ts
+const credentials = this.loginModel(); // { email: '...', password: '...' }
+```
+
+This keeps your form data in a single reactive container that automatically notifies Angular when values change. The form structure mirrors your data model exactly.
+
+Reactive Forms stores data inside FormControl and FormGroup instances. You access values through the form hierarchy:
+
+```ts
+const credentials = this.loginForm.value; // { email: '...', password: '...' }
+```
+
+This separates form state management from your component's data model. The form structure is explicit but requires more setup code.
+
+Template-driven Forms stores data in component properties. You access values directly:
+
+```ts
+const credentials = { email: this.email, password: this.password };
+```
+
+This is the most direct approach but requires manually assembling values when you need them. Angular manages form state through directives in the template.
+
+### How validation works
+
+Each approach defines validation rules differently, affecting where your validation logic lives and how you maintain it.
+
+Signal Forms uses a schema function where you bind validators to field paths:
+
+```ts
+loginForm = form(this.loginModel, (fieldPath) => {
+  required(fieldPath.email, { message: 'Email is required' });
+  email(fieldPath.email, { message: 'Enter a valid email address' });
+});
+```
+
+All validation rules live together in one place. The schema function runs once during form creation, and validators execute automatically when field values change. Error messages are part of the validation definition.
+
+Reactive Forms attaches validators when creating controls:
+
+```ts
+loginForm = new FormGroup({
+  email: new FormControl('', [Validators.required, Validators.email])
+});
+```
+
+Validators are tied to individual controls in the form structure. This distributes validation across your form definition. Error messages typically live in your template.
+
+Template-driven Forms uses directive attributes in the template:
+
+```html
+<input [(ngModel)]="email" required email />
+```
+
+Validation rules live in your template alongside the HTML. This keeps validation close to the UI but spreads logic across template and component.
+
+### Type safety and autocomplete
+
+TypeScript integration differs significantly between approaches, affecting how much the compiler helps you avoid errors.
+
+Signal Forms infers types from your model structure:
+
+```ts
+const loginModel = signal({ email: '', password: '' });
+const loginForm = form(loginModel);
+// TypeScript knows: loginForm.email exists and returns FieldState<string>
+```
+
+You define your data shape once in the signal, and TypeScript automatically knows what fields exist and their types. Accessing `loginForm.username` (which doesn't exist) produces a type error.
+
+Reactive Forms requires explicit type annotations with typed forms:
+
+```ts
+const loginForm = new FormGroup({
+  email: new FormControl<string>(''),
+  password: new FormControl<string>('')
+});
+// TypeScript knows: loginForm.controls.email is FormControl<string>
+```
+
+You specify types for each control individually. TypeScript validates your form structure, but you maintain type information separately from your data model.
+
+Template-driven Forms offers minimal type safety:
+
+```ts
+email = '';
+password = '';
+// TypeScript only knows these are strings, no form-level typing
+```
+
+TypeScript understands your component properties but has no knowledge of form structure or validation. You lose compile-time checking for form operations.
+
+## Choose your approach
+
+### Use Signal Forms if:
+
+- You're building new signal-based applications (Angular v21+)
+- You want type safety inferred from your model structure
+- You're comfortable working with experimental features
+- Schema-based validation appeals to you
+- Your team is familiar with signals
+
+### Use Reactive Forms if:
+
+- You need production-ready stability
+- You're building complex, dynamic forms
+- You prefer observable-based patterns
+- You need fine-grained control over form state
+- You're working on an existing reactive forms codebase
+
+### Use Template-driven Forms if:
+
+- You're building simple forms (login, contact, search)
+- You're doing rapid prototyping
+- Your form logic is straightforward
+- You prefer keeping form logic in templates
+- You're working on an existing template-driven codebase
+
+## Next steps
+
+To learn more about each approach:
+
+- **Signal Forms**: See the [Overview guide](guide/forms/signals/overview) to get started, or dive into [Form Models](guide/forms/signals/models), [Validation](guide/forms/signals/validation), and [Field State Management](guide/forms/signals/field-state-management)
+- **Reactive Forms**: See the [Reactive Forms guide](guide/forms/reactive-forms) in Angular documentation
+- **Template-driven Forms**: See the [Template-driven Forms guide](guide/forms/template-driven-forms) in Angular documentation
diff --git a/adev-es/src/content/guide/forms/signals/custom-controls.md b/adev-es/src/content/guide/forms/signals/custom-controls.md
new file mode 100644
index 0000000..1ce7026
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/custom-controls.md
@@ -0,0 +1,428 @@
+# Custom Controls
+
+NOTE: This guide assumes familiarity with [Signal Forms essentials](essentials/signal-forms).
+
+The browser's built-in form controls (like input, select, textarea) handle common cases, but applications often need specialized inputs. A date picker with calendar UI, a rich text editor with formatting toolbar, or a tag selector with autocomplete all require custom implementations.
+
+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 `[field]` directive automatically connects your control to form state, validation, and data binding.
+
+## Creating a basic custom control
+
+Let's start with a minimal implementation and add features as needed.
+
+### Minimal input control
+
+A basic custom input only needs to implement the `FormValueControl` interface and define the required `value` model signal.
+
+```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 as HTMLInputElement).value)"
+        placeholder="Enter text..."
+      />
+    </div>
+  `,
+})
+export class BasicInput implements FormValueControl<string> {
+  /** The current input value */
+  value = model('');
+}
+```
+
+### Minimal checkbox control
+
+A checkbox-style control needs two things:
+
+1. Implement the `FormCheckboxControl` interface so the `Field` directive will recognize it as a form control
+2. Provide a `checked` model signal
+
+```angular-ts
+import { Component, model, ChangeDetectionStrategy } from '@angular/core';
+import { FormCheckboxControl } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-basic-toggle',
+  template: `
+    <button
+      type="button"
+      [class.active]="checked()"
+      (click)="toggle()"
+    >
+      <span class="toggle-slider"></span>
+    </button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BasicToggle implements FormCheckboxControl {
+  /** Whether the toggle is checked */
+  checked = model<boolean>(false);
+
+  toggle() {
+    this.checked.update(val => !val);
+  }
+}
+```
+
+### Using your custom control
+
+Once you've created a control, you can use it anywhere you would use a built-in input by adding the `Field` directive to it:
+
+```angular-ts
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { form, Field, required } from '@angular/forms/signals';
+import { BasicInput } from './basic-input';
+import { BasicToggle } from './basic-toggle';
+
+@Component({
+  imports: [Field, BasicInput, BasicToggle],
+  template: `
+    <form>
+      <label>
+        Email
+        <app-basic-input [field]="registrationForm.email" />
+      </label>
+
+      <label>
+        Accept terms
+        <app-basic-toggle [field]="registrationForm.acceptTerms" />
+      </label>
+
+      <button
+        type="submit"
+        [disabled]="registrationForm().invalid()"
+      >
+        Register
+      </button>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Registration {
+  registrationModel = signal({
+    email: '',
+    acceptTerms: false
+  });
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    required(schemaPath.email, { message: 'Email is required' });
+    required(schemaPath.acceptTerms, { message: 'You must accept the terms' });
+  });
+}
+```
+
+NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like.
+
+The `[field]` directive works identically for custom controls and built-in inputs. Signal Forms treats them the same - validation runs, state updates, and data binding works automatically.
+
+## Understanding control interfaces
+
+Now that you've seen custom controls in action, let's explore how they integrate with Signal Forms.
+
+### Control interfaces
+
+The `BasicInput` and `BasicToggle` components you created implement specific control interfaces that tell Signal Forms how to interact with them.
+
+#### FormValueControl
+
+`FormValueControl` is the interface for most input types - text inputs, number inputs, date pickers, select dropdowns, and any control that edits a single value. When your component implements this interface:
+
+- **Required property**: Your component must provide a `value` model signal
+- **What the Field directive does**: Binds the form field's value to your control's `value` signal
+
+IMPORTANT: Controls implementing `FormValueControl` must NOT have a `checked` property
+
+#### FormCheckboxControl
+
+`FormCheckboxControl` is the interface for checkbox-like controls - toggles, switches, and any control that represents a boolean on/off state. When your component implements this interface:
+
+- **Required property**: Your component must provide a `checked` model signal
+- **What the Field directive does**: Binds the form field's value to your control's `checked` signal
+
+IMPORTANT: Controls implementing `FormCheckboxControl` must NOT have a `value` property
+
+### Optional state properties
+
+Both `FormValueControl` and `FormCheckboxControl` extend `FormUiControl` - a base interface that provides optional properties for integrating with form state.
+
+All properties are optional. Implement only what your control needs.
+
+#### Interaction state
+
+Track when users interact with your control:
+
+| Property  | Purpose                                          |
+| --------- | ------------------------------------------------ |
+| `touched` | Whether the user has interacted with the field   |
+| `dirty`   | Whether the value differs from its initial state |
+
+#### Validation state
+
+Display validation feedback to users:
+
+| Property  | Purpose                                 |
+| --------- | --------------------------------------- |
+| `errors`  | Array of current validation errors      |
+| `valid`   | Whether the field is valid              |
+| `invalid` | Whether the field has validation errors |
+| `pending` | Whether async validation is in progress |
+
+#### Availability state
+
+Control whether users can interact with your field:
+
+| Property          | Purpose                                                  |
+| ----------------- | -------------------------------------------------------- |
+| `disabled`        | Whether the field is disabled                            |
+| `disabledReasons` | Reasons why the field is disabled                        |
+| `readonly`        | Whether the field is readonly (visible but not editable) |
+| `hidden`          | Whether the field is hidden from view                    |
+
+NOTE: `disabledReasons` is an array of `DisabledReason` objects. Each object has a `field` property (reference to the field tree) and an optional `message` property. Access the message via `reason.message`.
+
+#### Validation constraints
+
+Receive validation constraint values from the form:
+
+| Property    | Purpose                                              |
+| ----------- | ---------------------------------------------------- |
+| `required`  | Whether the field is required                        |
+| `min`       | Minimum numeric value (`undefined` if no constraint) |
+| `max`       | Maximum numeric value (`undefined` if no constraint) |
+| `minLength` | Minimum string length (undefined if no constraint)   |
+| `maxLength` | Maximum string length (undefined if no constraint)   |
+| `pattern`   | Array of regular expression patterns to match        |
+
+#### Field metadata
+
+| Property | Purpose                                                            |
+| -------- | ------------------------------------------------------------------ |
+| `name`   | The field's name attribute (which is unique across forms and apps) |
+
+The "[Adding state signals](#adding-state-signals)" section below shows how to implement these properties in your controls.
+
+### How the Field directive works
+
+The `[field]` directive detects which interface your control implements and automatically binds the appropriate signals:
+
+```angular-ts
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { form, Field, required } from '@angular/forms/signals';
+import { CustomInput } from './custom-input';
+import { CustomToggle } from './custom-toggle';
+
+@Component({
+  selector: 'app-my-form',
+  imports: [Field, CustomInput, CustomToggle],
+  template: `
+    <form>
+      <app-custom-input [field]="userForm.username" />
+      <app-custom-toggle [field]="userForm.subscribe" />
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyForm {
+  formModel = signal({
+    username: '',
+    subscribe: false
+  });
+
+  userForm = form(this.formModel, (schemaPath) => {
+    required(schemaPath.username, { message: 'Username is required' });
+  });
+}
+```
+
+TIP: For complete coverage of creating and managing form models, see the [Form Models guide](guide/forms/signals/models).
+
+When you bind `[field]="userForm.username"`, the Field directive:
+
+1. Detects your control implements `FormValueControl`
+2. Internally accesses `userForm.username().value()` and binds it to your control's `value` model signal
+3. Binds form state signals (`disabled()`, `errors()`, etc.) to your control's optional input signals
+4. Updates occur automatically through signal reactivity
+
+## Adding state signals
+
+The minimal controls shown above work, but they don't respond to form state. You can add optional input signals to make your controls react to disabled state, display validation errors, and track user interaction.
+
+Here's a comprehensive example that implements common state properties:
+
+```angular-ts
+import { Component, model, input, ChangeDetectionStrategy } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import type { ValidationError, DisabledReason } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-stateful-input',
+  template: `
+    @if (!hidden()) {
+      <div class="input-container">
+        <input
+          type="text"
+          [value]="value()"
+          (input)="value.set(($event.target as HTMLInputElement).value)"
+          [disabled]="disabled()"
+          [readonly]="readonly()"
+          [class.invalid]="invalid()"
+          [attr.aria-invalid]="invalid()"
+          (blur)="touched.set(true)"
+        />
+
+        @if (invalid()) {
+          <div class="error-messages" role="alert">
+            @for (error of errors(); track error) {
+              <span class="error">{{ error.message }}</span>
+            }
+          </div>
+        }
+
+        @if (disabled() && disabledReasons().length > 0) {
+          <div class="disabled-reasons">
+            @for (reason of disabledReasons(); track reason) {
+              <span>{{ reason.message }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StatefulInput implements FormValueControl<string> {
+  // Required
+  value = model<string>('');
+
+  // Writable interaction state - control updates these
+  touched = model<boolean>(false);
+
+  // Read-only state - form system manages these
+  disabled = input<boolean>(false);
+  disabledReasons = input<readonly DisabledReason[]>([]);
+  readonly = input<boolean>(false);
+  hidden = input<boolean>(false);
+  invalid = input<boolean>(false);
+  errors = input<readonly ValidationError.WithField[]>([]);
+}
+```
+
+As a result, you can use the control with validation and state management:
+
+```angular-ts
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { form, Field, required, email } from '@angular/forms/signals';
+import { StatefulInput } from './stateful-input';
+
+@Component({
+  imports: [Field, StatefulInput],
+  template: `
+    <form>
+      <label>
+        Email
+        <app-stateful-input [field]="loginForm.email" />
+      </label>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Login {
+  loginModel = signal({ email: '' });
+
+  loginForm = form(this.loginModel, (schemaPath) => {
+    required(schemaPath.email, { message: 'Email is required' });
+    email(schemaPath.email, { message: 'Enter a valid email address' });
+  });
+}
+```
+
+When the user types an invalid email, the Field directive automatically updates `invalid()` and `errors()`. Your control can display the validation feedback.
+
+### Signal types for state properties
+
+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.
+
+## Value transformation
+
+Controls sometimes display values differently than the form model stores them - a date picker might display "January 15, 2024" while storing "2024-01-15", or a currency input might show "$1,234.56" while storing 1234.56.
+
+Use `computed()` signals (from `@angular/core`) to transform the model value for display, and handle input events to parse user input back to the storage format:
+
+```angular-ts
+import { Component, model, computed, ChangeDetectionStrategy } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-currency-input',
+  template: `
+    <input
+      type="text"
+      [value]="displayValue()"
+      (input)="handleInput(($event.target as HTMLInputElement).value)"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CurrencyInput implements FormValueControl<number> {
+  value = model<number>(0);  // Stores numeric value (1234.56)
+
+  displayValue = computed(() => {
+    return this.value().toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); // Shows "1,234.56"
+  });
+
+  handleInput(input: string) {
+    const num = parseFloat(input.replace(/[^0-9.]/g, ''));
+    if (!isNaN(num)) this.value.set(num);
+  }
+}
+```
+
+## Validation integration
+
+Controls display validation state but don't perform validation. Validation happens in the form schema - your control receives `invalid()` and `errors()` signals from the Field directive and displays them (as shown in the StatefulInput example above).
+
+The Field directive also passes validation constraint values like `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern`. Your control can use these to enhance the UI:
+
+```ts
+export class NumberInput implements FormValueControl<number> {
+  value = model<number>(0);
+
+  // Constraint values from schema validation rules
+  required = input<boolean>(false);
+  min = input<number | undefined>(undefined);
+  max = input<number | undefined>(undefined);
+}
+```
+
+When you add `min()` and `max()` validation rules to the schema, the Field directive passes these values to your control. Use them to apply HTML5 attributes or show constraint hints in your template.
+
+IMPORTANT: Don't implement validation logic in your control. Define validation rules in the form schema and let your control display the results:
+
+```typescript
+// Avoid: Validation in control
+export class BadControl implements FormValueControl<string> {
+  value = model<string>('')
+  isValid() { return this.value().length >= 8 } // Don't do this!
+}
+
+// Good: Validation in schema, control displays results
+accountForm = form(this.accountModel, schemaPath => {
+  minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
+})
+```
+
+## Next steps
+
+This guide covered building custom controls that integrate with Signal Forms. Related guides explore other aspects of Signal Forms:
+
+- [Form Models guide](guide/forms/signals/models) - Creating and updating form models
+  <!-- TODO: Uncomment when guides are available -->
+  <!-- - [Field State Management guide](guide/forms/signals/field-state-management) - Using form state signals -->
+  <!-- - [Validation guide](guide/forms/signals/validation) - Adding validation to your forms -->
diff --git a/adev-es/src/content/guide/forms/signals/field-state-management.md b/adev-es/src/content/guide/forms/signals/field-state-management.md
new file mode 100644
index 0000000..be707bd
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/field-state-management.md
@@ -0,0 +1,695 @@
+# Field state management
+
+Signal Forms' field state allows you to react to user interactions by providing reactive signals for validation status (such as `valid`, `invalid`, `errors`), interaction tracking (such as `touched`, `dirty`), and availability (such as `disabled`, `hidden`).
+
+## Understanding field state
+
+When you create a form with the `form()` function, it returns a **field tree** - an object structure that mirrors your form model. Each field in the tree is accessible via dot notation (like `form.email`).
+
+### Accessing field state
+
+When you call any field in the field tree as a function (like `form.email()`), it returns a `FieldState` object containing reactive signals that track the field's validation, interaction, and availability state. For example, the `invalid()` signal tells you whether the field has validation errors:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, required, email } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-registration',
+  imports: [Field],
+  template: `
+    <input type="email" [field]="registrationForm.email" />
+
+    @if (registrationForm.email().invalid()) {
+      <p class="error">Email has validation errors:</p>
+      <ul>
+        @for (error of registrationForm.email().errors(); track error) {
+          <li>{{ error.message }}</li>
+        }
+      </ul>
+    }
+  `
+})
+export class Registration {
+  registrationModel = signal({
+    email: '',
+    password: ''
+  })
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    required(schemaPath.email, { message: 'Email is required' })
+    email(schemaPath.email, { message: 'Enter a valid email address' })
+  })
+}
+```
+
+In this example, the template checks `registrationForm.email().invalid()` to determine whether to display an error message.
+
+### Field state signals
+
+The most commonly used signal is `value()`, a [writable signal](guide/forms/signals/models#updating-models) that provides access to the field's current value:
+
+```ts
+const emailValue = registrationForm.email().value()
+console.log(emailValue) // Current email string
+```
+
+Beyond `value()`, field state includes signals for validation, interaction tracking, and availability control:
+
+| Category                                | Signal       | Description                                                                       |
+| --------------------------------------- | ------------ | --------------------------------------------------------------------------------- |
+| **[Validation](#validation-state)**     | `valid()`    | Field passes all validation rules and has no pending validators                   |
+|                                         | `invalid()`  | Field has validation errors                                                       |
+|                                         | `errors()`   | Array of validation error objects                                                 |
+|                                         | `pending()`  | Async validation in progress                                                      |
+| **[Interaction](#interaction-state)**   | `touched()`  | User has focused and blurred the field (if interactive)                           |
+|                                         | `dirty()`    | User has modified the field (if interactive), even if value matches initial state |
+| **[Availability](#availability-state)** | `disabled()` | Field is disabled and doesn't affect parent form state                            |
+|                                         | `hidden()`   | Indicates field should be hidden; visibility in template is controlled with `@if` |
+|                                         | `readonly()` | Field is readonly and doesn't affect parent form state                            |
+
+These signals enable you to build responsive form user experiences that react to user behavior. The sections below explore each category in detail.
+
+## Validation state
+
+Validation state signals tell you whether a field is valid and what errors it contains.
+
+NOTE: This guide focuses on **using** validation state in your templates and logic (such as reading `valid()`, `invalid()`, `errors()` to display feedback). For information on **defining** validation rules and creating custom validators, see the Validation guide (coming soon).
+
+### Checking validity
+
+Use `valid()` and `invalid()` to check validation status:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="email" [field]="loginForm.email" />
+
+    @if (loginForm.email().invalid()) {
+      <p class="error">Email is invalid</p>
+    } @if (loginForm.email().valid()) {
+      <p class="success">Email looks good</p>
+    }
+  `
+})
+export class Login {
+  loginModel = signal({ email: '', password: '' })
+  loginForm = form(this.loginModel)
+}
+```
+
+| Signal      | Returns `true` when                                             |
+| ----------- | --------------------------------------------------------------- |
+| `valid()`   | Field passes all validation rules and has no pending validators |
+| `invalid()` | Field has validation errors                                     |
+
+When checking validity in code, use `invalid()` instead of `!valid()` if you want to distinguish between "has errors" and "validation pending." The reason for this is that both `valid()` and `invalid()` can be `false` simultaneously when async validation is pending because the field isn't valid yet since validation not complete and is also isn't invalid since no errors have been found yet.
+
+### Reading validation errors
+
+Access the array of validation errors with `errors()`. Each error object contains:
+
+| Property  | Description                                                     |
+| --------- | --------------------------------------------------------------- |
+| `kind`    | The validation rule that failed (such as "required" or "email") |
+| `message` | Optional human-readable error message                           |
+| `field`   | Reference to the `FieldTree` where the error occurred           |
+
+NOTE: The `message` property is optional. Validators can provide custom error messages, but if not specified, you may need to map error `kind` values to your own messages.
+
+Here's an example of how to display errors in your template:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="email" [field]="loginForm.email" />
+
+    @if (loginForm.email().errors().length > 0) {
+      <div class="errors">
+        @for (error of loginForm.email().errors(); track error) {
+          <p>{{ error.message }}</p>
+        }
+      </div>
+    }
+  `
+})
+```
+
+This approach loops through all errors for a field, displaying each error message to the user.
+
+### Pending validation
+
+The `pending()` signal indicates async validation is in progress:
+
+```angular-ts
+@Component({
+  template: `
+    <input type="email" [field]="signupForm.email" />
+
+    @if (signupForm.email().pending()) {
+      <p>Checking if email is available...</p>
+    }
+
+    @if (signupForm.email().invalid() && !signupForm.email().pending()) {
+      <p>Email is already taken</p>
+    }
+  `
+})
+```
+
+This signal enables you to show loading states while async validation executes.
+
+## Interaction state
+
+Interaction state tracks whether users have interacted with fields, enabling patterns like "show errors only after the user has touched a field."
+
+### 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.
+
+### Dirty state
+
+Forms often need to detect whether data has actually changed - for example, to warn users about unsaved changes or to enable a save button only when necessary. The `dirty()` signal tracks whether the user has modified the field.
+
+The `dirty()` signal becomes `true` when the user modifies an interactive field's value, and remains `true` even if the value is changed back to match the initial value:
+
+```angular-ts
+@Component({
+  template: `
+    <form>
+      <input [field]="profileForm.name" />
+      <input [field]="profileForm.bio" />
+
+      @if (profileForm().dirty()) {
+        <p class="warning">You have unsaved changes</p>
+      }
+    </form>
+  `
+})
+export class Profile {
+  profileModel = signal({ name: 'Alice', bio: 'Developer' })
+  profileForm = form(this.profileModel)
+}
+```
+
+Use `dirty()` for "unsaved changes" warnings or to enable save buttons only when data has changed.
+
+### Touched vs dirty
+
+These signals track different user interactions:
+
+| Signal      | When it becomes true                                                                                                            |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `touched()` | User has focused and blurred an interactive field (even if they didn't change anything)                                         |
+| `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:
+
+| State                  | Scenario                                                  |
+| ---------------------- | --------------------------------------------------------- |
+| Touched but not dirty  | User focused and blurred the field but made no changes    |
+| Both touched and dirty | User focused the field, changed the value, and blurred it |
+
+NOTE: Hidden, disabled, and readonly fields are non-interactive - they don't become touched or dirty from user interactions.
+
+## Availability state
+
+Availability state signals control whether fields are interactive, editable, or visible. Disabled, hidden, and readonly fields are non-interactive. They don't affect whether their parent form is valid, touched, or dirty.
+
+### Disabled fields
+
+The `disabled()` signal indicates whether a field accepts user input. Disabled fields appear in the UI but users cannot interact with them.
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, disabled } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-order',
+  imports: [Field],
+  template: `
+    <!-- TIP: The `[field]` directive automatically binds the `disabled` attribute based on the field's `disabled()` state, so you don't need to manually add `[disabled]="field().disabled()"` -->
+    <input [field]="orderForm.couponCode" />
+
+    @if (orderForm.couponCode().disabled()) {
+      <p class="info">Coupon code is only available for orders over $50</p>
+    }
+  `
+})
+export class Order {
+  orderModel = signal({
+    total: 25,
+    couponCode: ''
+  })
+
+  orderForm = form(this.orderModel, schemaPath => {
+    disabled(schemaPath.couponCode, ({valueOf}) => valueOf(schemaPath.total) < 50)
+  })
+}
+```
+
+In this example, we use `valueOf(schemaPath.total)` to check the value of the `total` field to determine whether `couponCode` should be disabled.
+
+NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like.
+
+When defining rules like `disabled()`, `hidden()`, or `readonly()`, the logic callback receives a `FieldContext` object that is typically destructured (such as `({valueOf})`). Two methods commonly used in validation rules are:
+
+- `valueOf(schemaPath.otherField)` - Read the value of another field in the form
+- `value()` - A signal containing the value of the field the rule is applied to
+
+Disabled fields don't contribute to the parent form's validation state. Even if a disabled field would be invalid, the parent form can still be valid. The `disabled()` state affects interactivity and validation, but does not change the field's value.
+
+### Hidden fields
+
+The `hidden()` signal indicates whether a field is conditionally hidden. Use `hidden()` with `@if` to show or hide fields based on conditions:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, hidden } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-profile',
+  imports: [Field],
+  template: `
+    <label>
+      <input type="checkbox" [field]="profileForm.isPublic" />
+      Make profile public
+    </label>
+
+    @if (!profileForm.publicUrl().hidden()) {
+      <label>
+        Public URL
+        <input [field]="profileForm.publicUrl" />
+      </label>
+    }
+  `
+})
+export class Profile {
+  profileModel = signal({
+    isPublic: false,
+    publicUrl: ''
+  })
+
+  profileForm = form(this.profileModel, schemaPath => {
+    hidden(schemaPath.publicUrl, ({valueOf}) => !valueOf(schemaPath.isPublic))
+  })
+}
+```
+
+Hidden fields don't participate in validation. If a required field is hidden, it won't prevent form submission. The `hidden()` state affects availability and validation, but does not change the field's value.
+
+### Readonly fields
+
+The `readonly()` signal indicates whether a field is readonly. Readonly fields display their value but users cannot edit them:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, readonly } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-account',
+  imports: [Field],
+  template: `
+    <label>
+      Username (cannot be changed)
+      <input [field]="accountForm.username" />
+    </label>
+
+    <label>
+      Email
+      <input [field]="accountForm.email" />
+    </label>
+  `
+})
+export class Account {
+  accountModel = signal({
+    username: 'johndoe',
+    email: 'john@example.com'
+  })
+
+  accountForm = form(this.accountModel, schemaPath => {
+    readonly(schemaPath.username)
+  })
+}
+```
+
+NOTE: The `[field]` directive automatically binds the `readonly` attribute based on the field's `readonly()` state, so you don't need to manually add `[readonly]="field().readonly()"`.
+
+Like disabled and hidden fields, readonly fields are non-interactive and don't affect parent form state. The `readonly()` state affects editability and validation, but does not change the field's value.
+
+### When to use each
+
+| State        | Use when                                                            | User can see it | User can interact | Contributes to validation |
+| ------------ | ------------------------------------------------------------------- | --------------- | ----------------- | ------------------------- |
+| `disabled()` | Field temporarily unavailable (such as based on other field values) | Yes             | No                | No                        |
+| `hidden()`   | Field not relevant in current context                               | No (with @if)   | No                | No                        |
+| `readonly()` | Value should be visible but not editable                            | Yes             | No                | No                        |
+
+## Form-level state
+
+The root form is also a field in the field tree. When you call it as a function, it also returns a `FieldState` object that aggregates the state of all child fields.
+
+### Accessing form state
+
+```angular-ts
+@Component({
+  template: `
+    <form>
+      <input [field]="loginForm.email" />
+      <input [field]="loginForm.password" />
+
+      <button [disabled]="!loginForm().valid()">Sign In</button>
+    </form>
+  `
+})
+export class Login {
+  loginModel = signal({ email: '', password: '' })
+  loginForm = form(this.loginModel)
+}
+```
+
+In this example, the form is valid only when all child fields are valid. This allows you to enable/disable submit buttons based on overall form validity.
+
+### Form-level signals
+
+Because the root form is a field, it has the same signals (such as `valid()`, `invalid()`, `touched()`, `dirty()`, etc.).
+
+| Signal      | Form-level behavior                                            |
+| ----------- | -------------------------------------------------------------- |
+| `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                |
+| `dirty()`   | User has modified at least one interactive field               |
+
+### When to use form-level vs field-level
+
+**Use form-level state for:**
+
+- Submit button enabled/disabled state
+- "Save" button state
+- Overall form validity checks
+- Unsaved changes warnings
+
+**Use field-level state for:**
+
+- Individual field error messages
+- Field-specific styling
+- Per-field validation feedback
+- Conditional field availability
+
+## State propagation
+
+Field state propagates from child fields up through parent field groups to the root form.
+
+### How child state affects parent forms
+
+When a child field becomes invalid, its parent field group becomes invalid, and so does the root form. When a child becomes touched or dirty, the parent field group and root form reflect that change. This aggregation allows you to check validity at any level - field or entire form.
+
+```ts
+const userModel = signal({
+  profile: {
+    firstName: '',
+    lastName: ''
+  },
+  address: {
+    street: '',
+    city: ''
+  }
+})
+
+const userForm = form(userModel)
+
+// If firstName is invalid, profile is invalid
+userForm.profile.firstName().invalid() === true
+// → userForm.profile().invalid() === true
+// → userForm().invalid() === true
+```
+
+### Hidden, disabled, and readonly fields
+
+Hidden, disabled, and readonly fields are non-interactive and don't affect parent form state:
+
+```ts
+const orderModel = signal({
+  customerName: '',
+  requiresShipping: false,
+  shippingAddress: ''
+})
+
+const orderForm = form(orderModel, schemaPath => {
+  hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping))
+})
+```
+
+In this example, when `shippingAddress` is hidden, it doesn't affect form validity. As a result, even if `shippingAddress` is empty and required, the form can be valid.
+
+This behavior prevents hidden, disabled, or readonly fields from blocking form submission or affecting validation, touched, and dirty state.
+
+## Using state in templates
+
+Field state signals integrate seamlessly with Angular templates, enabling reactive form user experiences without manual event handling.
+
+### Conditional error display
+
+Show errors only after a user has interacted with a field:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, email } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-signup',
+  imports: [Field],
+  template: `
+    <label>
+      Email
+      <input type="email" [field]="signupForm.email" />
+    </label>
+
+    @if (signupForm.email().touched() && signupForm.email().invalid()) {
+      <p class="error">{{ signupForm.email().errors()[0].message }}</p>
+    }
+  `
+})
+export class Signup {
+  signupModel = signal({ email: '', password: '' })
+
+  signupForm = form(this.signupModel, schemaPath => {
+    email(schemaPath.email)
+  })
+}
+```
+
+This pattern prevents showing errors before users have had a chance to interact with the field. Errors appear only after the user has focused and then left the field.
+
+### Conditional field availability
+
+Use the `hidden()` signal with `@if` to show or hide fields conditionally:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, hidden } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-order',
+  imports: [Field],
+  template: `
+    <label>
+      <input type="checkbox" [field]="orderForm.requiresShipping" />
+      Requires shipping
+    </label>
+
+    @if (!orderForm.shippingAddress().hidden()) {
+      <label>
+        Shipping Address
+        <input [field]="orderForm.shippingAddress" />
+      </label>
+    }
+  `
+})
+export class Order {
+  orderModel = signal({
+    requiresShipping: false,
+    shippingAddress: ''
+  })
+
+  orderForm = form(this.orderModel, schemaPath => {
+    hidden(schemaPath.shippingAddress, ({valueOf}) => !valueOf(schemaPath.requiresShipping))
+  })
+}
+```
+
+Hidden fields don't participate in validation, allowing the form to be submitted even if the hidden field would otherwise be invalid.
+
+## Using field state in component logic
+
+Field state signals work with Angular's reactive primitives like `computed()` and `effect()` for advanced form logic.
+
+### Validation checks before submission
+
+Check form validity in component methods:
+
+```ts
+export class Registration {
+  registrationModel = signal({
+    username: '',
+    email: '',
+    password: ''
+  })
+
+  registrationForm = form(this.registrationModel)
+
+  async onSubmit() {
+    // Wait for any pending async validation
+    if (this.registrationForm().pending()) {
+      console.log('Waiting for validation...')
+      return
+    }
+
+    // Guard against invalid submissions
+    if (this.registrationForm().invalid()) {
+      console.error('Form is invalid')
+      return
+    }
+
+    const data = this.registrationModel()
+    await this.api.register(data)
+  }
+}
+```
+
+This ensures only valid, fully-validated data reaches your API.
+
+### Derived state with computed
+
+Create computed signals based on field state to automatically update when the underlying field state changes:
+
+```ts
+export class Password {
+  passwordModel = signal({ password: '', confirmPassword: '' })
+  passwordForm = form(this.passwordModel)
+
+  // Compute password strength indicator
+  passwordStrength = computed(() => {
+    const password = this.passwordForm.password().value()
+    if (password.length < 8) return 'weak'
+    if (password.length < 12) return 'medium'
+    return 'strong'
+  })
+
+  // Check if all required fields are filled
+  allFieldsFilled = computed(() => {
+    return (
+      this.passwordForm.password().value().length > 0 &&
+      this.passwordForm.confirmPassword().value().length > 0
+    )
+  })
+}
+```
+
+### Programmatic state changes
+
+While field state typically updates through user interactions (typing, focusing, blurring), you sometimes need to control it programmatically. Common scenarios include form submission and resetting forms.
+
+#### Form submission
+
+When a user submits a form, use the `submit()` function to handle validation and reveal errors:
+
+```ts
+import { Component, signal } from '@angular/core'
+import { form, submit, required, email } from '@angular/forms/signals'
+
+export class Registration {
+  registrationModel = signal({ username: '', email: '', password: '' })
+
+  registrationForm = form(this.registrationModel, schemaPath => {
+    required(schemaPath.username)
+    email(schemaPath.email)
+    required(schemaPath.password)
+  })
+
+  onSubmit() {
+    submit(this.registrationForm, () => {
+      this.submitToServer()
+    })
+  }
+
+  submitToServer() {
+    // Send data to server
+  }
+}
+```
+
+The `submit()` function automatically marks all fields as touched (revealing validation errors) and only executes your callback if the form is valid.
+
+#### Resetting forms after submission
+
+After successfully submitting a form, you may want to return it to its initial state - clearing both user interaction history and field values. The `reset()` method clears the touched and dirty flags but doesn't change field values, so you need to update your model separately:
+
+```ts
+export class Contact {
+  contactModel = signal({ name: '', email: '', message: '' })
+  contactForm = form(this.contactModel)
+
+  async onSubmit() {
+    if (!this.contactForm().valid()) return
+
+    await this.api.sendMessage(this.contactModel())
+
+    // Clear interaction state (touched, dirty)
+    this.contactForm().reset()
+
+    // Clear values
+    this.contactModel.set({ name: '', email: '', message: '' })
+  }
+}
+```
+
+This two-step reset ensures the form is ready for new input without showing stale error messages or dirty state indicators.
+
+## Styling based on validation state
+
+You can apply custom styles to your form by binding CSS classes based on the validation state:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, email } from '@angular/forms/signals'
+
+@Component({
+  template: `
+    <input
+      type="email"
+      [field]="form.email"
+      [class.is-invalid]="form.email().touched() && form.email().invalid()"
+      [class.is-valid]="form.email().touched() && form.email().valid()"
+    />
+  `,
+  styles: `
+    input.is-invalid {
+      border: 2px solid red;
+      background-color: white;
+    }
+
+    input.is-valid {
+      border: 2px solid green;
+    }
+  `
+})
+export class StyleExample {
+  model = signal({ email: '' })
+
+  form = form(this.model, schemaPath => {
+    email(schemaPath.email)
+  })
+}
+```
+
+Checking both `touched()` and validation state ensures styles only appear after the user has interacted with the field.
+
+## Next steps
+
+Here are other related guides on Signal Forms:
+
+- [Form Models guide](guide/forms/signals/models) - Creating models and updating values
+- Validation guide - Defining validation rules and custom validators (coming soon)
diff --git a/adev-es/src/content/guide/forms/signals/models.md b/adev-es/src/content/guide/forms/signals/models.md
new file mode 100644
index 0000000..64cd1da
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/models.md
@@ -0,0 +1,536 @@
+# Form models
+
+Form models are the foundation of Signal Forms, serving as the single source of truth for your form data. This guide explores how to create form models, update them, and design them for maintainability.
+
+NOTE: Form models are distinct from Angular's `model()` signal used for component two-way binding. A form model is a writable signal that stores form data, while `model()` creates inputs/outputs for parent/child component communication.
+
+## What form models solve
+
+Forms require managing data that changes over time. Without a clear structure, this data can become scattered across component properties, making it difficult to track changes, validate input, or submit data to a server.
+
+Form models solve this by centralizing form data in a single writable signal. When the model updates, the form automatically reflects those changes. When users interact with the form, the model updates accordingly.
+
+## Creating models
+
+A form model is a writable signal created with Angular's `signal()` function. The signal holds an object that represents your form's data structure.
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-login',
+  imports: [Field],
+  template: `
+    <input type="email" [field]="loginForm.email" />
+    <input type="password" [field]="loginForm.password" />
+  `
+})
+export class LoginComponent {
+  loginModel = signal({
+    email: '',
+    password: ''
+  })
+
+  loginForm = form(this.loginModel)
+}
+```
+
+The `form()` function accepts the model signal and creates a **field tree** - a special object structure that mirrors your model's shape. The field tree is both navigable (access child fields with dot notation like `loginForm.email`) and callable (call a field as a function to access its state).
+
+The `[field]` directive binds each input element to its corresponding field in the field tree, enabling automatic two-way synchronization between the UI and model.
+
+### Using TypeScript types
+
+While TypeScript infers types from object literals, defining explicit types improves code quality and provides better IntelliSense support.
+
+```ts
+interface LoginData {
+  email: string
+  password: string
+}
+
+export class LoginComponent {
+  loginModel = signal<LoginData>({
+    email: '',
+    password: ''
+  })
+
+  loginForm = form(this.loginModel)
+}
+```
+
+With explicit types, the field tree provides full type safety. Accessing `loginForm.email` is typed as `FieldTree<string>`, and attempting to access a non-existent property results in a compile-time error.
+
+```ts
+// TypeScript knows this is FieldTree<string>
+const emailField = loginForm.email
+
+// TypeScript error: Property 'username' does not exist
+const usernameField = loginForm.username
+```
+
+### Initializing all fields
+
+Form models should provide initial values for all fields you want to include in the field tree.
+
+```ts
+// Good: All fields initialized
+const userModel = signal({
+  name: '',
+  email: '',
+  age: 0
+})
+
+// Avoid: Missing initial value
+const userModel = signal({
+  name: '',
+  email: ''
+  // age field is not defined - cannot access userForm.age
+})
+```
+
+For optional fields, explicitly set them to `null` or an empty value:
+
+```ts
+interface UserData {
+  name: string
+  email: string
+  phoneNumber: string | null
+}
+
+const userModel = signal<UserData>({
+  name: '',
+  email: '',
+  phoneNumber: null
+})
+```
+
+Fields set to `undefined` are excluded from the field tree. A model with `{value: undefined}` behaves identically to `{}` - accessing the field returns `undefined` rather than a `FieldTree`.
+
+### Dynamic field addition
+
+You can dynamically add fields by updating the model with new properties. The field tree automatically updates to include new fields when they appear in the model value.
+
+```ts
+// Start with just email
+const model = signal({ email: '' })
+const myForm = form(model)
+
+// Later, add a password field
+model.update(current => ({ ...current, password: '' }))
+// myForm.password is now available
+```
+
+This pattern is useful when fields become relevant based on user choices or loaded data.
+
+## Reading model values
+
+You can access form values in two ways: directly from the model signal, or through individual fields. Each approach serves a different purpose.
+
+### Reading from the model
+
+Access the model signal when you need the complete form data, such as during form submission:
+
+```ts
+onSubmit() {
+  const formData = this.loginModel();
+  console.log(formData.email, formData.password);
+
+  // Send to server
+  await this.authService.login(formData);
+}
+```
+
+The model signal returns the entire data object, making it ideal for operations that work with the complete form state.
+
+### Reading from field state
+
+Each field in the field tree is a function. Calling a field returns a `FieldState` object containing reactive signals for the field's value, validation status, and interaction state.
+
+Access field state when working with individual fields in templates or reactive computations:
+
+```angular-ts
+@Component({
+  template: `
+    <p>Current email: {{ loginForm.email().value() }}</p>
+    <p>Password length: {{ passwordLength() }}</p>
+  `
+})
+export class LoginComponent {
+  loginModel = signal({ email: '', password: '' })
+  loginForm = form(this.loginModel)
+
+  passwordLength = computed(() => {
+    return this.loginForm.password().value().length
+  })
+}
+```
+
+Field state provides reactive signals for each field's value, making it suitable for displaying field-specific information or creating derived state.
+
+TIP: Field state includes many more signals beyond `value()`, such as validation state (e.g., valid, invalid, errors), interaction tracking (e.g., touched, dirty), and visibility (e.g., hidden, disabled).
+
+<!-- TODO: UNCOMMENT BELOW WHEN GUIDE IS AVAILABLE -->
+<!-- See the [Field State Management guide](guide/forms/signals/field-state-management) for complete coverage. -->
+
+## Updating form models programmatically
+
+Form models update through programmatic mechanisms:
+
+1. [Replace the entire form model](#replacing-form-models-with-set) with `set()`
+2. [Update one or more fields](#update-one-or-more-fields-with-update) with `update()`
+3. [Update a single field directly](#update-a-single-field-directly-with-set) through field state
+
+### Replacing form models with `set()`
+
+Use `set()` on the form model to replace the entire value:
+
+```ts
+loadUserData() {
+  this.userModel.set({
+    name: 'Alice',
+    email: 'alice@example.com',
+    age: 30,
+  });
+}
+
+resetForm() {
+  this.userModel.set({
+    name: '',
+    email: '',
+    age: 0,
+  });
+}
+```
+
+This approach works well when loading data from an API or resetting the entire form.
+
+### Update one or more fields with `update()`
+
+Use `update()` to modify specific fields while preserving others:
+
+```ts
+updateEmail(newEmail: string) {
+  this.userModel.update(current => ({
+    ...current,
+    email: newEmail,
+  }));
+}
+```
+
+This pattern is useful when you need to change one or more fields based on the current model state.
+
+### Update a single field directly with `set()`
+
+Use `set()` on individual field values to directly update the field state:
+
+```ts
+clearEmail() {
+  this.userForm.email().value.set('');
+}
+
+incrementAge() {
+  const currentAge = this.userForm.age().value();
+  this.userForm.age().value.set(currentAge + 1);
+}
+```
+
+These are also known as "field-level updates." They automatically propagate to the model signal and keep both in sync.
+
+### Example: Loading data from an API
+
+A common pattern involves fetching data and populating the model:
+
+```ts
+export class UserProfileComponent {
+  userModel = signal({
+    name: '',
+    email: '',
+    bio: ''
+  })
+
+  userForm = form(this.userModel)
+  private userService = inject(UserService)
+
+  ngOnInit() {
+    this.loadUserProfile()
+  }
+
+  async loadUserProfile() {
+    const userData = await this.userService.getUserProfile()
+    this.userModel.set(userData)
+  }
+}
+```
+
+The form fields automatically update when the model changes, displaying the fetched data without additional code.
+
+## Two-way data binding
+
+The `[field]` directive creates automatic two-way synchronization between the model, form state, and UI.
+
+### How data flows
+
+Changes flow bidirectionally:
+
+**User input → Model:**
+
+1. User types in an input element
+2. The `[field]` directive detects the change
+3. Field state updates
+4. Model signal updates
+
+**Programmatic update → UI:**
+
+1. Code updates the model with `set()` or `update()`
+2. Model signal notifies subscribers
+3. Field state updates
+4. The `[field]` directive updates the input element
+
+This synchronization happens automatically. You don't write subscriptions or event handlers to keep the model and UI in sync.
+
+### Example: Both directions
+
+```angular-ts
+@Component({
+  template: `
+    <input type="text" [field]="userForm.name" />
+    <button (click)="setName('Bob')">Set Name to Bob</button>
+    <p>Current name: {{ userModel().name }}</p>
+  `
+})
+export class UserComponent {
+  userModel = signal({ name: '' })
+  userForm = form(this.userModel)
+
+  setName(name: string) {
+    this.userModel.update(current => ({ ...current, name }))
+    // Input automatically displays 'Bob'
+  }
+}
+```
+
+When the user types in the input, `userModel().name` updates. When the button is clicked, the input value changes to "Bob". No manual synchronization code is required.
+
+## Model structure patterns
+
+Form models can be flat objects or contain nested objects and arrays. The structure you choose affects how you access fields and organize validation.
+
+### Flat vs nested models
+
+Flat form models keep all fields at the top level:
+
+```ts
+// Flat structure
+const userModel = signal({
+  name: '',
+  email: '',
+  street: '',
+  city: '',
+  state: '',
+  zip: ''
+})
+```
+
+Nested models group related fields:
+
+```ts
+// Nested structure
+const userModel = signal({
+  name: '',
+  email: '',
+  address: {
+    street: '',
+    city: '',
+    state: '',
+    zip: ''
+  }
+})
+```
+
+**Use flat structures when:**
+
+- Fields don't have clear conceptual groupings
+- You want simpler field access (`userForm.city` vs `userForm.address.city`)
+- Validation rules span multiple potential groups
+
+**Use nested structures when:**
+
+- Fields form a clear conceptual group (like an address)
+- The grouped data matches your API structure
+- You want to validate the group as a unit
+
+### Working with nested objects
+
+You can access nested fields by following the object path:
+
+```ts
+const userModel = signal({
+  profile: {
+    firstName: '',
+    lastName: ''
+  },
+  settings: {
+    theme: 'light',
+    notifications: true
+  }
+})
+
+const userForm = form(userModel)
+
+// Access nested fields
+userForm.profile.firstName // FieldTree<string>
+userForm.settings.theme // FieldTree<string>
+```
+
+In templates, you bind nested fields the same way as top-level fields:
+
+```angular-ts
+@Component({
+  template: `
+    <input [field]="userForm.profile.firstName" />
+    <input [field]="userForm.profile.lastName" />
+
+    <select [field]="userForm.settings.theme">
+      <option value="light">Light</option>
+      <option value="dark">Dark</option>
+    </select>
+  `,
+})
+```
+
+### Working with arrays
+
+Models can include arrays for collections of items:
+
+```ts
+const orderModel = signal({
+  customerName: '',
+  items: [{ product: '', quantity: 0, price: 0 }]
+})
+
+const orderForm = form(orderModel)
+
+// Access array items by index
+orderForm.items[0].product // FieldTree<string>
+orderForm.items[0].quantity // FieldTree<number>
+```
+
+Array items containing objects automatically receive tracking identities, which helps maintain field state even when items change position in the array. This ensures validation state and user interactions persist correctly when arrays are reordered.
+
+<!-- TBD: For dynamic arrays and complex array operations, see the [Working with arrays guide](guide/forms/signals/arrays). -->
+
+## Model design best practices
+
+Well-designed form models make forms easier to maintain and extend. Follow these patterns when designing your models.
+
+### Use specific types
+
+Always define interfaces or types for your models as shown in [Using TypeScript types](#using-typescript-types). Explicit types provide better IntelliSense, catch errors at compile time, and serve as documentation for what data the form contains.
+
+### Initialize all fields
+
+Provide initial values for every field in your model:
+
+```ts
+// Good: All fields initialized
+const taskModel = signal({
+  title: '',
+  description: '',
+  priority: 'medium',
+  completed: false
+})
+```
+
+```ts
+// Avoid: Partial initialization
+const taskModel = signal({
+  title: ''
+  // Missing description, priority, completed
+})
+```
+
+Missing initial values mean those fields won't exist in the field tree, making them inaccessible for form interactions.
+
+### Keep models focused
+
+Each model should represent a single form or a cohesive set of related data:
+
+```ts
+// Good: Focused on login
+const loginModel = signal({
+  email: '',
+  password: ''
+})
+```
+
+```ts
+// Avoid: Mixing unrelated concerns
+const appModel = signal({
+  // Login data
+  email: '',
+  password: '',
+  // User preferences
+  theme: 'light',
+  language: 'en',
+  // Shopping cart
+  cartItems: []
+})
+```
+
+Separate models for different concerns makes forms easier to understand and reuse. Create multiple forms if you're managing distinct sets of data.
+
+### Consider validation requirements
+
+Design models with validation in mind. Group fields that validate together:
+
+```ts
+// Good: Password fields grouped for comparison
+interface PasswordChangeData {
+  currentPassword: string
+  newPassword: string
+  confirmPassword: string
+}
+```
+
+This structure makes cross-field validation (like checking if `newPassword` matches `confirmPassword`) more natural.
+
+### Plan for initial state
+
+Consider whether your form starts empty or pre-populated:
+
+```ts
+// Form that starts empty (new user)
+const newUserModel = signal({
+  name: '',
+  email: '',
+});
+
+// Form that loads existing data
+const editUserModel = signal({
+  name: '',
+  email: '',
+});
+
+// Later, in ngOnInit:
+ngOnInit() {
+  this.loadExistingUser();
+}
+
+async loadExistingUser() {
+  const user = await this.userService.getUser(this.userId);
+  this.editUserModel.set(user);
+}
+```
+
+For forms that always start with existing data, you might wait to render the form until data loads in order to avoid a flash of empty fields.
+
+<!-- TODO: UNCOMMENT WHEN THE GUIDES ARE AVAILABLE -->
+<!-- ## Next steps
+
+<docs-pill-row>
+  <docs-pill href="guide/forms/signals/field-state-management" title="Field State Management" />
+  <docs-pill href="guide/forms/signals/validation" title="Validation" />
+  <docs-pill href="guide/forms/signals/arrays" title="Working with Arrays" />
+</docs-pill-row> -->
diff --git a/adev-es/src/content/guide/forms/signals/overview.md b/adev-es/src/content/guide/forms/signals/overview.md
new file mode 100644
index 0000000..73102a1
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/overview.md
@@ -0,0 +1,59 @@
+<docs-decorative-header title="Forms with Angular Signals" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
+</docs-decorative-header>
+
+CRITICAL: Signal Forms are [experimental](/reference/releases#experimental). The API may change in future releases. Avoid using experimental APIs in production applications without understanding the risks.
+
+Signal Forms is an experimental 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).
+
+## Why Signal Forms?
+
+Building forms in web applications involves managing several interconnected concerns: tracking field values, validating user input, handling error states, and keeping the UI synchronized with your data model. Managing these concerns separately creates boilerplate code and complexity.
+
+Signal Forms address these challenges by:
+
+- **Synchronizing state automatically** - Automatically syncs the form data model with bound form fields
+- **Providing type safety** - Supports fully type safe schemas & bindings between your UI controls and data model
+- **Centralizing validation logic** - Define all validation rules in one place using a validation schema
+
+Signal Forms work best in new applications built with signals. If you're working with an existing application that uses reactive forms, or if you need production stability guarantees, reactive forms remain a solid choice.
+
+<!-- TODO: UNCOMMENT SECTION BELOW WHEN AVAILABLE -->
+<!-- NOTE: If you're coming from template or reactive forms, you may be interested in our [comparison guide](guide/forms/signals/comparison). -->
+
+## Prerequisites
+
+Signal Forms require:
+
+- Angular v21 or higher
+
+## Setup
+
+Signal Forms are already included in the `@angular/forms` package. Import the necessary functions and directives from `@angular/forms/signals`:
+
+```ts
+import { form, Field, required, email } from '@angular/forms/signals'
+```
+
+The `Field` directive must be imported into any component that binds form fields to HTML inputs:
+
+```ts
+@Component({
+  // ...
+  imports: [Field],
+})
+```
+
+<!-- TODO: UNCOMMENT SECTION BELOW WHEN AVAILABLE -->
+<!-- ## Next steps
+
+To learn more about how Signal Forms work, check out the following guides:
+
+<docs-pill-row>
+  <docs-pill href="essentials/signal-forms" title="Signal forms essentials" />
+  <docs-pill href="guide/forms/signals/models" title="Form models" />
+  <docs-pill href="guide/forms/signals/field-state-management" title="Field state management" />
+  <docs-pill href="guide/forms/signals/validation" title="Validation" />
+  <docs-pill href="guide/forms/signals/custom-controls" title="Custom controls" />
+</docs-pill-row> -->
diff --git a/adev-es/src/content/guide/forms/signals/validation.md b/adev-es/src/content/guide/forms/signals/validation.md
new file mode 100644
index 0000000..63ba327
--- /dev/null
+++ b/adev-es/src/content/guide/forms/signals/validation.md
@@ -0,0 +1,629 @@
+# Validation
+
+Forms need validation to ensure users provide correct, complete data before submission. Without validation, you would need to handle data quality issues on the server, provide poor user experience with unclear error messages, and manually check every constraint.
+
+Signal Forms provides a schema-based validation approach. Validation rules bind to fields using a schema function, run automatically when values change, and expose errors through field state signals. This enables reactive validation that updates as users interact with the form.
+
+<docs-code-multifile preview hideCode path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.ts">
+  <docs-code header="app.ts" path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.ts"/>
+  <docs-code header="app.html" path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.html"/>
+  <docs-code header="app.css" path="adev/src/content/examples/signal-forms/src/login-validation-complete/app/app.css"/>
+</docs-code-multifile>
+
+## Validation basics
+
+Validation in Signal Forms is defined through a schema function passed as the second argument to `form()`.
+
+### The schema function
+
+The schema function receives a `SchemaPathTree` object that lets you define your validation rules:
+
+<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]"
+/>
+
+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.
+
+NOTE: The schema callback parameter (`schemaPath` in these examples) is a `SchemaPathTree` object that provides paths to all fields in your form. You can name this parameter anything you like.
+
+### How validation works
+
+Validation in Signal Forms follows this pattern:
+
+1. **Define validation rules in schema** - Bind validation rules to fields in the schema function
+2. **Automatic execution** - Validation rules run when field values change
+3. **Error propagation** - Validation errors are exposed through field state signals
+4. **Reactive updates** - UI automatically updates when validation state changes
+
+Validation runs on every value change for interactive fields. Hidden and disabled fields don't run validation - their validation rules are skipped until the field becomes interactive again.
+
+### Validation timing
+
+Validation rules execute in this order:
+
+1. **Synchronous validation** - All synchronous validation rules run when value changes
+2. **Asynchronous validation** - Asynchronous validation rules run only after all synchronous validation rules pass
+3. **Field state updates** - The `valid()`, `invalid()`, `errors()`, and `pending()` signals update
+
+Synchronous validation rules (like `required()`, `email()`) complete immediately. Asynchronous validation rules (like `validateHttp()`) may take time and set the `pending()` signal to `true` while executing.
+
+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.
+
+## 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.
+
+### required()
+
+The `required()` validation rule ensures a field has a value:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, required } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-registration',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Username
+        <input [field]="registrationForm.username" />
+      </label>
+
+      <label>
+        Email
+        <input type="email" [field]="registrationForm.email" />
+      </label>
+
+      <button type="submit">Register</button>
+    </form>
+  `
+})
+export class RegistrationComponent {
+  registrationModel = signal({
+    username: '',
+    email: ''
+  })
+
+  registrationForm = form(this.registrationModel, (schemaPath) => {
+    required(schemaPath.username, { message: 'Username is required' })
+    required(schemaPath.email, { message: 'Email is required' })
+  })
+}
+```
+
+A field is considered "empty" when:
+
+| Condition                | Example |
+| ------------------------ | ------- |
+| Value is `null`          | `null`, |
+| Value is an empty string | `''`    |
+| Value is an empty array  | `[]`    |
+
+For conditional requirements, use the `when` option:
+
+```ts
+registrationForm = form(this.registrationModel, (schemaPath) => {
+  required(schemaPath.promoCode, {
+    message: 'Promo code is required for discounts',
+    when: ({valueOf}) => valueOf(schemaPath.applyDiscount)
+  })
+})
+```
+
+The validation rule only runs when the `when` function returns `true`.
+
+### email()
+
+The `email()` validation rule checks for valid email format:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, email } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-contact',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Your Email
+        <input type="email" [field]="contactForm.email" />
+      </label>
+    </form>
+  `
+})
+export class ContactComponent {
+  contactModel = signal({ email: '' })
+
+  contactForm = form(this.contactModel, (schemaPath) => {
+    email(schemaPath.email, { message: 'Please enter a valid email address' })
+  })
+}
+```
+
+The `email()` validation rule uses a standard email format regex. It accepts addresses like `user@example.com` but rejects malformed addresses like `user@` or `@example.com`.
+
+### min() and max()
+
+The `min()` and `max()` validation rules work with numeric values:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, min, max } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-age-form',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Age
+        <input type="number" [field]="ageForm.age" />
+      </label>
+
+      <label>
+        Rating (1-5)
+        <input type="number" [field]="ageForm.rating" />
+      </label>
+    </form>
+  `
+})
+export class AgeFormComponent {
+  ageModel = signal({
+    age: 0,
+    rating: 0
+  })
+
+  ageForm = form(this.ageModel, (schemaPath) => {
+    min(schemaPath.age, 18, { message: 'You must be at least 18 years old' })
+    max(schemaPath.age, 120, { message: 'Please enter a valid age' })
+
+    min(schemaPath.rating, 1, { message: 'Rating must be at least 1' })
+    max(schemaPath.rating, 5, { message: 'Rating cannot exceed 5' })
+  })
+}
+```
+
+You can use computed values for dynamic constraints:
+
+```ts
+ageForm = form(this.ageModel, (schemaPath) => {
+  min(schemaPath.participants, () => this.minimumRequired(), {
+    message: 'Not enough participants'
+  })
+})
+```
+
+### minLength() and maxLength()
+
+The `minLength()` and `maxLength()` validation rules work with strings and arrays:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, minLength, maxLength } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-password-form',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Password
+        <input type="password" [field]="passwordForm.password" />
+      </label>
+
+      <label>
+        Bio
+        <textarea [field]="passwordForm.bio"></textarea>
+      </label>
+    </form>
+  `
+})
+export class PasswordFormComponent {
+  passwordModel = signal({
+    password: '',
+    bio: ''
+  })
+
+  passwordForm = form(this.passwordModel, (schemaPath) => {
+    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
+    maxLength(schemaPath.password, 100, { message: 'Password is too long' })
+
+    maxLength(schemaPath.bio, 500, { message: 'Bio cannot exceed 500 characters' })
+  })
+}
+```
+
+For strings, "length" means the number of characters. For arrays, "length" means the number of elements.
+
+### pattern()
+
+The `pattern()` validation rule validates against a regular expression:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, pattern } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-phone-form',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Phone Number
+        <input [field]="phoneForm.phone" placeholder="555-123-4567" />
+      </label>
+
+      <label>
+        Postal Code
+        <input [field]="phoneForm.postalCode" placeholder="12345" />
+      </label>
+    </form>
+  `
+})
+export class PhoneFormComponent {
+  phoneModel = signal({
+    phone: '',
+    postalCode: ''
+  })
+
+  phoneForm = form(this.phoneModel, (schemaPath) => {
+    pattern(schemaPath.phone, /^\d{3}-\d{3}-\d{4}$/, {
+      message: 'Phone must be in format: 555-123-4567'
+    })
+
+    pattern(schemaPath.postalCode, /^\d{5}$/, {
+      message: 'Postal code must be 5 digits'
+    })
+  })
+}
+```
+
+Common patterns:
+
+| Pattern Type     | Regular Expression      | Example      |
+| ---------------- | ----------------------- | ------------ |
+| Phone            | `/^\d{3}-\d{3}-\d{4}$/` | 555-123-4567 |
+| Postal code (US) | `/^\d{5}$/`             | 12345        |
+| Alphanumeric     | `/^[a-zA-Z0-9]+$/`      | abc123       |
+| URL-safe         | `/^[a-zA-Z0-9_-]+$/`    | my-url_123   |
+
+## Validation errors
+
+When validation rules fail, they produce error objects that describe what went wrong. Understanding error structure helps you provide clear feedback to users.
+
+<!-- TODO: Uncomment when field state management guide is published
+
+NOTE: This section covers the errors that validation rules produce. For displaying and using validation errors in your UI, see the [Field State Management guide](guide/forms/signals/field-state-management). -->
+
+### Error structure
+
+Each validation error object contains these properties:
+
+| Property  | Description                                                              |
+| --------- | ------------------------------------------------------------------------ |
+| `kind`    | The validation rule that failed (e.g., "required", "email", "minLength") |
+| `message` | Optional human-readable error message                                    |
+
+Built-in validation rules automatically set the `kind` property. The `message` property is optional - you can provide custom messages through validation rule options.
+
+### Custom error messages
+
+All built-in validation rules accept a `message` option for custom error text:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, required, minLength } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-signup',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Username
+        <input [field]="signupForm.username" />
+      </label>
+
+      <label>
+        Password
+        <input type="password" [field]="signupForm.password" />
+      </label>
+    </form>
+  `
+})
+export class SignupComponent {
+  signupModel = signal({
+    username: '',
+    password: ''
+  })
+
+  signupForm = form(this.signupModel, (schemaPath) => {
+    required(schemaPath.username, {
+      message: 'Please choose a username'
+    })
+
+    required(schemaPath.password, {
+      message: 'Password cannot be empty'
+    })
+    minLength(schemaPath.password, 12, {
+      message: 'Password must be at least 12 characters for security'
+    })
+  })
+}
+```
+
+Custom messages should be clear, specific, and tell users how to fix the problem. Instead of "Invalid input", use "Password must be at least 12 characters for security".
+
+### Multiple errors per field
+
+When a field has multiple validation rules, each validation rule runs independently and can produce an error:
+
+```ts
+signupForm = form(this.signupModel, (schemaPath) => {
+  required(schemaPath.email, { message: 'Email is required' })
+  email(schemaPath.email, { message: 'Enter a valid email address' })
+  minLength(schemaPath.email, 5, { message: 'Email is too short' })
+})
+```
+
+If the email field is empty, only the `required()` error appears. If the user types "a@b", both `email()` and `minLength()` errors appear. All validation rules run - validation doesn't stop after the first failure.
+
+TIP: Use the `touched() && invalid()` pattern in your templates to prevent errors from appearing before users have interacted with a field. For comprehensive guidance on displaying validation errors, see the [Field State Management guide](guide/forms/signals/field-state-management#conditional-error-display).
+
+## Custom validation rules
+
+While built-in validation rules handle common cases, you'll often need custom validation logic for business rules, complex formats, or domain-specific constraints.
+
+### Using validate()
+
+The `validate()` function creates custom validation rules. It receives a validator function that accesses the field context and returns:
+
+| Return Value          | Meaning          |
+| --------------------- | ---------------- |
+| Error object          | Value is invalid |
+| `null` or `undefined` | Value is valid   |
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, validate } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-url-form',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Website URL
+        <input [field]="urlForm.website" />
+      </label>
+    </form>
+  `
+})
+export class UrlFormComponent {
+  urlModel = signal({ website: '' })
+
+  urlForm = form(this.urlModel, (schemaPath) => {
+    validate(schemaPath.website, ({value}) => {
+      if (!value().startsWith('https://')) {
+        return {
+          kind: 'https',
+          message: 'URL must start with https://'
+        }
+      }
+
+      return null
+    })
+  })
+}
+```
+
+The validator function receives a `FieldContext` object with:
+
+| Property        | Type       | Description                                 |
+| --------------- | ---------- | ------------------------------------------- |
+| `value`         | Signal     | Signal containing the current field value   |
+| `state`         | FieldState | The field state reference                   |
+| `field`         | FieldTree  | The field tree reference                    |
+| `valueOf()`     | Method     | Get the value of another field by path      |
+| `stateOf()`     | Method     | Get the state of another field by path      |
+| `fieldTreeOf()` | Method     | Get the field tree of another field by path |
+| `pathKeys`      | Signal     | Path keys from root to current field        |
+
+NOTE: Child fields also have a `key` signal, and array item fields have both `key` and `index` signals.
+
+Return an error object with `kind` and `message` when validation fails. Return `null` or `undefined` when validation passes.
+
+### Reusable validation rules
+
+Create reusable validation rule functions by wrapping `validate()`:
+
+```ts
+function url(field: any, options?: { message?: string }) {
+  validate(field, ({value}) => {
+    try {
+      new URL(value())
+      return null
+    } catch {
+      return {
+        kind: 'url',
+        message: options?.message || 'Enter a valid URL'
+      }
+    }
+  })
+}
+
+function phoneNumber(field: any, options?: { message?: string }) {
+  validate(field, ({value}) => {
+    const phoneRegex = /^\d{3}-\d{3}-\d{4}$/
+
+    if (!phoneRegex.test(value())) {
+      return {
+        kind: 'phoneNumber',
+        message: options?.message || 'Phone must be in format: 555-123-4567'
+      }
+    }
+
+    return null
+  })
+}
+```
+
+You can use custom validation rules just like built-in validation rules:
+
+```ts
+urlForm = form(this.urlModel, (schemaPath) => {
+  url(schemaPath.website, { message: 'Please enter a valid website URL' })
+  phoneNumber(schemaPath.phone)
+})
+```
+
+## Cross-field validation
+
+Cross-field validation compares or relates multiple field values.
+
+A common scenario for cross-field validation is password confirmation:
+
+```angular-ts
+import { Component, signal } from '@angular/core'
+import { form, Field, required, minLength, validate } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-password-change',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        New Password
+        <input type="password" [field]="passwordForm.password" />
+      </label>
+
+      <label>
+        Confirm Password
+        <input type="password" [field]="passwordForm.confirmPassword" />
+      </label>
+
+      <button type="submit">Change Password</button>
+    </form>
+  `
+})
+export class PasswordChangeComponent {
+  passwordModel = signal({
+    password: '',
+    confirmPassword: ''
+  })
+
+  passwordForm = form(this.passwordModel, (schemaPath) => {
+    required(schemaPath.password, { message: 'Password is required' })
+    minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' })
+
+    required(schemaPath.confirmPassword, { message: 'Please confirm your password' })
+
+    validate(schemaPath.confirmPassword, ({value, valueOf}) => {
+      const confirmPassword = value()
+      const password = valueOf(schemaPath.password)
+
+      if (confirmPassword !== password) {
+        return {
+          kind: 'passwordMismatch',
+          message: 'Passwords do not match'
+        }
+      }
+
+      return null
+    })
+  })
+}
+```
+
+The confirmation validation rule accesses the password field value using `valueOf(schemaPath.password)` and compares it to the confirmation value. This validation rule runs reactively - if either password changes, validation reruns automatically.
+
+## Async validation
+
+Async validation handles validation that requires external data sources, like checking username availability on a server or validating against an API.
+
+### Using validateHttp()
+
+The `validateHttp()` function performs HTTP-based validation:
+
+```angular-ts
+import { Component, signal, inject } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { form, Field, required, validateHttp } from '@angular/forms/signals'
+
+@Component({
+  selector: 'app-username-form',
+  imports: [Field],
+  template: `
+    <form>
+      <label>
+        Username
+        <input [field]="usernameForm.username" />
+
+        @if (usernameForm.username().pending()) {
+          <span class="checking">Checking availability...</span>
+        }
+      </label>
+    </form>
+  `
+})
+export class UsernameFormComponent {
+  http = inject(HttpClient)
+
+  usernameModel = signal({ username: '' })
+
+  usernameForm = form(this.usernameModel, (schemaPath) => {
+    required(schemaPath.username, { message: 'Username is required' })
+
+    validateHttp(schemaPath.username, {
+      request: ({value}) => `/api/check-username?username=${value()}`,
+      onSuccess: (response: any) => {
+        if (response.taken) {
+          return {
+            kind: 'usernameTaken',
+            message: 'Username is already taken'
+          }
+        }
+        return null
+      },
+      onError: (error) => ({
+        kind: 'networkError',
+        message: 'Could not verify username availability'
+      })
+    })
+  })
+}
+```
+
+The `validateHttp()` validation rule:
+
+1. Calls the URL or request returned by the `request` function
+2. Maps the successful response to a validation error or `null` using `onSuccess`
+3. Handles request failures (network errors, HTTP errors) using `onError`
+4. Sets `pending()` to `true` while the request is in progress
+5. Only runs after all synchronous validation rules pass
+
+### Pending state
+
+While async validation runs, the field's `pending()` signal returns `true`. Use this to show loading indicators:
+
+```ts
+@if (form.username().pending()) {
+  <span class="spinner">Checking...</span>
+}
+```
+
+The `valid()` signal returns `false` while validation is pending, even if there are no errors yet. The `invalid()` signal only returns `true` if errors exist.
+
+## Next steps
+
+This guide covered creating and applying validation rules. Related guides explore other aspects of Signal Forms:
+
+- [Form Models guide](guide/forms/signals/models) - Creating and updating form models
+  <!-- TODO: Uncomment when Field State Management guide is published -->
+  <!-- - [Field State Management guide](guide/forms/signals/field-state-management) - Using validation state in templates and displaying errors -->
diff --git a/adev-es/src/content/guide/forms/template-driven-forms.en.md b/adev-es/src/content/guide/forms/template-driven-forms.en.md
index f7d5196..9f15b1a 100644
--- a/adev-es/src/content/guide/forms/template-driven-forms.en.md
+++ b/adev-es/src/content/guide/forms/template-driven-forms.en.md
@@ -59,11 +59,11 @@ In the course of this tutorial, you bind a sample form to data and handle user i
 
 1. The provided sample application creates the `Actor` class which defines the data model reflected in the form.
 
-<docs-code header="src/app/actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>
+   <docs-code header="actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>
 
 1. The form layout and details are defined in the `ActorFormComponent` class.
 
-   <docs-code header="src/app/actor-form/actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="v1"/>
+   <docs-code header="actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="v1"/>
 
    The component's `selector` value of "app-actor-form" means you can drop this form in a parent template using the `<app-actor-form>` tag.
 
@@ -80,12 +80,11 @@ In the course of this tutorial, you bind a sample form to data and handle user i
 
 1. The form is displayed in the application layout defined by the root component's template.
 
-   <docs-code header="src/app/app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
+   <docs-code header="app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
 
    The initial template defines the layout for a form with two form groups and a submit button.
    The form groups correspond to two properties of the Actor data model, name and studio.
    Each group has a label and a box for user input.
-
    - The **Name** `<input>` control element has the HTML5 `required` attribute
    - The **Studio** `<input>` control element does not because `studio` is optional
 
@@ -95,12 +94,12 @@ In the course of this tutorial, you bind a sample form to data and handle user i
 1. The sample form uses some style classes from [Twitter Bootstrap](https://getbootstrap.com/css): `container`, `form-group`, `form-control`, and `btn`.
    To use these styles, the application's style sheet imports the library.
 
-<docs-code header="src/styles.css" path="adev/src/content/examples/forms/src/styles.1.css"/>
+   <docs-code header="styles.css" path="adev/src/content/examples/forms/src/styles.1.css"/>
 
 1. The form requires that an actor's skill is chosen from a predefined list of `skills` maintained internally in `ActorFormComponent`.
    The Angular `@for` loop iterates over the data values to populate the `<select>` element.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (skills)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="skills"/>
+   <docs-code header="actor-form.component.html (skills)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="skills"/>
 
 If you run the application right now, you see the list of skills in the selection control.
 The input elements are not yet bound to data values or events, so they are still blank and have no behavior.
@@ -116,7 +115,7 @@ When you include the directive using the syntax for two-way data binding, `[(ngM
 1. Find the `<input>` tag next to the **Name** label.
 1. Add the `ngModel` directive, using two-way data binding syntax `[(ngModel)]="..."`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModelName-1"/>
+<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModelName-1"/>
 
 HELPFUL: This example has a temporary diagnostic interpolation after each input tag, `{{model.name}}`, to show the current data value of the corresponding property. The comment reminds you to remove the diagnostic lines when you have finished observing the two-way data binding at work.
 
@@ -129,7 +128,7 @@ To get access to the `NgForm` and the overall form status, declare a [template r
 1. Edit the template file `actor-form.component.html`.
 1. Update the `<form>` tag with a template reference variable, `#actorForm`, and set its value as follows.
 
-   <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="template-variable"/>
+   <docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="template-variable"/>
 
    The `actorForm` template variable is now a reference to the `NgForm` directive instance that governs the form as a whole.
 
@@ -154,7 +153,7 @@ Any unique value will do, but using a descriptive name is helpful.
 
 After these revisions, the form template should look like the following:
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModel-2"/>
+<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModel-2"/>
 
 You'll notice that:
 
@@ -197,14 +196,12 @@ 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.
 
-   <docs-code language="html">
+   ```html
 
    <input class="form-control ng-untouched ng-pristine ng-valid">;
-
-   </docs-code>
+   ```
 
 1. Take the following actions on the **Name** `<input>` box, and observe which classes appear.
-
    - Look but don't touch.
      The classes indicate that it is untouched, pristine, and valid.
 
@@ -232,11 +229,11 @@ To change the appearance in this way, take the following steps.
 1. Add these class definitions to a new `forms.css` file.
 1. Add the new file to the project as a sibling to `index.html`:
 
-<docs-code header="src/assets/forms.css" language="css" path="adev/src/content/examples/forms/src/assets/forms.css"/>
+   <docs-code header="forms.css" language="css" path="adev/src/content/examples/forms/src/assets/forms.css"/>
 
 1. In the `index.html` file, update the `<head>` tag to include the new style sheet.
 
-<docs-code header="src/index.html (styles)" path="adev/src/content/examples/forms/src/index.html" visibleRegion="styles"/>
+   <docs-code header="index.html (styles)" path="adev/src/content/examples/forms/src/index.html" visibleRegion="styles"/>
 
 ### Show and hide validation error messages
 
@@ -263,12 +260,12 @@ Add a `<div>` that contains a suitable error message.
 Show or hide the error message by binding properties of the `name` control to the message `<div>` element's `hidden` property.
 </docs-step>
 
-<docs-code header="src/app/actor-form/actor-form.component.html (hidden-error-msg)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="hidden-error-msg"/>
+<docs-code header="actor-form.component.html (hidden-error-msg)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="hidden-error-msg"/>
 
 <docs-step title="Add a conditional error message to name">
 Add a conditional error message to the `name` input box, as in the following example.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="name-with-error-msg"/>
 </docs-step>
 </docs-workflow>
 
@@ -293,11 +290,11 @@ To let form users add a new actor, you will add a **New Actor** button that resp
 1. In the template, place a "New Actor" `<button>` element at the bottom of the form.
 1. In the component file, add the actor-creation method to the actor data model.
 
-<docs-code header="src/app/actor-form/actor-form.component.ts (New Actor method)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="new-actor"/>
+   <docs-code header="actor-form.component.ts (New Actor method)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="new-actor"/>
 
 1. Bind the button's click event to an actor-creation method, `newActor()`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (New Actor button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-no-reset"/>
+   <docs-code header="actor-form.component.html (New Actor button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-no-reset"/>
 
 1. Run the application again and click the **New Actor** button.
 
@@ -312,7 +309,7 @@ To let form users add a new actor, you will add a **New Actor** button that resp
 
 1. To restore the pristine state of the form controls, clear all of the flags imperatively by calling the form's `reset()` method after calling the `newActor()` method.
 
-   <docs-code header="src/app/actor-form/actor-form.component.html (Reset the form)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-form-reset"/>
+   <docs-code header="actor-form.component.html (Reset the form)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-form-reset"/>
 
    Now clicking **New Actor** resets both the form and its control flags.
 
@@ -328,7 +325,7 @@ To respond to this event, take the following steps.
 <docs-step title="Listen to ngOnSubmit">
 Bind the form's [`ngSubmit`](api/forms/NgForm#properties) event property to the actor-form component's `onSubmit()` method.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngSubmit"/>
+<docs-code header="actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngSubmit"/>
 </docs-step>
 
 <docs-step title="Bind the disabled property">
@@ -336,7 +333,7 @@ Use the template reference variable, `#actorForm` to access the form that contai
 
 You will bind the form property that indicates its overall validity to the **Submit** button's `disabled` property.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (submit-button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submit-button"/>
+<docs-code header="actor-form.component.html (submit-button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submit-button"/>
 </docs-step>
 
 <docs-step title="Run the application">
@@ -359,11 +356,11 @@ To show a response to form submission, you can hide the data entry area and disp
 <docs-step title="Wrap the form">
 Wrap the entire form in a `<div>` and bind its `hidden` property to the `ActorFormComponent.submitted` property.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="edit-div"/>
+<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="edit-div"/>
 
 The main form is visible from the start because the `submitted` property is false until you submit the form, as this fragment from the `ActorFormComponent` shows:
 
-<docs-code header="src/app/actor-form/actor-form.component.ts (submitted)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="submitted"/>
+<docs-code header="actor-form.component.ts (submitted)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="submitted"/>
 
 When you click the **Submit** button, the `submitted` flag becomes true and the form disappears.
 </docs-step>
@@ -371,7 +368,7 @@ When you click the **Submit** button, the `submitted` flag becomes true and the
 <docs-step title="Add the submitted state">
 To show something else while the form is in the submitted state, add the following HTML below the new `<div>` wrapper.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submitted"/>
+<docs-code header="actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submitted"/>
 
 This `<div>`, which shows a read-only actor with interpolation bindings, appears only while the component is in the submitted state.
 
@@ -401,8 +398,8 @@ framework features to provide support for data modification, validation, and mor
 Here's the code for the final version of the application:
 
 <docs-code-multifile>
-    <docs-code header="actor-form/actor-form.component.ts" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="final"/>
-    <docs-code header="actor-form/actor-form.component.html" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="final"/>
+    <docs-code header="actor-form.component.ts" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="final"/>
+    <docs-code header="actor-form.component.html" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="final"/>
     <docs-code header="actor.ts" path="adev/src/content/examples/forms/src/app/actor.ts"/>
     <docs-code header="app.component.html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
     <docs-code header="app.component.ts" path="adev/src/content/examples/forms/src/app/app.component.ts"/>
diff --git a/adev-es/src/content/guide/forms/template-driven-forms.md b/adev-es/src/content/guide/forms/template-driven-forms.md
index 5a7fe93..92b62eb 100644
--- a/adev-es/src/content/guide/forms/template-driven-forms.md
+++ b/adev-es/src/content/guide/forms/template-driven-forms.md
@@ -59,11 +59,11 @@ En el curso de este tutorial, vinculas un formulario de muestra a datos y maneja
 
 1. La aplicación de ejemplo proporcionada crea la clase `Actor` que define el modelo de datos reflejado en el formulario.
 
-<docs-code header="src/app/actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>
+<docs-code header="actor.ts" language="typescript" path="adev/src/content/examples/forms/src/app/actor.ts"/>
 
 1. El diseño y detalles del formulario están definidos en la clase `ActorFormComponent`.
 
-   <docs-code header="src/app/actor-form/actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="v1"/>
+   <docs-code header="actor-form.component.ts (v1)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="v1"/>
 
    El valor `selector` del componente de "app-actor-form" significa que puedes colocar este formulario en una plantilla padre usando la etiqueta `<app-actor-form>`.
 
@@ -80,12 +80,11 @@ En el curso de este tutorial, vinculas un formulario de muestra a datos y maneja
 
 1. El formulario se muestra en el diseño de la aplicación definido por la plantilla del componente raíz.
 
-   <docs-code header="src/app/app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
+   <docs-code header="app.component.html" language="html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
 
    La plantilla inicial define el diseño para un formulario con dos grupos de formulario y un botón de envío.
    Los grupos de formulario corresponden a dos propiedades del modelo de datos Actor, nombre y estudio.
    Cada grupo tiene una etiqueta y una caja para entrada de datos del usuario.
-
    - El elemento de control **Name** `<input>` tiene el atributo HTML5 `required`
    - El elemento de control **Studio** `<input>` no lo tiene porque `studio` es opcional
 
@@ -100,7 +99,7 @@ En el curso de este tutorial, vinculas un formulario de muestra a datos y maneja
 1. El formulario requiere que la habilidad de un actor se elija de una lista predefinida de `skills` mantenida internamente en `ActorFormComponent`.
    El bucle Angular `@for` itera sobre los valores de datos para llenar el elemento `<select>`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (skills)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="skills"/>
+<docs-code header="actor-form.component.html (habilidades)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="skills"/>
 
 Si ejecutas la aplicación, verás la lista de habilidades en el control de selección. 
 Los elementos de entrada aún no están enlazados a valores de datos o eventos, por lo que todavía están en blanco y no tienen comportamiento.
@@ -116,9 +115,9 @@ Cuando incluyes la directiva usando la sintaxis para enlace de datos bidireccion
 1. Encuentra la etiqueta `<input>` junto a la etiqueta **Name**.
 1. Agrega la directiva `ngModel`, usando la sintaxis de enlace de datos bidireccional `[(ngModel)]="..."`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModelName-1"/>
+<docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModelName-1"/>
 
-ÚTIL: Este ejemplo tiene una interpolación de diagnóstico temporal después de cada etiqueta de entrada, `{{model.name}}`, para mostrar el valor de datos actual de la propiedad correspondiente. El comentario te recuerda eliminar las líneas de diagnóstico cuando hayas terminado de observar el enlace de datos bidireccional en funcionamiento.
+CONSEJO: Este ejemplo tiene una interpolación de diagnóstico temporal después de cada etiqueta de entrada, `{{model.name}}`, para mostrar el valor de datos actual de la propiedad correspondiente. El comentario te recuerda eliminar las líneas de diagnóstico cuando hayas terminado de observar el enlace de datos bidireccional en funcionamiento.
 
 ### Acceder al estado general del formulario
 
@@ -129,7 +128,7 @@ Para obtener acceso a `NgForm` y el estado general del formulario, declara una [
 1. Edita el archivo de plantilla `actor-form.component.html`.
 1. Actualiza la etiqueta `<form>` con una variable de referencia de plantilla, `#actorForm`, y establece su valor como sigue.
 
-   <docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="template-variable"/>
+   <docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="template-variable"/>
 
 La variable de plantilla `actorForm` ahora es una referencia a la instancia de directiva `NgForm` que gobierna el formulario como un todo.
 
@@ -154,7 +153,7 @@ Cualquier valor único funcionará, pero es útil usar un nombre descriptivo.
 
 Después de estas revisiones, la plantilla del formulario debería verse como así:
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModel-2"/>
+<docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngModel-2"/>
 
 Notarás que:
 
@@ -197,14 +196,12 @@ Usando las herramientas de desarrollador de tu navegador, encuentra el elemento
 
 1. Cuando lo abres por primera vez, las clases indican que tiene un valor válido, que el valor no ha sido cambiado desde la inicialización o reset, y que el control no ha sido visitado desde la inicialización o reset.
 
-   <docs-code language="html">
+   ```html
 
    <input class="form-control ng-untouched ng-pristine ng-valid">;
-
-   </docs-code>
+   ```
 
 1. Realiza las siguientes acciones en la caja de entrada `<input>` **Name**, y observa qué clases aparecen.
-
    - Observa sin tocar.
      Las clases indican que está sin tocar, pristino y válido.
 
@@ -236,7 +233,7 @@ Para cambiar la apariencia de esta manera, sigue estos pasos.
 
 1. In the `index.html` file, update the `<head>` tag to include the new style sheet.
 
-<docs-code header="src/index.html (styles)" path="adev/src/content/examples/forms/src/index.html" visibleRegion="styles"/>
+<docs-code header="index.html (estilos)" path="adev/src/content/examples/forms/src/index.html" visibleRegion="styles"/>
 
 ### Mostrar y ocultar mensajes de error de validación
 
@@ -263,12 +260,12 @@ Agrega un `<div>` que contenga un mensaje de error apropiado.
 Muestra u oculta el mensaje de error vinculando propiedades del control `name` a la propiedad `hidden` del elemento `<div>` del mensaje.
 </docs-step>
 
-<docs-code header="src/app/actor-form/actor-form.component.html (hidden-error-msg)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="hidden-error-msg"/>
+<docs-code header="actor-form.component.html (mensaje de error oculto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="hidden-error-msg"/>
 
 <docs-step title="Agregar un mensaje de error condicional al nombre">
 Agrega un mensaje de error condicional a la caja de entrada `name`, como en el siguiente ejemplo.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (excerpt)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="name-with-error-msg"/>
+<docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="name-with-error-msg"/>
 </docs-step>
 </docs-workflow>
 
@@ -293,11 +290,11 @@ Para permitir que los usuarios del formulario agreguen un nuevo actor, agregará
 1. En la plantilla, coloca un elemento `<button>` "New Actor" en la parte inferior del formulario.
 1. En el archivo del componente, agrega el método de creación de actor al modelo de datos de actor.
 
-<docs-code header="src/app/actor-form/actor-form.component.ts (New Actor method)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="new-actor"/>
+<docs-code header="actor-form.component.ts (método New Actor)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="new-actor"/>
 
 1. Vincula el evento de clic del botón a un método de creación de actor, `newActor()`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (New Actor button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-no-reset"/>
+<docs-code header="actor-form.component.html (botón New Actor)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-no-reset"/>
 
 1. Ejecuta la aplicación nuevamente y haz clic en el botón **New Actor**.
 
@@ -312,7 +309,7 @@ Para permitir que los usuarios del formulario agreguen un nuevo actor, agregará
 
 1. Para restaurar el estado pristino de los controles del formulario, limpia todas las banderas imperativamente llamando al método `reset()` del formulario después de llamar al método `newActor()`.
 
-   <docs-code header="src/app/actor-form/actor-form.component.html (Reset the form)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-form-reset"/>
+   <docs-code header="actor-form.component.html (Restablecer el formulario)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="new-actor-button-form-reset"/>
 
    Ahora hacer clic en **New Actor** resetea tanto el formulario como sus banderas de control.
 
@@ -328,7 +325,7 @@ Para responder a este evento, sigue los siguientes pasos.
 <docs-step title="Escuchar ngOnSubmit">
 Vincula la propiedad de evento [`ngSubmit`](api/forms/NgForm#properties) del formulario al método `onSubmit()` del componente actor-form.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngSubmit"/>
+<docs-code header="actor-form.component.html (ngSubmit)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="ngSubmit"/>
 </docs-step>
 
 <docs-step title="Vincular la propiedad disabled">
@@ -336,7 +333,7 @@ Usa la variable de referencia de plantilla, `#actorForm` para acceder al formula
 
 Vincularás la propiedad del formulario que indica su validez general a la propiedad `disabled` del botón **Submit**.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (submit-button)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submit-button"/>
+<docs-code header="actor-form.component.html (botón de envío)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submit-button"/>
 </docs-step>
 
 <docs-step title="Ejecutar la aplicación">
@@ -359,11 +356,11 @@ Para mostrar una respuesta al envío del formulario, puedes ocultar el área de
 <docs-step title="Envolver el formulario">
 Envuelve todo el formulario en un `<div>` y vincula su propiedad `hidden` a la propiedad `ActorFormComponent.submitted`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="edit-div"/>
+<docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="edit-div"/>
 
 El formulario principal es visible desde el inicio porque la propiedad `submitted` es falsa hasta que envías el formulario, como muestra este fragmento de `ActorFormComponent`:
 
-<docs-code header="src/app/actor-form/actor-form.component.ts (submitted)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="submitted"/>
+<docs-code header="actor-form.component.ts (enviado)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="submitted"/>
 
 Cuando haces clic en el botón **Submit**, la bandera `submitted` se vuelve verdadera y el formulario desaparece.
 </docs-step>
@@ -371,7 +368,7 @@ Cuando haces clic en el botón **Submit**, la bandera `submitted` se vuelve verd
 <docs-step title="Agregar el estado enviado">
 Para mostrar algo más mientras el formulario está en el estado enviado, agrega el siguiente HTML debajo del nuevo envoltorio `<div>`.
 
-<docs-code header="src/app/actor-form/actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submitted"/>
+<docs-code header="actor-form.component.html (extracto)" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="submitted"/>
 
 Este `<div>`, que muestra un actor de solo lectura con enlaces de interpolación, aparece solo mientras el componente está en el estado enviado.
 
@@ -401,8 +398,8 @@ características del framework para proporcionar soporte para modificación de d
 Aquí está el código para la versión final de la aplicación:
 
 <docs-code-multifile>
-    <docs-code header="actor-form/actor-form.component.ts" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="final"/>
-    <docs-code header="actor-form/actor-form.component.html" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="final"/>
+    <docs-code header="actor-form.component.ts" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts" visibleRegion="final"/>
+    <docs-code header="actor-form.component.html" path="adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html" visibleRegion="final"/>
     <docs-code header="actor.ts" path="adev/src/content/examples/forms/src/app/actor.ts"/>
     <docs-code header="app.component.html" path="adev/src/content/examples/forms/src/app/app.component.html"/>
     <docs-code header="app.component.ts" path="adev/src/content/examples/forms/src/app/app.component.ts"/>
diff --git a/adev-es/src/content/guide/forms/typed-forms.en.md b/adev-es/src/content/guide/forms/typed-forms.en.md
index 6b6b5ed..2ad3b69 100644
--- a/adev-es/src/content/guide/forms/typed-forms.en.md
+++ b/adev-es/src/content/guide/forms/typed-forms.en.md
@@ -8,7 +8,7 @@ As background for this guide, you should already be familiar with [Angular React
 
 <docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Typed Forms in Angular" />
 
-With Angular reactive forms, you explicitly specify a *form model*. As a simple example, consider this basic user login form:
+With Angular reactive forms, you explicitly specify a _form model_. As a simple example, consider this basic user login form:
 
 ```ts
 const login = new FormGroup({
@@ -29,7 +29,7 @@ With strictly typed reactive forms, the above code does not compile, because the
 
 In addition to the added safety, the types enable a variety of other improvements, such as better autocomplete in IDEs, and an explicit way to specify form structure.
 
-These improvements currently apply only to *reactive* forms (not [*template-driven* forms](guide/forms/template-driven-forms)).
+These improvements currently apply only to _reactive_ forms (not [_template-driven_ forms](guide/forms/template-driven-forms)).
 
 ## Untyped Forms
 
@@ -56,7 +56,7 @@ This control will be automatically inferred to have the type `FormControl<string
 
 ### Nullability
 
-You might wonder: why does the type of this control include `null`?  This is because the control can become `null` at any time, by calling reset:
+You might wonder: why does the type of this control include `null`? This is because the control can become `null` at any time, by calling reset:
 
 ```ts
 const email = new FormControl('angularrox@gmail.com');
@@ -99,10 +99,25 @@ const names = new FormArray([new FormControl('Alex')]);
 names.push(new FormControl('Jess'));
 ```
 
+Pass an array of controls to `aliases.push()` when you need to add several entries at once.
+
+```ts
+const aliases = new FormArray([new FormControl('ng')]);
+aliases.push([new FormControl('ngDev'), new FormControl('ngAwesome')]);
+```
+
 This `FormArray` will have the inner controls type `FormControl<string|null>`.
 
 If you want to have multiple different element types inside the array, you must use `UntypedFormArray`, because TypeScript cannot infer which element type will occur at which position.
 
+A `FormArray` also provides a `clear()` method to remove all controls it contains:
+
+```ts
+const aliases = new FormArray([new FormControl('ngDev'), new FormControl('ngAwesome')]);
+aliases.clear();
+console.log(aliases.length); // 0
+```
+
 ## `FormGroup` and `FormRecord`
 
 Angular provides the `FormGroup` type for forms with an enumerated set of keys, and a type called `FormRecord`, for open-ended or dynamic groups.
@@ -124,11 +139,11 @@ As a consequence, the type of `login.value` is `Partial<{email: string, password
 
 More specifically, the type of `login.value.email` is `string|undefined`, and TypeScript will enforce that you handle the possibly `undefined` value (if you have `strictNullChecks` enabled).
 
-If you want to access the value *including* disabled controls, and thus bypass possible `undefined` fields, you can use `login.getRawValue()`.
+If you want to access the value _including_ disabled controls, and thus bypass possible `undefined` fields, you can use `login.getRawValue()`.
 
 ### Optional Controls and Dynamic Groups
 
-Some forms have controls that may or may not be present, which can be added and removed at runtime. You can represent these controls using *optional fields*:
+Some forms have controls that may or may not be present, which can be added and removed at runtime. You can represent these controls using _optional fields_:
 
 ```ts
 interface LoginForm {
diff --git a/adev-es/src/content/guide/forms/typed-forms.md b/adev-es/src/content/guide/forms/typed-forms.md
index b18364c..2ceb16a 100644
--- a/adev-es/src/content/guide/forms/typed-forms.md
+++ b/adev-es/src/content/guide/forms/typed-forms.md
@@ -8,7 +8,7 @@ Como antecedente para esta guía, te recomendamos familiarizarte con los [Formul
 
 <docs-video src="https://www.youtube.com/embed/L-odCf4MfJc" alt="Formularios Tipados en Angular" />
 
-Con los formularios reactivos de Angular, especificas explícitamente un *modelo de formulario*. Como ejemplo simple, considera este formulario básico de inicio de sesión:
+Con los formularios reactivos de Angular, especificas explícitamente un _modelo de formulario_. Como ejemplo simple, considera este formulario básico de inicio de sesión:
 
 ```ts
 const login = new FormGroup({
@@ -99,9 +99,24 @@ const names = new FormArray([new FormControl('Alex')]);
 names.push(new FormControl('Jess'));
 ```
 
+Puedes pasar un array de controles a `aliases.push()` cuando necesites agregar varias entradas a la vez.
+
+```ts
+const aliases = new FormArray([new FormControl('ng')]);
+aliases.push([new FormControl('ngDev'), new FormControl('ngAwesome')]);
+```
+
 Este `FormArray` tendrá el tipo de controles internos `FormControl<string|null>`.
 
-Si necesitas tener múltiples tipos de elementos dentro del array, debes usar `UntypedFormArray`, ya que TypeScript no puede inferir el tipo de elemento en cada posición
+Si necesitas tener múltiples tipos de elementos dentro del array, debes usar `UntypedFormArray`, ya que TypeScript no puede inferir el tipo de elemento en cada posición.
+
+Un `FormArray` también proporciona un método `clear()` para eliminar todos los controles que contiene:
+
+```ts
+const aliases = new FormArray([new FormControl('ngDev'), new FormControl('ngAwesome')]);
+aliases.clear();
+console.log(aliases.length); // 0
+```
 
 ## `FormGroup` y `FormRecord`
 
diff --git a/adev-es/src/content/guide/http/http-resource.en.md b/adev-es/src/content/guide/http/http-resource.en.md
index 4a0844b..c7c9467 100644
--- a/adev-es/src/content/guide/http/http-resource.en.md
+++ b/adev-es/src/content/guide/http/http-resource.en.md
@@ -8,10 +8,9 @@ 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: Make sure to include `provideHttpClient` in your application providers. See [Setting up HttpClient](/guide/http/setup) for details.
 
-
-You can define an HTTP resource by returning a url: 
+You can define an HTTP resource by returning a url:
 
 ```ts
 userId = input.required<string>();
@@ -19,8 +18,8 @@ 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. 
-If a request is already pending, the resource cancels the outstanding request before issuing a new one.  
+`httpResource` is reactive, meaning that whenever one of the signal 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`.
 
@@ -39,20 +38,21 @@ user = httpResource(() => ({
   },
   reportProgress: true,
   transferCache: true,
-  keepalive: true,  
-  mode: 'cors', 
+  keepalive: true,
+  mode: 'cors',
   redirect: 'error',
   priority: 'high',
   cache : 'force-cache',
   credentials: 'include',
   referrer: 'no-referrer',
-  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY='
+  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY=',
+  referrerPolicy: 'no-referrer'
 }));
 ```
 
 TIP: Avoid using `httpResource` for _mutations_ like `POST` or `PUT`. Instead, prefer directly using the underlying `HttpClient` APIs.
 
-The signals of the `httpResource` can be used in the template to control which elements should be displayed. 
+The signals of the `httpResource` can be used in the template to control which elements should be displayed.
 
 ```angular-html
 @if(user.hasValue()) {
@@ -66,9 +66,9 @@ The signals of the `httpResource` can be used in the template to control which e
 
 HELPFUL: Reading the `value` signal on a `resource` that is in error state throws at runtime. It is recommended to guard `value` reads with `hasValue()`.
 
-### Response types 
+### 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 alternate return with additional functions on `httpResource`:
 
 ```ts
 httpResource.text(() => ({ … })); // returns a string in value()
diff --git a/adev-es/src/content/guide/http/http-resource.md b/adev-es/src/content/guide/http/http-resource.md
index d856520..f79b6c8 100644
--- a/adev-es/src/content/guide/http/http-resource.md
+++ b/adev-es/src/content/guide/http/http-resource.md
@@ -10,7 +10,6 @@ Para más información sobre el patrón `resource` de Angular, consulta [Reactiv
 
 CONSEJO: Asegúrate de incluir `provideHttpClient` en los providers de tu aplicación. Consulta [Configurar HttpClient](/guide/http/setup) para más detalles.
 
-
 Puedes definir un recurso HTTP devolviendo una URL:
 
 ```ts
@@ -46,7 +45,8 @@ user = httpResource(() => ({
   cache : 'force-cache',
   credentials: 'include',
   referrer: 'no-referrer',
-  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY='
+  integrity: 'sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhEXAMPLEKEY=',
+  referrerPolicy: 'no-referrer'
 }));
 ```
 
@@ -56,7 +56,7 @@ Las signals del `httpResource` se pueden usar en la plantilla para controlar qu
 
 ```angular-html
 @if(user.hasValue()) {
-  <user-details user="[user.value()]">
+  <user-details [user]="user.value()">
 } @else if (user.error()) {
   <div>No se pudo cargar la información del usuario</div>
 } @else if (user.isLoading()) {
@@ -64,7 +64,7 @@ Las signals del `httpResource` se pueden usar en la plantilla para controlar qu
 }
 ```
 
-ÚTIL: Leer la signal `value`  en un `resource` que está en estado de error lanza una excepción en tiempo de ejecución. Se recomienda proteger las lecturas de `value` con `hasValue()`.
+ÚTIL: Leer la signal `value` en un `resource` que está en estado de error lanza una excepción en tiempo de ejecución. Se recomienda proteger las lecturas de `value` con `hasValue()`.
 
 ### Tipos de respuestas
 
diff --git a/adev-es/src/content/guide/http/interceptors.en.md b/adev-es/src/content/guide/http/interceptors.en.md
index 86ef23c..5f0d795 100644
--- a/adev-es/src/content/guide/http/interceptors.en.md
+++ b/adev-es/src/content/guide/http/interceptors.en.md
@@ -12,15 +12,15 @@ Interceptors are generally functions which you can run for each request, and hav
 
 You can use interceptors to implement a variety of common patterns, such as:
 
-* Adding authentication headers to outgoing requests to a particular API.
-* Retrying failed requests with exponential backoff.
-* Caching responses for a period of time, or until invalidated by mutations.
-* Customizing the parsing of responses.
-* Measuring server response times and log them.
-* Driving UI elements such as a loading spinner while network operations are in progress.
-* Collecting and batch requests made within a certain timeframe.
-* Automatically failing requests after a configurable deadline or timeout.
-* Regularly polling the server and refreshing results.
+- Adding authentication headers to outgoing requests to a particular API.
+- Retrying failed requests with exponential backoff.
+- Caching responses for a period of time, or until invalidated by mutations.
+- Customizing the parsing of responses.
+- Measuring server response times and log them.
+- Driving UI elements such as a loading spinner while network operations are in progress.
+- Collecting and batch requests made within a certain timeframe.
+- Automatically failing requests after a configurable deadline or timeout.
+- Regularly polling the server and refreshing results.
 
 ## Defining an interceptor
 
@@ -28,12 +28,12 @@ The basic form of an interceptor is a function which receives the outgoing `Http
 
 For example, this `loggingInterceptor` will log the outgoing request URL to `console.log` before forwarding the request:
 
-<docs-code language="ts">
+```ts
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   console.log(req.url);
   return next(req);
 }
-</docs-code>
+```
 
 In order for this interceptor to actually intercept requests, you must configure `HttpClient` to use it.
 
@@ -41,13 +41,13 @@ In order for this interceptor to actually intercept requests, you must configure
 
 You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature:
 
-<docs-code language="ts">
+```ts
 bootstrapApplication(AppComponent, {providers: [
   provideHttpClient(
     withInterceptors([loggingInterceptor, cachingInterceptor]),
   )
 ]});
-</docs-code>
+```
 
 The interceptors you configure are chained together in the order that you've listed them in the providers. In the above example, the `loggingInterceptor` would process the request and then forward it to the `cachingInterceptor`.
 
@@ -55,7 +55,7 @@ The interceptors you configure are chained together in the order that you've lis
 
 An interceptor may transform the `Observable` stream of `HttpEvent`s returned by `next` in order to access or manipulate the response. Because this stream includes all response events, inspecting the `.type` of each event may be necessary in order to identify the final response object.
 
-<docs-code language="ts">
+```ts
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response) {
@@ -63,7 +63,7 @@ export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
     }
   }));
 }
-</docs-code>
+```
 
 TIP: Interceptors naturally associate responses with their outgoing requests, because they transform the response stream in a closure that captures the request object.
 
@@ -73,11 +73,11 @@ Most aspects of `HttpRequest` and `HttpResponse` instances are _immutable_, and
 
 For example, to add a header to a request:
 
-<docs-code language="ts">
+```ts
 const reqWithHeader = req.clone({
   headers: req.headers.set('X-New-Header', 'new header value'),
 });
-</docs-code>
+```
 
 This immutability allows most interceptors to be idempotent if the same `HttpRequest` is submitted to the interceptor chain multiple times. This can happen for a few reasons, including when a request is retried after failure.
 
@@ -85,11 +85,11 @@ CRITICAL: The body of a request or response is **not** protected from deep mutat
 
 ## Dependency injection in interceptors
 
-Interceptors are run in the _injection context_ of the injector which registered them, and can use  Angular's `inject` API to retrieve dependencies.
+Interceptors are run in the _injection context_ of the injector which registered them, and can use Angular's `inject` API to retrieve dependencies.
 
 For example, suppose an application has a service called `AuthService`, which creates authentication tokens for outgoing requests. An interceptor can inject and use this service:
 
-<docs-code language="ts">
+```ts
 export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
   // Inject the current `AuthService` and use it to get an authentication token:
   const authToken = inject(AuthService).getAuthToken();
@@ -100,7 +100,7 @@ export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn)
   });
   return next(newReq);
 }
-</docs-code>
+```
 
 ## Request and response metadata
 
@@ -112,9 +112,9 @@ To illustrate how this system works, let's use metadata to control whether a cac
 
 To store whether the caching interceptor should cache a particular request in that request's `.context` map, define a new `HttpContextToken` to act as a key:
 
-<docs-code language="ts">
+```ts
 export const CACHING_ENABLED = new HttpContextToken<boolean>(() => true);
-</docs-code>
+```
 
 The provided function creates the default value for the token for requests that haven't explicitly set a value for it. Using a function ensures that if the token's value is an object or array, each request gets its own instance.
 
@@ -122,7 +122,7 @@ The provided function creates the default value for the token for requests that
 
 An interceptor can then read the token and choose to apply caching logic or not based on its value:
 
-<docs-code language="ts">
+```ts
 export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   if (req.context.get(CACHING_ENABLED)) {
     // apply caching logic
@@ -132,17 +132,17 @@ export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
     return next(req);
   }
 }
-</docs-code>
+```
 
 ### Setting context tokens when making a request
 
 When making a request via the `HttpClient` API, you can provide values for `HttpContextToken`s:
 
-<docs-code language="ts">
+```ts
 const data$ = http.get('/sensitive/data', {
   context: new HttpContext().set(CACHING_ENABLED, false),
 });
-</docs-code>
+```
 
 Interceptors can read these values from the `HttpContext` of the request.
 
@@ -158,11 +158,11 @@ Interceptors are not required to invoke `next`. They may instead choose to const
 
 Constructing a response is possible using the `HttpResponse` constructor:
 
-<docs-code language="ts">
+```ts
 const resp = new HttpResponse({
   body: 'response body',
 });
-</docs-code>
+```
 
 ## Working with redirect information
 
@@ -170,7 +170,7 @@ When using `HttpClient` with the `withFetch` provider, responses include a `redi
 
 An interceptor can access and act upon the redirect information:
 
-<docs-code language="ts">
+```ts
 export function redirectTrackingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response && event.redirected) {
@@ -179,11 +179,11 @@ export function redirectTrackingInterceptor(req: HttpRequest<unknown>, next: Htt
     }
   }));
 }
-</docs-code>
+```
 
 You can also use the redirect information to implement conditional logic in your interceptors:
 
-<docs-code language="ts">
+```ts
 export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response && event.redirected) {
@@ -195,7 +195,45 @@ export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHan
     }
   }));
 }
-</docs-code>
+```
+
+## Working with response types
+
+When using `HttpClient` with the `withFetch` provider, responses include a `type` property that indicates how the browser handled the response based on CORS policies and request mode. This property aligns with the native Fetch API specification and provides valuable insights for debugging CORS issues and understanding response accessibility.
+
+The response `type` property can have the following values:
+
+- `'basic'` - Same-origin response with all headers accessible
+- `'cors'` - Cross-origin response with CORS headers properly configured
+- `'opaque'` - Cross-origin response without CORS, headers and body may be limited
+- `'opaqueredirect'` - Response from a redirected request in no-cors mode
+- `'error'` - Network error occurred
+
+An interceptor can use response type information for CORS debugging and error handling:
+
+```ts
+export function responseTypeInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
+  return next(req).pipe(map(event => {
+    if (event.type === HttpEventType.Response) {
+      // Handle different response types appropriately
+      switch (event.responseType) {
+        case 'opaque':
+          // Limited access to response data
+          console.warn('Limited response data due to CORS policy');
+          break;
+        case 'cors':
+        case 'basic':
+          // Full access to response data
+          break;
+        case 'error':
+          // Handle network errors
+          console.error('Network error in response');
+          break;
+      }
+    }
+  }));
+}
+```
 
 ## DI-based interceptors
 
@@ -203,7 +241,7 @@ export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHan
 
 A DI-based interceptor is an injectable class which implements the `HttpInterceptor` interface:
 
-<docs-code language="ts">
+```ts
 @Injectable()
 export class LoggingInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, handler: HttpHandler): Observable<HttpEvent<any>> {
@@ -211,11 +249,11 @@ export class LoggingInterceptor implements HttpInterceptor {
     return handler.handle(req);
   }
 }
-</docs-code>
+```
 
 DI-based interceptors are configured through a dependency injection multi-provider:
 
-<docs-code language="ts">
+```ts
 bootstrapApplication(AppComponent, {providers: [
   provideHttpClient(
     // DI-based interceptors must be explicitly enabled.
@@ -224,6 +262,6 @@ bootstrapApplication(AppComponent, {providers: [
 
   {provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true},
 ]});
-</docs-code>
+```
 
 DI-based interceptors run in the order that their providers are registered. In an app with an extensive and hierarchical DI configuration, this order can be very hard to predict.
diff --git a/adev-es/src/content/guide/http/interceptors.md b/adev-es/src/content/guide/http/interceptors.md
index 585d9ed..bc6e71d 100644
--- a/adev-es/src/content/guide/http/interceptors.md
+++ b/adev-es/src/content/guide/http/interceptors.md
@@ -4,7 +4,7 @@
 
 RESUMEN: Los interceptores son middleware que permiten abstraer patrones comunes como reintentos, caché, registro de actividad y autenticación, evitando que cada solicitud individual tenga que manejar estos casos por separado.
 
-`HttpClient` soporta dos tipos de interceptores: funcionales y basados en DI. Nuestra recomendación es usar interceptores funcionales porque tienen un comportamiento más predecible, especialmente en configuraciones complejas. Nuestros ejemplos en esta guía usan interceptores funcionales, y cubrimos los [interceptores basados en DI](#interceptores-basados-en-di) en su propia sección al final.
+`HttpClient` soporta dos tipos de interceptores: funcionales y basados en DI. Nuestra recomendación es usar interceptores funcionales porque tienen un comportamiento más predecible, especialmente en configuraciones complejas. Nuestros ejemplos en esta guía usan interceptores funcionales, y cubrimos los [interceptores basados en DI](#interceptores-basados-en-di-inyección-de-dependencias) en su propia sección al final.
 
 ## Interceptores
 
@@ -12,15 +12,15 @@ Los interceptores son generalmente funciones que puedes ejecutar para cada solic
 
 Puedes usar interceptores para implementar una variedad de patrones comunes, como:
 
-* Agregar encabezados de autenticación a las solicitudes salientes a una API particular.
-* Reintentar solicitudes fallidas con retroceso exponencial.
-* Almacenar en caché las respuestas por un período de tiempo, o hasta que sean invalidadas por mutaciones.
-* Personalizar el análisis de las respuestas.
-* Medir los tiempos de respuesta del servidor y registrarlos.
-* Controlar elementos de la UI como un indicador de carga mientras las operaciones de red están en progreso.
-* Recopilar y agrupar solicitudes realizadas dentro de un marco de tiempo determinado.
-* Fallar automáticamente las solicitudes después de una fecha límite o tiempo de espera configurable.
-* Consultar periódicamente el servidor y actualizar los resultados.
+- Agregar encabezados de autenticación a las solicitudes salientes a una API particular.
+- Reintentar solicitudes fallidas con retroceso exponencial.
+- Almacenar en caché las respuestas por un período de tiempo, o hasta que sean invalidadas por mutaciones.
+- Personalizar el análisis de las respuestas.
+- Medir los tiempos de respuesta del servidor y registrarlos.
+- Controlar elementos de la UI como un indicador de carga mientras las operaciones de red están en progreso.
+- Recopilar y agrupar solicitudes realizadas dentro de un marco de tiempo determinado.
+- Fallar automáticamente las solicitudes después de una fecha límite o tiempo de espera configurable.
+- Consultar periódicamente el servidor y actualizar los resultados.
 
 ## Definiendo un interceptor
 
@@ -28,12 +28,12 @@ La forma básica de un interceptor es una función que recibe la `HttpRequest` s
 
 Por ejemplo, este `loggingInterceptor` registrará la URL de la solicitud saliente en `console.log` antes de reenviar la solicitud:
 
-<docs-code language="ts">
+```ts
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   console.log(req.url);
   return next(req);
 }
-</docs-code>
+```
 
 Para que este interceptor realmente intercepte las solicitudes, debes configurar `HttpClient` para usarlo.
 
@@ -41,13 +41,13 @@ Para que este interceptor realmente intercepte las solicitudes, debes configurar
 
 Declaras el conjunto de interceptores a usar al configurar `HttpClient` a través de inyección de dependencias, usando la característica `withInterceptors`:
 
-<docs-code language="ts">
+```ts
 bootstrapApplication(AppComponent, {providers: [
   provideHttpClient(
     withInterceptors([loggingInterceptor, cachingInterceptor]),
   )
 ]});
-</docs-code>
+```
 
 Los interceptores que configuras se encadenan juntos en el orden que los has listado en los providers. En el ejemplo anterior, el `loggingInterceptor` procesaría la solicitud y luego la reenviaría al `cachingInterceptor`.
 
@@ -55,7 +55,7 @@ Los interceptores que configuras se encadenan juntos en el orden que los has lis
 
 Un interceptor puede transformar la secuencia `Observable` de `HttpEvent`s devuelta por `next` para acceder o manipular la respuesta. Debido a que esta secuencia incluye todos los eventos de respuesta, inspeccionar el `.type` de cada evento puede ser necesario para identificar el objeto de respuesta final.
 
-<docs-code language="ts">
+```ts
 export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response) {
@@ -63,25 +63,25 @@ export function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
     }
   }));
 }
-</docs-code>
+```
 
 CONSEJO: Los interceptores naturalmente asocian las respuestas con sus solicitudes salientes, porque transforman el flujo de respuesta en una función de cierre (closure) que captura el objeto de solicitud.
 
-## Modificando requests
+## Modificando solicitudes
 
 La mayoría de los aspectos de las instancias `HttpRequest` y `HttpResponse` son _inmutables_, y los interceptores no pueden modificarlos directamente. En su lugar, los interceptores aplican mutaciones clonando estos objetos usando la operación `.clone()`, y especificando qué propiedades deben mutarse en la nueva instancia. Esto puede involucrar realizar actualizaciones inmutables en el valor mismo (como `HttpHeaders` o `HttpParams`).
 
 Por ejemplo, para agregar un encabezado a una solicitud:
 
-<docs-code language="ts">
+```ts
 const reqWithHeader = req.clone({
   headers: req.headers.set('X-New-Header', 'new header value'),
 });
-</docs-code>
+```
 
 Esta inmutabilidad permite que la mayoría de los interceptores sean idempotentes si la misma `HttpRequest` se envía a la cadena de interceptores múltiples veces. Esto puede suceder por algunas razones, incluyendo cuando una solicitud se reintenta después de fallar.
 
-CRÍTICO: El cuerpo de una solicitud o respuesta **no** está protegido de mutaciones profundas. Si un interceptor debe mutar el cuerpo, ten cuidado de manejar la ejecución múltiples veces en la misma solicitud.
+IMPORTANTE: El cuerpo de una solicitud o respuesta **no** está protegido de mutaciones profundas. Si un interceptor debe mutar el cuerpo, ten cuidado de manejar la ejecución múltiples veces en la misma solicitud.
 
 ## Inyección de dependencias en interceptores
 
@@ -89,20 +89,20 @@ Los interceptores se ejecutan en el _contexto de inyección_ del inyector que lo
 
 Por ejemplo, supongamos que una aplicación tiene un servicio llamado `AuthService`, que crea tokens de autenticación para las solicitudes salientes. Un interceptor puede inyectar y usar este servicio:
 
-<docs-code language="ts">
+```ts
 export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
-  // Inject the current `AuthService` and use it to get an authentication token:
+  // Inyecta el `AuthService` actual y úsalo para obtener un token de autenticación:
   const authToken = inject(AuthService).getAuthToken();
 
-  // Clone the request to add the authentication header.
+  // Clona la solicitud para agregar el encabezado de autenticación.
   const newReq = req.clone({
     headers: req.headers.append('X-Authentication-Token', authToken),
   });
   return next(newReq);
 }
-</docs-code>
+```
 
-## Metada de solicitudes y respuestas
+## Metadatos de solicitudes y respuestas
 
 Con frecuencia es útil incluir información en una solicitud que no se envía al backend, pero está específicamente destinada para los interceptores. Las `HttpRequest`s tienen un objeto `.context` que almacena este tipo de metadatos como una instancia de `HttpContext`. Este objeto funciona como un mapa tipado, con claves de tipo `HttpContextToken`.
 
@@ -112,9 +112,9 @@ Para ilustrar cómo funciona este sistema, usemos metadatos para controlar si un
 
 Para almacenar si el interceptor de caché debe almacenar en caché una solicitud particular en el mapa `.context` de esa solicitud, define un nuevo `HttpContextToken` para actuar como clave:
 
-<docs-code language="ts">
+```ts
 export const CACHING_ENABLED = new HttpContextToken<boolean>(() => true);
-</docs-code>
+```
 
 La función proporcionada crea el valor por defecto para el token para las solicitudes que no han establecido explícitamente un valor para él. Usar una función asegura que si el valor del token es un objeto o array, cada solicitud obtiene su propia instancia.
 
@@ -122,7 +122,7 @@ La función proporcionada crea el valor por defecto para el token para las solic
 
 Un interceptor puede entonces leer el token y elegir aplicar lógica de caché o no basándose en su valor:
 
-<docs-code language="ts">
+```ts
 export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   if (req.context.get(CACHING_ENABLED)) {
     // aplicar lógica de caché
@@ -132,17 +132,17 @@ export function cachingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerF
     return next(req);
   }
 }
-</docs-code>
+```
 
 ### Configurando tokens de contexto al hacer una solicitud
 
 Al hacer una solicitud a través de la API `HttpClient`, puedes proporcionar valores para `HttpContextToken`s:
 
-<docs-code language="ts">
+```ts
 const data$ = http.get('/sensitive/data', {
   context: new HttpContext().set(CACHING_ENABLED, false),
 });
-</docs-code>
+```
 
 Los interceptores pueden leer estos valores del `HttpContext` de la solicitud.
 
@@ -158,19 +158,19 @@ Los interceptores no están obligados a invocar `next`. Pueden elegir construir
 
 Construir una respuesta es posible usando el constructor `HttpResponse`:
 
-<docs-code language="ts">
+```ts
 const resp = new HttpResponse({
   body: 'response body',
 });
-</docs-code>
+```
 
-## Trabajando con información de redirección 
+## Trabajando con información de redirección
 
 Cuando se usa `HttpClient` con el proveedor `withFetch`, las respuestas incluyen una propiedad `redirected` que indica si la respuesta fue resultado de una redirección. Esta propiedad está alineada con la especificación nativa de la API Fetch y puede ser útil en interceptores para manejar escenarios de redirección.
 
 Un interceptor puede acceder y actuar en base a la información de redirección:
 
-<docs-code language="ts">
+```ts
 export function redirectTrackingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response && event.redirected) {
@@ -179,11 +179,11 @@ export function redirectTrackingInterceptor(req: HttpRequest<unknown>, next: Htt
     }
   }));
 }
-</docs-code>
+```
 
 También puedes usar la información de redirección para implementar lógica condicional en tus interceptores:
 
-<docs-code language="ts">
+```ts
 export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   return next(req).pipe(tap(event => {
     if (event.type === HttpEventType.Response && event.redirected) {
@@ -195,7 +195,45 @@ export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHan
     }
   }));
 }
-</docs-code>
+```
+
+## Trabajando con tipos de respuesta
+
+Cuando se usa `HttpClient` con el proveedor `withFetch`, las respuestas incluyen una propiedad `type` que indica cómo el navegador manejó la respuesta basándose en las políticas CORS y el modo de solicitud. Esta propiedad está alineada con la especificación nativa de la API Fetch y proporciona información valiosa para depurar problemas CORS y entender la accesibilidad de las respuestas.
+
+La propiedad `type` de la respuesta puede tener los siguientes valores:
+
+- `'basic'` - Respuesta del mismo origen con todos los encabezados accesibles
+- `'cors'` - Respuesta de origen cruzado con encabezados CORS configurados correctamente
+- `'opaque'` - Respuesta de origen cruzado sin CORS, los encabezados y el cuerpo pueden estar limitados
+- `'opaqueredirect'` - Respuesta de una solicitud redirigida en modo no-cors
+- `'error'` - Ocurrió un error de red
+
+Un interceptor puede usar la información del tipo de respuesta para depurar CORS y manejar errores:
+
+```ts
+export function responseTypeInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
+  return next(req).pipe(map(event => {
+    if (event.type === HttpEventType.Response) {
+      // Manejar diferentes tipos de respuesta apropiadamente
+      switch (event.responseType) {
+        case 'opaque':
+          // Acceso limitado a los datos de respuesta
+          console.warn('Datos de respuesta limitados debido a la política CORS');
+          break;
+        case 'cors':
+        case 'basic':
+          // Acceso completo a los datos de respuesta
+          break;
+        case 'error':
+          // Manejar errores de red
+          console.error('Error de red en la respuesta');
+          break;
+      }
+    }
+  }));
+}
+```
 
 ## Interceptores basados en DI (Inyección de Dependencias)
 
@@ -203,7 +241,7 @@ export function authRedirectInterceptor(req: HttpRequest<unknown>, next: HttpHan
 
 Un interceptor basado en DI es una clase inyectable que implementa la interfaz `HttpInterceptor`:
 
-<docs-code language="ts">
+```ts
 @Injectable()
 export class LoggingInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, handler: HttpHandler): Observable<HttpEvent<any>> {
@@ -211,11 +249,11 @@ export class LoggingInterceptor implements HttpInterceptor {
     return handler.handle(req);
   }
 }
-</docs-code>
+```
 
 Los interceptores basados en DI se configuran a través de un multi-provider de inyección de dependencias:
 
-<docs-code language="ts">
+```ts
 bootstrapApplication(AppComponent, {providers: [
   provideHttpClient(
     // Los interceptores basados en DI deben habilitarse explícitamente.
@@ -224,6 +262,6 @@ bootstrapApplication(AppComponent, {providers: [
 
   {provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true},
 ]});
-</docs-code>
+```
 
 Los interceptores basados en DI se ejecutan en el orden en que se registran sus providers. En una aplicación con una configuración DI extensa y jerárquica, este orden puede ser muy difícil de predecir.
diff --git a/adev-es/src/content/guide/http/making-requests.en.md b/adev-es/src/content/guide/http/making-requests.en.md
index 180f9f3..131a1a0 100644
--- a/adev-es/src/content/guide/http/making-requests.en.md
+++ b/adev-es/src/content/guide/http/making-requests.en.md
@@ -8,15 +8,15 @@ Through an options object passed to the request method, various properties of th
 
 ## Fetching JSON data
 
-Fetching data from a backend often requires making a GET request using the [`HttpClient.get()`](api/common/http/HttpClient#get) method. This method takes two arguments: the string endpoint URL from which to fetch, and an *optional options* object to configure the request.
+Fetching data from a backend often requires making a GET request using the [`HttpClient.get()`](api/common/http/HttpClient#get) method. This method takes two arguments: the string endpoint URL from which to fetch, and an _optional options_ object to configure the request.
 
 For example, to fetch configuration data from a hypothetical API using the `HttpClient.get()` method:
 
-<docs-code language="ts">
+```ts
 http.get<Config>('/api/config').subscribe(config => {
   // process the configuration.
 });
-</docs-code>
+```
 
 Note the generic type argument which specifies that the data returned by the server will be of type `Config`. This argument is optional, and if you omit it then the returned data will have type `Object`.
 
@@ -28,20 +28,20 @@ CRITICAL: The generic type of request methods is a type **assertion** about the
 
 By default, `HttpClient` assumes that servers will return JSON data. When interacting with a non-JSON API, you can tell `HttpClient` what response type to expect and return when making the request. This is done with the `responseType` option.
 
-| **`responseType` value** | **Returned response type** |
-| - | - |
-| `'json'` (default) | JSON data of the given generic type |
-| `'text'` | string data |
-| `'arraybuffer'` | [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the raw response bytes |
-| `'blob'` | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) instance |
+| **`responseType` value** | **Returned response type**                                                                                                                |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `'json'` (default)       | JSON data of the given generic type                                                                                                       |
+| `'text'`                 | string data                                                                                                                               |
+| `'arraybuffer'`          | [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) containing the raw response bytes |
+| `'blob'`                 | [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) instance                                                                        |
 
 For example, you can ask `HttpClient` to download the raw bytes of a `.jpeg` image into an `ArrayBuffer`:
 
-<docs-code language="ts">
+```ts
 http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe(buffer => {
   console.log('The image is ' + buffer.byteLength + ' bytes large');
 });
-</docs-code>
+```
 
 <docs-callout important title="Literal value for `responseType`">
 Because the value of `responseType` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
@@ -55,21 +55,21 @@ Server APIs which perform mutations often require making POST requests with a re
 
 The [`HttpClient.post()`](api/common/http/HttpClient#post) method behaves similarly to `get()`, and accepts an additional `body` argument before its options:
 
-<docs-code language="ts">
+```ts
 http.post<Config>('/api/config', newConfig).subscribe(config => {
   console.log('Updated config:', config);
 });
-</docs-code>
+```
 
 Many different types of values can be provided as the request's `body`, and `HttpClient` will serialize them accordingly:
 
-| **`body` type** | **Serialized as** |
-| - | - |
-| string | Plain text |
-| number, boolean, array, or plain object | JSON |
-| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | raw data from the buffer |
-| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob) | raw data with the `Blob`'s content type |
-| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) | `multipart/form-data` encoded data |
+| **`body` type**                                                                                                               | **Serialized as**                                    |
+| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| string                                                                                                                        | Plain text                                           |
+| number, boolean, array, or plain object                                                                                       | JSON                                                 |
+| [`ArrayBuffer`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)                       | raw data from the buffer                             |
+| [`Blob`](https://developer.mozilla.org/docs/Web/API/Blob)                                                                     | raw data with the `Blob`'s content type              |
+| [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)                                                             | `multipart/form-data` encoded data                   |
 | [`HttpParams`](api/common/http/HttpParams) or [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) | `application/x-www-form-urlencoded` formatted string |
 
 IMPORTANT: Remember to `.subscribe()` to mutation request `Observable`s in order to actually fire the request.
@@ -80,19 +80,19 @@ Specify request parameters that should be included in the request URL using the
 
 Passing an object literal is the simplest way of configuring URL parameters:
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   params: {filter: 'all'},
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 Alternatively, pass an instance of `HttpParams` if you need more control over the construction or serialization of the parameters.
 
 IMPORTANT: Instances of `HttpParams` are _immutable_ and cannot be directly changed. Instead, mutation methods such as `append()` return a new instance of `HttpParams` with the mutation applied.
 
-<docs-code language="ts">
+```ts
 const baseParams = new HttpParams().set('filter', 'all');
 
 http.get('/api/config', {
@@ -100,7 +100,7 @@ http.get('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 You can instantiate `HttpParams` with a custom `HttpParameterCodec` that determines how `HttpClient` will encode the parameters into the URL.
 
@@ -116,7 +116,7 @@ import { inject } from '@angular/core';
 
 export class CustomHttpParamEncoder  implements HttpParameterCodec {
   encodeKey(key: string): string   {
-     return encodeURIComponent(key); 
+    return encodeURIComponent(key);
   }
 
   encodeValue(value: string): string {
@@ -153,7 +153,7 @@ Specify request headers that should be included in the request using the `header
 
 Passing an object literal is the simplest way of configuring request headers:
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   headers: {
     'X-Debug-Level': 'verbose',
@@ -161,13 +161,13 @@ http.get('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 Alternatively, pass an instance of `HttpHeaders` if you need more control over the construction of headers
 
 IMPORTANT: Instances of `HttpHeaders` are _immutable_ and cannot be directly changed. Instead, mutation methods such as `append()` return a new instance of `HttpHeaders` with the mutation applied.
 
-<docs-code language="ts">
+```ts
 const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');
 
 http.get<Config>('/api/config', {
@@ -175,7 +175,7 @@ http.get<Config>('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 ## Interacting with the server response events
 
@@ -183,12 +183,12 @@ For convenience, `HttpClient` by default returns an `Observable` of the data ret
 
 To access the entire response, set the `observe` option to `'response'`:
 
-<docs-code language="ts">
+```ts
 http.get<Config>('/api/config', {observe: 'response'}).subscribe(res => {
   console.log('Response status:', res.status);
   console.log('Body:', res.body);
 });
-</docs-code>
+```
 
 <docs-callout important title="Literal value for `observe`">
 Because the value of `observe` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
@@ -206,7 +206,7 @@ NOTE: The optional `fetch` implementation of `HttpClient` does not report _uploa
 
 To observe the event stream, set the `observe` option to `'events'`:
 
-<docs-code language="ts">
+```ts
 http.post('/api/upload', myData, {
   reportProgress: true,
   observe: 'events',
@@ -220,7 +220,7 @@ http.post('/api/upload', myData, {
       break;
   }
 });
-</docs-code>
+```
 
 <docs-callout important title="Literal value for `observe`">
 Because the value of `observe` affects the type returned by `HttpClient`, it must have a literal type and not a `string` type.
@@ -230,22 +230,22 @@ This happens automatically if the options object passed to the request method is
 
 Each `HttpEvent` reported in the event stream has a `type` which distinguishes what the event represents:
 
-| **`type` value** | **Event meaning** |
-| - | - |
-| `HttpEventType.Sent` | The request has been dispatched to the server |
-| `HttpEventType.UploadProgress` | An `HttpUploadProgressEvent` reporting progress on uploading the request body |
-| `HttpEventType.ResponseHeader` | The head of the response has been received, including status and headers |
+| **`type` value**                 | **Event meaning**                                                                  |
+| -------------------------------- | ---------------------------------------------------------------------------------- |
+| `HttpEventType.Sent`             | The request has been dispatched to the server                                      |
+| `HttpEventType.UploadProgress`   | An `HttpUploadProgressEvent` reporting progress on uploading the request body      |
+| `HttpEventType.ResponseHeader`   | The head of the response has been received, including status and headers           |
 | `HttpEventType.DownloadProgress` | An `HttpDownloadProgressEvent` reporting progress on downloading the response body |
-| `HttpEventType.Response` | The entire response has been received, including the response body |
-| `HttpEventType.User` | A custom event from an Http interceptor.
+| `HttpEventType.Response`         | The entire response has been received, including the response body                 |
+| `HttpEventType.User`             | A custom event from an Http interceptor.                                           |
 
 ## Handling request failure
 
 There are three ways an HTTP request can fail:
 
-* A network or connection error can prevent the request from reaching the backend server.
-* A request didn't respond in time when the timeout option was set.
-* The backend can receive the request but fail to process it, and return an error response.
+- A network or connection error can prevent the request from reaching the backend server.
+- A request didn't respond in time when the timeout option was set.
+- The backend can receive the request but fail to process it, and return an error response.
 
 `HttpClient` captures all of the above kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network and timeout errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
 
@@ -253,7 +253,7 @@ The [RxJS library](https://rxjs.dev/) offers several operators which can be usef
 
 You can use the `catchError` operator to transform an error response into a value for the UI. This value can tell the UI to display an error page or value, and capture the error's cause if necessary.
 
-Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several *retry* operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times.
+Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several _retry_ operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times.
 
 ### Timeouts
 
@@ -261,7 +261,7 @@ To set a timeout for a request, you can set the `timeout` option to a number of
 
 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.
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   timeout: 3000,
 }).subscribe({
@@ -272,7 +272,7 @@ http.get('/api/config', {
     // If the request times out, an error will have been emitted.
   }
 });
-</docs-code>
+```
 
 ## Advanced fetch options
 
@@ -286,17 +286,17 @@ The following options provide fine-grained control over request behavior when us
 
 The `keepalive` option allows a request to outlive the page that initiated it. This is particularly useful for analytics or logging requests that need to complete even if the user navigates away from the page.
 
-<docs-code language="ts">
+```ts
 http.post('/api/analytics', analyticsData, {
   keepalive: true
 }).subscribe();
-</docs-code>
+```
 
 #### HTTP caching control
 
 The `cache` option controls how the request interacts with the browser's HTTP cache, which can significantly improve performance for repeated requests.
 
-<docs-code language="ts">
+```ts
 //  Use cached response regardless of freshness
 http.get('/api/config', {
   cache: 'force-cache'
@@ -317,13 +317,13 @@ http.get('/api/static-data', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 #### Request priority for Core Web Vitals
 
 The `priority` option allows you to indicate the relative importance of a request, helping browsers optimize resource loading for better Core Web Vitals scores.
 
-<docs-code language="ts">
+```ts
 // High priority for critical resources
 http.get('/api/user-profile', {
   priority: 'high'
@@ -344,9 +344,10 @@ http.get('/api/settings', {
 }).subscribe(settings => {
   // ...
 });
-</docs-code>
+```
 
 Available `priority` values:
+
 - `'high'`: High priority, loaded early (e.g., critical user data, above-the-fold content)
 - `'low'`: Low priority, loaded when resources are available (e.g., analytics, prefetch data)
 - `'auto'`: Browser determines priority based on request context (default)
@@ -357,7 +358,7 @@ TIP: Use `priority: 'high'` for requests that affect Largest Contentful Paint (L
 
 The `mode` option controls how the request handles cross-origin requests and determines the response type.
 
-<docs-code language="ts">
+```ts
 // Same-origin requests only
 http.get('/api/local-data', {
   mode: 'same-origin'
@@ -378,9 +379,10 @@ http.get('https://external-api.com/public-data', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 Available `mode` values:
+
 - `'same-origin'`: Only allow same-origin requests, fail for cross-origin requests
 - `'cors'`: Allow cross-origin requests with CORS (default)
 - `'no-cors'`: Allow simple cross-origin requests without CORS, response is opaque
@@ -391,7 +393,7 @@ TIP: Use `mode: 'same-origin'` for sensitive requests that should never go cross
 
 The `redirect` option specifies how to handle redirect responses from the server.
 
-<docs-code language="ts">
+```ts
 // Follow redirects automatically (default behavior)
 http.get('/api/resource', {
   redirect: 'follow'
@@ -417,9 +419,10 @@ http.get('/api/resource', {
     // Redirect responses will trigger this error handler
   }
 });
-</docs-code>
+```
 
 Available `redirect` values:
+
 - `'follow'`: Automatically follow redirects (default)
 - `'error'`: Treat redirects as errors
 - `'manual'`: Don't follow redirects automatically, return redirect response
@@ -430,7 +433,7 @@ TIP: Use `redirect: 'manual'` when you need to handle redirects with custom logi
 
 The `credentials` option controls whether cookies, authorization headers, and other credentials are sent with cross-origin requests. This is particularly important for authentication scenarios.
 
-<docs-code language="ts">
+```ts
 // Include credentials for cross-origin requests
 http.get('https://api.example.com/protected-data', {
   credentials: 'include'
@@ -466,11 +469,12 @@ http.get('https://api.example.com/data', {
 }).subscribe(data => {
   // Equivalent to credentials: 'include'
 });
-</docs-code>
+```
 
 IMPORTANT: The `withCredentials` option takes precedence over the `credentials` option. If both are specified, `withCredentials: true` will always result in `credentials: 'include'`, regardless of the explicit `credentials` value.
 
 Available `credentials` values:
+
 - `'omit'`: Never send credentials
 - `'same-origin'`: Send credentials only for same-origin requests (default)
 - `'include'`: Always send credentials, even for cross-origin requests
@@ -481,7 +485,7 @@ TIP: Use `credentials: 'include'` when you need to send authentication cookies o
 
 The `referrer` option allows you to control what referrer information is sent with the request. This is important for privacy and security considerations.
 
-<docs-code language="ts">
+```ts
 // Send a specific referrer URL
 http.get('/api/data', {
   referrer: 'https://example.com/page'
@@ -495,20 +499,50 @@ http.get('/api/analytics', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 The `referrer` option accepts:
+
 - A valid URL string: Sets the specific referrer URL to send
 - An empty string `''`: Sends no referrer information
 - `'about:client'`: Uses the default referrer (current page URL)
 
 TIP: Use `referrer: ''` for sensitive requests where you don't want to leak the referring page URL.
 
+#### 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.
+
+```ts
+// Send no referrer information regardless of the current page
+http.get('/api/data', {
+  referrerPolicy: 'no-referrer'
+}).subscribe();
+
+// Send origin only (e.g. https://example.com)
+http.get('/api/analytics', {
+  referrerPolicy: 'origin'
+}).subscribe();
+```
+
+The `referrerPolicy` option accepts:
+
+- `'no-referrer'` Never send the `Referer` header.
+- `'no-referrer-when-downgrade'` Sends the referrer for same-origin and secure (HTTPS→HTTPS) requests, but omits it when navigating from a secure to a less secure origin (HTTPS→HTTP).
+- `'origin'` Sends only the origin (scheme, host, port) of the referrer, omitting path and query information.
+- `'origin-when-cross-origin'` Sends the full URL for same-origin requests, but only the origin for cross-origin requests.
+- `'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.
+
+TIP: Prefer conservative values such as `'no-referrer'`, `'origin'`, or `'strict-origin-when-cross-origin'` for privacy-sensitive requests.
+
 #### Integrity
 
 The `integrity` option allows you to verify that the response hasn't been tampered with by providing a cryptographic hash of the expected content. This is particularly useful for loading scripts or other resources from CDNs.
 
-<docs-code language="ts">
+```ts
 // Verify response integrity with SHA-256 hash
 http.get('/api/script.js', {
   integrity: 'sha256-ABC123...',
@@ -516,7 +550,7 @@ http.get('/api/script.js', {
 }).subscribe(script => {
   // Script content is verified against the hash
 });
-</docs-code>
+```
 
 IMPORTANT: The `integrity` option requires an exact match between the response content and the provided hash. If the content doesn't match, the request will fail with a network error.
 
@@ -542,7 +576,7 @@ TIP: Using the `async` pipe or the `toSignal` operation to subscribe to `Observa
 
 While `HttpClient` can be injected and used directly from components, generally we recommend you create reusable, injectable services which isolate and encapsulate data access logic. For example, this `UserService` encapsulates the logic to request data for a user by their id:
 
-<docs-code language="ts">
+```ts
 @Injectable({providedIn: 'root'})
 export class UserService {
   private http = inject(HttpClient);
@@ -551,12 +585,13 @@ export class UserService {
     return this.http.get<User>(`/api/user/${id}`);
   }
 }
-</docs-code>
+```
 
 Within a component, you can combine `@if` with the `async` pipe to render the UI for the data only after it's finished loading:
 
-<docs-code language="ts">
+```angular-ts
 import { AsyncPipe } from '@angular/common';
+
 @Component({
   imports: [AsyncPipe],
   template: `
@@ -578,4 +613,4 @@ export class UserProfileComponent {
     });
   }
 }
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/http/making-requests.md b/adev-es/src/content/guide/http/making-requests.md
index de9436c..409d747 100644
--- a/adev-es/src/content/guide/http/making-requests.md
+++ b/adev-es/src/content/guide/http/making-requests.md
@@ -1,6 +1,6 @@
 # Realizando solicitudes HTTP
 
-`HttpClient` tiene métodos correspondientes a los diferentes verbos HTTP utilizados para hacer solicitudes, tanto para cargar datos como para aplicar mutaciones en el servidor. Cada método devuelve un [RxJS `Observable`](https://rxjs.dev/guide/observable) que, al sucribirse se suscribe, envía la solicitud y luego emite los resultados cuando el servidor responde.
+`HttpClient` tiene métodos correspondientes a los diferentes verbos HTTP utilizados para hacer solicitudes, tanto para cargar datos como para aplicar mutaciones en el servidor. Cada método devuelve un [RxJS `Observable`](https://rxjs.dev/guide/observable) que, al suscribirse, envía la solicitud y luego emite los resultados cuando el servidor responde.
 
 NOTA: Los `Observable`s creados por `HttpClient` pueden suscribirse cualquier número de veces y harán una nueva solicitud al backend por cada suscripción.
 
@@ -12,11 +12,11 @@ Obtener datos de un backend con frecuencia requiere hacer una solicitud GET usan
 
 Por ejemplo, para obtener datos de configuración de una API hipotética usando el método `HttpClient.get()`:
 
-<docs-code language="ts">
+```ts
 http.get<Config>('/api/config').subscribe(config => {
   // procesar la configuración.
 });
-</docs-code>
+```
 
 Observa el argumento de tipo genérico que especifica que los datos devueltos por el servidor serán de tipo `Config`. Este argumento es opcional, y si lo omites, los datos devueltos tendrán tipo `Object`.
 
@@ -28,20 +28,20 @@ CRÍTICO: El tipo genérico de los métodos de solicitud es una **afirmación**
 
 Por defecto, `HttpClient` asume que los servidores devolverán datos JSON. Cuando interactúes con una API que no sea JSON, puedes decirle a `HttpClient` qué tipo de respuesta esperar y devolver al hacer la solicitud. Esto se hace con la opción `responseType`.
 
-| **`Valor de responseType`** | **Tipo de respuesta devuelto** |
-| - | - |
-| `'json'` (por defecto) | Datos JSON del tipo genérico dado |
-| `'text'` | Cadena de texto (string) |
-| `'arraybuffer'` | [`ArrayBuffer`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) que contiene los bytes de respuesta sin procesar |
-| `'blob'` | instance [`Blob`](https://developer.mozilla.org/es/docs/Web/API/Blob) |
+| **`Valor de responseType`** | **Tipo de respuesta devuelto**                                                                                                                         |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'json'` (por defecto) | Datos JSON del tipo genérico dado                                                                                                                           |
+| `'text'`               | Cadena de texto (string)                                                                                                                                    |
+| `'arraybuffer'`        | [`ArrayBuffer`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) que contiene los bytes de respuesta sin procesar |
+| `'blob'`               | una instancia [`Blob`](https://developer.mozilla.org/es/docs/Web/API/Blob)                                                                                  |
 
 Por ejemplo, puedes pedirle al `HttpClient` que descargue los bytes sin procesar de una imagen `.jpeg` en un `ArrayBuffer`:
 
-<docs-code language="ts">
+```ts
 http.get('/images/dog.jpg', {responseType: 'arraybuffer'}).subscribe(buffer => {
   console.log('La imagen tiene ' + buffer.byteLength + ' bytes de tamaño');
 });
-</docs-code>
+```
 
 <docs-callout important title="Valor literal para `responseType">
 Debido a que el valor de `responseType` afecta el tipo devuelto por `HttpClient`, debe tener un tipo literal y no un tipo `string`.
@@ -55,11 +55,11 @@ Las APIs del servidor que realizan mutaciones con frecuencia requieren hacer sol
 
 El método [`HttpClient.post()`](api/common/http/HttpClient#post) se comporta de manera similar a `get()`, y acepta un argumento `body` adicional antes de sus opciones:
 
-<docs-code language="ts">
+```ts
 http.post<Config>('/api/config', newConfig).subscribe(config => {
   console.log('Configuración actualizada:', config);
 });
-</docs-code>
+```
 
 Se pueden proporcionar muchos tipos diferentes de valores como `body` de la solicitud, y `HttpClient` los serializará en consecuencia:
 
@@ -68,31 +68,31 @@ Se pueden proporcionar muchos tipos diferentes de valores como `body` de la soli
 | string | Texto plano |
 | number, boolean, array, u objeto plano | JSON |
 | [`ArrayBuffer`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) | datos sin procesar del buffer |
-| [`Blob`](https://developer.mozilla.org/es/docs/Web/API/Blob) | datos sin procesar con el tipo de contenido del `Blob |
+| [`Blob`](https://developer.mozilla.org/es/docs/Web/API/Blob) | datos sin procesar con el tipo de contenido del `Blob` |
 | [`FormData`](https://developer.mozilla.org/es/docs/Web/API/FormData) | datos codificados `multipart/form-data` |
 | [`HttpParams`](api/common/http/HttpParams) o [`URLSearchParams`](https://developer.mozilla.org/es/docs/Web/API/URLSearchParams) | string formateado `application/x-www-form-urlencoded` |
 
 IMPORTANTE: Recuerda hacer `.subscribe()` a los `Observable`s de solicitudes de mutación para realmente ejecutar la solicitud.
 
-## Configurando parámetros de URL parameters
+## Configurando parámetros de URL
 
 Especifica los parámetros de solicitud que deben incluirse en la URL de la solicitud usando la opción `params`.
 
 Pasar un objeto literal es la forma más simple de configurar parámetros de URL:
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   params: {filter: 'all'},
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 Alternativamente, puedes pasar una instancia de `HttpParams` si necesitas más control sobre la construcción o serialización de los parámetros.
 
 IMPORTANTE: Las instancias de `HttpParams` son _inmutables_ y no se pueden cambiar directamente. En su lugar, los métodos de mutación como `append()` devuelven una nueva instancia de `HttpParams` con la mutación aplicada.
 
-<docs-code language="ts">
+```ts
 const baseParams = new HttpParams().set('filter', 'all');
 
 http.get('/api/config', {
@@ -100,7 +100,7 @@ http.get('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 Puedes instanciar `HttpParams` con un `HttpParameterCodec` personalizado que determine cómo `HttpClient` codificará los parámetros en la URL.
 
@@ -153,7 +153,7 @@ Especifica los encabezados de solicitud que deben incluirse en la solicitud usan
 
 Pasar un objeto literal es la forma más simple de configurar encabezados de solicitud:
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   headers: {
     'X-Debug-Level': 'verbose',
@@ -161,13 +161,13 @@ http.get('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 Alternativamente, pasa una instancia de `HttpHeaders` si necesitas más control sobre la construcción de encabezados
 
 IMPORTANTE: Las instancias de `HttpHeaders` son _inmutables_ y no se pueden cambiar directamente. En su lugar, los métodos de mutación como `append()` devuelven una nueva instancia de `HttpHeaders` con la mutación aplicada.
 
-<docs-code language="ts">
+```ts
 const baseHeaders = new HttpHeaders().set('X-Debug-Level', 'minimal');
 
 http.get<Config>('/api/config', {
@@ -175,7 +175,7 @@ http.get<Config>('/api/config', {
 }).subscribe(config => {
   // ...
 });
-</docs-code>
+```
 
 ## Interactuando con los eventos de respuesta del servidor
 
@@ -183,12 +183,12 @@ Por conveniencia, `HttpClient` devuelve por defecto un `Observable` con los dato
 
 Para acceder a toda la respuesta, establece la opción `observe` en `'response'`:
 
-<docs-code language="ts">
+```ts
 http.get<Config>('/api/config', {observe: 'response'}).subscribe(res => {
   console.log('Estado de respuesta:', res.status);
   console.log('Cuerpo:', res.body);
 });
-</docs-code>
+```
 
 <docs-callout important title="Valor literal para `observe`">
 Debido a que el valor de `observe` afecta el tipo devuelto por `HttpClient`, debe tener un tipo literal y no un tipo `string`.
@@ -206,7 +206,7 @@ NOTA: La implementación opcional `fetch` de `HttpClient` no reporta eventos de
 
 Para observar la secuencia de eventos, establece la opción `observe` en `'events'`:
 
-<docs-code language="ts">
+```ts
 http.post('/api/upload', myData, {
   reportProgress: true,
   observe: 'events',
@@ -220,7 +220,7 @@ http.post('/api/upload', myData, {
       break;
   }
 });
-</docs-code>
+```
 
 <docs-callout important title="Valor literal para `observe`">
 Debido a que el valor de `observe` afecta el tipo devuelto por `HttpClient`, debe tener un tipo literal y no un tipo `string`.
@@ -235,7 +235,7 @@ Cada `HttpEvent` reportado en la secuencia de eventos tiene un `type` que distin
 | `HttpEventType.Sent` | La solicitud ha sido enviada al servidor |
 | `HttpEventType.UploadProgress` | Un `HttpUploadProgressEvent` reportando progreso en la carga del cuerpo de la solicitud |
 | `HttpEventType.ResponseHeader` | Se ha recibido el encabezado de la respuesta, incluyendo estado y encabezados |
-| `HttpEventType.DownloadProgress` | An `HttpDownloadProgressEvent` reporting progress on downloading the response body |
+| `HttpEventType.DownloadProgress` | Un `HttpDownloadProgressEvent` que reporta el progreso de la descarga del cuerpo de la respuesta |
 | `HttpEventType.Response` | Se ha recibido toda la respuesta, incluyendo el cuerpo de la respuesta |
 | `HttpEventType.User` | Un evento personalizado de un interceptor Http.
 
@@ -261,7 +261,7 @@ Para establecer un tiempo de espera para una solicitud, puedes configurar la opc
 
 NOTA: El timeout solo se aplica a la solicitud HTTP al backend en sí. No es un tiempo de espera para toda la cadena de manejo de la solicitud. Por lo tanto, esta opción no se ve afectada por ningún retraso introducido por los interceptores.
 
-<docs-code language="ts">
+```ts
 http.get('/api/config', {
   timeout: 3000,
 }).subscribe({
@@ -272,7 +272,7 @@ http.get('/api/config', {
     // Si la solicitud supera el tiempo de espera, se habrá emitido un error.
   }
 });
-</docs-code>
+```
 
 ## Opciones avanzadas de Fetch
 
@@ -286,17 +286,17 @@ Las siguientes opciones permiten un control detallado sobre el comportamiento de
 
 La opción `keepalive` permite que una solicitud continúe incluso si la página que la inició se cierra. Esto es útil para solicitudes de analíticas o registro que deben completarse aunque el usuario navegue fuera de la página.
 
-<docs-code language="ts">
+```ts
 http.post('/api/analytics', analyticsData, {
   keepalive: true
 }).subscribe();
-</docs-code>
+```
 
 #### Control de caché HTTP
 
 La opción `cache` controla cómo interactúa la solicitud con la caché HTTP del navegador, lo que puede mejorar significativamente el rendimiento en solicitudes repetidas.
 
-<docs-code language="ts">
+```ts
 // Usar respuesta en caché sin importar su antigüedad
 http.get('/api/config', {
   cache: 'force-cache'
@@ -317,13 +317,13 @@ http.get('/api/static-data', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 #### Prioridad de solicitud para Core Web Vitals
 
 La opción `priority` permite indicar la importancia relativa de una solicitud, ayudando a los navegadores a optimizar la carga de recursos para mejorar los Core Web Vitals.
 
-<docs-code language="ts">
+```ts
 // Alta prioridad para recursos críticos
 http.get('/api/user-profile', {
   priority: 'high'
@@ -344,20 +344,21 @@ http.get('/api/settings', {
 }).subscribe(settings => {
   // ...
 });
-</docs-code>
+```
 
 Valores disponibles para `priority`:
+
 - `'high'`: Prioridad alta, se carga pronto (por ejemplo, datos críticos del usuario, contenido que se ve sin hacer scroll)
 - `'low'`: Prioridad baja, se carga cuando los recursos están disponibles (por ejemplo, análisis, datos de precarga)
 - `'auto'`: El navegador determina la prioridad basándose en el contexto de la solicitud (valor por defecto)
 
-TIP: Usa `priority: 'high'` para solicitudes que afectan Largest Contentful Paint (LCP) y `priority: 'low'` para solicitudes que no impactan la experiencia inicial del usuario.
+CONSEJO: Usa `priority: 'high'` para solicitudes que afectan Largest Contentful Paint (LCP) y `priority: 'low'` para solicitudes que no impactan la experiencia inicial del usuario.
 
 #### Modo de solicitud
 
 La opción `mode` controla cómo se manejan las solicitudes cross-origin y determina el tipo de respuesta.
 
-<docs-code language="ts">
+```ts
 // Solo solicitudes same-origin
 http.get('/api/local-data', {
   mode: 'same-origin'
@@ -378,20 +379,21 @@ http.get('https://external-api.com/public-data', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 Valores disponibles para `mode`:
+
 - `'same-origin'`: Solo permite solicitudes same-origin, falla si es cross-origin
 - `'cors'`: Permite solicitudes cross-origin con CORS (por defecto)
 - `'no-cors'`: Permite solicitudes simples cross-origin sin CORS, la respuesta es opaca
 
-TIP: Usa `mode: 'same-origin'` para solicitudes sensibles que nunca deberían ser cross-origin.
+CONSEJO: Usa `mode: 'same-origin'` para solicitudes sensibles que nunca deberían ser cross-origin.
 
 #### Manejo de redirecciones
 
 La opción `redirect` especifica cómo manejar respuestas de redirección del servidor.
 
-<docs-code language="ts">
+```ts
 // Seguir redirecciones automáticamente (comportamiento por defecto)
 http.get('/api/resource', {
   redirect: 'follow'
@@ -417,20 +419,21 @@ http.get('/api/resource', {
     // Las redirecciones activarán este manejador de errores
   }
 });
-</docs-code>
+```
 
 Valores disponibles para `redirect`:
+
 - `'follow'`: Seguir redirecciones automáticamente (por defecto)
 - `'error'`: Tratar redirecciones como errores
 - `'manual'`: No seguir redirecciones automáticamente, devolver la respuesta de redirección
 
-TIP: Usa `redirect: 'manual'` cuando necesites manejar redirecciones con lógica personalizada.
+CONSEJO: Usa `redirect: 'manual'` cuando necesites manejar redirecciones con lógica personalizada.
 
 #### Manejo de credenciales
 
 La opción `credentials` controla si se envían cookies, encabezados de autorización y otras credenciales en solicitudes cross-origin. Esto es importante para escenarios de autenticación.
 
-<docs-code language="ts">
+```ts
 // Incluir credenciales en solicitudes cross-origin
 http.get('https://api.example.com/protected-data', {
   credentials: 'include'
@@ -466,22 +469,23 @@ http.get('https://api.example.com/data', {
 }).subscribe(data => {
   // Equivalente a credentials: 'include'
 });
-</docs-code>
+```
 
-IMPORTANTE: La opción `withCredentials` tiene prioridad sobre `credentials`. Si se especifican ambas, `withCredentials: tru`e` siempre resultará en `credentials: 'include'`, sin importar el valor explícito de `credentials`.
+IMPORTANTE: La opción `withCredentials` tiene prioridad sobre `credentials`. Si se especifican ambas, `withCredentials: true` siempre resultará en `credentials: 'include'`, sin importar el valor explícito de `credentials`.
+
+Valores disponibles para `credentials`:
 
-Valores disponivles para `credentials`:
 - `'omit'`: Nunca enviar credenciales
 - `'same-origin'`: Enviar credenciales solo para solicitudes same-origin (por defecto)
 - `'include'`: Siempre enviar credenciales, incluso en solicitudes cross-origin
 
-TIP: Usa `credentials: 'include'` cuando necesites enviar cookies o encabezados de autenticación a un dominio diferente que soporte CORS. Evita mezclar `credentials` y `withCredentials` para no generar confusión.
+CONSEJO: Usa `credentials: 'include'` cuando necesites enviar cookies o encabezados de autenticación a un dominio diferente que soporte CORS. Evita mezclar `credentials` y `withCredentials` para no generar confusión.
 
 #### Referente (Referrer)
 
 La opción `referrer` permite controlar qué información de referencia se envía con la solicitud, importante por motivos de privacidad y seguridad.
 
-<docs-code language="ts">
+```ts
 // Enviar una URL específica como referrer
 http.get('/api/data', {
   referrer: 'https://example.com/page'
@@ -495,20 +499,50 @@ http.get('/api/analytics', {
 }).subscribe(data => {
   // ...
 });
-</docs-code>
+```
 
 La opción `referrer` acepta:
+
 - Una cadena de URL válida: establece la URL de referrer a enviar
 - Una cadena vacía `''`: No envía información de referrer
-- `'about:client'`: Utiliza el referente referrer (la URL de la página actual).
+- `'about:client'`: Utiliza el referrer (la URL de la página actual).
+
+CONSEJO: Usa `referrer: ''` para solicitudes sensibles donde no quieres filtrar la URL de la página que refirió la solicitud.
+
+#### Política de referrer
 
-TIP: Usa `referrer: ''` para solicitudes sensibles donde no quieres filtrar la URL de la página que refirió la solicitud.
+La opción `referrerPolicy` controla cuánta información de referrer, la URL de la página que realiza la solicitud, se envía junto con una solicitud HTTP. Esta configuración afecta tanto la privacidad como los análisis, permitiéndote equilibrar la visibilidad de datos con consideraciones de seguridad.
+
+```ts
+// No enviar información de referrer independientemente de la página actual
+http.get('/api/data', {
+  referrerPolicy: 'no-referrer'
+}).subscribe();
+
+// Enviar solo el origen (por ejemplo, https://example.com)
+http.get('/api/analytics', {
+  referrerPolicy: 'origin'
+}).subscribe();
+```
+
+La opción `referrerPolicy` acepta:
+
+- `'no-referrer'`: Nunca envía el encabezado `Referer`.
+- `'no-referrer-when-downgrade'`: Envía el referrer para solicitudes same-origin y seguras (HTTPS→HTTPS), pero lo omite al navegar desde un origen seguro a uno menos seguro (HTTPS→HTTP).
+- `'origin'`: Envía solo el origen (esquema, host, puerto) del referrer, omitiendo información de ruta y consulta.
+- `'origin-when-cross-origin'`: Envía la URL completa para solicitudes same-origin, pero solo el origen para solicitudes cross-origin.
+- `'same-origin'`: Envía la URL completa para solicitudes same-origin y ningún referrer para solicitudes cross-origin.
+- `'strict-origin'`: Envía solo el origen, y solo si el nivel de seguridad del protocolo no se degrada (por ejemplo, HTTPS→HTTPS). Omite el referrer en caso de degradación.
+- `'strict-origin-when-cross-origin'`: Comportamiento predeterminado del navegador. Envía la URL completa para solicitudes same-origin, el origen para solicitudes cross-origin cuando no hay degradación, y omite el referrer en caso de degradación.
+- `'unsafe-url'`: Siempre envía la URL completa (incluyendo ruta y consulta). Esto puede exponer datos sensibles y debe usarse con precaución.
+
+CONSEJO: Prefiere valores conservadores como `'no-referrer'`, `'origin'`, o `'strict-origin-when-cross-origin'` para solicitudes sensibles a la privacidad.
 
 #### Integridad (Integrity)
 
 La opción `integrity` permite verificar que la respuesta no ha sido alterada, proporcionando un hash criptográfico del contenido esperado. Esto es útil al cargar scripts u otros recursos desde CDNs.
 
-<docs-code language="ts">
+```ts
 // Verificar integridad de la respuesta con hash SHA-256
 http.get('/api/script.js', {
   integrity: 'sha256-ABC123...',
@@ -516,11 +550,11 @@ http.get('/api/script.js', {
 }).subscribe(script => {
   // El contenido del script se verifica contra el hash
 });
-</docs-code>
+```
 
 IMPORTANTE: La opción `integrity` requiere una coincidencia exacta entre el contenido de la respuesta y el hash proporcionado. Si el contenido no coincide, la solicitud fallará con un error de red.
 
-TIP: Usa integridad de subrecursos (subresource integrity) al cargar recursos críticos de fuentes externas para asegurar que no han sido modificados. Genera los hashes usando herramientas como `openssl`
+CONSEJO: Usa integridad de subrecursos (subresource integrity) al cargar recursos críticos de fuentes externas para asegurar que no han sido modificados. Genera los hashes usando herramientas como `openssl`.
 
 ## `Observable`s Http
 
@@ -542,7 +576,7 @@ CONSEJO: Usar el pipe `async` o la operación `toSignal` para suscribirse a `Obs
 
 Aunque `HttpClient` puede ser inyectado y usado directamente desde los componentes, generalmente se recomienda que crees servicios reutilizables e inyectables que aíslen y encapsulen la lógica de acceso a datos. Por ejemplo, este `UserService` encapsula la lógica para solicitar datos de un usuario por su id:
 
-<docs-code language="ts">
+```ts
 @Injectable({providedIn: 'root'})
 export class UserService {
   private http = inject(HttpClient);
@@ -551,11 +585,11 @@ export class UserService {
     return this.http.get<User>(`/api/user/${id}`);
   }
 }
-</docs-code>
+```
 
 Dentro de un componente, puedes combinar `@if` con el `async` pipe para renderizar la interfaz de usuario para los datos solo después de que hayan terminado de cargarse:
 
-<docs-code language="ts">
+```ts
 import { AsyncPipe } from '@angular/common';
 @Component({
   imports: [AsyncPipe],
@@ -578,4 +612,4 @@ export class UserProfileComponent {
     });
   }
 }
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/http/overview.en.md b/adev-es/src/content/guide/http/overview.en.md
index b9cdfd0..4605508 100644
--- a/adev-es/src/content/guide/http/overview.en.md
+++ b/adev-es/src/content/guide/http/overview.en.md
@@ -6,10 +6,10 @@ Most front-end applications need to communicate with a server over the HTTP prot
 
 The HTTP client service offers the following major features:
 
-* The ability to request [typed response values](guide/http/making-requests#fetching-json-data)
-* Streamlined [error handling](guide/http/making-requests#handling-request-failure)
-* Request and response [interception](guide/http/interceptors)
-* Robust [testing utilities](guide/http/testing)
+- The ability to request [typed response values](guide/http/making-requests#fetching-json-data)
+- Streamlined [error handling](guide/http/making-requests#handling-request-failure)
+- Request and response [interception](guide/http/interceptors)
+- Robust [testing utilities](guide/http/testing)
 
 ## What's next
 
diff --git a/adev-es/src/content/guide/http/overview.md b/adev-es/src/content/guide/http/overview.md
index 3e4d7d3..0e32d1c 100644
--- a/adev-es/src/content/guide/http/overview.md
+++ b/adev-es/src/content/guide/http/overview.md
@@ -2,14 +2,14 @@
 
 La mayoría de las applicaciones de front-end necesitan comunicarse con el servidor a través del protocolo HTTP, para descargar o cargar datos y acceder a los servicios de backend. Angular proporciona una API de cliente HTTP para aplicaciones Angular, la clase de servicio `HttpClient` en `@angular/common/http`.
 
-## Características del cliente HTTP
+## Características del servicio cliente HTTP
 
-El cliente HTTP ofrece las siguientes características principales:
+El servicio cliente HTTP ofrece las siguientes características principales:
 
-* La capacidad para solicitar [valores de respuesta tipados](guide/http/making-requests#fetching-json-data)
-* [Manejo de errores](guide/http/making-requests#handling-request-failure) optimizado
-* [Intercepción](guide/http/interceptors) de solicitudes y respuestas
-* [Utilidades de pruebas](guide/http/testing) robustas
+- La capacidad para solicitar [valores de respuesta tipados](guide/http/making-requests#fetching-json-data)
+- [Manejo de errores](guide/http/making-requests#handling-request-failure) optimizado
+- [Intercepción](guide/http/interceptors) de solicitudes y respuestas
+- [Utilidades de pruebas](guide/http/testing) robustas
 
 ## Próximos pasos
 
diff --git a/adev-es/src/content/guide/http/security.en.md b/adev-es/src/content/guide/http/security.en.md
index ddf4013..5ba432e 100644
--- a/adev-es/src/content/guide/http/security.en.md
+++ b/adev-es/src/content/guide/http/security.en.md
@@ -38,7 +38,7 @@ If your backend service uses different names for the XSRF token cookie or header
 
 Add it to the `provideHttpClient` call as follows:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -49,13 +49,13 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
 ### Disabling XSRF protection
 
 If the built-in XSRF protection mechanism doesn't work for your application, you can disable it using the `withNoXsrfProtection` feature:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -63,4 +63,4 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/http/security.md b/adev-es/src/content/guide/http/security.md
index bf2343d..cb9512e 100644
--- a/adev-es/src/content/guide/http/security.md
+++ b/adev-es/src/content/guide/http/security.md
@@ -38,7 +38,7 @@ Si tu servicio backend usa nombres diferentes para la cookie o encabezado del to
 
 Agrégalo a la llamada de `provideHttpClient` de la siguiente manera:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -49,13 +49,13 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
-### Desabilitando la protección XSRF 
+### Deshabilitando la protección XSRF 
 
 Si el mecanismo de protección XSRF integrado no funciona para tu aplicación, puedes deshabilitarlo usando la característica `withNoXsrfProtection`:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -63,4 +63,4 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/http/setup.en.md b/adev-es/src/content/guide/http/setup.en.md
index a20dc12..b9961ae 100644
--- a/adev-es/src/content/guide/http/setup.en.md
+++ b/adev-es/src/content/guide/http/setup.en.md
@@ -6,17 +6,17 @@ Before you can use `HttpClient` in your app, you must configure it using [depend
 
 `HttpClient` is provided using the `provideHttpClient` helper function, which most apps include in the application `providers` in `app.config.ts`.
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
   ]
 };
-</docs-code>
+```
 
 If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's NgModule:
 
-<docs-code language="ts">
+```ts
 @NgModule({
   providers: [
     provideHttpClient(),
@@ -24,17 +24,17 @@ If your app is using NgModule-based bootstrap instead, you can include `provideH
   // ... other application configuration
 })
 export class AppModule {}
-</docs-code>
+```
 
 You can then inject the `HttpClient` service as a dependency of your components, services, or other classes:
 
-<docs-code language="ts">
+```ts
 @Injectable({providedIn: 'root'})
 export class ConfigService {
   private http = inject(HttpClient);
   // This service can now make HTTP requests via `this.http`.
 }
-</docs-code>
+```
 
 ## Configuring features of `HttpClient`
 
@@ -42,7 +42,7 @@ export class ConfigService {
 
 ### `withFetch`
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -50,7 +50,7 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
 By default, `HttpClient` uses the [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) API to make requests. The `withFetch` feature switches the client to use the [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) API instead.
 
diff --git a/adev-es/src/content/guide/http/setup.md b/adev-es/src/content/guide/http/setup.md
index 7e39488..7dff209 100644
--- a/adev-es/src/content/guide/http/setup.md
+++ b/adev-es/src/content/guide/http/setup.md
@@ -6,17 +6,17 @@ Antes de poder usar `HttpClient` en tu aplicación, debes configurarlo usando [i
 
 `HttpClient` se proporciona usando la función auxiliar `provideHttpClient`, que la mayoría de aplicaciones incluyen en los `providers` de la aplicación en `app.config.ts`.
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(),
   ]
 };
-</docs-code>
+```
 
 Si tu aplicación usa el método de inicialización basado en NgModule, puedes incluir `provideHttpClient` en los providers del NgModule de tu aplicación:
 
-<docs-code language="ts">
+```ts
 @NgModule({
   providers: [
     provideHttpClient(),
@@ -24,17 +24,17 @@ Si tu aplicación usa el método de inicialización basado en NgModule, puedes i
   // ... otra configuración de la aplicación
 })
 export class AppModule {}
-</docs-code>
+```
 
 Luego puedes inyectar el servicio `HttpClient` como una dependencia de tus componentes, servicios u otras clases:
 
-<docs-code language="ts">
+```ts
 @Injectable({providedIn: 'root'})
 export class ConfigService {
   private http = inject(HttpClient);
   // Este servicio ahora puede hacer solicitudes HTTP a través de `this.http`.
 }
-</docs-code>
+```
 
 ## Configurando características `HttpClient`
 
@@ -42,7 +42,7 @@ export class ConfigService {
 
 ### `withFetch`
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -50,7 +50,7 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
 Por defecto, `HttpClient` usa la API [`XMLHttpRequest`](https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest) para hacer solicitudes. La característica `withFetch` cambia el cliente para usar la API [`fetch`](https://developer.mozilla.org/es/docs/Web/API/Fetch_API) en su lugar.
 
@@ -78,7 +78,7 @@ CRÍTICO: Debes configurar una instancia de `HttpClient` en un inyector superior
 
 Incluir `withJsonpSupport` habilita el método `.jsonp()` en `HttpClient`, que realiza una solicitud GET a través de la [convención JSONP](https://es.wikipedia.org/wiki/JSONP) para la carga de datos entre dominios.
 
-ÚTIL: Simpre que sea posible, prefiere usar [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) para hacer solicitudes entre dominios en lugar de JSONP.
+ÚTIL: Siempre que sea posible, prefiere usar [CORS](https://developer.mozilla.org/docs/Web/HTTP/CORS) para hacer solicitudes entre dominios en lugar de JSONP.
 
 ### `withXsrfConfiguration(...)`
 
@@ -92,9 +92,9 @@ Incluir esta opción deshabilita la funcionalidad de seguridad XSRF integrada de
 
 Algunas aplicaciones pueden configurar `HttpClient` usando la API más antigua basada en NgModules.
 
-Esta tabla muestra los NgModules disponibles en `@angular/common/http` y cómo se relacionan con las funciones de configuración de proveedores anteriores.
+Esta tabla lista los NgModules disponibles en `@angular/common/http` y cómo se relacionan con las funciones de configuración de proveedores anteriores.
 
-| **NgModule**                            | `provideHttpClient()` Equivalente              |
+| **NgModule**                            | `provideHttpClient()` equivalent              |
 | --------------------------------------- | --------------------------------------------- |
 | `HttpClientModule`                      | `provideHttpClient(withInterceptorsFromDi())` |
 | `HttpClientJsonpModule`                 | `withJsonpSupport()`                          |
diff --git a/adev-es/src/content/guide/http/testing.en.md b/adev-es/src/content/guide/http/testing.en.md
index 1942ebd..951ff11 100644
--- a/adev-es/src/content/guide/http/testing.en.md
+++ b/adev-es/src/content/guide/http/testing.en.md
@@ -10,9 +10,9 @@ At the end, tests can verify that the app made no unexpected requests.
 
 To begin testing usage of `HttpClient`, configure `TestBed` and include `provideHttpClient()` and `provideHttpClientTesting()` in your test's setup. This configures `HttpClient` to use a test backend instead of the real network. It also provides `HttpTestingController`, which you'll use to interact with the test backend, set expectations about which requests have been made, and flush responses to those requests. `HttpTestingController` can be injected from `TestBed` once configured.
 
-Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpClient()`. Doing it the other way around can potentially break your tests.
+IMPORTANT: Keep in mind to provide `provideHttpClient()` **before** `provideHttpClientTesting()`, as `provideHttpClientTesting()` will overwrite parts of `provideHttpClient()`. Doing it the other way around can potentially break your tests.
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     // ... other test providers
@@ -22,7 +22,7 @@ TestBed.configureTestingModule({
 });
 
 const httpTesting = TestBed.inject(HttpTestingController);
-</docs-code>
+```
 
 Now when your tests make requests, they will hit the testing backend instead of the normal one. You can use `httpTesting` to make assertions about those requests.
 
@@ -30,7 +30,7 @@ Now when your tests make requests, they will hit the testing backend instead of
 
 For example, you can write a test that expects a GET request to occur and provides a mock response:
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     ConfigService,
@@ -64,56 +64,56 @@ expect(await configPromise).toEqual(DEFAULT_CONFIG);
 
 // Finally, we can assert that no other requests were made.
 httpTesting.verify();
-</docs-code>
+```
 
 NOTE: `expectOne` will fail if the test has made more than one request which matches the given criteria.
 
 As an alternative to asserting on `req.method`, you could instead use an expanded form of `expectOne` to also match the request method:
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne({
   method: 'GET',
   url: '/api/config',
 }, 'Request to load the configuration');
-</docs-code>
+```
 
 HELPFUL: The expectation APIs match against the full URL of requests, including any query parameters.
 
 The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step:
 
-<docs-code language="ts">
+```ts
 afterEach(() => {
   // Verify that none of the tests make any extra HTTP requests.
   TestBed.inject(HttpTestingController).verify();
 });
-</docs-code>
+```
 
 ## Handling more than one request at once
 
 If you need to respond to duplicate requests in your test, use the `match()` API instead of `expectOne()`. It takes the same arguments but returns an array of matching requests. Once returned, these requests are removed from future matching and you are responsible for flushing and verifying them.
 
-<docs-code language="ts">
+```ts
 const allGetRequests = httpTesting.match({method: 'GET'});
 for (const req of allGetRequests) {
   // Handle responding to each request.
 }
-</docs-code>
+```
 
 ## Advanced matching
 
 All matching functions accept a predicate function for custom matching logic:
 
-<docs-code language="ts">
+```ts
 // Look for one request that has a request body.
 const requestsWithBody = httpTesting.expectOne(req => req.body !== null);
-</docs-code>
+```
 
 The `expectNone` function asserts that no requests match the given criteria.
 
-<docs-code language="ts">
+```ts
 // Assert that no mutation requests have been issued.
 httpTesting.expectNone(req => req.method !== 'GET');
-</docs-code>
+```
 
 ## Testing error handling
 
@@ -123,23 +123,23 @@ You should test your app's responses when HTTP requests fail.
 
 To test handling of backend errors (when the server returns a non-successful status code), flush requests with an error response that emulates what your backend would return when a request fails.
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne('/api/config');
 req.flush('Failed!', {status: 500, statusText: 'Internal Server Error'});
 
 // Assert that the application successfully handled the backend error.
-</docs-code>
+```
 
 ### Network errors
 
 Requests can also fail due to network errors, which surface as `ProgressEvent` errors. These can be delivered with the `error()` method:
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne('/api/config');
 req.error(new ProgressEvent('network error!'));
 
 // Assert that the application successfully handled the network error.
-</docs-code>
+```
 
 ## Testing an Interceptor
 
@@ -148,7 +148,7 @@ You should test that your interceptors work under the desired circumstances.
 For example, an application may be required to add an authentication token generated by a service to each outgoing request.
 This behavior can be enforced with the use of an interceptor:
 
-<docs-code language="ts">
+```ts
 export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   const authService = inject(AuthService);
 
@@ -157,11 +157,11 @@ export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandler
   });
   return next(clonedRequest);
 }
-</docs-code>
+```
 
 The `TestBed` configuration for this interceptor should rely on the `withInterceptors` feature.
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     AuthService,
@@ -170,20 +170,20 @@ TestBed.configureTestingModule({
     provideHttpClientTesting(),
   ],
 });
-</docs-code>
+```
 
 The `HttpTestingController` can retrieve the request instance which can then be inspected to ensure that the request was modified.
 
-<docs-code language="ts">
+```ts
 const service = TestBed.inject(AuthService);
 const req = httpTesting.expectOne('/api/config');
 
 expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());
-</docs-code>
+```
 
 A similar interceptor could be implemented with class based interceptors:
 
-<docs-code language="ts">
+```ts
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   private authService = inject(AuthService);
@@ -195,11 +195,11 @@ export class AuthInterceptor implements HttpInterceptor {
     return next.handle(clonedRequest);
   }
 }
-</docs-code>
+```
 
 In order to test it, the `TestBed` configuration should instead be:
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     AuthService,
@@ -209,4 +209,4 @@ TestBed.configureTestingModule({
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   ],
 });
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/http/testing.md b/adev-es/src/content/guide/http/testing.md
index 975cafc..734d32f 100644
--- a/adev-es/src/content/guide/http/testing.md
+++ b/adev-es/src/content/guide/http/testing.md
@@ -12,7 +12,7 @@ Para comenzar a probar el uso de `HttpClient`, configura `TestBed` e incluye `pr
 
 Ten en cuenta que debes proporcionar `provideHttpClient()` **antes** que `provideHttpClientTesting()`, ya que `provideHttpClientTesting()` sobrescribirá partes de `provideHttpClient()`. Hacerlo al revés puede romper potencialmente tus pruebas.
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     // ... otros providers de prueba
@@ -22,7 +22,7 @@ TestBed.configureTestingModule({
 });
 
 const httpTesting = TestBed.inject(HttpTestingController);
-</docs-code>
+```
 
 Ahora cuando tus pruebas hagan solicitudes, llegarán al backend de prueba en lugar del normal. Puedes usar `httpTesting` para hacer afirmaciones sobre esas solicitudes.
 
@@ -30,7 +30,7 @@ Ahora cuando tus pruebas hagan solicitudes, llegarán al backend de prueba en lu
 
 Por ejemplo, puedes escribir una prueba que espera que ocurra una solicitud GET y proporciona una respuesta simulada:
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     ConfigService,
@@ -64,56 +64,56 @@ expect(await configPromise).toEqual(DEFAULT_CONFIG);
 
 // Finalmente, podemos afirmar que no se hicieron otras solicitudes.
 httpTesting.verify();
-</docs-code>
+```
 
 NOTA: `expectOne` fallará si la prueba ha hecho más de una solicitud que coincida con los criterios dados.
 
 Como alternativa a aseverar en `req.method`, podrías usar una forma expandida de `expectOne` para también coincidir con el método de solicitud:
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne({
   method: 'GET',
   url: '/api/config',
 }, 'Solicitud para cargar la configuración');
-</docs-code>
+```
 
 ÚTIL: Las APIs de expectativa coinciden contra la URL completa de las solicitudes, incluyendo cualquier parámetro de consulta.
 
 El último paso, verificar que no queden solicitudes pendientes, es lo suficientemente común para que lo muevas a un paso `afterEach()`:
 
-<docs-code language="ts">
+```ts
 afterEach(() => {
   // Verificar que ninguna de las pruebas haga solicitudes HTTP adicionales.
   TestBed.inject(HttpTestingController).verify();
 });
-</docs-code>
+```
 
 ## Manejando más de una solicitud a la vez
 
 Si necesitas responder a solicitudes duplicadas en tu prueba, usa la API `match()` en lugar de `expectOne()`. Toma los mismos argumentos pero devuelve un array de solicitudes coincidentes. Una vez devueltas, estas solicitudes se eliminan de futuras coincidencias y eres responsable de limpiarlas y verificarlas.
 
-<docs-code language="ts">
+```ts
 const allGetRequests = httpTesting.match({method: 'GET'});
 for (const req of allGetRequests) {
   // Manejar la respuesta a cada petición.
 }
-</docs-code>
+```
 
 ## Coincidencia avanzada
 
 Todas las funciones de coincidencia aceptan una función predicado para lógica de coincidencia personalizada:
 
-<docs-code language="ts">
+```ts
 // Busca una petición que tenga un cuerpo de petición.
 const requestsWithBody = httpTesting.expectOne(req => req.body !== null);
-</docs-code>
+```
 
 La función `expectNone` afirma que ninguna petición coincide con los criterios dados.
 
-<docs-code language="ts">
+```ts
 // Afirma que no se han emitido peticiones de mutación.
 httpTesting.expectNone(req => req.method !== 'GET');
-</docs-code>
+```
 
 ## Probando el manejo de errores
 
@@ -123,23 +123,23 @@ Debes probar las respuestas de tu aplicación cuando las solicitudes HTTP fallan
 
 Para probar el manejo de errores del backend (cuando el servidor devuelve un código de estado no exitoso), limpia las solicitudes con una respuesta de error que emule lo que tu backend devolvería cuando una solicitud falla.
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne('/api/config');
 req.flush('¡Falló!', {status: 500, statusText: 'Error interno del servidor'});
 
 // Afirma que la aplicación manejó con éxito el error del backend.
-</docs-code>
+```
 
 ### Errores de red
 
 Las solicitudes también pueden fallar debido a errores de red, que se manifiestan como errores `ProgressEvent`. Estos se pueden entregar con el método `error()`:
 
-<docs-code language="ts">
+```ts
 const req = httpTesting.expectOne('/api/config');
 req.error(new ProgressEvent('network error!'));
 
 // Afirma que la aplicación manejó con éxito el error de red.
-</docs-code>
+```
 
 ## Probando un Interceptor
 
@@ -148,7 +148,7 @@ Debes probar que tus interceptores funcionen bajo las circunstancias deseadas.
 Por ejemplo, una aplicación puede requerir agregar un token de autenticación generado por un servicio a cada solicitud saliente.
 Este comportamiento se puede hacer cumplir con el uso de un interceptor:
 
-<docs-code language="ts">
+```ts
 export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
   const authService = inject(AuthService);
 
@@ -157,11 +157,11 @@ export function authInterceptor(request: HttpRequest<unknown>, next: HttpHandler
   });
   return next(clonedRequest);
 }
-</docs-code>
+```
 
 La configuración de `TestBed` para este interceptor debe depender de la característica `withInterceptors`.
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     AuthService,
@@ -170,20 +170,20 @@ TestBed.configureTestingModule({
     provideHttpClientTesting(),
   ],
 });
-</docs-code>
+```
 
 El `HttpTestingController` puede recuperar la instancia de la solicitud que luego se puede inspeccionar para asegurar que la solicitud fue modificada.
 
-<docs-code language="ts">
+```ts
 const service = TestBed.inject(AuthService);
 const req = httpTesting.expectOne('/api/config');
 
 expect(req.request.headers.get('X-Authentication-Token')).toEqual(service.getAuthToken());
-</docs-code>
+```
 
 Un interceptor similar podría implementarse con interceptores basados en clases:
 
-<docs-code language="ts">
+```ts
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   private authService = inject(AuthService);
@@ -195,11 +195,11 @@ export class AuthInterceptor implements HttpInterceptor {
     return next.handle(clonedRequest);
   }
 }
-</docs-code>
+```
 
 Para probarlo, la configuración de `TestBed` debería ser en su lugar:
 
-<docs-code language="ts">
+```ts
 TestBed.configureTestingModule({
   providers: [
     AuthService,
@@ -209,4 +209,4 @@ TestBed.configureTestingModule({
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
   ],
 });
-</docs-code>
+```
diff --git a/adev-es/src/content/guide/hydration.md b/adev-es/src/content/guide/hydration.md
index f1c1e7c..6a5d2bf 100644
--- a/adev-es/src/content/guide/hydration.md
+++ b/adev-es/src/content/guide/hydration.md
@@ -76,18 +76,19 @@ bootstrapApplication(App, {
 ```
 
 ### How event replay works
+
 Event Replay is a feature that improves user experience by capturing user events that were triggered before the hydration process is complete. Then those events are replayed, ensuring none of that interaction was lost.
 
 The Event Replay is divided into three main phases:
 
 - **Capturing user interactions**<br>
-Prior to **Hydration**, Event Replay captures and stores all interactions that the user may perform, such as clicks and other browser native events.
+  Prior to **Hydration**, Event Replay captures and stores all interactions that the user may perform, such as clicks and other browser native events.
 
 - **Storing events**<br>
-The **Event Contract** keeps in memory all the interactions recorded in the previous step, ensuring that they are not lost for later replay.
+  The **Event Contract** keeps in memory all the interactions recorded in the previous step, ensuring that they are not lost for later replay.
 
 - **Relaunch of events**<br>
-Once **Hydration** is complete, Angular re-invokes the captured events.
+  Once **Hydration** is complete, Angular re-invokes the captured events.
 
 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).
 
@@ -195,6 +196,7 @@ bootstrapApplication(AppComponent, {
 ```
 
 ## Consistent rendering across server-side and client-side
+
 Avoid introducing `@if` blocks and other conditionals that display different content when server-side rendering than client-side rendering, such as using an `@if` block with Angular's `isPlatformBrowser` function. These rendering differences cause layout shifts, negatively impacting end-user experience and core web vitals.
 
 ## Third Party Libraries with DOM Manipulation
diff --git a/adev-es/src/content/guide/i18n/add-package.en.md b/adev-es/src/content/guide/i18n/add-package.en.md
index 325c565..b273c8b 100644
--- a/adev-es/src/content/guide/i18n/add-package.en.md
+++ b/adev-es/src/content/guide/i18n/add-package.en.md
@@ -15,10 +15,10 @@ If `@angular/localize` is not installed and you try to build a localized version
 
 ## Options
 
-| OPTION           | DESCRIPTION | VALUE TYPE | DEFAULT VALUE
-|:---              |:---    |:------     |:------
-| `--project`      | The name of the project. | `string` |
-| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default.  | `boolean` | `false`
+| OPTION             | DESCRIPTION                                                                                                                                                                                   | VALUE TYPE | DEFAULT VALUE |
+| :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------- | :------------ |
+| `--project`        | The name of the project.                                                                                                                                                                      | `string`   |
+| `--use-at-runtime` | If set, then `$localize` can be used at runtime. Also `@angular/localize` gets included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default. | `boolean`  | `false`       |
 
 For more available options, see `ng add` in [Angular CLI][CliMain].
 
@@ -28,8 +28,6 @@ For more available options, see `ng add` in [Angular CLI][CliMain].
   <docs-pill href="guide/i18n/locale-id" title="Refer to locales by ID"/>
 </docs-pill-row>
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-
-[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
-
-[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript Configuration"
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[GuideNpmPackages]: reference/configs/npm-packages 'Workspace npm dependencies | Angular'
+[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 'TypeScript Configuration'
diff --git a/adev-es/src/content/guide/i18n/add-package.md b/adev-es/src/content/guide/i18n/add-package.md
index cb12312..1b20783 100644
--- a/adev-es/src/content/guide/i18n/add-package.md
+++ b/adev-es/src/content/guide/i18n/add-package.md
@@ -15,10 +15,10 @@ Si `@angular/localize` no está instalado e intentas construir una versión loca
 
 ## Opciones
 
-| OPCIÓN           | DESCRIPCIÓN | TIPO DE VALOR | VALOR PREDETERMINADO
-|:---              |:---    |:------     |:------
-| `--project`      | El nombre del proyecto. | `string` |
-| `--use-at-runtime` | Si se establece, entonces `$localize` puede usarse en runtime. Además `@angular/localize` se incluye en la sección `dependencies` de `package.json`, en lugar de `devDependencies`, que es el valor predeterminado.  | `boolean` | `false`
+| OPCIÓN             | DESCRIPCIÓN                                                                                                                                                                                                          | TIPO DE VALOR | VALOR PREDETERMINADO |
+|:------------------ |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------- |:-------------------- | 
+| `--project`        | El nombre del proyecto.                                                                                                                                                                                              | `string`      |
+| `--use-at-runtime` | Si se establece, entonces `$localize` puede usarse en runtime. Además `@angular/localize` se incluye en la sección `dependencies` de `package.json`, en lugar de `devDependencies`, que es el valor predeterminado.  | `boolean`     | `false`              | 
 
 Para más opciones disponibles, consulta `ng add` en el [CLI de Angular][CliMain].
 
@@ -28,8 +28,6 @@ Para más opciones disponibles, consulta `ng add` en el [CLI de Angular][CliMain
   <docs-pill href="guide/i18n/locale-id" title="Referirse a configuraciones regionales por ID"/>
 </docs-pill-row>
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-
-[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
-
-[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html "TypeScript Configuration"
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[GuideNpmPackages]: reference/configs/npm-packages 'Workspace npm dependencies | Angular'
+[GuideTsConfig]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 'TypeScript Configuration'
diff --git a/adev-es/src/content/guide/i18n/deploy.en.md b/adev-es/src/content/guide/i18n/deploy.en.md
index 9cb41ac..24a393e 100644
--- a/adev-es/src/content/guide/i18n/deploy.en.md
+++ b/adev-es/src/content/guide/i18n/deploy.en.md
@@ -35,8 +35,6 @@ The following example displays an Apache configuration.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/apache2.conf" language="apache"/>
 
-[CliBuild]: cli/build "ng build | CLI | Angular"
-
-[GuideDeployment]: tools/cli/deployment "Deployment | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[CliBuild]: cli/build 'ng build | CLI | Angular'
+[GuideDeployment]: tools/cli/deployment 'Deployment | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
diff --git a/adev-es/src/content/guide/i18n/deploy.md b/adev-es/src/content/guide/i18n/deploy.md
index 9d229d0..36af8c9 100644
--- a/adev-es/src/content/guide/i18n/deploy.md
+++ b/adev-es/src/content/guide/i18n/deploy.md
@@ -35,8 +35,6 @@ El siguiente ejemplo muestra una configuración de Apache.
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/apache2.conf" language="apache"/>
 
-[CliBuild]: cli/build "ng build | CLI | Angular"
-
-[GuideDeployment]: tools/cli/deployment "Deployment | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[CliBuild]: cli/build 'ng build | CLI | Angular'
+[GuideDeployment]: tools/cli/deployment 'Deployment | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
diff --git a/adev-es/src/content/guide/i18n/example.en.md b/adev-es/src/content/guide/i18n/example.en.md
index 1825b49..f7ce49d 100644
--- a/adev-es/src/content/guide/i18n/example.en.md
+++ b/adev-es/src/content/guide/i18n/example.en.md
@@ -11,8 +11,8 @@
 The following tabs display the example application and the associated translation files.
 
 <docs-code-multifile>
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
-    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
+    <docs-code header="app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
     <docs-code header="src/main.ts" path="adev/src/content/examples/i18n/doc-files/main.1.ts"/>
     <docs-code header="src/locale/messages.fr.xlf" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html"/>
 </docs-code-multifile>
diff --git a/adev-es/src/content/guide/i18n/example.md b/adev-es/src/content/guide/i18n/example.md
index 280af65..c38d236 100644
--- a/adev-es/src/content/guide/i18n/example.md
+++ b/adev-es/src/content/guide/i18n/example.md
@@ -11,8 +11,8 @@
 Las siguientes pestañas muestran la aplicación de ejemplo y los archivos de traducción asociados.
 
 <docs-code-multifile>
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
-    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"/>
+    <docs-code header="app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts"/>
     <docs-code header="src/main.ts" path="adev/src/content/examples/i18n/doc-files/main.1.ts"/>
     <docs-code header="src/locale/messages.fr.xlf" path="adev/src/content/examples/i18n/doc-files/messages.fr.xlf.html"/>
 </docs-code-multifile>
diff --git a/adev-es/src/content/guide/i18n/format-data-locale.en.md b/adev-es/src/content/guide/i18n/format-data-locale.en.md
index 016ae5c..2e70eb9 100644
--- a/adev-es/src/content/guide/i18n/format-data-locale.en.md
+++ b/adev-es/src/content/guide/i18n/format-data-locale.en.md
@@ -3,8 +3,8 @@
 Angular provides the following built-in data transformation [pipes](guide/templates/pipes).
 The data transformation pipes use the [`LOCALE_ID`][ApiCoreLocaleId] token to format data based on rules of each locale.
 
-| Data transformation pipe                   | Details |
-|:---                                        |:---     |
+| Data transformation pipe                | Details                                           |
+| :-------------------------------------- | :------------------------------------------------ |
 | [`DatePipe`][ApiCommonDatepipe]         | Formats a date value.                             |
 | [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforms a number into a currency string.       |
 | [`DecimalPipe`][ApiCommonDecimalpipe]   | Transforms a number into a decimal number string. |
@@ -44,9 +44,8 @@ HELPFUL: The locale specified for the `CurrencyPipe` overrides the global `LOCAL
   <docs-pill href="guide/i18n/prepare" title="Prepare component for translation"/>
 </docs-pill-row>
 
-[ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular"
-
-[ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"
-[ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"
-[ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"
-[ApiCoreLocaleId]: api/core/LOCALE_ID "LOCALE_ID | Core - API | Angular"
+[ApiCommonCurrencypipe]: api/common/CurrencyPipe 'CurrencyPipe | Common - API | Angular'
+[ApiCommonDatepipe]: api/common/DatePipe 'DatePipe | Common - API | Angular'
+[ApiCommonDecimalpipe]: api/common/DecimalPipe 'DecimalPipe | Common - API | Angular'
+[ApiCommonPercentpipe]: api/common/PercentPipe 'PercentPipe | Common - API | Angular'
+[ApiCoreLocaleId]: api/core/LOCALE_ID 'LOCALE_ID | Core - API | Angular'
diff --git a/adev-es/src/content/guide/i18n/format-data-locale.md b/adev-es/src/content/guide/i18n/format-data-locale.md
index b74d6f8..3e3e8d2 100644
--- a/adev-es/src/content/guide/i18n/format-data-locale.md
+++ b/adev-es/src/content/guide/i18n/format-data-locale.md
@@ -3,10 +3,10 @@
 Angular proporciona los siguientes [pipes](guide/templates/pipes) integrados de transformación de datos.
 Los pipes de transformación de datos usan el token [`LOCALE_ID`][ApiCoreLocaleId] para formatear datos basándose en las reglas de cada configuración regional.
 
-| Pipe de transformación de datos           | Detalles |
-|:---                                        |:---     |
-| [`DatePipe`][ApiCommonDatepipe]         | Formatea un valor de fecha.                             |
-| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforma un número en una cadena de moneda.       |
+| Pipe de transformación de datos         | Detalles                                              |
+|:--------------------------------------- |:----------------------------------------------------- |
+| [`DatePipe`][ApiCommonDatepipe]         | Formatea un valor de fecha.                           |
+| [`CurrencyPipe`][ApiCommonCurrencypipe] | Transforma un número en una cadena de moneda.         |
 | [`DecimalPipe`][ApiCommonDecimalpipe]   | Transforma un número en una cadena de número decimal. |
 | [`PercentPipe`][ApiCommonPercentpipe]   | Transforma un número en una cadena de porcentaje.     |
 
@@ -45,7 +45,6 @@ Para forzar que la moneda use inglés americano \(`en-US`\), usa el siguiente fo
 </docs-pill-row>
 
 [ApiCommonCurrencypipe]: api/common/CurrencyPipe "CurrencyPipe | Common - API | Angular"
-
 [ApiCommonDatepipe]: api/common/DatePipe "DatePipe | Common - API | Angular"
 [ApiCommonDecimalpipe]: api/common/DecimalPipe "DecimalPipe | Common - API | Angular"
 [ApiCommonPercentpipe]: api/common/PercentPipe "PercentPipe | Common - API | Angular"
diff --git a/adev-es/src/content/guide/i18n/import-global-variants.en.md b/adev-es/src/content/guide/i18n/import-global-variants.en.md
index e9ad9b2..16ca839 100644
--- a/adev-es/src/content/guide/i18n/import-global-variants.en.md
+++ b/adev-es/src/content/guide/i18n/import-global-variants.en.md
@@ -4,11 +4,9 @@ The [Angular CLI][CliMain] automatically includes locale data if you run the [`n
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="shell">
-
+```shell
 ng build --localize
-
-</docs-code>
+```
 
 HELPFUL: The initial installation of Angular already contains locale data for English in the United States \(`en-US`\).
 The [Angular CLI][CliMain] automatically includes the locale data and sets the `LOCALE_ID` value when you use the `--localize` option with [`ng build`][CliBuild] command.
@@ -24,5 +22,5 @@ For example, you could import the global variants for French \(`fr`\) in `main.t
 
 HELPFUL: In an `NgModules` application, you would import it in your `app.module`.
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-[CliBuild]: cli/build "ng build | CLI | Angular"
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[CliBuild]: cli/build 'ng build | CLI | Angular'
diff --git a/adev-es/src/content/guide/i18n/import-global-variants.md b/adev-es/src/content/guide/i18n/import-global-variants.md
index 0a99e21..a3398d6 100644
--- a/adev-es/src/content/guide/i18n/import-global-variants.md
+++ b/adev-es/src/content/guide/i18n/import-global-variants.md
@@ -4,11 +4,9 @@ El [CLI de Angular][CliMain] incluye automáticamente datos de configuración re
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="shell">
-
+```shell
 ng build --localize
-
-</docs-code>
+```
 
 ÚTIL: La instalación inicial de Angular ya contiene datos de configuración regional para inglés en Estados Unidos \(`en-US`\).
 El [CLI de Angular][CliMain] incluye automáticamente los datos de configuración regional y establece el valor de `LOCALE_ID` cuando usas la opción `--localize` con el comando [`ng build`][CliBuild].
@@ -24,5 +22,5 @@ Por ejemplo, podrías importar las variantes globales para francés \(`fr`\) en
 
 ÚTIL: En una aplicación `NgModules`, lo importarías en tu `app.module`.
 
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-[CliBuild]: cli/build "ng build | CLI | Angular"
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[CliBuild]: cli/build 'ng build | CLI | Angular'
diff --git a/adev-es/src/content/guide/i18n/locale-id.en.md b/adev-es/src/content/guide/i18n/locale-id.en.md
index 949dd97..34eea84 100644
--- a/adev-es/src/content/guide/i18n/locale-id.en.md
+++ b/adev-es/src/content/guide/i18n/locale-id.en.md
@@ -1,22 +1,22 @@
 # Refer to locales by ID
 
-Angular uses the Unicode *locale identifier* \(Unicode locale ID\) to find the correct locale data for internationalization of text strings.
+Angular uses the Unicode _locale identifier_ \(Unicode locale ID\) to find the correct locale data for internationalization of text strings.
 
 <docs-callout title="Unicode locale ID">
 
-* A locale ID conforms to the [Unicode Common Locale Data Repository (CLDR) core specification][UnicodeCldrDevelopmentCoreSpecification].
-    For more information about locale IDs, see [Unicode Language and Locale Identifiers][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs].
+- A locale ID conforms to the [Unicode Common Locale Data Repository (CLDR) core specification][UnicodeCldrDevelopmentCoreSpecification].
+  For more information about locale IDs, see [Unicode Language and Locale Identifiers][UnicodeCldrDevelopmentCoreSpecificationLocaleIDs].
 
-* CLDR and Angular use [BCP 47 tags][RfcEditorInfoBcp47] as the base for the locale ID
+- CLDR and Angular use [BCP 47 tags][RfcEditorInfoBcp47] as the base for the locale ID
 
 </docs-callout>
 
 A locale ID specifies the language, country, and an optional code for further variants or subdivisions.
 A locale ID consists of the language identifier, a hyphen \(`-`\) character, and the locale extension.
 
-<docs-code language="html">
+```html
 {language_id}-{locale_extension}
-</docs-code>
+```
 
 HELPFUL: To accurately translate your Angular project, you must decide which languages and locales you are targeting for internationalization.
 
@@ -26,7 +26,7 @@ The differences include grammar, punctuation, formats for currency, decimal numb
 For the examples in this guide, use the following languages and locales.
 
 | Language | Locale                   | Unicode locale ID |
-|:---      |:---                      |:---               |
+| :------- | :----------------------- | :---------------- |
 | English  | Canada                   | `en-CA`           |
 | English  | United States of America | `en-US`           |
 | French   | Canada                   | `fr-CA`           |
@@ -48,6 +48,7 @@ To change the source locale of your project for the build, complete the followin
 
 1. Open the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file.
 2. Add or modify the `sourceLocale` field inside the `i18n` section:
+
 ```json
 {
   "projects": {
@@ -66,12 +67,8 @@ To change the source locale of your project for the build, complete the followin
   <docs-pill href="guide/i18n/format-data-locale" title="Format data based on locale"/>
 </docs-pill-row>
 
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
-
-[GithubAngularAngularTreeMasterPackagesCommonLocales]: <https://github.com/angular/angular/tree/main/packages/common/locales> "angular/packages/common/locales | angular/angular | GitHub"
-
-[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 "BCP 47 | RFC Editor"
-
-[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec "Core Specification | Unicode CLDR Project"
-
-[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code "Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project"
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
+[GithubAngularAngularTreeMasterPackagesCommonLocales]: https://github.com/angular/angular/tree/main/packages/common/locales 'angular/packages/common/locales | angular/angular | GitHub'
+[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 'BCP 47 | RFC Editor'
+[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec 'Core Specification | Unicode CLDR Project'
+[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code 'Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project'
diff --git a/adev-es/src/content/guide/i18n/locale-id.md b/adev-es/src/content/guide/i18n/locale-id.md
index 93752af..8c30a24 100644
--- a/adev-es/src/content/guide/i18n/locale-id.md
+++ b/adev-es/src/content/guide/i18n/locale-id.md
@@ -14,9 +14,9 @@ Angular usa el *identificador de configuración regional* Unicode \(Unicode loca
 Un ID de configuración regional especifica el idioma, país y un código opcional para variantes o subdivisiones adicionales.
 Un ID de configuración regional consiste en el identificador de idioma, un carácter guión \(`-`\) y la extensión de configuración regional.
 
-<docs-code language="html">
+```html
 {language_id}-{locale_extension}
-</docs-code>
+```
 
 ÚTIL: Para traducir con precisión tu proyecto Angular, debes decidir qué idiomas y configuraciones regionales vas a usar para la internacionalización.
 
@@ -26,7 +26,7 @@ Las diferencias incluyen gramática, puntuación, formatos de moneda, números d
 Para los ejemplos en esta guía, usa los siguientes idiomas y configuraciones regionales.
 
 | Idioma   | Configuración regional   | ID de configuración regional Unicode |
-|:---      |:---                      |:---               |
+|:-------- |:------------------------ |:----------------- |
 | Inglés   | Canadá                   | `en-CA`           |
 | Inglés   | Estados Unidos de América| `en-US`           |
 | Francés  | Canadá                   | `fr-CA`           |
@@ -48,6 +48,7 @@ Para cambiar la configuración regional de origen de tu proyecto para la compila
 
 1. Abre el archivo de configuración de compilación del espacio de trabajo [`angular.json`][GuideWorkspaceConfig].
 2. Agrega o modifica el campo `sourceLocale` dentro de la sección `i18n`:
+
 ```json
 {
   "projects": {
@@ -66,12 +67,8 @@ Para cambiar la configuración regional de origen de tu proyecto para la compila
   <docs-pill href="guide/i18n/format-data-locale" title="Formatear datos según la configuración regional"/>
 </docs-pill-row>
 
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
-
-[GithubAngularAngularTreeMasterPackagesCommonLocales]: <https://github.com/angular/angular/tree/main/packages/common/locales> "angular/packages/common/locales | angular/angular | GitHub"
-
-[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 "BCP 47 | RFC Editor"
-
-[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec "Core Specification | Unicode CLDR Project"
-
-[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code "Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project"
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
+[GithubAngularAngularTreeMasterPackagesCommonLocales]: <https://github.com/angular/angular/tree/main/packages/common/locales> 'angular/packages/common/locales | angular/angular | GitHub'
+[RfcEditorInfoBcp47]: https://www.rfc-editor.org/info/bcp47 'BCP 47 | RFC Editor'
+[UnicodeCldrDevelopmentCoreSpecification]: https://cldr.unicode.org/index/cldr-spec 'Core Specification | Unicode CLDR Project'
+[UnicodeCldrDevelopmentCoreSpecificationLocaleID]: https://cldr.unicode.org/index/cldr-spec/picking-the-right-language-code 'Unicode Language and Locale Identifiers - Core Specification | Unicode CLDR Project'
diff --git a/adev-es/src/content/guide/i18n/manage-marked-text.en.md b/adev-es/src/content/guide/i18n/manage-marked-text.en.md
index 69a1104..5735ae5 100644
--- a/adev-es/src/content/guide/i18n/manage-marked-text.en.md
+++ b/adev-es/src/content/guide/i18n/manage-marked-text.en.md
@@ -2,8 +2,8 @@
 
 The Angular extractor generates a file with a translation unit entry each of the following instances.
 
-* Each `i18n` attribute in a component template
-* Each [`$localize`][ApiLocalizeInitLocalize] tagged message string in component code
+- Each `i18n` attribute in a component template
+- Each [`$localize`][ApiLocalizeInitLocalize] tagged message string in component code
 
 As described in [How meanings control text extraction and merges][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular assigns each translation unit a unique ID.
 
@@ -24,7 +24,7 @@ Additional metadata may include the library, component, or area of the applicati
 To specify a custom ID in the `i18n` attribute or [`$localize`][ApiLocalizeInitLocalize] tagged message string, use the `@@` prefix.
 The following example defines the `introductionHeader` custom ID in a heading element.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-solo-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-solo-id"/>
 
 The following example defines the `introductionHeader` custom ID for a variable.
 
@@ -50,7 +50,7 @@ Use a custom ID in combination with a description and a meaning to further help
 
 The following example includes a description, followed by the custom ID.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-id"/>
 
 The following example defines the `introductionHeader` custom ID and description for a variable.
 
@@ -64,7 +64,7 @@ variableText2 = $localize`:An introduction header for this sample@@introductionH
 
 The following example adds a meaning.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
 
 The following example defines the `introductionHeader` custom ID for a variable.
 
@@ -83,7 +83,7 @@ If you use the same ID for two different text elements, the extraction tool extr
 
 For example, in the following code snippet the same `myId` custom ID is defined for two different text elements.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-duplicate-custom-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-duplicate-custom-id"/>
 
 The following displays the translation in French.
 
@@ -93,6 +93,5 @@ Both elements now use the same translation \(`Bonjour`\), because both were defi
 
 <docs-code path="adev/src/content/examples/i18n/doc-files/rendered-output.html"/>
 
-[ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular"
-
-[GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]: guide/i18n/prepare#h1-example "How meanings control text extraction and merges - Prepare components for translations | Angular"
+[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular'
+[GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges]: guide/i18n/prepare#h1-example 'How meanings control text extraction and merges - Prepare components for translations | Angular'
diff --git a/adev-es/src/content/guide/i18n/manage-marked-text.md b/adev-es/src/content/guide/i18n/manage-marked-text.md
index fbf98f7..69aefca 100644
--- a/adev-es/src/content/guide/i18n/manage-marked-text.md
+++ b/adev-es/src/content/guide/i18n/manage-marked-text.md
@@ -2,8 +2,8 @@
 
 El extractor de Angular genera un archivo con una entrada de unidad de traducción en cada uno de los siguientes casos.
 
-* Cada atributo `i18n` en una plantilla de componente
-* Cada cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] en el código del componente
+- Cada atributo `i18n` en una plantilla de componente
+- Cada cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] en el código del componente
 
 Como se describe en [Cómo los significados controlan la extracción y la fusión de texto][GuideI18nCommonPrepareHowMeaningsControlTextExtractionAndMerges], Angular asigna a cada unidad de traducción un ID único.
 
@@ -24,7 +24,7 @@ Los metadatos adicionales pueden incluir la biblioteca, el componente o el área
 Para especificar un ID personalizado en el atributo `i18n` o en la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize], usa el prefijo `@@`.
 El siguiente ejemplo define el ID personalizado `introductionHeader` en un elemento de encabezado.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-solo-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-solo-id"/>
 
 El siguiente ejemplo define el ID personalizado `introductionHeader` para una variable.
 
@@ -50,7 +50,7 @@ Usa un ID personalizado en combinación con una descripción y un significado pa
 
 El siguiente ejemplo incluye una descripción, seguida del ID personalizado.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-id"/>
 
 El siguiente ejemplo define el ID personalizado `introductionHeader` y una descripción para una variable.
 
@@ -64,7 +64,7 @@ variableText2 = $localize`:An introduction header for this sample@@introductionH
 
 El siguiente ejemplo agrega un significado.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning-and-id"/>
 
 El siguiente ejemplo define el ID personalizado `introductionHeader` para una variable.
 
@@ -83,7 +83,7 @@ Si usas el mismo ID para dos elementos de texto diferentes, la herramienta de ex
 
 Por ejemplo, en el siguiente fragmento de código se define el mismo ID personalizado `myId` para dos elementos de texto diferentes.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-duplicate-custom-id"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-duplicate-custom-id"/>
 
 Lo siguiente muestra la traducción en francés.
 
diff --git a/adev-es/src/content/guide/i18n/merge.en.md b/adev-es/src/content/guide/i18n/merge.en.md
index 55a58eb..4b32a91 100644
--- a/adev-es/src/content/guide/i18n/merge.en.md
+++ b/adev-es/src/content/guide/i18n/merge.en.md
@@ -4,7 +4,7 @@ To merge the completed translations into your project, complete the following ac
 
 1. Use the [Angular CLI][CliMain] to build a copy of the distributable files of your project
 1. Use the `"localize"` option to replace all of the i18n messages with the valid translations and build a localized variant application.
-    A variant application is a complete copy of the distributable files of your application translated for a single locale.
+   A variant application is a complete copy of the distributable files of your application translated for a single locale.
 
 After you merge the translations, serve each distributable copy of the application using server-side language detection or different subdirectories.
 
@@ -31,8 +31,8 @@ Use the `i18n` project option in the [`angular.json`][GuideWorkspaceConfig] work
 
 The following sub-options identify the source language and tell the compiler where to find supported translations for the project.
 
-| Suboption      | Details |
-|:---            |:--- |
+| Suboption      | Details                                                                      |
+| :------------- | :--------------------------------------------------------------------------- |
 | `sourceLocale` | The locale you use within the application source code \(`en-US` by default\) |
 | `locales`      | A map of locale identifiers to translation files                             |
 
@@ -46,9 +46,9 @@ For example, the following excerpt of an [`angular.json`][GuideWorkspaceConfig]
 
 To use your locale definition in the build configuration, use the `"localize"` option in the [`angular.json`][GuideWorkspaceConfig] workspace build configuration file to tell the CLI which locales to generate for the build configuration.
 
-* Set `"localize"` to `true` for all the locales previously defined in the build configuration.
-* Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions.
-* Set `"localize"` to `false` to disable localization and not generate any locale-specific versions.
+- Set `"localize"` to `true` for all the locales previously defined in the build configuration.
+- Set `"localize"` to an array of a subset of the previously defined locale identifiers to build only those locale versions.
+- Set `"localize"` to `false` to disable localization and not generate any locale-specific versions.
 
 HELPFUL: Ahead-of-time (AOT) compilation is required to localize component templates.
 
@@ -110,8 +110,8 @@ For production builds, use configuration composition to run both configurations.
 When a translation is missing, the build succeeds but generates a warning such as `Missing translation for message "{translation_text}"`.
 To configure the level of warning that is generated by the Angular compiler, specify one of the following levels.
 
-| Warning level | Details                                              | Output |
-|:---           |:---                                                  |:---    |
+| Warning level | Details                                              | Output                                                 |
+| :------------ | :--------------------------------------------------- | :----------------------------------------------------- |
 | `error`       | Throw an error and the build fails                   | n/a                                                    |
 | `ignore`      | Do nothing                                           | n/a                                                    |
 | `warning`     | Displays the default warning in the console or shell | `Missing translation for message "{translation_text}"` |
@@ -128,7 +128,7 @@ HELPFUL: When you compile your Angular project into an Angular application, the
 This means that your Angular application is translated after compilation.
 This also means that you can create localized versions of your Angular application without re-compiling your entire Angular project for each locale.
 
-When you translate your Angular application, the *translation transformation* replaces and reorders the parts \(static strings and expressions\) of the template literal string with strings from a collection of translations.
+When you translate your Angular application, the _translation transformation_ replaces and reorders the parts \(static strings and expressions\) of the template literal string with strings from a collection of translations.
 For more information, see [`$localize`][ApiLocalizeInitLocalize].
 
 TLDR: Compile once, then translate for each locale.
@@ -139,18 +139,13 @@ TLDR: Compile once, then translate for each locale.
   <docs-pill href="guide/i18n/deploy" title="Deploy multiple locales"/>
 </docs-pill-row>
 
-[ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular"
-
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-[CliBuild]: cli/build "ng build | CLI | Angular"
-
-[GuideBuild]: tools/cli/build "Building and serving Angular apps | Angular"
-
-[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale "Apply specific build options for just one locale - Merge translations into the application | Angular"
-[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line "Build from the command line - Merge translations into the application | Angular"
-[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration "Define locales in the build configuration - Merge translations into the application | Angular"
-[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale "Generate application variants for each locale - Merge translations into the application | Angular"
-
-[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format "Change the source language file format - Work with translation files | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular'
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[CliBuild]: cli/build 'ng build | CLI | Angular'
+[GuideBuild]: tools/cli/build 'Building and serving Angular apps | Angular'
+[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale 'Apply specific build options for just one locale - Merge translations into the application | Angular'
+[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line 'Build from the command line - Merge translations into the application | Angular'
+[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration 'Define locales in the build configuration - Merge translations into the application | Angular'
+[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale 'Generate application variants for each locale - Merge translations into the application | Angular'
+[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format 'Change the source language file format - Work with translation files | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
diff --git a/adev-es/src/content/guide/i18n/merge.md b/adev-es/src/content/guide/i18n/merge.md
index 276e500..a0d315e 100644
--- a/adev-es/src/content/guide/i18n/merge.md
+++ b/adev-es/src/content/guide/i18n/merge.md
@@ -4,7 +4,7 @@ Para fusionar las traducciones completas en tu proyecto, realiza las siguientes
 
 1. Usa el [CLI de Angular][CliMain] para compilar una copia de los archivos distribuibles de tu proyecto
 1. Usa la opción `"localize"` para reemplazar todos los mensajes i18n con las traducciones válidas y compilar una variante localizada de la aplicación.
-    Una aplicación variante es una copia completa de los archivos distribuibles de tu aplicación traducida para una sola configuración regional.
+   Una aplicación variante es una copia completa de los archivos distribuibles de tu aplicación traducida para una sola configuración regional.
 
 Después de fusionar las traducciones, sirve cada copia distribuible de la aplicación usando detección de idioma del lado del servidor o subdirectorios diferentes.
 
@@ -31,10 +31,10 @@ Usa la opción de proyecto `i18n` en el archivo [`angular.json`][GuideWorkspaceC
 
 Las siguientes subopciones identifican el idioma fuente e indican al compilador dónde encontrar traducciones compatibles para el proyecto.
 
-| Subopción      | Detalles |
-|:---            |:--- |
+| Subopción      | Detalles                                                                                            |
+|:-------------- |:--------------------------------------------------------------------------------------------------- |
 | `sourceLocale` | La configuración regional que usas dentro del código fuente de la aplicación \(`en-US` por defecto\) |
-| `locales`      | Un mapa de identificadores de configuración regional a archivos de traducción                        |
+| `locales`      | Un mapa de identificadores de configuración regional a archivos de traducción                         |
 
 ### Ejemplo de `angular.json` para `en-US` y `fr`
 
@@ -46,9 +46,9 @@ Por ejemplo, el siguiente extracto de un archivo [`angular.json`][GuideWorkspace
 
 Para usar tu definición de configuraciones regionales en la configuración de compilación, usa la opción `"localize"` en el archivo [`angular.json`][GuideWorkspaceConfig] para indicar al CLI qué configuraciones regionales generar para la compilación.
 
-* Establece `"localize"` en `true` para todas las configuraciones regionales definidas previamente en la configuración de compilación.
-* Establece `"localize"` en un array con un subconjunto de los identificadores de configuración regional definidos previamente para compilar solo esas versiones.
-* Establece `"localize"` en `false` para deshabilitar la localización y no generar versiones específicas por configuración regional.
+- Establece `"localize"` en `true` para todas las configuraciones regionales definidas previamente en la configuración de compilación.
+- Establece `"localize"` en un array con un subconjunto de los identificadores de configuración regional definidos previamente para compilar solo esas versiones.
+- Establece `"localize"` en `false` para deshabilitar la localización y no generar versiones específicas por configuración regional.
 
 ÚTIL: Se requiere compilación por adelantado (AOT) para localizar las plantillas de componentes.
 
@@ -110,11 +110,11 @@ Para compilaciones de producción, usa composición de configuraciones para ejec
 Cuando falta una traducción, la compilación tiene éxito pero genera una advertencia como `Missing translation for message "{translation_text}"`.
 Para configurar el nivel de advertencia que genera el compilador de Angular, especifica uno de los siguientes niveles.
 
-| Nivel de advertencia | Detalles                                              | Salida |
-|:---           |:---                                                  |:---    |
-| `error`       | Lanza un error y la compilación falla                | n/a                                                    |
-| `ignore`      | No hace nada                                         | n/a                                                    |
-| `warning`     | Muestra la advertencia predeterminada en la consola o shell | `Missing translation for message "{translation_text}"` |
+| Nivel de advertencia | Detalles                                                    | Salida                                                 |
+|:-------------------- |:----------------------------------------------------------- |:------------------------------------------------------ |
+| `error`              | Lanza un error y la compilación falla                       | n/a                                                    |
+| `ignore`             | No hace nada                                                | n/a                                                    |
+| `warning`            | Muestra la advertencia predeterminada en la consola o shell | `Missing translation for message "{translation_text}"` |
 
 Especifica el nivel de advertencia en la sección `options` para el objetivo `build` de tu archivo [`angular.json`][GuideWorkspaceConfig] de configuración de compilación del espacio de trabajo.
 
@@ -139,18 +139,13 @@ TL;DR: Compila una vez, luego traduce para cada configuración regional.
   <docs-pill href="guide/i18n/deploy" title="Desplegar múltiples configuraciones regionales"/>
 </docs-pill-row>
 
-[ApiLocalizeInitLocalize]: api/localize/init/$localize "$localize | init - localize - API | Angular"
-
-[CliMain]: cli "CLI Overview and Command Reference | Angular"
-[CliBuild]: cli/build "ng build | CLI | Angular"
-
-[GuideBuild]: tools/cli/build "Building and serving Angular apps | Angular"
-
-[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale "Apply specific build options for just one locale - Merge translations into the application | Angular"
-[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line "Build from the command line - Merge translations into the application | Angular"
-[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration "Define locales in the build configuration - Merge translations into the application | Angular"
-[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale "Generate application variants for each locale - Merge translations into the application | Angular"
-
-[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format "Change the source language file format - Work with translation files | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
+[ApiLocalizeInitLocalize]: api/localize/init/$localize '$localize | init - localize - API | Angular'
+[CliMain]: cli 'CLI Overview and Command Reference | Angular'
+[CliBuild]: cli/build 'ng build | CLI | Angular'
+[GuideBuild]: tools/cli/build 'Building and serving Angular apps | Angular'
+[GuideI18nCommonMergeApplySpecificBuildOptionsForJustOneLocale]: guide/i18n/merge#apply-specific-build-options-for-just-one-locale 'Apply specific build options for just one locale - Merge translations into the application | Angular'
+[GuideI18nCommonMergeBuildFromTheCommandLine]: guide/i18n/merge#build-from-the-command-line 'Build from the command line - Merge translations into the application | Angular'
+[GuideI18nCommonMergeDefineLocalesInTheBuildConfiguration]: guide/i18n/merge#define-locales-in-the-build-configuration 'Define locales in the build configuration - Merge translations into the application | Angular'
+[GuideI18nCommonMergeGenerateApplicationVariantsForEachLocale]: guide/i18n/merge#generate-application-variants-for-each-locale 'Generate application variants for each locale - Merge translations into the application | Angular'
+[GuideI18nCommonTranslationFilesChangeTheSourceLanguageFileFormat]: guide/i18n/translation-files#change-the-source-language-file-format 'Change the source language file format - Work with translation files | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
diff --git a/adev-es/src/content/guide/i18n/overview.en.md b/adev-es/src/content/guide/i18n/overview.en.md
index 0ad4076..5b2a7ad 100644
--- a/adev-es/src/content/guide/i18n/overview.en.md
+++ b/adev-es/src/content/guide/i18n/overview.en.md
@@ -1,18 +1,18 @@
-# Angular Internationalization
+# Angular Internationalization (i18n)
 
-*Internationalization*, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world.
-*Localization* is the process of building versions of your project for different locales.
+_Internationalization_, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world.
+_Localization_ is the process of building versions of your project for different locales.
 The localization process includes the following actions.
 
-* Extract text for translation into different languages
-* Format data for a specific locale
+- Extract text for translation into different languages
+- Format data for a specific locale
 
-A *locale* identifies a region in which people speak a particular language or language variant.
+A _locale_ identifies a region in which people speak a particular language or language variant.
 Possible regions include countries and geographical regions.
 A locale determines the formatting and parsing of the following details.
 
-* Measurement units including date and time, numbers, and currencies
-* Translated names including time zones, languages, and countries
+- Measurement units including date and time, numbers, and currencies
+- Translated names including time zones, languages, and countries
 
 For a quick introduction to localization and internationalization watch this video:
 
diff --git a/adev-es/src/content/guide/i18n/overview.md b/adev-es/src/content/guide/i18n/overview.md
index 1c03e85..d067a7d 100644
--- a/adev-es/src/content/guide/i18n/overview.md
+++ b/adev-es/src/content/guide/i18n/overview.md
@@ -1,18 +1,18 @@
 # Internacionalización de Angular (i18n)
 
-La *internacionalización*, a veces referenciada como i18n, es el proceso de diseñar y preparar tu proyecto para su uso en diferentes configuraciones regionales (locales) alrededor del mundo.
-La *localización* es el proceso de construir versiones de tu proyecto para diferentes configuraciones regionales.
+La _internacionalización_, a veces referenciada como i18n, es el proceso de diseñar y preparar tu proyecto para su uso en diferentes configuraciones regionales (locales) alrededor del mundo.
+La _localización_ es el proceso de construir versiones de tu proyecto para diferentes configuraciones regionales.
 El proceso de localización incluye las siguientes acciones.
 
-* Extraer texto para traducción a diferentes idiomas
-* Formatear datos para una configuración regional específica
+- Extraer texto para traducción a diferentes idiomas
+- Formatear datos para una configuración regional específica
 
 Una *configuración regional* (locale) identifica una región en la que las personas hablan un idioma particular o variante del idioma.
 Las posibles regiones incluyen países y regiones geográficas.
 Una configuración regional determina el formato y análisis de los siguientes detalles.
 
-* Unidades de medida incluyendo fecha y hora, números y monedas
-* Nombres traducidos incluyendo zonas horarias, idiomas y países
+- Unidades de medida incluyendo fecha y hora, números y monedas
+- Nombres traducidos incluyendo zonas horarias, idiomas y países
 
 Para una introducción rápida a la localización e internacionalización mira este video:
 
diff --git a/adev-es/src/content/guide/i18n/prepare.en.md b/adev-es/src/content/guide/i18n/prepare.en.md
index 88482a6..115813d 100644
--- a/adev-es/src/content/guide/i18n/prepare.en.md
+++ b/adev-es/src/content/guide/i18n/prepare.en.md
@@ -10,9 +10,9 @@ To prepare your project for translation, complete the following actions.
 
 In a component template, the i18n metadata is the value of the `i18n` attribute.
 
-<docs-code language="html">
+```html
 <element i18n="{i18n_metadata}">{string_to_translate}</element>
-</docs-code>
+```
 
 Use the `i18n` attribute to mark a static text message in your component templates for translation.
 Place it on every element tag that contains fixed text you want to translate.
@@ -23,20 +23,19 @@ HELPFUL: The `i18n` attribute is a custom attribute that the Angular tools and c
 
 The following `<h1>` tag displays a simple English language greeting, "Hello i18n!".
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="greeting"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="greeting"/>
 
 To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
-
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
 
 ### using conditional statement with `i18n`
 
 The following `<div>` tag will display translated text as part of `div` and `aria-label` based on toggle status
 
 <docs-code-multifile>
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
-    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,21],[33,37]]"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
+    <docs-code header="app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,21],[33,37]]"/>
 </docs-code-multifile>
 
 ### Translate inline text without HTML element
@@ -53,9 +52,9 @@ The following example shows the `<ng-container>` element transformed into a non-
 
 In a component template, the i18n metadata is the value of the `i18n-{attribute_name}` attribute.
 
-<docs-code language="html">
+```html
 <element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
-</docs-code>
+```
 
 The attributes of HTML elements include text that should be translated along with the rest of the displayed text in the component template.
 
@@ -64,16 +63,16 @@ Use the following syntax to assign a meaning, description, and custom ID.
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 i18n-{attribute_name}="{meaning}|{description}@@{id}"
-</docs-code>
+```
 
 ### `i18n-title` example
 
 To translate the title of an image, review this example.
 The following example displays an image with a `title` attribute.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-title"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-title"/>
 
 To mark the title attribute for translation, complete the following action.
 
@@ -81,7 +80,7 @@ To mark the title attribute for translation, complete the following action.
 
    The following example displays how to mark the `title` attribute on the `img` tag by adding `i18n-title`.
 
-   <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-title-translate"/>
+   <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-title-translate"/>
 
 ## Mark text in component code
 
@@ -125,15 +124,13 @@ $localize`string_to_translate ${variable_name}:placeholder_name:`;
 return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
 </docs-code>
 
-
-
 ## i18n metadata for translation
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 {meaning}|{description}@@{custom_id}
-</docs-code>
+```
 
 The following parameters provide context and additional information to reduce confusion for your translator.
 
@@ -153,7 +150,7 @@ Add a _description_ of the text message as the value of the `i18n` attribute or
 
 The following example shows the value of the `i18n` attribute.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-desc"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-desc"/>
 
 The following example shows the value of the [`$localize`][ApiLocalizeInitLocalize] tagged message string with a description.
 
@@ -174,7 +171,7 @@ For example, you may want to specify that the `<h1>` tag is a site header that y
 
 The following example shows how to specify that the `<h1>` tag must be translated as a header or referenced elsewhere.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning"/>
 
 The result is any text marked with `site header`, as the _meaning_ is translated exactly the same way.
 
@@ -217,11 +214,10 @@ An ICU expression includes a component property, an ICU clause, and the case sta
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, icu_clause, case_statements }
-
-</docs-code>
+```
 
 The component property defines the variable.
 An ICU clause defines the type of conditional text.
@@ -243,21 +239,19 @@ Use the `plural` clause to mark expressions that may not be meaningful if transl
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, plural, pluralization_categories }
-
-</docs-code>
+```
 
 After the pluralization category, enter the default text \(English\) surrounded by open curly brace \(`{`\) and close curly brace \(`}`\) characters.
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 pluralization_category { }
-
-</docs-code>
+```
 
 The following pluralization categories are available for English and may change based on the locale.
 
@@ -274,11 +268,10 @@ If none of the pluralization categories match, Angular uses `other` to match the
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 other { default_quantity }
-
-</docs-code>
+```
 
 HELPFUL: For more information about pluralization categories, see [Choosing plural category names][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] in the [CLDR - Unicode Common Locale Data Repository][UnicodeCldrMain].
 
@@ -302,34 +295,31 @@ If you want to display the following phrase in English, where `x` is a number.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated x minutes ago
-
-</docs-code>
+```
 
 And you also want to display the following phrases based on the cardinality of `x`.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated just now
-
-</docs-code>
+```
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated one minute ago
-
-</docs-code>
+```
 
 Use HTML markup and [interpolations](guide/templates/binding#render-dynamic-text-with-text-interpolation).
 The following code example shows how to use the `plural` clause to express the previous three situations in a `<span>` element.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-plural"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-plural"/>
 
 Review the following details in the previous code example.
 
@@ -349,11 +339,10 @@ The `select` clause marks choices for alternate text based on your defined strin
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, select, selection_categories }
-
-</docs-code>
+```
 
 Translate all of the alternates to display alternate text based on the value of a variable.
 
@@ -361,11 +350,10 @@ After the selection category, enter the text \(English\) surrounded by open curl
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 selection_category { text }
-
-</docs-code>
+```
 
 Different locales have different grammatical constructions that increase the difficulty of translation.
 Use HTML markup.
@@ -373,11 +361,10 @@ If none of the selection categories match, Angular uses `other` to match the sta
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 other { default_value }
-
-</docs-code>
+```
 
 #### `gender` example
 
@@ -385,29 +372,26 @@ If you want to display the following phrase in English.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is other
-
-</docs-code>
+```
 
 And you also want to display the following phrases based on the `gender` property of the component.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is female
-
-</docs-code>
+```
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is male
-
-</docs-code>
+```
 
 The following code example shows how to bind the `gender` property of the component and use the `select` clause to express the previous three situations in a `<span>` element.
 
@@ -422,14 +406,14 @@ The `gender` property binds the outputs to each of following string values.
 The `select` clause maps the values to the appropriate translations.
 The following code example shows `gender` property used with the select clause.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
 
 #### `gender` and `minutes` example
 
 Combine different clauses together, such as the `plural` and `select` clauses.
 The following code example shows nested clauses based on the `gender` and `minutes` examples.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-nested"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-nested"/>
 
 ## What's next
 
diff --git a/adev-es/src/content/guide/i18n/prepare.md b/adev-es/src/content/guide/i18n/prepare.md
index eeadda9..6be735a 100644
--- a/adev-es/src/content/guide/i18n/prepare.md
+++ b/adev-es/src/content/guide/i18n/prepare.md
@@ -10,9 +10,9 @@ Para preparar tu proyecto para traducción, completa las siguientes acciones.
 
 En una plantilla de componente, los metadatos i18n son el valor del atributo `i18n`.
 
-<docs-code language="html">
+```html
 <element i18n="{i18n_metadata}">{string_to_translate}</element>
-</docs-code>
+```
 
 Usa el atributo `i18n` para marcar un mensaje de texto estático en tus plantillas de componentes para traducción.
 Colócalo en cada etiqueta de elemento que contenga texto fijo que quieras traducir.
@@ -23,20 +23,19 @@ Colócalo en cada etiqueta de elemento que contenga texto fijo que quieras tradu
 
 La siguiente etiqueta `<h1>` muestra un saludo simple en inglés, "Hello i18n!".
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="greeting"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="greeting"/>
 
 Para marcar el saludo para traducción, agrega el atributo `i18n` a la etiqueta `<h1>`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
-
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
 
 ### Usando la declaración condicional con `i18n`
 
 La siguiente etiqueta `<div>` mostrará texto traducido como parte de `div` y `aria-label` según el estado del interruptor (toggle).
 
 <docs-code-multifile>
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
-    <docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,21],[33,37]]"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html"  visibleRegion="i18n-conditional"/>
+    <docs-code header="app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,21],[33,37]]"/>
 </docs-code-multifile>
 
 ### Traducir texto en línea sin un elemento HTML
@@ -53,9 +52,9 @@ El siguiente ejemplo muestra el elemento `<ng-container>` transformado en un com
 
 En una plantilla de componente, los metadatos i18n son el valor del atributo `i18n-{attribute_name}`.
 
-<docs-code language="html">
+```html
 <element i18n-{attribute_name}="{i18n_metadata}" {attribute_name}="{attribute_value}" />
-</docs-code>
+```
 
 Los atributos de elementos HTML incluyen texto que debe traducirse junto con el resto del texto mostrado en la plantilla del componente.
 
@@ -64,16 +63,16 @@ Usa la siguiente sintaxis para asignar un significado, descripción e ID persona
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 i18n-{attribute_name}="{meaning}|{description}@@{id}"
-</docs-code>
+```
 
 ### Ejemplo de `i18n-title`
 
 Para traducir el título de una imagen, revisa este ejemplo.
 El siguiente ejemplo muestra una imagen con un atributo `title`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-title"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-title"/>
 
 Para marcar el atributo title para traducción, completa la siguiente acción.
 
@@ -81,7 +80,7 @@ Para marcar el atributo title para traducción, completa la siguiente acción.
 
    El siguiente ejemplo muestra cómo marcar el atributo `title` en la etiqueta `img` agregando `i18n-title`.
 
-   <docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-title-translate"/>
+   <docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-title-translate"/>
 
 ## Marcar texto en el código del componente
 
@@ -125,23 +124,21 @@ $localize`string_to_translate ${variable_name}:placeholder_name:`;
 return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
 </docs-code>
 
-
-
 ## Metadatos i18n para traducción
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 {meaning}|{description}@@{custom_id}
-</docs-code>
+```
 
 Los siguientes parámetros proporcionan contexto e información adicional para reducir la confusión de tu traductor.
 
-| Parámetro de metadatos | Detalles                                                                    |
-| :----------------- | :------------------------------------------------------------------------------ |
-| ID personalizado   | Proporciona un identificador personalizado                                      |
-| Descripción        | Proporciona información adicional o contexto                                    |
-| Significado        | Proporciona el significado o intención del texto dentro del contexto específico |
+| Parámetro de metadatos | Detalles                                                                      |
+| :--------------------- | :---------------------------------------------------------------------------- |
+| ID personalizado       | Proporciona un identificador personalizado                                     |
+| Descripción            | Proporciona información adicional o contexto                                  |
+| Significado             | Proporciona el significado o intención del texto dentro del contexto específico |
 
 Para información adicional sobre IDs personalizados, consulta [Gestionar texto marcado con IDs personalizados][GuideI18nOptionalManageMarkedText].
 
@@ -153,7 +150,7 @@ Agrega una _descripción_ del mensaje de texto como valor del atributo `i18n` o
 
 El siguiente ejemplo muestra el valor del atributo `i18n`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-desc"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-desc"/>
 
 El siguiente ejemplo muestra el valor de la cadena de mensaje etiquetada [`$localize`][ApiLocalizeInitLocalize] con una descripción.
 
@@ -174,7 +171,7 @@ Por ejemplo, puedes querer especificar que la etiqueta `<h1>` es un encabezado d
 
 El siguiente ejemplo muestra cómo especificar que la etiqueta `<h1>` debe traducirse como un encabezado o referenciarse en otro lugar.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute-meaning"/>
 
 El resultado es que cualquier texto marcado con `site header`, como _significado_, se traduce exactamente de la misma manera.
 
@@ -217,19 +214,18 @@ Una expresión ICU incluye una propiedad del componente, una cláusula ICU y las
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, icu_clause, case_statements }
-
-</docs-code>
+```html
 
 La propiedad del componente define la variable.
 Una cláusula ICU define el tipo de texto condicional.
 
-| Cláusula ICU                                                           | Detalles                                                             |
-| :------------------------------------------------------------------- | :------------------------------------------------------------------ |
-| [`plural`][GuideI18nCommonPrepareMarkPlurals]                        | Marca el uso de números plurales                                      |
-| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions] | Marca opciones para texto alternativo basado en tus valores de cadena definidos |
+| Cláusula ICU                                                           | Detalles                                                                       |
+| :--------------------------------------------------------------------- | :----------------------------------------------------------------------------- |
+| [`plural`][GuideI18nCommonPrepareMarkPlurals]                          | Marca el uso de números plurales                                               |
+| [`select`][GuideI18nCommonPrepareMarkAlternatesAndNestedExpressions]   | Marca opciones para texto alternativo basado en tus valores de cadena definidos |
 
 Para simplificar la traducción, usa cláusulas de Componentes Internacionales para Unicode \(cláusulas ICU\) con expresiones regulares.
 
@@ -243,42 +239,39 @@ Usa la cláusula `plural` para marcar expresiones que pueden no ser significativ
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, plural, pluralization_categories }
-
-</docs-code>
+```
 
 Después de la categoría de pluralización, ingresa el texto predeterminado \(inglés\) rodeado por caracteres de llave de apertura \(`{`\) y llave de cierre \(`}`\).
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 pluralization_category { }
-
-</docs-code>
+```
 
 Las siguientes categorías de pluralización están disponibles para inglés y pueden cambiar según la configuración regional.
 
-| Categoría de pluralización | Detalles                    | Ejemplo                    |
-| :--------------------- | :------------------------- | :------------------------- |
-| `zero`                 | La cantidad es cero           | `=0 { }` <br /> `zero { }` |
-| `one`                  | La cantidad es 1              | `=1 { }` <br /> `one { }`  |
-| `two`                  | La cantidad es 2              | `=2 { }` <br /> `two { }`  |
-| `few`                  | La cantidad es 2 o más      | `few { }`                  |
-| `many`                 | La cantidad es un número grande | `many { }`                 |
-| `other`                | La cantidad predeterminada       | `other { }`                |
+| Categoría de pluralización | Detalles                        | Ejemplo                    |
+| :------------------------- | :------------------------------ | :------------------------- |
+| `zero`                     | La cantidad es cero             | `=0 { }` <br /> `zero { }` |
+| `one`                      | La cantidad es 1                | `=1 { }` <br /> `one { }`  |
+| `two`                      | La cantidad es 2                | `=2 { }` <br /> `two { }`  |
+| `few`                      | La cantidad es 2 o más          | `few { }`                  |
+| `many`                     | La cantidad es un número grande | `many { }`                 |
+| `other`                    | La cantidad predeterminada      | `other { }`                |
 
 Si ninguna de las categorías de pluralización coincide, Angular usa `other` para coincidir con la opción de respaldo estándar para una categoría faltante.
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 other { default_quantity }
-
-</docs-code>
+```
 
 ÚTIL: Para más información sobre categorías de pluralización, consulta [Elegir nombres de categorías plurales][UnicodeCldrIndexCldrSpecPluralRulesTocChoosingPluralCategoryNames] en [CLDR - Repositorio Común de Datos de Configuración Regional Unicode][UnicodeCldrMain].
 
@@ -302,43 +295,40 @@ Si quieres mostrar la siguiente frase en inglés, donde `x` es un número.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated x minutes ago
-
-</docs-code>
+```
 
 Y también quieres mostrar las siguientes frases según la cardinalidad de `x`.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated just now
-
-</docs-code>
+```
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 updated one minute ago
-
-</docs-code>
+```
 
 Usa marcado HTML e [interpolaciones](guide/templates/binding#render-dynamic-text-with-text-interpolation).
 El siguiente ejemplo de código muestra cómo usar la cláusula `plural` para expresar las tres situaciones anteriores en un elemento `<span>`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-plural"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-plural"/>
 
 Revisa los siguientes detalles en el ejemplo de código anterior.
 
-| Parámetros                        | Detalles                                                                                                               |
-| :-------------------------------- | :-------------------------------------------------------------------------------------------------------------------- |
-| `minutes`                         | El primer parámetro especifica que la propiedad del componente es `minutes` y determina el número de minutos.               |
-| `plural`                          | El segundo parámetro especifica que la cláusula ICU es `plural`.                                                            |
-| `=0 {just now}`                   | Para cero minutos, la categoría de pluralización es `=0`. El valor es `just now`.                                        |
-| `=1 {one minute}`                 | Para un minuto, la categoría de pluralización es `=1`. El valor es `one minute`.                                        |
+| Parámetros                        | Detalles                                                                                                                                    |
+| :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
+| `minutes`                         | El primer parámetro especifica que la propiedad del componente es `minutes` y determina el número de minutos.                                |
+| `plural`                          | El segundo parámetro especifica que la cláusula ICU es `plural`.                                                                             |
+| `=0 {just now}`                   | Para cero minutos, la categoría de pluralización es `=0`. El valor es `just now`.                                                           |
+| `=1 {one minute}`                 | Para un minuto, la categoría de pluralización es `=1`. El valor es `one minute`.                                                            |
 | `other {{{minutes}} minutes ago}` | Para cualquier cardinalidad no coincidente, la categoría de pluralización predeterminada es `other`. El valor es `{{minutes}} minutes ago`. |
 
 `{{minutes}}` es una [interpolación](guide/templates/binding#render-dynamic-text-with-text-interpolation).
@@ -349,11 +339,10 @@ La cláusula `select` marca opciones para texto alternativo basado en tus valore
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 { component_property, select, selection_categories }
-
-</docs-code>
+```
 
 Traduce todas las alternativas para mostrar texto alternativo basado en el valor de una variable.
 
@@ -361,11 +350,10 @@ Después de la categoría de selección, ingresa el texto \(inglés\) rodeado po
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 selection_category { text }
-
-</docs-code>
+```
 
 Diferentes configuraciones regionales tienen diferentes construcciones gramaticales que aumentan la dificultad de traducción.
 Usa marcado HTML.
@@ -373,11 +361,10 @@ Si ninguna de las categorías de selección coincide, Angular usa `other` para c
 
 <!--todo: replace with docs-code -->
 
-<docs-code language="html">
+```html
 
 other { default_value }
-
-</docs-code>
+```
 
 #### Ejemplo de `gender`
 
@@ -385,51 +372,48 @@ Si quieres mostrar la siguiente frase en inglés.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is other
-
-</docs-code>
+```
 
 Y también quieres mostrar las siguientes frases según la propiedad `gender` del componente.
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is female
-
-</docs-code>
+```
 
 <!--todo: replace output docs-code with screen capture image --->
 
-<docs-code language="html">
+```html
 
 The author is male
-
-</docs-code>
+```
 
 El siguiente ejemplo de código muestra cómo vincular la propiedad `gender` del componente y usar la cláusula `select` para expresar las tres situaciones anteriores en un elemento `<span>`.
 
 La propiedad `gender` vincula las salidas a cada uno de los siguientes valores de cadena.
 
 | Valor  | Valor en inglés |
-| :----- | :------------ |
-| female | `female`      |
-| male   | `male`        |
-| other  | `other`       |
+| :----- | :-------------- |
+| female | `female`        |
+| male   | `male`          |
+| other  | `other`         |
 
 La cláusula `select` asigna los valores a las traducciones apropiadas.
 El siguiente ejemplo de código muestra la propiedad `gender` usada con la cláusula select.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-select"/>
 
 #### Ejemplo de `gender` y `minutes`
 
 Combina diferentes cláusulas juntas, como las cláusulas `plural` y `select`.
 El siguiente ejemplo de código muestra cláusulas anidadas basadas en los ejemplos de `gender` y `minutes`.
 
-<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-nested"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-nested"/>
 
 ## Próximos pasos
 
diff --git a/adev-es/src/content/guide/i18n/translation-files.md b/adev-es/src/content/guide/i18n/translation-files.md
index 296dcaf..a71fc56 100644
--- a/adev-es/src/content/guide/i18n/translation-files.md
+++ b/adev-es/src/content/guide/i18n/translation-files.md
@@ -123,7 +123,7 @@ A menos que seas fluido en el idioma y tengas tiempo para editar traducciones, p
     1. Crear la traducción.
     1. Editar la traducción.
 
-### Ejemplo del proceso de traducción para francés
+### Ejemplo del proceso de traducción para Francés
 
 Para demostrar el proceso, revisa el archivo `messages.fr.xlf` en la [Aplicación de ejemplo de internacionalización de Angular][GuideI18nExample].  La [Aplicación de ejemplo de internacionalización de Angular][GuideI18nExample] incluye una traducción al francés para que la edites sin un editor XLIFF especial ni conocimiento de francés.
 
diff --git a/adev-es/src/content/guide/image-optimization.md b/adev-es/src/content/guide/image-optimization.md
index 44abc3a..74696e5 100644
--- a/adev-es/src/content/guide/image-optimization.md
+++ b/adev-es/src/content/guide/image-optimization.md
@@ -4,18 +4,18 @@ The `NgOptimizedImage` directive makes it easy to adopt performance best practic
 
 The directive ensures that the loading of the [Largest Contentful Paint (LCP)](http://web.dev/lcp) image is prioritized by:
 
-* Automatically setting the `fetchpriority` attribute on the `<img>` tag
-* Lazy loading other images by default
-* Automatically generating a preconnect link tag in the document head
-* Automatically generating a `srcset` attribute
-* Generating a [preload hint](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if app is using SSR
+- Automatically setting the `fetchpriority` attribute on the `<img>` tag
+- Lazy loading other images by default
+- Automatically generating a preconnect link tag in the document head
+- Automatically generating a `srcset` attribute
+- Generating a [preload hint](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if app is using SSR
 
 In addition to optimizing the loading of the LCP image, `NgOptimizedImage` enforces a number of image best practices, such as:
 
-* Using [image CDN URLs to apply image optimizations](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options)
-* Preventing layout shift by requiring `width` and `height`
-* Warning if `width` or `height` have been set incorrectly
-* Warning if the image will be visually distorted when rendered
+- Using [image CDN URLs to apply image optimizations](https://web.dev/image-cdns/#how-image-cdns-use-urls-to-indicate-optimization-options)
+- Preventing layout shift by requiring `width` and `height`
+- Warning if `width` or `height` have been set incorrectly
+- Warning if the image will be visually distorted when rendered
 
 If you're using a background image in CSS, [start here](#how-to-migrate-your-background-image).
 
@@ -27,20 +27,20 @@ If you're using a background image in CSS, [start here](#how-to-migrate-your-bac
 <docs-step title="Import `NgOptimizedImage` directive">
 Import `NgOptimizedImage` directive from `@angular/common`:
 
-<docs-code language="typescript">
+```ts
 
 import { NgOptimizedImage } from '@angular/common'
 
-</docs-code>
+```
 
 and include it into the `imports` array of a standalone component or an NgModule:
 
-<docs-code language="typescript">
-
+```ts
 imports: [
   NgOptimizedImage,
   // ...
 ],
+```
 
 </docs-code>
 </docs-step>
@@ -52,39 +52,39 @@ A brief guide for setting up a loader can be found in the [Configuring an Image
 <docs-step title="Enable the directive">
 To activate the `NgOptimizedImage` directive, replace your image's `src` attribute with `ngSrc`.
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg">
 
-</docs-code>
+```
 
 If you're using a [built-in third-party loader](#built-in-loaders), make sure to omit the base URL path from `src`, as that will be prepended automatically by the loader.
 </docs-step>
 <docs-step title="Mark images as `priority`">
 Always mark the [LCP image](https://web.dev/lcp/#what-elements-are-considered) on your page as `priority` to prioritize its loading.
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" width="400" height="200" priority>
 
-</docs-code>
+```
 
 Marking an image as `priority` applies the following optimizations:
 
-* Sets `fetchpriority=high` (read more about priority hints [here](https://web.dev/priority-hints))
-* Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
-* Automatically generates a [preload link element](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if [rendering on the server](guide/ssr).
+- Sets `fetchpriority=high` (read more about priority hints [here](https://web.dev/priority-hints))
+- Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
+- Automatically generates a [preload link element](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) if [rendering on the server](guide/ssr).
 
 Angular displays a warning during development if the LCP element is an image that does not have the `priority` attribute. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
 </docs-step>
 <docs-step title="Include Width and Height">
 In order to prevent [image-related layout shifts](https://web.dev/css-web-vitals/#images-and-layout-shifts), NgOptimizedImage requires that you specify a height and width for your image, as follows:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" width="400" height="200">
 
-</docs-code>
+```
 
 For **responsive images** (images which you've styled to grow and shrink relative to the viewport), the `width` and `height` attributes should be the intrinsic size of the image file. For responsive images it's also important to [set a value for `sizes`.](#responsive-images)
 
@@ -100,11 +100,11 @@ In cases where you want to have an image fill a containing element, you can use
 
 When you add the `fill` attribute to your image, you do not need and should not include a `width` and `height`, as in this example:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" fill>
 
-</docs-code>
+```
 
 You can use the [object-fit](https://developer.mozilla.org/docs/Web/CSS/object-fit) CSS property to change how the image will fill its container. If you style your image with `object-fit: "contain"`, the image will maintain its aspect ratio and be "letterboxed" to fit the element. If you set `object-fit: "cover"`, the element will retain its aspect ratio, fully fill the element, and some content may be "cropped" off.
 
@@ -118,32 +118,31 @@ IMPORTANT: For the "fill" image to render properly, its parent element **must**
 
 Here's a simple step-by-step process for migrating from `background-image` to `NgOptimizedImage`. For these steps, we'll refer to the element that has an image background as the "containing element":
 
-1) Remove the `background-image` style from the containing element.
-2) Ensure that the containing element has `position: "relative"`, `position: "fixed"`, or `position: "absolute"`.
-3) Create a new image element as a child of the containing element, using `ngSrc` to enable the `NgOptimizedImage` directive.
-4) Give that element the `fill` attribute. Do not include a `height` and `width`.
-5) If you believe this image might be your [LCP element](https://web.dev/lcp/), add the `priority` attribute to the image element.
+1. Remove the `background-image` style from the containing element.
+2. Ensure that the containing element has `position: "relative"`, `position: "fixed"`, or `position: "absolute"`.
+3. Create a new image element as a child of the containing element, using `ngSrc` to enable the `NgOptimizedImage` directive.
+4. Give that element the `fill` attribute. Do not include a `height` and `width`.
+5. If you believe this image might be your [LCP element](https://web.dev/lcp/), add the `priority` attribute to the image element.
 
 You can adjust how the background image fills the container as described in the [Using fill mode](#using-fill-mode) section.
 
-
 ## Using placeholders
 
 ### Automatic placeholders
 
 NgOptimizedImage can display an automatic low-resolution placeholder for your image if you're using a CDN or image host that provides automatic image resizing. Take advantage of this feature by adding the `placeholder` attribute to your image:
 
-<docs-code format="typescript" language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" width="400" height="200" placeholder>
 
-</docs-code>
+```
 
 Adding this attribute automatically requests a second, smaller version of the image using your specified image loader. This small image will be applied as a `background-image` style with a CSS blur while your image loads. If no image loader is provided, no placeholder image can be generated and an error will be thrown.
 
 The default size for generated placeholders is 30px wide. You can change this size by specifying a pixel value in the `IMAGE_CONFIG` provider, as seen below:
 
-<docs-code format="typescript" language="typescript">
+```ts
 providers: [
   {
     provide: IMAGE_CONFIG,
@@ -152,7 +151,7 @@ providers: [
     }
   },
 ],
-</docs-code>
+```
 
 If you want sharp edges around your blurred placeholder, you can wrap your image in a containing `<div>` with the `overflow: hidden` style. As long as the `<div>` is the same size as the image (such as by using the `width: fit-content` style), the "fuzzy edges" of the placeholder will be hidden.
 
@@ -160,7 +159,7 @@ If you want sharp edges around your blurred placeholder, you can wrap your image
 
 You can also specify a placeholder using a base64 [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) without an image loader. The data url format is `data:image/[imagetype];[data]`, where `[imagetype]` is the image format, just as `png`, and `[data]` is a base64 encoding of the image. That encoding can be done using the command line or in JavaScript. For specific commands, see [the MDN documentation](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#encoding_data_into_base64_format). An example of a data URL placeholder with truncated data is shown below:
 
-<docs-code language="angular-html">
+```html
 
 <img
   ngSrc="cat.jpg"
@@ -169,25 +168,23 @@ You can also specify a placeholder using a base64 [data URL](https://developer.m
   placeholder="data:image/png;base64,iVBORw0K..."
 />
 
-</docs-code>
+```
 
-However, large data URLs  increase the size of your Angular bundles and slow down page load. If you cannot use an image loader, the Angular team recommends keeping base64 placeholder images smaller than 4KB and using them exclusively on critical images. In addition to decreasing placeholder dimensions, consider changing image formats or parameters used when saving images. At very low resolutions, these parameters can have a large effect on file size.
+However, large data URLs increase the size of your Angular bundles and slow down page load. If you cannot use an image loader, the Angular team recommends keeping base64 placeholder images smaller than 4KB and using them exclusively on critical images. In addition to decreasing placeholder dimensions, consider changing image formats or parameters used when saving images. At very low resolutions, these parameters can have a large effect on file size.
 
 ### Non-blurred placeholders
 
 By default, NgOptimizedImage applies a CSS blur effect to image placeholders. To render a placeholder without blur, provide a `placeholderConfig` argument with an object that includes the `blur` property, set to false. For example:
 
-<docs-code language="angular-html">
-
+```html
 <img
-  ngSrc="cat.jpg"
-  width="400"
-  height="200"
-  placeholder
-  [placeholderConfig]="{blur: false}"
+ngSrc="cat.jpg"
+width="400"
+height="200"
+placeholder
+[placeholderConfig]="{blur: false}"
 />
-
-</docs-code>
+```
 
 ## Adjusting image styling
 
@@ -207,36 +204,35 @@ A [`preconnect` resource hint](https://web.dev/preconnect-and-dns-prefetch) for
 
 Preconnect links are automatically generated for domains provided as an argument to a [loader](#optional-set-up-a-loader). If an image origin cannot be automatically identified, and no preconnect link is detected for the LCP image, `NgOptimizedImage` will warn during development. In that case, you should manually add a resource hint to `index.html`. Within the `<head>` of the document, add a `link` tag with `rel="preconnect"`, as shown below:
 
-<docs-code language="html">
+```html
 
 <link rel="preconnect" href="https://my.cdn.origin" />
 
-</docs-code>
-
+```
 
 To disable preconnect warnings, inject the `PRECONNECT_CHECK_BLOCKLIST` token:
 
-<docs-code language="typescript">
+```ts
 
 providers: [
-  {provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
+{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://your-domain.com'}
 ],
 
-</docs-code>
+```
 
 See more information on automatic preconnect generation [here](#why-is-a-preconnect-element-not-being-generated-for-my-image-domain).
 
-
 ### Request images at the correct size with automatic `srcset`
 
 Defining a [`srcset` attribute](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) ensures that the browser requests an image at the right size for your user's viewport, so it doesn't waste time downloading an image that's too large. `NgOptimizedImage` generates an appropriate `srcset` for the image, based on the presence and value of the [`sizes` attribute](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/sizes) on the image tag.
 
 #### Fixed-size images
 
-If your image should be "fixed" in size  (i.e. the same size across devices, except for [pixel density](https://web.dev/codelab-density-descriptors/)), there is no need to set a `sizes` attribute. A `srcset` can be generated automatically from the image's width and height attributes with no further input required.
+If your image should be "fixed" in size (i.e. the same size across devices, except for [pixel density](https://web.dev/codelab-density-descriptors/)), there is no need to set a `sizes` attribute. A `srcset` can be generated automatically from the image's width and height attributes with no further input required.
 
 Example srcset generated:
-```angular-html
+
+```html
 <img ... srcset="image-400w.jpg 1x, image-800w.jpg 2x">
 ```
 
@@ -256,7 +252,7 @@ By default, the responsive breakpoints are:
 
 If you would like to customize these breakpoints, you can do so using the `IMAGE_CONFIG` provider:
 
-<docs-code language="typescript">
+```ts
 providers: [
   {
     provide: IMAGE_CONFIG,
@@ -265,53 +261,80 @@ providers: [
     }
   },
 ],
-</docs-code>
+```
 
 If you would like to manually define a `srcset` attribute, you can provide your own using the `ngSrcset` attribute:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w">
 
-</docs-code>
+```
 
 If the `ngSrcset` attribute is present, `NgOptimizedImage` generates and sets the `srcset` based on the sizes included. Do not include image file names in `ngSrcset` - the directive infers this information from `ngSrc`. The directive supports both width descriptors (e.g. `100w`) and density descriptors (e.g. `1x`).
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="hero.jpg" ngSrcset="100w, 200w, 300w" sizes="50vw">
 
-</docs-code>
+```
 
 ### Disabling automatic srcset generation
 
 To disable srcset generation for a single image, you can add the `disableOptimizedSrcset` attribute on the image:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="about.jpg" disableOptimizedSrcset>
 
-</docs-code>
+```
 
 ### Disabling image lazy loading
 
 By default, `NgOptimizedImage` sets `loading=lazy` for all images that are not marked `priority`. You can disable this behavior for non-priority images by setting the `loading` attribute. This attribute accepts values: `eager`, `auto`, and `lazy`. [See the documentation for the standard image `loading` attribute for details](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/loading#value).
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" width="400" height="200" loading="eager">
 
-</docs-code>
+```
+
+### Controlling image decoding
+
+By default, `NgOptimizedImage` sets `decoding="auto"` for all images. This allows the browser to decide the optimal time to decode an image after it has been fetched. When an image is marked as `priority`, Angular automatically sets `decoding="sync"` to ensure the image is decoded and painted as early as possible helping improve **Largest Contentful Paint (LCP)** performance.
+
+You can still override this behavior by explicitly setting the `decoding` attribute.  
+[See the documentation for the standard image `decoding` attribute for details](https://developer.mozilla.org/docs/Web/HTML/Element/img#decoding).
+
+```html
+<!-- Default: decoding is 'auto' -->
+<img ngSrc="gallery/landscape.jpg" width="1200" height="800">
+
+<!-- Decode the image asynchronously to avoid blocking the main thread.-->
+<img ngSrc="gallery/preview.jpg" width="600" height="400" decoding="async">
+
+<!-- Priority images automatically use decoding="sync" -->
+<img ngSrc="awesome.jpg" width="500" height="625" priority >
+
+<!-- Decode immediately (can block) when you need the pixels right away -->
+<img ngSrc="hero.jpg" width="1600" height="900" decoding="sync">
+```
+
+**Allowed values**
+
+- `auto` (default): lets the browser choose the optimal strategy.
+- `async`: decodes the image asynchronously, avoiding main‑thread blocking where possible.
+- `sync`: decodes the image immediately; can block rendering but ensures pixels are ready as soon as the image is available.
 
 ### Advanced 'sizes' values
 
 You may want to have images displayed at varying widths on differently-sized screens. A common example of this pattern is a grid- or column-based layout that renders a single column on mobile devices, and two columns on larger devices. You can capture this behavior in the `sizes` attribute, using a "media query" syntax, such as the following:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="cat.jpg" width="400" height="200" sizes="(max-width: 768px) 100vw, 50vw">
 
-</docs-code>
+```
 
 The `sizes` attribute in the above example says "I expect this image to be 100 percent of the screen width on devices under 768px wide. Otherwise, I expect it to be 50 percent of the screen width.
 
@@ -323,21 +346,21 @@ A "loader" is a function that generates an [image transformation URL](https://we
 
 `NgOptimizedImage` provides both a generic loader that applies no transformations, as well as loaders for various third-party image services. It also supports writing your own custom loader.
 
-| Loader type| Behavior |
-|:--- |:--- |
-| Generic loader | The URL returned by the generic loader will always match the value of `src`. In other words, this loader applies no transformations. Sites that use Angular to serve images are the primary intended use case for this loader.|
-| Loaders for third-party image services | The URL returned by the loaders for third-party image services will follow API conventions used by that particular image service. |
-| Custom loaders | A custom loader's behavior is defined by its developer. You should use a custom loader if your image service isn't supported by the loaders that come preconfigured with `NgOptimizedImage`.|
+| Loader type                            | Behavior                                                                                                                                                                                                                       |
+| :------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Generic loader                         | The URL returned by the generic loader will always match the value of `src`. In other words, this loader applies no transformations. Sites that use Angular to serve images are the primary intended use case for this loader. |
+| Loaders for third-party image services | The URL returned by the loaders for third-party image services will follow API conventions used by that particular image service.                                                                                              |
+| Custom loaders                         | A custom loader's behavior is defined by its developer. You should use a custom loader if your image service isn't supported by the loaders that come preconfigured with `NgOptimizedImage`.                                   |
 
 Based on the image services commonly used with Angular applications, `NgOptimizedImage` provides loaders preconfigured to work with the following image services:
 
-| Image Service | Angular API | Documentation |
-|:--- |:--- |:--- |
-| Cloudflare Image Resizing | `provideCloudflareLoader` | [Documentation](https://developers.cloudflare.com/images/image-resizing/) |
-| Cloudinary | `provideCloudinaryLoader` | [Documentation](https://cloudinary.com/documentation/resizing_and_cropping) |
-| ImageKit | `provideImageKitLoader` | [Documentation](https://docs.imagekit.io/) |
-| Imgix | `provideImgixLoader` | [Documentation](https://docs.imgix.com/) |
-| Netlify | `provideNetlifyLoader` | [Documentation](https://docs.netlify.com/image-cdn/overview/) |
+| Image Service             | Angular API               | Documentation                                                               |
+| :------------------------ | :------------------------ | :-------------------------------------------------------------------------- |
+| Cloudflare Image Resizing | `provideCloudflareLoader` | [Documentation](https://developers.cloudflare.com/images/image-resizing/)   |
+| Cloudinary                | `provideCloudinaryLoader` | [Documentation](https://cloudinary.com/documentation/resizing_and_cropping) |
+| ImageKit                  | `provideImageKitLoader`   | [Documentation](https://docs.imagekit.io/)                                  |
+| Imgix                     | `provideImgixLoader`      | [Documentation](https://docs.imgix.com/)                                    |
+| Netlify                   | `provideNetlifyLoader`    | [Documentation](https://docs.netlify.com/image-cdn/overview/)               |
 
 To use the **generic loader** no additional code changes are necessary. This is the default behavior.
 
@@ -345,17 +368,17 @@ To use the **generic loader** no additional code changes are necessary. This is
 
 To use an existing loader for a **third-party image service**, add the provider factory for your chosen service to the `providers` array. In the example below, the Imgix loader is used:
 
-<docs-code language="typescript">
+```ts
 providers: [
   provideImgixLoader('https://my.base.url/'),
 ],
-</docs-code>
+```
 
 The base URL for your image assets should be passed to the provider factory as an argument. For most sites, this base URL should match one of the following patterns:
 
-* <https://yoursite.yourcdn.com>
-* <https://subdomain.yoursite.com>
-* <https://subdomain.yourcdn.com/yoursite>
+- <https://yoursite.yourcdn.com>
+- <https://subdomain.yoursite.com>
+- <https://subdomain.yourcdn.com/yoursite>
 
 You can learn more about the base URL structure in the docs of a corresponding CDN provider.
 
@@ -363,7 +386,7 @@ You can learn more about the base URL structure in the docs of a corresponding C
 
 To use a **custom loader**, provide your loader function as a value for the `IMAGE_LOADER` DI token. In the example below, the custom loader function returns a URL starting with `https://example.com` that includes `src` and `width` as URL parameters.
 
-<docs-code language="typescript">
+```ts
 providers: [
   {
     provide: IMAGE_LOADER,
@@ -372,7 +395,7 @@ providers: [
     },
   },
 ],
-</docs-code>
+```
 
 A loader function for the `NgOptimizedImage` directive takes an object with the `ImageLoaderConfig` type (from `@angular/common`) as its argument and returns the absolute URL of the image asset. The `ImageLoaderConfig` object contains the `src` property, and optional `width` and `loaderParams` properties.
 
@@ -388,7 +411,7 @@ A common use for `loaderParams` is controlling advanced image CDN features.
 
 The following shows an example of a custom loader function. This example function concatenates `src` and `width`, and uses `loaderParams` to control a custom CDN feature for rounded corners:
 
-<docs-code language="typescript">
+```ts
 const myCustomLoader = (config: ImageLoaderConfig) => {
   let url = `https://example.com/images/${config.src}?`;
   let queryParams = [];
@@ -400,15 +423,15 @@ const myCustomLoader = (config: ImageLoaderConfig) => {
   }
   return url + queryParams.join('&');
 };
-</docs-code>
+```
 
 Note that in the above example, we've invented the 'roundedCorners' property name to control a feature of our custom loader. We could then use this feature when creating an image, as follows:
 
-<docs-code language="angular-html">
+```html
 
 <img ngSrc="profile.jpg" width="300" height="300" [loaderParams]="{roundedCorners: true}">
 
-</docs-code>
+```
 
 ## Frequently Asked Questions
 
@@ -423,17 +446,17 @@ For a step-by-step process for migration from `background-image` to `NgOptimized
 The `ngSrc` attribute was chosen as the trigger for NgOptimizedImage due to technical considerations around how images are loaded by the browser. NgOptimizedImage makes programmatic changes to the `loading` attribute -- if the browser sees the `src` attribute before those changes are made, it will begin eagerly downloading the image file, and the loading changes will be ignored.
 
 ### Why is a preconnect element not being generated for my image domain?
+
 Preconnect generation is performed based on static analysis of your application. That means that the image domain must be directly included in the loader parameter, as in the following example:
 
-<docs-code language="typescript">
+```ts
 providers: [
   provideImgixLoader('https://my.base.url/'),
 ],
-</docs-code>
+```
 
 If you use a variable to pass the domain string to the loader, or you're not using a loader, the static analysis will not be able to identify the domain, and no preconnect link will be generated. In this case you should manually add a preconnect link to the document head, as [described above](#add-resource-hints).
 
-
 ### Can I use two different image domains in the same page?
 
 The [image loaders](#configuring-an-image-loader-for-ngoptimizedimage) provider pattern is designed to be as simple as possible for the common use case of having only a single image CDN used within a component. However, it's still very possible to manage multiple image CDNs using a single provider.
@@ -458,7 +481,7 @@ If you're waiting on this feature, please upvote the Github issue [here](https:/
 
 3. Once the profiling result is available, select "LCP" in the timings section.
 
-4. A summary entry should appear in the panel at the bottom. You can find the LCP element in the row for "related node".  Clicking on it will reveal the element in the Elements panel.
+4. A summary entry should appear in the panel at the bottom. You can find the LCP element in the row for "related node". Clicking on it will reveal the element in the Elements panel.
 
 <img alt="LCP in the Chrome DevTools" src="assets/images/guide/image-optimization/devtools-lcp.png">
 
diff --git a/adev-es/src/content/guide/ngmodules/api.md b/adev-es/src/content/guide/ngmodules/api.md
deleted file mode 100644
index b2c00b3..0000000
--- a/adev-es/src/content/guide/ngmodules/api.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# NgModule API
-
-At a high level, NgModules are a way to organize Angular applications and they accomplish this through the metadata in the `@NgModule` decorator.
-The metadata falls into three categories:
-
-| Category                 | Details |
-|:---                      |:---     |
-| Static                   | Compiler configuration which tells the compiler about directive selectors and where in templates the directives should be applied through selector matching. This is configured using the `declarations` array. |
-| Runtime                  | Injector configuration using the `providers` array.                                                                                                                                                             |
-| Composability / Grouping | Bringing NgModules together and making them available using the `imports` and `exports` arrays.                                                                                                                 |
-
-<docs-code language="typescript" highlight="[2,5,8]">
-
-@NgModule({
-  // Static, that is compiler configuration
-  declarations: [], // Configure the selectors
-
-  // Runtime, or injector configuration
-  providers: [], // Runtime injector configuration
-
-  // Composability / Grouping
-  imports: [], // composing NgModules together
-  exports: [] // making NgModules available to other parts of the app
-})
-
-</docs-code>
-
-## `@NgModule` metadata
-
-The following table summarizes the `@NgModule` metadata properties.
-
-| Property       | Details |
-|:---            |:---     |
-| `declarations` | A list of [declarable](guide/ngmodules/faq#what-is-a-declarable?) classes (*components*, *directives*, and *pipes*) that *belong to this module*. <ol> <li> When compiling a template, you need to determine a set of selectors which should be used for triggering their corresponding directives. </li> <li> The template is compiled within the context of an NgModule —the NgModule within which the template's component is declared— which determines the set of selectors using the following rules: <ul> <li> All selectors of directives listed in `declarations`. </li> <li> All selectors of directives exported from imported NgModules. </li> </ul> </li> </ol> Components, directives, and pipes must belong to *exactly* one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to re-declare a class that is imported directly or indirectly from another module.                                                                                                                                                                                                                                                 |
-| `providers`    | A list of dependency-injection providers. <br /> Angular registers these providers with the NgModule's injector. If it is the NgModule used for bootstrapping then it is the root injector. <br /> These services become available for injection into any component, directive, pipe or service which is a child of this injector. <br /> A lazy-loaded module has its own injector which is typically a child of the application root injector. <br /> Lazy-loaded services are scoped to the lazy module's injector. If a lazy-loaded module also provides the `UserService`, any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root application injector. <br /> Components in external modules continue to receive the instance provided by their injectors. <br /> For more information on injector hierarchy and scoping, see [Providers](guide/ngmodules/providers) and the [DI Guide](guide/di).                                                                                                                                                                                  |
-| `imports`      | A list of modules which should be folded into this module. Folded means it is as if all the imported NgModule's exported properties were declared here. <br /> Specifically, it is as if the list of modules whose exported components, directives, or pipes are referenced by the component templates were declared in this module. <br /> A component template can [reference](guide/ngmodules/faq#how-does-angular-find-components,-directives,-and-pipes-in-a-template?-what-is-a-template-reference?) another component, directive, or pipe when the reference is declared in this module or if the imported module has exported it. For example, a component can use the `NgIf` and `NgFor` directives only if the module has imported the Angular `CommonModule` (perhaps indirectly by importing `BrowserModule`). <br /> You can import many standard directives from the `CommonModule` but some familiar directives belong to other modules. For example, you can use `[(ngModel)]` only after importing the Angular `FormsModule`.                                                                                                                                                                                                                                     |
-| `exports`      | A list of declarations —*component*, *directive*, and *pipe* classes— that an importing module can use. <br /> Exported declarations are the module's *public API*. A component in another module can use *this* module's `UserComponent` if it imports this module and this module exports `UserComponent`. <br /> Declarations are private by default. If this module does *not* export `UserComponent`, then only the components within *this* module can use `UserComponent`. <br /> Importing a module does *not* automatically re-export the imported module's imports. Module 'B' can't use `ngIf` just because it imported module 'A' which imported `CommonModule`. Module 'B' must import `CommonModule` itself. <br /> A module can list another module among its `exports`, in which case all of that module's public components, directives, and pipes are exported. <br /> [Re-export](guide/ngmodules/faq#what-should-i-export?) makes module transitivity explicit. If Module 'A' re-exports `CommonModule` and Module 'B' imports Module 'A', Module 'B' components can use `ngIf` even though 'B' itself didn't import `CommonModule`. |
-| `bootstrap`    | A list of components that are automatically bootstrapped. <br /> Usually there's only one component in this list, the *root component* of the application. <br /> Angular can launch with multiple bootstrap components, each with its own location in the host web page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-
-## More on NgModules
-
-<docs-pill-row>
-  <docs-pill href="guide/ngmodules/feature-modules" title="Feature Modules"/>
-  <docs-pill href="guide/ngmodules/providers" title="Providers"/>
-  <docs-pill href="guide/ngmodules/module-types" title="Types of Feature Modules"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/ngmodules/bootstrapping.md b/adev-es/src/content/guide/ngmodules/bootstrapping.md
deleted file mode 100644
index 41fcf18..0000000
--- a/adev-es/src/content/guide/ngmodules/bootstrapping.md
+++ /dev/null
@@ -1,152 +0,0 @@
-# Launching your app with a root module
-
-An NgModule describes how the application parts fit together.
-Every application has at least one Angular module, the *root* module, which must be present for bootstrapping the application on launch.
-By convention and by default, this NgModule is named `AppModule`.
-
-When you use the [Angular CLI](/tools/cli) `ng new` command to generate an app, the default `AppModule` looks like the following:
-
-<docs-code language="typescript">
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-
-</docs-code>
-
-The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
-`@NgModule` takes a metadata object that tells Angular how to compile and launch the application.
-
-| Metadata field    | Details |
-|:---               |:---     |
-| `declarations`    | Includes the *root* application component.                                                                        |
-| `imports`         | Imports `BrowserModule` to enable browser-specific services (such as DOM rendering, sanitization)                 |
-| `providers`       | The service providers.                                                                                            |
-| `bootstrap`       | The *root* component that Angular creates and inserts into the `index.html` host web page.                        |
-
-## The `declarations` array
-
-The module's `declarations` array tells Angular which components belong to that module.
-As you create more components, add them to `declarations`.
-
-The `declarations` array only takes declarables.
-Declarables are [components](guide/components), [directives](guide/directives), and [pipes](guide/pipes).
-All of a module's declarables must be in the `declarations` array.
-Declarables must belong to exactly one module.
-The compiler returns an error if declare the same class in multiple modules.
-
-These declared classes are usable within the module but private to components in a different module, unless they are exported from this module and the other module imports this one.
-
-An example of what goes into a declarations array follows:
-
-<docs-code language="typescript">
-
-declarations: [
-  YourComponent,
-  YourPipe,
-  YourDirective
-],
-
-</docs-code>
-
-### Using directives with `@NgModule`
-
-Use the `declarations` array for directives.
-To use a directive, component, or pipe in a module, you must do a few things:
-
-1. Export it from the TypeScript file where you wrote it
-2. Import it into the appropriate file containing the `@NgModule` class.
-3. Declare it in the `@NgModule` `declarations` array.
-
-Those three steps look like the following. In the file where you create your directive, export it.
-The following example shows an empty directive named `ItemDirective`.
-
-<docs-code header="src/app/item.directive.ts" highlight="[6]">
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: '[appItem]'
-})
-export class ItemDirective {
-  // your code here
-}
-</docs-code>
-
-The key point here is that you have to export it, so that you can import it elsewhere.
-Next, import it into the file in which your `NgModule` lives. In this example, this is the `app.module.ts` file.
-
-<docs-code header="src/app/app.module.ts">
-import { ItemDirective } from './item.directive';
-</docs-code>
-
-And in the same file, add it to the `@NgModule` `declarations` array:
-
-<docs-code header="src/app/app.module.ts" highlight="[3]">
-  declarations: [
-    AppComponent,
-    ItemDirective
-  ],
-</docs-code>
-
-Now you can use `ItemDirective` in a component.
-This example uses `AppModule`, but you would follow the same steps for a feature module.
-For more about directives, see [Attribute Directives](guide/directives/attribute-directives) and [Structural Directives](guide/directives/structural-directives).
-You'd also use the same technique for [pipes](guide/pipes) and [components](guide/components).
-
-Remember, components, directives, and pipes belong to one module only.
-You only need to declare them once in your application because you share them by importing the necessary modules.
-This saves you time and helps keep your application lean.
-
-## The `imports` array
-
-Modules accept an `imports` array in the `@NgModule` metadata object.
-It tells Angular about other NgModules that this particular module needs to function properly.
-
-<docs-code header="src/app/app.module.ts">
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpClientModule
-  ],
-</docs-code>
-
-This list of modules are those that export components, directives, or pipes that component templates in this module reference.
-In this case, the component is `AppComponent`, which references components, directives, or pipes in `BrowserModule`, `FormsModule`, or  `HttpClientModule`.
-A component template can reference another component, directive, or pipe when the referenced class is declared in this module, or the class was imported from another module.
-
-## The `providers` array
-
-The providers array is where you list the services the application needs.
-When you list services here, they are available app-wide.
-You can scope them when using feature modules and lazy loading.
-For more information, see [Providers in modules](guide/ngmodules/providers).
-
-## The `bootstrap` array
-
-The application launches by bootstrapping the root `AppModule`.
-The bootstrapping process creates the component(s) listed in the `bootstrap` array and inserts each one into the browser DOM, if it finds an element matching the component's `selector`.
-
-Each bootstrapped component is the base of its own tree of components.
-Inserting a bootstrapped component usually triggers a cascade of component creations that builds up that tree.
-While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.
-
-The root component is commonly called `AppComponent` and is in the root module's `bootstrap` array.
-
-In a situation where you want to bootstrap a component based on an API response,
-or you want to mount the `AppComponent` in a different DOM node that doesn't match the component selector, please refer to `ApplicationRef.bootstrap()` documentation.
-
-## More about Angular Modules
-
-See [Frequently Used Modules](guide/ngmodules/frequent) to learn more about modules you will commonly see in applications.
diff --git a/adev-es/src/content/guide/ngmodules/faq.md b/adev-es/src/content/guide/ngmodules/faq.md
deleted file mode 100644
index 8e7d4f4..0000000
--- a/adev-es/src/content/guide/ngmodules/faq.md
+++ /dev/null
@@ -1,428 +0,0 @@
-# NgModule FAQ
-
-NgModules help organize an application into cohesive blocks of functionality.
-
-This page answers the questions many developers ask about NgModule design and implementation.
-
-## What classes should I add to the `declarations` array?
-
-Add [declarable](guide/ngmodules/bootstrapping#the-declarations-array) classes —components, directives, and pipes— to a `declarations` list.
-
-Declare these classes in *exactly one* module of the application.
-Declare them in a module if they belong to that particular module.
-
-## What is a `declarable`?
-
-Declarables are the class types —components, directives, and pipes— that you can add to a module's `declarations` list.
-They're the only classes that you can add to `declarations`.
-
-## What classes should I *not* add to `declarations`?
-
-Add only [declarable](guide/ngmodules/bootstrapping#the-declarations-array) classes to an NgModule's `declarations` list.
-
-Do *not* declare the following:
-
-* A class that's already declared in another module, whether an application module, `@NgModule`, or third-party module.
-* An array of directives imported from another module.
-    For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` because the `FormsModule` already declares it.
-* Module classes.
-* Service classes.
-* Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes.
-
-## Why list the same component in multiple `NgModule` properties?
-
-`AppComponent` is often listed in both `declarations` and `bootstrap`.
-You might see the same component listed in `declarations` and `exports`.
-
-While that seems redundant, these properties have different functions.
-Membership in one list doesn't imply membership in another list.
-
-* `AppComponent` could be declared in this module but not bootstrapped.
-* `AppComponent` could be bootstrapped in this module but declared in a different feature module.
-* A component could be imported from another application module (so you can't declare it) and re-exported by this module.
-* A component could be exported for inclusion in an external component's template as well as dynamically loaded in a pop-up dialog.
-
-## What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
-
-This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs.
-
-HELPFUL: Perhaps you declared "x" in an application submodule but forgot to export it.
-The "x" class isn't visible to other modules until you add it to the `exports` list.
-
-## What should I import?
-
-Import NgModules whose public (exported) [declarable classes](guide/ngmodules/bootstrapping#the-declarations-array)
-you need to reference in this module's component templates.
-
-This always means importing `CommonModule` from `@angular/common` for access to
-the Angular directives such as `NgIf` and `NgFor`.
-You can import it directly or from another NgModule that [re-exports](#can-i-re-export-classes-and-modules?) it.
-
-Import [BrowserModule](#should-i-import-browsermodule-or-commonmodule?) only in the root `AppModule`.
-
-Import `FormsModule` from `@angular/forms` if your components have `[(ngModel)]` two-way binding expressions.
-
-Import *shared* and *feature* modules when your components use their components, directives, and pipes.
-
-## Should I import `BrowserModule` or `CommonModule`?
-
-The root application module, `AppModule`, of almost every browser application should import `BrowserModule` from `@angular/platform-browser`.
-`BrowserModule` provides services that are essential to launch and run a browser application.
-
-`BrowserModule` also re-exports `CommonModule` from `@angular/common`,
-which means that components in the `AppModule` also have access to
-the Angular directives every application needs, such as `NgIf` and `NgFor`.
-
-Do not import `BrowserModule` in any other module.
-*Feature modules* and *lazy-loaded modules* should import `CommonModule` instead.
-They need the common directives.
-They don't need to re-install the app-wide providers.
-
-Note: Importing `CommonModule` also frees feature modules for use on *any* target platform, not just browsers.
-
-## What if I import the same module twice?
-
-That's not a problem.
-When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.
-
-That's true at whatever level `A` appears in a hierarchy of imported NgModules.
-When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports `[C, B, A]`, then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'.
-When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.
-
-Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.
-
-## What should I export?
-
-Export [declarable](guide/ngmodules/bootstrapping#the-declarations-array) classes that components in *other* NgModules should be able to use in their templates.
-These are your *public* classes.
-If you don't export a declarable class, it stays *private*, visible only to other components declared in this NgModule.
-
-You *can* export any declarable class —components, directives, and pipes— whether
-it's declared in this NgModule or in an imported NgModule.
-
-You *can* re-export entire imported NgModules, which effectively re-export all of their exported classes.
-An NgModule can even export a module that it doesn't import.
-
-## What should I *not* export?
-
-Don't export the following:
-
-* Private components, directives, and pipes that you need only within components declared in this NgModule.
-    If you don't want another NgModule to see it, don't export it.
-
-* Non-declarable objects such as services, functions, configurations, and entity models.
-* Components that are only loaded dynamically by the router or by bootstrapping.
-    Such components can never be selected in another component's template.
-    While there's no harm in exporting them, there's also no benefit.
-
-* Pure service modules that don't have public (exported) declarations.
-    For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
-    Its only purpose is to add http service providers to the application as a whole.
-
-## Can I re-export classes and modules?
-
-Absolutely.
-
-NgModules are a great way to selectively aggregate classes from other NgModules and re-export them in a consolidated, convenience module.
-
-An NgModule can re-export entire NgModules, which effectively re-exports all of their exported classes.
-Angular's own `BrowserModule` exports a couple of NgModules like this:
-
-<docs-code language="typescript">
-
-exports: [CommonModule, ApplicationModule]
-
-</docs-code>
-
-An NgModule can export a combination of its own declarations, selected imported classes, and imported NgModules.
-
-Don't bother re-exporting pure service modules.
-Pure service modules don't export [declarable](guide/ngmodules/bootstrapping#the-declarations-array) classes that another NgModule could use.
-For example, there's no point in re-exporting `HttpClientModule` because it doesn't export anything.
-Its only purpose is to add http service providers to the application as a whole.
-
-## What is the `forRoot()` method?
-
-The `forRoot()` static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons.
-A good example of `forRoot()` is the `RouterModule.forRoot()` method.
-
-For more information on `forRoot()` see [the `forRoot()` pattern](guide/ngmodules/singleton-services#the-forroot()-pattern) section of the [Singleton Services](guide/ngmodules/singleton-services) guide.
-
-## Why is a service provided in a feature module visible everywhere?
-
-Providers listed in the `@NgModule.providers` of a bootstrapped module have application scope.
-Adding a service provider to `@NgModule.providers` effectively publishes the service to the entire application.
-
-When you import an NgModule, Angular adds the module's service providers (the contents of its `providers` list) to the application root injector.
-
-This makes the provider visible to every class in the application that knows the provider's lookup token, or name.
-
-Extensibility through NgModule imports is a primary goal of the NgModule system.
-Merging NgModule providers into the application injector makes it easy for a module library to enrich the entire application with new services.
-By adding the `HttpClientModule` once, every application component can make HTTP requests.
-
-However, this might feel like an unwelcome surprise if you expect the module's services to be visible only to the components declared by that feature module.
-If the `HeroModule` provides the `HeroService` and the root `AppModule` imports `HeroModule`, any class that knows the `HeroService` *type* can inject that service, not just the classes declared in the `HeroModule`.
-
-To limit access to a service, consider lazy loading the NgModule that provides that service.
-See [How do I restrict service scope to a module?](#how-do-i-restrict-service-scope-to-a-module?) for more information.
-
-## Why is a service provided in a lazy-loaded module visible only to that module?
-
-Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are *module-scoped*.
-
-When the Angular router lazy-loads a module, it creates a new execution context.
-That [context has its own injector](#why-does-lazy-loading-create-a-child-injector? "Why Angular creates a child injector"), which is a direct child of the application injector.
-The router adds the lazy module's providers and the providers of its imported NgModules to this child injector.
-
-These providers are insulated from changes to application providers with the same lookup token.
-When the router creates a component within the lazy-loaded context,
-Angular prefers service instances created from these providers to the service instances of the application root injector.
-
-## What if two modules provide the same service?
-
-When two imported modules, loaded at the same time, list a provider with the same token, the second module's provider "wins".
-That's because both providers are added to the same injector.
-
-When Angular looks to inject a service for that token, it creates and delivers the instance created by the second provider.
-
-*Every* class that injects this service gets the instance created by the second provider.
-Even classes declared within the first module get the instance created by the second provider.
-
-If NgModule A provides a service for token 'X' and imports an NgModule B that also provides a service for token 'X', then NgModule A's service definition "wins".
-
-The service provided by the root `AppModule` takes precedence over services provided by imported NgModules.
-The `AppModule` always wins.
-
-## How do I restrict service scope to a module?
-
-When a module is loaded at application launch, its `@NgModule.providers` have *application-wide scope*; that is, they are available for injection throughout the application.
-
-Imported providers are easily replaced by providers from another imported NgModule.
-Such replacement might be by design.
-It could be unintentional and have adverse consequences.
-
-As a general rule, import modules with providers *exactly once*, preferably in the application's *root module*.
-That's also usually the best place to configure, wrap, and override them.
-
-Suppose a module requires a customized `HttpBackend` that adds a special header for all Http requests.
-If another module elsewhere in the application also customizes `HttpBackend` or merely imports the `HttpClientModule`, it could override this module's `HttpBackend` provider, losing the special header.
-The server will reject http requests from this module.
-
-To avoid this problem, import the `HttpClientModule` only in the `AppModule`, the application *root module*.
-
-If you must guard against this kind of "provider corruption", *don't rely on a launch-time module's `providers`*.
-
-Load the module lazily if you can.
-Angular gives a [lazy-loaded module](#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module?) its own child injector.
-The module's providers are visible only within the component tree created with this injector.
-
-### Alternative: Restricting scope to a component and its children
-
-Continuing with the same example, suppose the components of a module truly require a private, custom `HttpBackend`.
-
-Create a "top component" that acts as the root for all of the module's components.
-Add the custom `HttpBackend` provider to the top component's `providers` list rather than the module's `providers`.
-Recall that Angular creates a child injector for each component instance and populates the injector with the component's own providers.
-
-When a child of this component asks for the `HttpBackend` service,
-Angular provides the local `HttpBackend` service, not the version provided in the application root injector.
-Child components can then make configured HTTP requests no matter how other modules configure `HttpBackend`.
-
-Make sure to create components needing access to this special-configuration `HttpBackend` as children of this component.
-
-You can embed the child components in the top component's template.
-Alternatively, make the top component a routing host by giving it a `<router-outlet>`.
-Define child routes and let the router load module components into that outlet.
-
-Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services.
-Thus, the lazy loading is preferable.
-
-## Should I add application-wide providers to the root `AppModule` or the root `AppComponent`?
-
-Define application-wide providers by specifying `providedIn: 'root'` on its `@Injectable()` decorator (in the case of services) or at `InjectionToken` construction (in the case where tokens are provided).
-Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module.
-
-If a provider cannot be configured in this way \(perhaps because it has no sensible default value\), then register application-wide providers in the root `AppModule`, not in the `AppComponent`.
-
-Lazy-loaded modules and their components can inject `AppModule` services; they can't inject `AppComponent` services.
-
-Register a service in `AppComponent` providers *only* if the service must be hidden
-from components outside the `AppComponent` tree.
-This is a rare use case.
-
-More generally, [prefer registering providers in NgModules](#should-i-add-other-providers-to-a-module-or-a-component?) to registering in components.
-
-### Discussion
-
-Angular registers all startup module providers with the application root injector.
-The services that root injector providers create have application scope, which means they are available to the entire application.
-
-Certain services, such as the `Router`, only work when you register them in the application root injector.
-
-By contrast, Angular registers `AppComponent` providers with the `AppComponent`'s own injector.
-`AppComponent` services are available only to that component and its component tree.
-They have component scope.
-
-The `AppComponent`'s injector is a child of the root injector, one down in the injector hierarchy.
-For applications that don't use the router, that's almost the entire application.
-But in routed applications, routing operates at the root level where `AppComponent` services don't exist.
-This means that lazy-loaded modules can't reach them.
-
-## Should I add other providers to a module or a component?
-
-Providers should be configured using `@Injectable` syntax.
-If possible, they should be provided in the application root (`providedIn: 'root'`).
-Services that are configured this way are lazily loaded if they are only used from a lazily loaded context.
-
-If it's the consumer's decision whether a provider is available application-wide or not, then register providers in modules (`@NgModule.providers`) instead of registering in components (`@Component.providers`).
-
-Register a provider with a component when you *must* limit the scope of a service instance to that component and its component tree.
-Apply the same reasoning to registering a provider with a directive.
-
-For example, an editing component that needs a private copy of a caching service should register the service with the component.
-Then each new instance of the component gets its own cached service instance.
-The changes that editor makes in its service don't touch the instances elsewhere in the application.
-
-[Always register *application-wide* services with the root `AppModule`](#should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent?), not the root `AppComponent`.
-
-## Why is it bad if a shared module provides a service to a lazy-loaded module?
-
-### The eagerly loaded scenario
-
-When an eagerly loaded module provides a service, for example a `UserService`, that service is available application-wide.
-If the root module provides `UserService` and imports another module that provides the same `UserService`, Angular registers one of them in the root application injector (see [What if I import the same module twice?](#what-if-i-import-the-same-module-twice?)).
-
-Then, when some component injects `UserService`, Angular finds it in the application root injector, and delivers the app-wide singleton service.
-No problem.
-
-### The lazy loaded scenario
-
-Now consider a lazy loaded module that also provides a service called `UserService`.
-
-When the router lazy loads a module, it creates a child injector and registers the `UserService` provider with that child injector.
-The child injector is *not* the root injector.
-
-When Angular creates a lazy component for that module and injects `UserService`, it finds a `UserService` provider in the lazy module's *child injector*
-and creates a *new* instance of the `UserService`.
-This is an entirely different `UserService` instance than the app-wide singleton version that Angular injected in one of the eagerly loaded components.
-
-This scenario causes your application to create a new instance every time, instead of using the singleton.
-
-## Why does lazy loading create a child injector?
-
-Angular adds `@NgModule.providers` to the application root injector, unless the NgModule is lazy-loaded.
-For a lazy-loaded NgModule, Angular creates a *child injector* and adds the module's providers to the child injector.
-
-This means that an NgModule behaves differently depending on whether it's loaded during application start or lazy-loaded later.
-Neglecting that difference can lead to [adverse consequences](#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module?).
-
-Why doesn't Angular add lazy-loaded providers to the application root injector as it does for eagerly loaded NgModules?
-
-The answer is grounded in a fundamental characteristic of the Angular dependency-injection system.
-An injector can add providers *until it's first used*.
-Once an injector starts creating and delivering services, its provider list is frozen; no new providers are allowed.
-
-When an application starts, Angular first configures the root injector with the providers of all eagerly loaded NgModules *before* creating its first component and injecting any of the provided services.
-Once the application begins, the application root injector is closed to new providers.
-
-Time passes and application logic triggers lazy loading of an NgModule.
-Angular must add the lazy-loaded module's providers to an injector somewhere.
-It can't add them to the application root injector because that injector is closed to new providers.
-So Angular creates a new child injector for the lazy-loaded module context.
-
-## How can I tell if an NgModule or service was previously loaded?
-
-Some NgModules and their services should be loaded only once by the root `AppModule`.
-Importing the module a second time by lazy loading a module could [produce errant behavior](#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module?) that may be difficult to detect and diagnose.
-
-To prevent this issue, write a constructor that attempts to inject the module or service from the root application injector.
-If the injection succeeds, the class has been loaded a second time.
-You can throw an error or take other remedial action.
-
-Certain NgModules, such as `BrowserModule`, implement such a guard.
-Here is a custom constructor for an NgModule called `GreetingModule`.
-
-<docs-code header="src/app/greeting/greeting.module.ts" language="typescript">
-@NgModule({...})
-export class GreetingModule {
-  constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) {
-    if (parentModule) {
-      throw new Error(
-        'GreetingModule is already loaded. Import it in the AppModule only');
-    }
-  }
-}
-</docs-code>
-
-## What kinds of modules should I have and how should I use them?
-
-Every application is different.
-Developers have various levels of experience and comfort with the available choices.
-Some suggestions and guidelines appear to have wide appeal.
-
-### `SharedModule`
-
-`SharedModule` is a conventional name for an `NgModule` with the components, directives, and pipes that you use everywhere in your application.
-This module should consist entirely of `declarations`, most of them exported.
-
-The `SharedModule` may re-export other widget modules, such as `CommonModule`, `FormsModule`, and NgModules with the UI controls that you use most widely.
-
-The `SharedModule` should not have `providers` for reasons [explained previously](#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module?).
-Nor should any of its imported or re-exported modules have `providers`.
-
-Import the `SharedModule` in your *feature* modules.
-
-### Feature Modules
-
-Feature modules are modules you create around specific application business domains, user workflows, and utility collections.
-They support your application by containing a particular feature, such as routes, services, widgets, etc.
-To conceptualize what a feature module might be in your app, consider that if you would put the files related to a certain functionality, like a search, in one folder, that the contents of that folder would be a feature module that you might call your `SearchModule`.
-It would contain all of the components, routing, and templates that would make up the search functionality.
-
-For more information, see [Feature Modules](guide/ngmodules/feature-modules) and [Module Types](guide/ngmodules/module-types)
-
-## What's the difference between NgModules and JavaScript Modules?
-
-In an Angular app, NgModules and JavaScript modules work together.
-
-In modern JavaScript, every file is a module (see the [Modules](https://exploringjs.com/es6/ch_modules.html) page of the Exploring ES6 website).
-Within each file you write an `export` statement to make parts of the module public.
-
-An Angular NgModule is a class with the `@NgModule` decorator —JavaScript modules don't have to have the `@NgModule` decorator.
-Angular's `NgModule` has `imports` and `exports` and they serve a similar purpose.
-
-You *import* other NgModules so you can use their exported classes in component templates.
-You *export* this NgModule's classes so they can be imported and used by components of *other* NgModules.
-
-For more information, see [JavaScript Modules vs. NgModules](guide/ngmodules/vs-jsmodule).
-
-## What is a template reference?
-
-How does Angular find components, directives, and pipes in a template?
-
-The [Angular compiler](#what-is-the-angular-compiler?) looks inside component templates for other components, directives, and pipes.
-When it finds one, that's a template reference.
-
-The Angular compiler finds a component or directive in a template when it can match the *selector* of that component or directive to some HTML in that template.
-
-The compiler finds a pipe if the pipe's *name* appears within the pipe syntax of the template HTML.
-
-Angular only matches selectors and pipe names for classes that are declared by this module or exported by a module that this module imports.
-
-## What is the Angular compiler?
-
-The Angular compiler converts the application code you write into highly performant JavaScript code.
-The `@NgModule` metadata plays an important role in guiding the compilation process.
-
-The code you write isn't immediately executable.
-For example, components have templates that contain custom elements, attribute directives, Angular binding declarations, and some peculiar syntax that clearly isn't native HTML.
-
-The Angular compiler reads the template markup, combines it with the corresponding component class code, and emits *component factories*.
-
-A component factory creates a pure, 100% JavaScript representation of the component that incorporates everything described in its `@Component` metadata:
-The HTML, the binding instructions, the attached styles.
-
-Because directives and pipes appear in component templates, the Angular compiler incorporates them into compiled component code too.
-
-`@NgModule` metadata tells the Angular compiler what components to compile for this module and how to link this module with other modules.
diff --git a/adev-es/src/content/guide/ngmodules/feature-modules.md b/adev-es/src/content/guide/ngmodules/feature-modules.md
deleted file mode 100644
index 2974b61..0000000
--- a/adev-es/src/content/guide/ngmodules/feature-modules.md
+++ /dev/null
@@ -1,158 +0,0 @@
-# Feature modules
-
-Feature modules are NgModules for the purpose of organizing code.
-
-As your application grows, you can organize code relevant for a specific feature.
-This helps apply clear boundaries for features.
-With feature modules, you can keep code related to a specific functionality or feature separate from other code.
-Delineating areas of your application helps with collaboration between developers and teams, separating directives, and managing the size of the root module.
-
-## Feature modules vs. root modules
-
-A feature module is an organizational best practice, as opposed to a concept of the core Angular API.
-A feature module delivers a cohesive set of functionality focused on a specific application need such as a user workflow, routing, or forms.
-While you can do everything within the root module, feature modules help you partition the application into focused areas.
-A feature module collaborates with the root module and with other modules through the services it provides and the components, directives, and pipes that it shares.
-
-## How to make a feature module
-
-Assuming you already have an application that you created with the [Angular CLI](/tools/cli), create a feature module using the CLI by entering the following command in the root project directory.
-You can omit the "Module" suffix from the name because the CLI appends it:
-
-<docs-code language="shell">
-
-ng generate module CustomerDashboard
-
-</docs-code>
-
-This causes the CLI to create a folder called `customer-dashboard` with a file inside called `customer-dashboard.module.ts` with the following contents:
-
-<docs-code language="typescript">
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: []
-})
-export class CustomerDashboardModule { }
-
-</docs-code>
-
-The structure of an NgModule is the same whether it is a root module or a feature module.
-In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports `NgModule`, which, like the root module, lets you use the `@NgModule` decorator; the second imports `CommonModule`, which contributes many common directives such as `ngIf` and `ngFor`.
-
-Note: Feature modules import `CommonModule` instead of `BrowserModule`, which is only imported once in the root module.
-`CommonModule` only contains information for common directives such as `ngIf` and `ngFor` which are needed in most templates, whereas `BrowserModule` configures the Angular application for the browser which needs to be done only once.
-
-The `declarations` array is available for you to add declarables, which are components, directives, and pipes that belong exclusively to this particular module.
-To add a component, enter the following command at the command line where `customer-dashboard` is the directory where the CLI generated the feature module and `CustomerDashboard` is the name of the component:
-
-<docs-code language="shell">
-
-ng generate component customer-dashboard/CustomerDashboard
-
-</docs-code>
-
-This generates a folder for the new component within the `customer-dashboard` folder and updates `CustomerDashboardModule`.
-
-<docs-code header="src/app/customer-dashboard/customer-dashboard.module.ts"
-           highlight="[4,11,14]">
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    CustomerDashboardComponent
-  ],
-  exports: [
-    CustomerDashboardComponent
-  ]
-})
-export class CustomerDashboardModule { }
-</docs-code>
-
-The `CustomerDashboardComponent` is now in the JavaScript import list at the top and added to the `declarations` array, which lets Angular know to associate this new component with this feature module.
-
-## Importing a feature module
-
-To incorporate the feature module into your app, you have to let the root module, `app.module.ts`, know about it.
-Notice the `CustomerDashboardModule` export at the bottom of `customer-dashboard.module.ts`.
-This exposes it so that other modules can get to it.
-To import it into the `AppModule`, add it to the imports in `app.module.ts` and to the `imports` array:
-
-<docs-code header="src/app/app.module.ts" highlight="[5,6,14]">
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-// import the feature module here so you can add it to the imports array below
-import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    CustomerDashboardModule // add the feature module here
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-</docs-code>
-
-Now the `AppModule` knows about the feature module and `AppComponent` can use the customer dashboard component.
-More details on this in the section below.
-
-If you were to add any service providers to the feature module, `AppModule` would know about those too, as would any other imported feature modules.
-
-## Rendering a feature module's component template
-
-When the CLI generated the `CustomerDashboardComponent` for the feature module, it included a template, `customer-dashboard.component.html`, with the following markup:
-
-<docs-code header="src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html" language="html">
-<p>
-  customer-dashboard works!
-</p>
-</docs-code>
-
-To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`.
-In `customer-dashboard.module.ts`, just beneath the `declarations` array, add an `exports` array containing `CustomerDashboardComponent`:
-
-<docs-code header="src/app/customer-dashboard/customer-dashboard.module.ts" highlight="[2]">
-  exports: [
-    CustomerDashboardComponent
-  ]
-</docs-code>
-
-Next, in the `AppComponent`, `app.component.html`, add the tag `<app-customer-dashboard>`:
-
-<docs-code header="src/app/app.component.html" highlight="[5]" language="html">
-<h1>
-  {{title}}
-</h1>
-
-<app-customer-dashboard></app-customer-dashboard>
-</docs-code>
-
-Now, in addition to the title that renders by default, the `CustomerDashboardComponent` template renders too:
-
-<img alt="feature module component" src="assets/images/guide/ngmodules/feature-module.png">
-
-## More on NgModules
-
-<docs-pill-row>
-  <docs-pill href="/guide/ngmodules/lazy-loading" title="Lazy Loading Modules with the Angular Router"/>
-  <docs-pill href="/guide/ngmodules/providers" title="Providers"/>
-  <docs-pill href="/guide/ngmodules/module-types" title="Types of Feature Modules"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/ngmodules/frequent.md b/adev-es/src/content/guide/ngmodules/frequent.md
deleted file mode 100644
index 3b68932..0000000
--- a/adev-es/src/content/guide/ngmodules/frequent.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Frequently-used modules
-
-An Angular application needs at least one module that serves as the root module.
-As you add features to your app, you can add them in modules.
-The following are frequently used Angular modules with examples of some of the things they contain:
-
-| NgModule              | Import it from              | Why you use it |
-|:---                   |:---                         |:---            |
-| `BrowserModule`       | `@angular/platform-browser` | To run your application in a browser.                  |
-| `CommonModule`        | `@angular/common`           | To use `NgIf` and `NgFor`.                             |
-| `FormsModule`         | `@angular/forms`            | To build template driven forms \(includes `NgModel`\). |
-| `ReactiveFormsModule` | `@angular/forms`            | To build reactive forms.                               |
-| `RouterModule`        | `@angular/router`           | To use `RouterLink`, `.forRoot()`, and `.forChild()`.  |
-| `HttpClientModule`    | `@angular/common/http`      | To communicate with a server using the HTTP protocol.  |
-
-## Importing modules
-
-When you use these Angular modules, import them in `AppModule`, or your feature module as appropriate, and list them in the `@NgModule` `imports` array.
-
-For example, in a new application generated by the [Angular CLI](/tools/cli), `BrowserModule` is imported into the `AppModule`.
-
-<docs-code language="typescript" highlight="[1,11,12]">
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    /* add modules here so Angular knows to use them */
-    BrowserModule,
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-
-</docs-code>
-
-The imports at the top of the array are JavaScript import statements while the `imports` array within `@NgModule` is Angular specific.
-For more information on the difference, see [JavaScript Modules vs. NgModules](guide/ngmodules/vs-jsmodule).
-
-## `BrowserModule` and `CommonModule`
-
-`BrowserModule` re-exports `CommonModule`, which exposes many common directives such as `ngIf` and `ngFor`.
-These directives are available to any module that imports the browser module, given the re-export.
-
-For applications that run in the browser, import `BrowserModule` in the root `AppModule` because it provides services that are essential to launch and render your application in browsers.
-
-Note: `BrowserModule`'s providers are for the whole application so it should only be in the root module, not in feature modules. Feature modules only need the common directives in `CommonModule`; they don't need to re-install app-wide providers.
diff --git a/adev-es/src/content/guide/ngmodules/lazy-loading.md b/adev-es/src/content/guide/ngmodules/lazy-loading.md
deleted file mode 100644
index 1cd88f6..0000000
--- a/adev-es/src/content/guide/ngmodules/lazy-loading.md
+++ /dev/null
@@ -1,453 +0,0 @@
-# Lazy-loading feature modules
-
-By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not.
-For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed.
-Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.
-
-<!-- For the final sample application with two lazy-loaded modules that this page describes: -->
-<!-- TODO: link to GitHub -->
-<!-- <docs-code live/> -->
-
-## Lazy loading basics
-
-This section introduces the basic procedure for configuring a lazy-loaded route.
-For a step-by-step example, see the [step-by-step setup](#step-by-step-setup) section on this page.
-
-To lazy load Angular modules, use `loadChildren` (instead of `component`) in your `AppRoutingModule` `routes` configuration as follows.
-
-<docs-code header="AppRoutingModule (excerpt)" language="typescript">
-
-const routes: Routes = [
-  {
-    path: 'items',
-    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
-  }
-];
-
-</docs-code>
-
-In the lazy-loaded module's routing module, add a route for the component.
-
-<docs-code header="Routing module for lazy loaded module (excerpt)" language="typescript">
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ItemsComponent
-  }
-];
-
-</docs-code>
-
-Also be sure to remove the `ItemsModule` from the `AppModule`.
-For step-by-step instructions on lazy loading modules, continue with the following sections of this page.
-
-## Step-by-step setup
-
-Setting up a lazy-loaded feature module requires two main steps:
-
-1. Create the feature module with the Angular CLI, using the `--route` flag.
-1. Configure the routes.
-
-### Set up an application
-
-If you don't already have an application, follow the following steps to create one with the Angular CLI.
-If you already have an application, skip to [Configure the routes](#config-routes).
-
-Enter the following command where `customer-app` is the name of your app:
-
-<docs-code language="shell">
-
-ng new customer-app --no-standalone --routing
-
-</docs-code>
-
-This creates an application called `customer-app`, `--no-standalone` flag makes the app module-based, and the `--routing` flag generates a file called `app-routing.module.ts`.
-This is one of the files you need for setting up lazy loading for your feature module.
-Navigate into the project by issuing the command `cd customer-app`.
-
-### Create a feature module with routing
-
-Next, you need a feature module with a component to route to.
-To make one, enter the following command in the command line tool, where `customers` is the name of the feature module.
-The path for loading the `customers` feature modules is also `customers` because it is specified with the `--route` option:
-
-<docs-code language="shell">
-
-ng generate module customers --route customers --module app.module
-
-</docs-code>
-
-This creates a `customers` directory having the new lazy-loadable feature module `CustomersModule` defined in the `customers.module.ts` file and the routing module `CustomersRoutingModule` defined in the `customers-routing.module.ts` file.
-The command automatically declares the `CustomersComponent` and imports `CustomersRoutingModule` inside the new feature module.
-
-Because the new module is meant to be lazy-loaded, the command does **not** add a reference to it in the application's root module file, `app.module.ts`.
-Instead, it adds the declared route, `customers` to the `routes` array declared in the module provided as the `--module` option.
-
-<docs-code header="src/app/app-routing.module.ts" language="typescript">
-const routes: Routes = [
-  {
-    path: 'customers',
-    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
-  }
-];
-</docs-code>
-
-Notice that the lazy-loading syntax uses `loadChildren` followed by a function that uses the browser's built-in `import('...')` syntax for dynamic imports.
-The import path is the relative path to the module.
-
-<docs-callout title="String-based lazy loading">
-
-In Angular version 8, the string syntax for the `loadChildren` route specification was deprecated in favor of the `import()` syntax.
-You can opt into using string-based lazy loading (`loadChildren: './path/to/module#Module'`) by including the lazy-loaded routes in your `tsconfig` file, which includes the lazy-loaded files in the compilation.
-
-By default the Angular CLI generates projects with stricter file inclusions intended to be used with the `import()` syntax.
-
-</docs-callout>
-
-### Add another feature module
-
-Use the same command to create a second lazy-loaded feature module with routing, along with its stub component.
-
-<docs-code language="shell">
-
-ng generate module orders --route orders --module app.module
-
-</docs-code>
-
-This creates a new directory called `orders` containing the `OrdersModule` and `OrdersRoutingModule`, along with the new `OrdersComponent` source files.
-The `orders` route, specified with the `--route` option, is added to the `routes` array inside the `app-routing.module.ts` file, using the lazy-loading syntax.
-
-<docs-code header="src/app/app-routing.module.ts" language="typescript" highlight="[6,7,8,9]">
-const routes: Routes = [
-  {
-    path: 'customers',
-    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
-  },
-  {
-    path: 'orders',
-    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
-  }
-];
-</docs-code>
-
-### Set up the UI
-
-Though you can type the URL into the address bar, a navigation UI is straightforward for the user and more common.
-Replace the default placeholder markup in `app.component.html` with a custom nav, so you can navigate to your modules in the browser:
-
-<docs-code header="src/app/app.component.html" language="html" highlight="[4,5,6]">
-<h1>
-  {{title}}
-</h1>
-<button type="button" routerLink="/customers">Customers</button>
-<button type="button" routerLink="/orders">Orders</button>
-<button type="button" routerLink="">Home</button>
-<router-outlet></router-outlet>
-</docs-code>
-
-To see your application in the browser so far, enter the following command in the command line tool window:
-
-<docs-code language="shell">
-
-ng serve
-
-</docs-code>
-
-Then go to `localhost:4200` where you should see "customer-app" and three buttons.
-
-<img alt="three buttons in the browser" src="assets/images/guide/modules/lazy-loading-three-buttons.png" width="300">
-
-These buttons work, because the Angular CLI automatically added the routes for the feature modules to the `routes` array in `app-routing.module.ts`.
-
-### Imports and route configuration
-
-The Angular CLI automatically added each feature module to the routes map at the application level.
-Finish this off by adding the default route.
-In the `app-routing.module.ts` file, update the `routes` array with the following:
-
-<docs-code header="src/app/app-routing.module.ts" language="typescript">
-const routes: Routes = [
-  {
-    path: 'customers',
-    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
-  },
-  {
-    path: 'orders',
-    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
-  },
-  {
-    path: '',
-    redirectTo: '',
-    pathMatch: 'full'
-  }
-];
-</docs-code>
-
-The first two paths are the routes to the `CustomersModule` and the `OrdersModule`.
-The final entry defines a default route.
-The empty path matches everything that doesn't match an earlier path.
-
-### Inside the feature module
-
-Next, take a look at the `customers.module.ts` file.
-If you're using the Angular CLI and following the steps outlined in this page, you don't have to do anything here.
-
-<docs-code header="src/app/customers/customers.module.ts" language="typescript">
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CustomersRoutingModule } from './customers-routing.module';
-import { CustomersComponent } from './customers.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CustomersRoutingModule
-  ],
-  declarations: [CustomersComponent]
-})
-export class CustomersModule { }
-</docs-code>
-
-The `customers.module.ts` file imports the `customers-routing.module.ts` and `customers.component.ts` files.
-`CustomersRoutingModule` is listed in the `@NgModule` `imports` array giving `CustomersModule` access to its own routing module.
-`CustomersComponent` is in the `declarations` array, which means `CustomersComponent` belongs to the `CustomersModule`.
-
-The `app-routing.module.ts` then imports the feature module, `customers.module.ts` using JavaScript's dynamic import.
-
-The feature-specific route definition file `customers-routing.module.ts` imports its own feature component defined in the `customers.component.ts` file, along with the other JavaScript import statements.
-It then maps the empty path to the `CustomersComponent`.
-
-<docs-code header="src/app/customers/customers-routing.module.ts" language="typescript"
-           highlight="[8,9]">
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { CustomersComponent } from './customers.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: CustomersComponent
-  }
-];
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class CustomersRoutingModule { }
-</docs-code>
-
-The `path` here is set to an empty string because the path in `AppRoutingModule` is already set to `customers`, so this route in the `CustomersRoutingModule`, is already within the `customers` context.
-Every route in this routing module is a child route.
-
-The other feature module's routing module is configured similarly.
-
-<docs-code header="src/app/orders/orders-routing.module.ts (excerpt)" language="typescript">
-import { OrdersComponent } from './orders.component';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: OrdersComponent
-  }
-];
-</docs-code>
-
-### Verify lazy loading
-
-You can verify that a module is indeed being lazy loaded with the Chrome developer tools.
-In Chrome, open the developer tools by pressing <kbd>⌘ Cmd</kbd>+<kbd>Option</kbd>+<kbd>i</kbd> on a Mac or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>j</kbd> on a PC and go to the Network Tab.
-
-<img alt="lazy loaded modules diagram" src="assets/images/guide/modules/lazy-loading-network-tab.png" width="600">
-
-Click on the Orders or Customers button.
-If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded.
-A chunk should appear for Orders and for Customers but only appears once for each.
-
-<img alt="lazy loaded modules diagram" src="assets/images/guide/modules/lazy-loading-chunk-arrow.png" width="600">
-
-To see it again, or to test after making changes, click the circle with a line through it in the upper left of the Network Tab:
-
-<img alt="lazy loaded modules diagram" src="assets/images/guide/modules/lazy-loading-clear.gif" width="200">
-
-Then reload with <kbd>⌘ Cmd</kbd>+<kbd>R</kbd> or <kbd>Ctrl</kbd>+<kbd>R</kbd>, depending on your platform.
-
-## `forRoot()` and `forChild()`
-
-You might have noticed that the Angular CLI adds `RouterModule.forRoot(routes)` to the `AppRoutingModule` `imports` array.
-This lets Angular know that the `AppRoutingModule` is a routing module and `forRoot()` specifies that this is the root routing module.
-It configures all the routes you pass to it, gives you access to the router directives, and registers the `Router` service.
-Use `forRoot()` only once in the application, inside the `AppRoutingModule`.
-
-The Angular CLI also adds `RouterModule.forChild(routes)` to feature routing modules.
-This way, Angular knows that the route list is only responsible for providing extra routes and is intended for feature modules.
-You can use `forChild()` in multiple modules.
-
-The `forRoot()` method takes care of the *global* injector configuration for the Router.
-The `forChild()` method has no injector configuration.
-It uses directives such as `RouterOutlet` and `RouterLink`.
-For more information, see the [`forRoot()` pattern](guide/ngmodules/singleton-services#forRoot) section of the singleton services guide.
-
-## Preloading
-
-Preloading improves UX by loading parts of your application in the background.
-You can preload modules, standalone components or component data.
-
-### Preloading modules and standalone components
-
-Preloading modules and standalone components improves UX by loading parts of your application in the background. By doing this, users don't have to wait for the elements to download when they activate a route.
-
-To enable preloading of all lazy loaded modules and standalone components, import the `PreloadAllModules` token from the Angular `router`.
-
-### Module based application
-
-<docs-code header="AppRoutingModule (excerpt)" language="typescript">
-
-import { PreloadAllModules } from '@angular/router';
-
-</docs-code>
-
-Then, specify your preloading strategy in the `AppRoutingModule`'s `RouterModule.forRoot()` call.
-
-<docs-code header="AppRoutingModule (excerpt)" language="typescript" highlight="[4]">
-RouterModule.forRoot(
-  appRoutes,
-  {
-    preloadingStrategy: PreloadAllModules
-  }
-)
-</docs-code>
-
-### Standalone application
-
-For standalone applications configure preloading strategies by adding `withPreloading` to  `provideRouter`s RouterFeatures in `app.config.ts`
-
-<docs-code header="app.config.ts" language="typescript" highlight="[3,5,14]">
-import { ApplicationConfig } from '@angular/core';
-import {
-  PreloadAllModules,
-  provideRouter
-  withPreloading,
-} from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(
-      routes,
-      withPreloading(PreloadAllModules)
-    ),
-  ],
-};
-</docs-code>
-
-### Preloading component data
-
-To preload component data, use a `resolver`.
-Resolvers improve UX by blocking the page load until all necessary data is available to fully display the page.
-
-#### Resolvers
-
-Create a resolver service.
-With the Angular CLI, the command to create a service is as follows:
-
-<docs-code language="shell">
-ng generate service <service-name>
-</docs-code>
-
-In the newly created service, implement the `Resolve` interface provided by the `@angular/router` package:
-
-<docs-code header="Resolver service (excerpt)" language="typescript">
-
-import { Resolve } from '@angular/router';
-
-…
-
-/*An interface that represents your data model*/
-export interface Crisis {
-  id: number;
-  name: string;
-}
-
-export class CrisisDetailResolverService implements Resolve<Crisis> {
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
-    // your logic goes here
-  }
-}
-
-</docs-code>
-
-Import this resolver into your module's routing module.
-
-<docs-code header="Feature module's routing module (excerpt)" language="typescript">
-
-import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
-
-</docs-code>
-
-Add a `resolve` object to the component's `route` configuration.
-
-<docs-code header="Feature module's routing module (excerpt)" language="typescript"
-           highlight="[4,5,6]">
-{
-  path: '/your-path',
-  component: YourComponent,
-  resolve: {
-    crisis: CrisisDetailResolverService
-  }
-}
-</docs-code>
-
-In the component's constructor, inject an instance of the `ActivatedRoute` class that represents the current route.
-
-<docs-code header="Component's constructor (excerpt)">
-import { ActivatedRoute } from '@angular/router';
-
-@Component({ … })
-class YourComponent {
-  constructor(private route: ActivatedRoute) {}
-}
-</docs-code>
-
-Use the injected instance of the `ActivatedRoute` class to access `data` associated with a given route.
-
-<docs-code header="Component's ngOnInit lifecycle hook (excerpt)" language="typescript"
-           highlight="[1,5,8]">
-import { ActivatedRoute } from '@angular/router';
-
-@Component({ … })
-class YourComponent {
-  constructor(private route: ActivatedRoute) {}
-
-  ngOnInit() {
-    this.route.data
-      .subscribe(data => {
-        const crisis: Crisis = data.crisis;
-        // …
-      });
-  }
-}
-</docs-code>
-
-## Troubleshooting lazy-loading modules
-
-A common error when lazy-loading modules is importing common modules in multiple places within an application.
-Test for this condition by first generating the module using the Angular CLI and including the `--route route-name` parameter, where `route-name` is the name of your module.
-Next, create the module without the `--route` parameter.
-If `ng generate module` with the `--route` parameter returns an error, but runs correctly without it, you might have imported the same module in multiple places.
-
-Remember, many common Angular modules should be imported at the base of your application.
-
-For more information on Angular Modules, see [NgModules](guide/ngmodules).
-
-## More on NgModules and routing
-
-You might also be interested in the following:
-
-* [Routing and Navigation](guide/routing)
-* [Providers](guide/ngmodules/providers)
-* [Types of Feature Modules](guide/ngmodules/module-types)
-* [Route-level code-splitting in Angular](https://web.dev/route-level-code-splitting-in-angular)
-* [Route preloading strategies in Angular](https://web.dev/route-preloading-in-angular)
diff --git a/adev-es/src/content/guide/ngmodules/module-types.md b/adev-es/src/content/guide/ngmodules/module-types.md
deleted file mode 100644
index 77ccb28..0000000
--- a/adev-es/src/content/guide/ngmodules/module-types.md
+++ /dev/null
@@ -1,107 +0,0 @@
-# Guidelines for creating NgModules
-
-This topic provides a conceptual overview of the different categories of NgModules you can create in order to organize your code in a modular structure.
-These categories are not cast in stone —they are suggestions.
-You may want to create NgModules for other purposes, or combine the characteristics of some of these categories.
-
-NgModules are a great way to organize an application and keep code related to a specific functionality or feature separate from other code.
-Use NgModules to consolidate components, directives, and pipes into cohesive blocks of functionality.
-Focus each block on a feature or business domain, a workflow or navigation flow, a common collection of utilities, or one or more providers for services.
-
-## Summary of NgModule categories
-
-All applications start by [bootstrapping a root NgModule](guide/ngmodules/bootstrapping "Launching an app with a root NgModule").
-You can organize your other NgModules any way you want.
-
-This topic provides some guidelines for the following general categories of NgModules:
-
-| Category            | Details |
-|:---                 |:---     |
-| [Domain](#domain-ngmodules)   | Is organized around a feature, business domain, or user experience.                                                                         |
-| [Routing](#routing-ngmodules) | Provides the routing configuration for another NgModule.                                                                                    |
-| [Service](#service-ngmodules) | Provides utility services such as data access and messaging.                                                                                |
-| [Widget](#widget-ngmodules)   | Makes a component, directive, or pipe available to other NgModules.                                                                         |
-| [Shared](#shared-ngmodules)   | Makes a set of components, directives, and pipes available to other NgModules.                                                              |
-
-The following table summarizes the key characteristics of each category.
-
-| NgModule | Declarations | Providers      | Exports       | Imported by |
-|:---      |:---          |:---            |:---           |:---         |
-| Domain   | Yes          | Rare           | Top component | Another domain, `AppModule`    |
-| Routed   | Yes          | Rare           | No            | None                           |
-| Routing  | No           | Yes \(Guards\) | RouterModule  | Another domain \(for routing\) |
-| Service  | No           | Yes            | No            | `AppModule`                    |
-| Widget   | Yes          | Rare           | Yes           | Another domain                 |
-| Shared   | Yes          | No             | Yes           | Another domain                 |
-
-## Domain NgModules
-
-Use a domain NgModule to deliver a user experience dedicated to a particular feature or application domain, such as editing a customer or placing an order.
-
-A domain NgModule organizes the code related to a certain function, containing all of the components, routing, and templates that make up the function.
-Your top component in the domain NgModule acts as the feature or domain's root, and is the only component you export.
-Private supporting subcomponents descend from it.
-
-Import a domain NgModule exactly once into another NgModule, such as a domain NgModule, or into the root NgModule (`AppModule`) of an application that contains only a few NgModules.
-
-Domain NgModules consist mostly of declarations.
-You rarely include providers.
-If you do, the lifetime of the provided services should be the same as the lifetime of the NgModule.
-
-## Routing NgModules
-
-Use a routing NgModule to provide the routing configuration for a domain NgModule, thereby separating routing concerns from its companion domain NgModule.
-
-HELPFUL: For an overview and details about routing, see [In-app navigation: routing to views](guide/routing "In-app navigation: routing to views").
-
-Use a routing NgModule to do the following tasks:
-
-* Define routes
-* Add router configuration to the NgModule via `imports`
-* Add guard and resolver service providers to the NgModule's providers
-
-The name of the routing NgModule should parallel the name of its companion NgModule, using the suffix `Routing`.
-For example, consider a `ContactModule` in `contact.module.ts` has a routing NgModule named `ContactRoutingModule` in `contact-routing.module.ts`.
-
-Import a routing NgModule only into its companion NgModule.
-If the companion NgModule is the root `AppModule`, the `AppRoutingModule` adds router configuration to its imports with `RouterModule.forRoot(routes)`.
-All other routing NgModules are children that import using `RouterModule.forChild(routes)`.
-
-In your routing NgModule, re-export the `RouterModule` as a convenience so that components of the companion NgModule have access to router directives such as `RouterLink` and `RouterOutlet`.
-
-Don't use declarations in a routing NgModule.
-Components, directives, and pipes are the responsibility of the companion domain NgModule, not the routing NgModule.
-
-## Service NgModules
-
-Use a service NgModule to provide a utility service such as data access or messaging.
-Ideal service NgModules consist entirely of providers and have no declarations.
-Angular's `HttpClientModule` is a good example of a service NgModule.
-
-Use only the root `AppModule` to import service NgModules.
-
-## Widget NgModules
-
-Use a widget NgModule to make a component, directive, or pipe available to external NgModules.
-Import widget NgModules into any NgModules that need the widgets in their templates.
-Many third-party UI component libraries are provided as widget NgModules.
-
-A widget NgModule should consist entirely of declarations, most of them exported.
-It would rarely have providers.
-
-## Shared NgModules
-
-Put commonly used directives, pipes, and components into one NgModule, typically named `SharedModule`, and then import just that NgModule wherever you need it in other parts of your application.
-You can import the shared NgModule in your domain NgModules, including [lazy-loaded NgModules](guide/ngmodules/lazy-loading "Lazy-loading an NgModule").
-
-Note: Shared NgModules should not include providers, nor should any of its imported or re-exported NgModules include providers.
-
-To learn how to use shared modules to organize and streamline your code, see [Sharing NgModules in an app](guide/ngmodules/sharing "Sharing NgModules in an app").
-
-## Next steps
-
-If you want to manage NgModule loading and the use of dependencies and services, see the following:
-
-* To learn about loading NgModules eagerly when the application starts, or lazy-loading NgModules asynchronously by the router, see [Lazy-loading feature modules](guide/ngmodules/lazy-loading)
-* To understand how to provide a service or other dependency for your app, see [Providing Dependencies for an NgModule](guide/ngmodules/providers "Providing Dependencies for an NgModule")
-* To learn how to create a singleton service to use in NgModules, see [Making a service a singleton](guide/ngmodules/singleton-services "Making a service a singleton")
diff --git a/adev-es/src/content/guide/ngmodules/overview.md b/adev-es/src/content/guide/ngmodules/overview.md
index 778e1b3..c0b4bbd 100644
--- a/adev-es/src/content/guide/ngmodules/overview.md
+++ b/adev-es/src/content/guide/ngmodules/overview.md
@@ -2,7 +2,7 @@
 
 IMPORTANT: The Angular team recommends using [standalone components](guide/components/anatomy-of-components#-imports-in-the-component-decorator) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
 
-An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts *metadata* that tells Angular how to compile component templates and configure dependency injection.
+An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts _metadata_ that tells Angular how to compile component templates and configure dependency injection.
 
 ```typescript
 import {NgModule} from '@angular/core';
@@ -14,8 +14,9 @@ export class CustomMenuModule { }
 ```
 
 An NgModule has two main responsibilities:
-* Declaring components, directives, and pipes that belong to the NgModule
-* Add providers to the injector for components, directives, and pipes that import the NgModule
+
+- Declaring components, directives, and pipes that belong to the NgModule
+- Add providers to the injector for components, directives, and pipes that import the NgModule
 
 ## Declarations
 
@@ -80,27 +81,27 @@ The `imports` array accepts other NgModules, as well as standalone components, d
 
 An NgModule can _export_ its declared components, directives, and pipes such that they're available to other components and NgModules.
 
- ```typescript
+```typescript
 @NgModule({
-  imports: [PopupTrigger, SelectionIndicator],
-  declarations: [CustomMenu, CustomMenuItem],
+ imports: [PopupTrigger, SelectionIndicator],
+ declarations: [CustomMenu, CustomMenuItem],
 
-  // Make CustomMenu and CustomMenuItem available to
-  // components and NgModules that import CustomMenuModule.
-  exports: [CustomMenu, CustomMenuItem],
+ // Make CustomMenu and CustomMenuItem available to
+ // components and NgModules that import CustomMenuModule.
+ exports: [CustomMenu, CustomMenuItem],
 })
 export class CustomMenuModule { }
 ```
 
 The `exports` property is not limited to declarations, however. An NgModule can also export any other components, directives, pipes, and NgModules that it imports.
 
- ```typescript
+```typescript
 @NgModule({
-  imports: [PopupTrigger, SelectionIndicator],
-  declarations: [CustomMenu, CustomMenuItem],
+ imports: [PopupTrigger, SelectionIndicator],
+ declarations: [CustomMenu, CustomMenuItem],
 
-  // Also make PopupTrigger available to any component or NgModule that imports CustomMenuModule.
-  exports: [CustomMenu, CustomMenuItem, PopupTrigger],
+ // Also make PopupTrigger available to any component or NgModule that imports CustomMenuModule.
+ exports: [CustomMenu, CustomMenuItem, PopupTrigger],
 })
 export class CustomMenuModule { }
 ```
@@ -110,8 +111,9 @@ export class CustomMenuModule { }
 TIP: See the [Dependency Injection guide](guide/di) for information on dependency injection and providers.
 
 An `NgModule` can specify `providers` for injected dependencies. These providers are available to:
-* Any standalone component, directive, or pipe that imports the NgModule, and
-* The `declarations` and `providers` of any _other_ NgModule that imports the NgModule.
+
+- Any standalone component, directive, or pipe that imports the NgModule, and
+- The `declarations` and `providers` of any _other_ NgModule that imports the NgModule.
 
 ```typescript
 @NgModule({
@@ -133,10 +135,11 @@ export class UserProfileModule { }
 ```
 
 In the example above:
-* The `CustomMenuModule` provides `OverlayManager`.
-* The `CustomMenu` and `CustomMenuItem` components can inject `OverlayManager` because they're declared in `CustomMenuModule`.
-* `UserProfile` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
-* `UserDataClient` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
+
+- The `CustomMenuModule` provides `OverlayManager`.
+- The `CustomMenu` and `CustomMenuItem` components can inject `OverlayManager` because they're declared in `CustomMenuModule`.
+- `UserProfile` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
+- `UserDataClient` can inject `OverlayManager` because its NgModule imports `CustomMenuModule`.
 
 ### The `forRoot` and `forChild` pattern
 
diff --git a/adev-es/src/content/guide/ngmodules/providers.md b/adev-es/src/content/guide/ngmodules/providers.md
deleted file mode 100644
index b945027..0000000
--- a/adev-es/src/content/guide/ngmodules/providers.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Providing dependencies in modules
-
-A provider is an instruction to the [Dependency Injection](guide/di) system on how to obtain a value for a dependency.
-Most of the time, these dependencies are services that you create and provide.
-
-## Providing a service
-
-If you already have an application that was created with the [Angular CLI](/tools/cli), you can create a service using the `ng generate` CLI command in the root project directory.
-Replace *User* with the name of your service.
-
-<docs-code language="shell">
-
-ng generate service User
-
-</docs-code>
-
-This command creates the following `UserService` skeleton:
-
-<docs-code header="src/app/user.service.ts">
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserService {
-}
-</docs-code>
-
-You can now inject `UserService` anywhere in your application.
-
-The service itself is a class that the CLI generated and that's decorated with `@Injectable()`.
-By default, this decorator has a `providedIn` property, which creates a provider for the service.
-In this case, `providedIn: 'root'` specifies that Angular should provide the service in the root injector.
-
-## Provider scope
-
-When you add a service provider to the root application injector, it's available throughout the application.
-Additionally, these providers are also available to all the classes in the application as long they have the lookup token.
-
-You should always provide your service in the root injector unless there is a case where you want the service to be available only if the consumer imports a particular `@NgModule`.
-
-## Limiting provider scope by lazy loading modules
-
-In the basic CLI-generated app, modules are eagerly loaded which means that they are all loaded when the application launches.
-Angular uses an injector system to make things available between modules.
-In an eagerly loaded app, the root application injector makes all of the providers in all of the modules available throughout the application.
-
-This behavior necessarily changes when you use lazy loading.
-Lazy loading is when you load modules only when you need them; for example, when routing.
-They aren't loaded right away like with eagerly loaded modules.
-This means that any services listed in their provider arrays aren't available because the root injector doesn't know about these modules.
-
-<!--todo: KW--Make diagram here -->
-<!--todo: KW--per Misko: not clear if the lazy modules are siblings or grand-children. They are both depending on router structure. -->
-
-When the Angular router lazy-loads a module, it creates a new injector.
-This injector is a child of the root application injector.
-Imagine a tree of injectors; there is a single root injector and then a child injector for each lazy loaded module.
-This child injector gets populated with all the module-specific providers, if any.
-Look up resolution for every provider follows the [rules of dependency injection hierarchy](guide/di/hierarchical-dependency-injection#resolution-rules).
-
-Any component created within a lazy loaded module's context, such as by router navigation, gets its own local instance of child provided services, not the instance in the root application injector.
-Components in external modules continue to receive the instances created for the application root injector.
-
-Though you can provide services by lazy loading modules, not all services can be lazy loaded.
-For instance, some modules only work in the root module, such as the Router.
-The Router works with the global location object in the browser.
-
-As of Angular version 9, you can provide a new instance of a service with each lazy loaded module.
-The following code adds this functionality to `UserService`.
-
-<docs-code header="src/app/user.service.ts" highlight="[4]">
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'any',
-})
-export class UserService {
-}
-</docs-code>
-
-With `providedIn: 'any'`, all eagerly loaded modules share a singleton instance; however, lazy loaded modules each get their own unique instance, as shown in the following diagram.
-
-<img alt="any-provider-scope" class="left" src="assets/images/guide/providers/any-provider.svg">
-
-## Limiting provider scope with components
-
-Another way to limit provider scope is by adding the service you want to limit to the component's `providers` array.
-Component providers and NgModule providers are independent of each other.
-This method is helpful when you want to eagerly load a module that needs a service all to itself.
-Providing a service in the component limits the service only to that component and its descendants.
-Other components in the same module can't access it.
-
-<docs-code header="src/app/app.component.ts">
-@Component({
-  // ...
-  providers: [UserService]
-})
-export class AppComponent {}
-</docs-code>
-
-## Providing services in modules vs. components
-
-Generally, provide services the whole application needs in the root module and scope services by providing them in lazy loaded modules.
-
-The router works at the root level so if you put providers in a component, even `AppComponent`, lazy loaded modules, which rely on the router, can't see them.
-
-<!-- KW--Make a diagram here -->
-Register a provider with a component when you must limit a service instance to a component and its component tree, that is, its child components.
-For example, a user editing component, `UserEditorComponent`, that needs a private copy of a caching `UserService` should register the `UserService` with the `UserEditorComponent`.
-Then each new instance of the `UserEditorComponent` gets its own cached service instance.
-
-## Injector hierarchy and service instances
-
-Services are singletons within the scope of an injector, which means there is at most one instance of a service in a given injector.
-
-Angular DI has a [hierarchical injection system](guide/di/hierarchical-dependency-injection), which means that nested injectors can create their own service instances.
-Whenever Angular creates a new instance of a component that has `providers` specified in `@Component()`, it also creates a new child injector for that instance.
-Similarly, when a new NgModule is lazy-loaded at run time, Angular can create an injector for it with its own providers.
-
-Child modules and component injectors are independent of each other, and create their own separate instances of the provided services.
-When Angular destroys an NgModule or component instance, it also destroys that injector and that injector's service instances.
-
-For more information, see [Hierarchical injectors](guide/di/hierarchical-dependency-injection).
-
-## More on NgModules
-
-<docs-pill-row>
-  <docs-pill href="/guide/ngmodules/singleton-services" title="Singleton Services"/>
-  <docs-pill href="/guide/ngmodules/lazy-loading" title="Lazy Loading Modules"/>
-  <docs-pill href="/guide/di/dependency-injection-providers" title="Dependency providers"/>
-  <docs-pill href="/guide/ngmodules/faq" title="NgModule FAQ"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/ngmodules/sharing.md b/adev-es/src/content/guide/ngmodules/sharing.md
deleted file mode 100644
index 4da06dd..0000000
--- a/adev-es/src/content/guide/ngmodules/sharing.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Sharing modules
-
-Creating shared modules allows you to organize and streamline your code.
-You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application.
-
-Consider the following module from an imaginary app:
-
-<docs-code language="typescript" highlight="[9,19,20]">
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { CustomerComponent } from './customer.component';
-import { NewItemDirective } from './new-item.directive';
-import { OrdersPipe } from './orders.pipe';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [
-    CustomerComponent,
-    NewItemDirective,
-    OrdersPipe
-  ],
-  exports: [
-    CustomerComponent,
-    NewItemDirective,
-    OrdersPipe,
-    CommonModule,
-    FormsModule
-  ],
-})
-export class SharedModule { }
-
-</docs-code>
-
-Notice the following:
-
-* It imports the `CommonModule` because the module's component needs common directives
-* It declares and exports the utility pipe, directive, and component classes
-* It re-exports the `CommonModule` and `FormsModule`
-
-By re-exporting `CommonModule` and `FormsModule`, any other module that imports this `SharedModule`, gets access to directives like `NgIf` and `NgFor` from `CommonModule` and can bind to component properties with `[(ngModel)]`, a directive in the `FormsModule`.
-
-Even though the components declared by `SharedModule` might not bind with `[(ngModel)]` and there may be no need for `SharedModule` to import `FormsModule`, `SharedModule` can still export `FormsModule` without listing it among its `imports`.
-This way, you can give other modules access to `FormsModule` without having to make it available for itself.
-
-## More on NgModules
-
-<docs-pill-row>
-  <docs-pill href="/guide/ngmodules/providers" title="Providers"/>
-  <docs-pill href="/guide/ngmodules/module-types" title="Types of Feature Modules"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/ngmodules/singleton-services.md b/adev-es/src/content/guide/ngmodules/singleton-services.md
deleted file mode 100644
index d143490..0000000
--- a/adev-es/src/content/guide/ngmodules/singleton-services.md
+++ /dev/null
@@ -1,185 +0,0 @@
-# Singleton services
-
-A singleton service is a service for which only one instance exists in an application.
-
-## Providing a singleton service
-
-There are two ways to make a service a singleton in Angular:
-
-* Set the `providedIn` property of the `@Injectable()` to `"root"`
-* Include the service in the `AppModule` or in a module that is only imported by the `AppModule`
-
-### Using `providedIn`
-
-The preferred way to create a singleton service is to set `providedIn` to `root` on the service's `@Injectable()` decorator.
-This tells Angular to provide the service in the application root.
-
-<docs-code header="src/app/user.service.ts" highlight="[4]">
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UserService {
-}
-</docs-code>
-
-### NgModule `providers` array
-
-In applications built with Angular versions prior to 6.0, services were commonly registered in the `@NgModule` `providers` field as followed:
-
-<docs-code language="typescript">
-@NgModule({
-  // ...
-  providers: [UserService],
-})
-</docs-code>
-
-If this NgModule were the root `AppModule`, the `UserService` would be a singleton and available throughout the application.
-Though you may see it coded this way, using the `providedIn` property of the `@Injectable()` decorator on the service itself is preferable as of Angular 6.0 as it makes your services tree-shakable.
-
-## The `forRoot()` pattern
-
-Generally, you'll only need `providedIn` for providing services and `forRoot()`/`forChild()` for routing.
-However, understanding how `forRoot()` works to make sure a service is a singleton will inform your development at a deeper level.
-
-If a module defines both providers and declarations (components, directives, pipes), then loading the module in multiple feature modules would duplicate the registration of the service.
-This could result in multiple service instances and the service would no longer behave as a singleton.
-
-There are multiple ways to prevent this:
-
-* Use the [`providedIn` syntax](#using-providedin) instead of registering the service in the module.
-* Separate your services into their own module that is imported once.
-* Define `forRoot()` and `forChild()` methods in the module.
-
-For an introductory explanation see the [Lazy Loading Feature Modules](guide/ngmodules/lazy-loading) guide.
-
-Use `forRoot()` to separate providers from a module so you can import that module into the root module with `providers` and child modules without `providers`.
-
-1. Create a static method `forRoot()` on the module.
-1. Place the providers into the `forRoot()` method.
-
-<docs-code header="src/app/greeting/greeting.module.ts" highlight="[3,6,7]" language="typescript">
-@NgModule({...})
-export class GreetingModule {
-  static forRoot(config: UserServiceConfig): ModuleWithProviders<GreetingModule> {
-    return {
-      ngModule: GreetingModule,
-      providers: [
-        {provide: UserServiceConfig, useValue: config }
-      ]
-    };
-  }
-}
-</docs-code>
-
-### `forRoot()` and the `Router`
-
-`RouterModule` provides the `Router` service, as well as router directives, such as `RouterOutlet` and `routerLink`.
-The root application module imports `RouterModule` so that the application has a `Router` and the root application components can access the router directives.
-Any feature modules must also import `RouterModule` so that their components can place router directives into their templates.
-
-If the `RouterModule` didn't have `forRoot()` then each feature module would instantiate a new `Router` instance, which would break the application as there can only be one `Router`.
-By using the `forRoot()` method, the root application module imports `RouterModule.forRoot(...)` and gets a `Router`, and all feature modules import `RouterModule.forChild(...)` which does not instantiate another `Router`.
-
-HELPFUL: If you have a module which has both providers and declarations, you *can* use this technique to separate them out and you may see this pattern in legacy applications.
-However, since Angular 6.0, the best practice for providing services is with the `@Injectable()` `providedIn` property.
-
-### How `forRoot()` works
-
-`forRoot()` takes a service configuration object and returns a [ModuleWithProviders](api/core/ModuleWithProviders), which is a simple object with the following properties:
-
-| Properties  | Details |
-|:---         |:---     |
-| `ngModule`  | In this example, the `GreetingModule` class |
-| `providers` | The configured providers                    |
-
-Specifically, Angular accumulates all imported providers before appending the items listed in `@NgModule.providers`.
-This sequence ensures that whatever you add explicitly to the `AppModule` providers takes precedence over the providers of imported modules.
-
-The sample application imports `GreetingModule` and uses its `forRoot()` method one time, in `AppModule`.
-Registering it once like this prevents multiple instances.
-
-In the following example, the `UserServiceConfig` is optionally injected in the `UserService`.
-If a config exists, the service sets the user name based on the retrieved config.
-
-<docs-code header="src/app/greeting/user.service.ts (constructor)" language="typescript">
-  constructor(@Optional() config?: UserServiceConfig) {
-    if (config) {
-      this._userName = config.userName;
-    }
-  }
-</docs-code>
-
-Here's `forRoot()` that takes a `UserServiceConfig` object:
-
-<docs-code header="src/app/greeting/greeting.module.ts" highlight="[3,6,7]" language="typescript">
-@NgModule({...})
-export class GreetingModule {
-  static forRoot(config: UserServiceConfig): ModuleWithProviders<GreetingModule> {
-    return {
-      ngModule: GreetingModule,
-      providers: [
-        {provide: UserServiceConfig, useValue: config }
-      ]
-    };
-  }
-}
-</docs-code>
-
-Lastly, call it within the `imports` list of the `AppModule`.
-In the following snippet, other parts of the file are left out.
-
-<docs-code header="src/app/app.module.ts (imports)" language="typescript">
-import { GreetingModule } from './greeting/greeting.module';
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    GreetingModule.forRoot({userName: 'Miss Marple'}),
-  ],
-})
-</docs-code>
-
-The application will then display "Miss Marple" as the user.
-
-Remember to import `GreetingModule` as a JavaScript import, and don't add usages of `forRoot` to more than one `@NgModule` `imports` list.
-
-## Prevent reimport of the `GreetingModule`
-
-Only the root `AppModule` should import the `GreetingModule`.
-If a lazy-loaded module imports it too, the application can generate [multiple instances](guide/ngmodules/faq#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module?) of a service.
-
-To guard against a lazy loaded module re-importing `GreetingModule`, add the following `GreetingModule` constructor.
-
-<docs-code header="src/app/greeting/greeting.module.ts" language="typescript">
-  constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) {
-    if (parentModule) {
-      throw new Error(
-        'GreetingModule is already loaded. Import it in the AppModule only');
-    }
-  }
-</docs-code>
-
-The constructor tells Angular to inject the `GreetingModule` into itself.
-The injection would be circular if Angular looked for `GreetingModule` in the *current* injector, but the `@SkipSelf()` decorator means "look for `GreetingModule` in an ancestor injector, above me in the injector hierarchy".
-
-By default, the injector throws an error when it can't find a requested provider.
-The `@Optional()` decorator means not finding the service is OK.
-The injector returns `null`, the `parentModule` parameter is null, and the constructor concludes uneventfully.
-
-It's a different story if you improperly import `GreetingModule` into a lazy loaded module such as `CustomersModule`.
-
-Angular creates a lazy loaded module with its own injector, a child of the root injector.
-`@SkipSelf()` causes Angular to look for a `GreetingModule` in the parent injector, which this time is the root injector.
-Of course it finds the instance imported by the root `AppModule`.
-Now `parentModule` exists and the constructor throws the error.
-
-## More on NgModules
-
-<docs-pill-row>
-  <docs-pill href="/guide/ngmodules/sharing" title="Sharing Modules"/>
-  <docs-pill href="/guide/ngmodules/lazy-loading" title="Lazy Loading Modules"/>
-  <docs-pill href="/guide/ngmodules/faq" title="NgModule FAQ"/>
-</docs-pill-row>
diff --git a/adev-es/src/content/guide/ngmodules/vs-jsmodule.md b/adev-es/src/content/guide/ngmodules/vs-jsmodule.md
deleted file mode 100644
index 6409fc2..0000000
--- a/adev-es/src/content/guide/ngmodules/vs-jsmodule.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# JavaScript modules vs. NgModules
-
-JavaScript modules and NgModules can help you modularize your code, but they are very different.
-Angular applications rely on both kinds of modules.
-
-## JavaScript modules: Files exposing code
-
-A [JavaScript module](https://javascript.info/modules "JavaScript.Info - Modules") is an individual file with JavaScript code, usually containing a class or a library of functions for a specific purpose within your application.
-JavaScript modules let you spread your work across multiple files.
-
-HELPFUL: To learn more about JavaScript modules, see [ES6 In Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules).
-For the module specification, see the [6th Edition of the ECMAScript standard](https://www.ecma-international.org/ecma-262/6.0/#sec-modules).
-
-To make the code in a JavaScript module available to other modules, use an `export` statement at the end of the relevant code in the module, such as the following:
-
-<docs-code language="typescript">
-export class AppComponent { … }
-</docs-code>
-
-When you need that module's code in another module, use an `import` statement as follows:
-
-<docs-code language="typescript">
-import { AppComponent } from './app.component';
-</docs-code>
-
-Each module has its own top-level scope.
-In other words, top-level variables and functions in a module are not seen in other scripts or modules.
-
-## NgModules: Classes with metadata for compiling
-
-An NgModule is a class marked by the `@NgModule` decorator with a metadata object that describes how that particular part of the application fits together with the other parts.
-NgModules are specific to Angular.
-While classes with an `@NgModule` decorator are by convention kept in their own files, they differ from JavaScript modules because they include this metadata.
-
-The `@NgModule` metadata plays an important role in guiding the Angular compilation process that converts the application code you write into highly performant JavaScript code.
-The metadata describes how to compile a component's template and how to create an injector at runtime.
-It identifies the NgModule's components, directives, and pipes"),
-and makes some of them public through the `exports` property so that external components can use them.
-You can also use an NgModule to add providers for services, so that the services are available elsewhere in your application.
-
-Rather than defining all member classes in one giant file as a JavaScript module, declare which components, directives, and pipes belong to the NgModule in the `@NgModule.declarations` list.
-These classes are called declarables.
-An NgModule can export only the declarable classes it owns or imports from other NgModules.
-It doesn't declare or export any other kind of class.
-Declarables are the only classes that matter to the Angular compilation process.
-
-For a complete description of the NgModule metadata properties, see [Using the NgModule metadata](guide/ngmodules/api "Using the NgModule metadata").
-
-## An example that uses both
-
-The root NgModule `AppModule` generated by the [Angular CLI](/tools/cli) for a new application project demonstrates how you use both kinds of modules:
-
-<docs-code header="src/app/app.module.ts">
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-</docs-code>
-
-The root NgModule starts with `import` statements to import JavaScript modules.
-It then configures the `@NgModule` with the following arrays:
-
-* `declarations`: The components, directives, and pipes that belong to the NgModule.
-  A new application project's root NgModule has only one component, called `AppComponent`.
-
-* `imports`: Other NgModules you are using, so that you can use their declarables.
-  The newly generated root NgModule imports [`BrowserModule`](api/platform-browser/BrowserModule "BrowserModule NgModule") in order to use browser-specific services such as [DOM](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html "Definition of Document Object Model") rendering, sanitization, and location.
-
-* `providers`: Providers of services that components in other NgModules can use.
-  There are no providers in a newly generated root NgModule.
-
-* `bootstrap`: The component that Angular creates and inserts into the `index.html` host web page, thereby bootstrapping the application.
-  This component, `AppComponent`, appears in both the `declarations` and the `bootstrap` arrays.
-
-## Next steps
-
-* To learn more about the root NgModule, see [Launching an app with a root NgModule](guide/ngmodules/bootstrapping "Launching an app with a root NgModule").
-* To learn about frequently used Angular NgModules and how to import them into your app, see [Frequently-used modules](guide/ngmodules/frequent "Frequently-used modules").
diff --git a/adev-es/src/content/guide/performance/overview.md b/adev-es/src/content/guide/performance/overview.md
index 9601e01..1a07df8 100644
--- a/adev-es/src/content/guide/performance/overview.md
+++ b/adev-es/src/content/guide/performance/overview.md
@@ -4,8 +4,8 @@ Learn about different ways you can optimize the performance of your application
 
 One of the top priorities of any developer is ensuring that their application is as performant as possible. These guides are here to help you follow best practices for building performant applications by taking advantage of different rendering strategies.
 
-| Guides Types                              | Description                                                                                                |
-| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
-| [Server and hybrid rendering](/guide/ssr) | Learn how to leverage rendering pages on the server to improve load times.                                 |
-| [Hydration](/guide/hydration)             | A process to improve application performance by restoring its state after server-side rendering and reusing existing DOM structure as much as possible. |
+| Guides Types                                          | Description                                                                                                                                                                             |
+| :---------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Server and hybrid rendering](/guide/ssr)             | Learn how to leverage rendering pages on the server to improve load times.                                                                                                              |
+| [Hydration](/guide/hydration)                         | A process to improve application performance by restoring its state after server-side rendering and reusing existing DOM structure as much as possible.                                 |
 | [Incremental Hydration](/guide/incremental-hydration) | Incremental hydration is an advanced type of hydration that can leave sections of your application dehydrated and incrementally trigger hydration of those sections as they are needed. |
diff --git a/adev-es/src/content/guide/routing/common-router-tasks.en.md b/adev-es/src/content/guide/routing/common-router-tasks.en.md
index 1ae7d94..9d4ce05 100644
--- a/adev-es/src/content/guide/routing/common-router-tasks.en.md
+++ b/adev-es/src/content/guide/routing/common-router-tasks.en.md
@@ -11,7 +11,7 @@ To edit an item, users click an Edit button, which opens an `EditGroceryItem` co
 You want that component to retrieve the `id` for the grocery item so it can display the right information to the user.
 
 Use a route to pass this type of information to your application components.
-To do so, you use the [`withComponentInputBinding`](api/router/withComponentInputBinding) feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
+To do so, you use the `withComponentInputBinding` feature with `provideRouter` or the `bindToComponentInputs` option of `RouterModule.forRoot`.
 
 To get information from a route:
 
@@ -35,7 +35,7 @@ Update the component to have an `input()` property matching the name of the para
 
 ```ts
 id = input.required<string>()
-hero = computed(() => this.service.getHero(id));
+hero = computed(() => this.service.getHero(id()));
 ```
 
 </docs-step>
@@ -60,7 +60,7 @@ internalId = linkedSignal(() => this.id() ?? getDefaultId());
 
 NOTE: You can bind all route data with key, value pairs to component inputs: static or resolved route data, path parameters, matrix parameters, and query parameters.
 If you want to use the parent components route info you will need to set the router `paramsInheritanceStrategy` option:
-`withRouterConfig({paramsInheritanceStrategy: 'always'})`
+`withRouterConfig({paramsInheritanceStrategy: 'always'})` . See [router configuration options](guide/routing/customizing-route-behavior#router-configuration-options) for details on other available settings.
 
 ## Displaying a 404 page
 
@@ -104,6 +104,8 @@ Provide optional route parameters in an object, as in `{ foo: 'foo' }`:
 <a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
 ```
 
+This syntax passes matrix parameters, which are optional parameters associated with a specific URL segment. Learn more about [matrix parameters](/guide/routing/read-route-state#matrix-parameters).
+
 These three examples cover the needs of an application with one level of routing.
 However, with a child router, such as in the crisis center, you create new link array possibilities.
 
diff --git a/adev-es/src/content/guide/routing/common-router-tasks.md b/adev-es/src/content/guide/routing/common-router-tasks.md
index 56cf155..0e089c0 100644
--- a/adev-es/src/content/guide/routing/common-router-tasks.md
+++ b/adev-es/src/content/guide/routing/common-router-tasks.md
@@ -11,7 +11,7 @@ Para editar un elemento, los usuarios hacen clic en un botón Editar, que abre u
 Quieres que ese componente recupere el `id` del artículo de comestible para que pueda mostrar la información correcta al usuario.
 
 Usa una ruta para pasar este tipo de información a los componentes de tu aplicación.
-Para hacerlo, usas la funcionalidad [`withComponentInputBinding`](api/router/withComponentInputBinding) con `provideRouter` o la opción `bindToComponentInputs` de `RouterModule.forRoot`.
+Para hacerlo, usas la funcionalidad `withComponentInputBinding` con `provideRouter` o la opción `bindToComponentInputs` de `RouterModule.forRoot`.
 
 Para obtener información de una ruta:
 
@@ -35,7 +35,7 @@ Actualiza el componente para que tenga una propiedad `input()` que coincida con
 
 ```ts
 id = input.required<string>()
-hero = computed(() => this.service.getHero(id));
+hero = computed(() => this.service.getHero(id()));
 ```
 
 </docs-step>
@@ -60,11 +60,11 @@ internalId = linkedSignal(() => this.id() ?? getDefaultId());
 
 NOTA: Puedes vincular todos los datos de ruta con pares clave-valor a las entradas del componente: datos de ruta estáticos o resueltos, parámetros de ruta, parámetros de matriz y parámetros de consulta.
 Si deseas usar la información de ruta del componente padre, necesitarás configurar la opción `paramsInheritanceStrategy` del router:
-`withRouterConfig({paramsInheritanceStrategy: 'always'})`
+`withRouterConfig({paramsInheritanceStrategy: 'always'})`. Consulta [opciones de configuración del router](guide/routing/customizing-route-behavior#opciones-de-configuración-del-router) para obtener detalles sobre otras configuraciones disponibles.
 
 ## Mostrar una página 404
 
-Para mostrar una página 404, configura una [ruta comodín](guide/routing/common-router-tasks#setting-up-wildcard-routes) con la propiedad `component` establecida en el componente que deseas usar para tu página 404 de la siguiente manera:
+Para mostrar una página 404, configura una [ruta comodín](guide/routing/common-router-tasks#mostrar-una-página-404) con la propiedad `component` establecida en el componente que deseas usar para tu página 404 de la siguiente manera:
 
 ```ts
 const routes: Routes = [
@@ -104,6 +104,8 @@ Proporciona parámetros de ruta opcionales en un objeto, como en `{ foo: 'foo' }
 <a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
 ```
 
+Esta sintaxis pasa parámetros de matriz, que son parámetros opcionales asociados con un segmento de URL específico. Aprende más sobre [parámetros de matriz](/guide/routing/read-route-state#parámetros-de-matriz).
+
 Estos tres ejemplos cubren las necesidades de una aplicación con un nivel de enrutamiento.
 Sin embargo, con un router hijo, como en el centro de crisis, creas nuevas posibilidades de array de enlaces.
 
diff --git a/adev-es/src/content/guide/routing/customizing-route-behavior.en.md b/adev-es/src/content/guide/routing/customizing-route-behavior.en.md
index 6ae475f..a489a8e 100644
--- a/adev-es/src/content/guide/routing/customizing-route-behavior.en.md
+++ b/adev-es/src/content/guide/routing/customizing-route-behavior.en.md
@@ -12,6 +12,113 @@ Route customization can become valuable when your application needs:
 
 NOTE: Before implementing custom strategies, ensure the default router behavior doesn't meet your needs. Angular's default routing is optimized for common use cases and provides the best balance of performance and simplicity. Customizing route strategies can create additional code complexity and have performance implications on memory usage if not carefully managed.
 
+## Router configuration options
+
+The `withRouterConfig` or `RouterModule.forRoot` allows providing additional `RouterConfigOptions` to adjust the Router’s behavior.
+
+### Handle canceled navigations
+
+`canceledNavigationResolution` controls how the Router restores browser history when a navigation is canceled. The default value is `'replace'`, which reverts to the pre-navigation URL with `location.replaceState`. In practice, this means that any time the address bar has already been updated for the navigation, such as with the browser back or forward buttons, the history entry is overwritten with the "rollback" if the navigation fails or is rejected by a guard.
+Switching to `'computed'` keeps the in-flight history index in sync with the Angular navigation, so canceling a back button navigation triggers a forward navigation (and vice versa) to return to the original page.
+
+This setting is most helpful when your app uses `urlUpdateStrategy: 'eager'` or when guards frequently cancel popstate navigations initiated by the browser.
+
+```ts
+provideRouter(routes, withRouterConfig({ canceledNavigationResolution: 'computed' }));
+```
+
+### React to same-URL navigations
+
+`onSameUrlNavigation` configures what should happen when the user asks to navigate to the current URL. The default `'ignore'` skips work, while `'reload'` re-runs guards and resolvers and refreshes component instances.
+
+This is useful when you want repeated clicks on a list filter, left-nav item, or refresh button to trigger new data retrieval even though the URL does not change.
+
+```ts
+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:
+
+```ts
+router.navigate(['/some-path'], { onSameUrlNavigation: 'reload' });
+```
+
+### Control parameter inheritance
+
+`paramsInheritanceStrategy` defines how route parameters and data flow from parent routes.
+
+With the default `'emptyOnly'`, child routes inherit params only when their path is empty or the parent does not declare a component.
+
+```ts
+provideRouter(routes, withRouterConfig({ paramsInheritanceStrategy: 'always' }));
+```
+
+```ts
+export const routes: Routes = [
+  {
+    path: 'org/:orgId',
+    component: Organization,
+    children: [
+      {
+        path: 'projects/:projectId',
+        component: Project,
+        children: [
+          {
+            path: 'customers/:customerId',
+            component: Customer
+          }
+        ]
+      }
+    ]
+  }
+];
+```
+
+```ts
+@Component({ /* ... */})
+export class CustomerComponent {
+  private route = inject(ActivatedRoute);
+
+  orgId = this.route.parent?.parent?.snapshot.params['orgId'];
+  projectId = this.route.parent?.snapshot.params['projectId'];
+  customerId = this.route.snapshot.params['customerId'];
+}
+```
+
+Using `'always'` ensures matrix parameters, route data, and resolved values are available further down the route tree—handy when you share contextual identifiers across feature areas such as `/org/:orgId/projects/:projectId/customers/:customerId`.
+
+```ts
+@Component({ /* ... */})
+export class CustomerComponent {
+  private route = inject(ActivatedRoute);
+
+  // All parent parameters are available directly
+  orgId = this.route.snapshot.params['orgId'];
+  projectId = this.route.snapshot.params['projectId'];
+  customerId = this.route.snapshot.params['customerId'];
+}
+```
+
+### Decide when the URL updates
+
+`urlUpdateStrategy` determines when Angular writes to the browser address bar. The default `'deferred'` waits for a successful navigation before changing the URL. Use `'eager'` to update immediately when navigation starts. Eager updates make it easier to surface the attempted URL if navigation fails due to guards or errors, but can briefly show an in-progress URL if you have long-running guards.
+
+Consider this when your analytics pipeline needs to see the attempted route even if guards block it.
+
+```ts
+provideRouter(routes, withRouterConfig({ urlUpdateStrategy: 'eager' }));
+```
+
+### Choose default query parameter handling
+
+`defaultQueryParamsHandling` sets the fallback behavior for `Router.createUrlTree` when the call does not specify `queryParamsHandling`. `'replace'` is the default and swaps out the existing query string. `'merge'` combines the provided values with the current ones, and `'preserve'` keeps the existing query parameters unless you explicitly supply new ones.
+
+```ts
+provideRouter(routes, withRouterConfig({ defaultQueryParamsHandling: 'merge' }));
+```
+
+This is especially helpful for search and filter pages to automatically retain existing filters when additional parameters are provided.
+
 Angular Router exposes four main areas for customization:
 
   <docs-pill-row>
@@ -53,12 +160,12 @@ The `RouteReuseStrategy` class provides five methods that control the lifecycle
 The following example demonstrates a custom route reuse strategy that selectively preserves component state based on route metadata:
 
 ```ts
-import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+import { RouteReuseStrategy, Route, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class CustomRouteReuseStrategy implements RouteReuseStrategy {
-  private handlers = new Map<string, DetachedRouteHandle>();
+  private handlers = new Map<Route | null, DetachedRouteHandle>();
 
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
     // Determines if a route should be stored for later reuse
@@ -90,12 +197,14 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
     return future.routeConfig === curr.routeConfig;
   }
 
-  private getRouteKey(route: ActivatedRouteSnapshot): string {
-    return route.routeConfig ?? '';
+  private getRouteKey(route: ActivatedRouteSnapshot): Route | null {
+    return route.routeConfig;
   }
 }
 ```
 
+NOTE: Avoid using the route path as the key when `canMatch` guards are involved, as it may lead to duplicate entries.
+
 ### Configuring a route to use a custom route reuse strategy
 
 Routes can opt into reuse behavior through route configuration metadata. This approach keeps the reuse logic separate from component code, making it easy to adjust behavior without modifying components:
@@ -339,7 +448,7 @@ export const routes: Routes = [
 
 The component receives the extracted parameters through route inputs:
 
-```ts
+```angular-ts
 import { Component, input, inject } from '@angular/core';
 import { resource } from '@angular/core';
 
diff --git a/adev-es/src/content/guide/routing/customizing-route-behavior.md b/adev-es/src/content/guide/routing/customizing-route-behavior.md
index e4b9ca3..cea39a0 100644
--- a/adev-es/src/content/guide/routing/customizing-route-behavior.md
+++ b/adev-es/src/content/guide/routing/customizing-route-behavior.md
@@ -12,14 +12,121 @@ La personalización de rutas puede volverse valiosa cuando tu aplicación necesi
 
 NOTA: Antes de implementar estrategias personalizadas, asegúrate de que el comportamiento predeterminado del router no satisfaga tus necesidades. El enrutamiento predeterminado en Angular está optimizado para casos de uso comunes y proporciona el mejor balance de rendimiento y simplicidad. Personalizar estrategias de ruta puede crear complejidad adicional en el código y tener implicaciones de rendimiento en el uso de memoria si no se gestiona cuidadosamente.
 
+## Opciones de configuración del router
+
+`withRouterConfig` o `RouterModule.forRoot` permite proporcionar opciones adicionales de `RouterConfigOptions` para ajustar el comportamiento del Router.
+
+### Manejar navegaciones canceladas
+
+`canceledNavigationResolution` controla cómo el Router restaura el historial del navegador cuando se cancela una navegación. El valor predeterminado es `'replace'`, que revierte a la URL previa a la navegación con `location.replaceState`. En la práctica, esto significa que cada vez que la barra de direcciones ya se ha actualizado para la navegación, como con los botones de retroceso o avance del navegador, la entrada del historial se sobrescribe con el "rollback" si la navegación falla o es rechazada por un guard.
+Cambiar a `'computed'` mantiene el índice del historial en vuelo sincronizado con la navegación de Angular, por lo que cancelar una navegación del botón de retroceso dispara una navegación hacia adelante (y viceversa) para volver a la página original.
+
+Esta configuración es más útil cuando tu aplicación usa `urlUpdateStrategy: 'eager'` o cuando los guards cancelan frecuentemente navegaciones popstate iniciadas por el navegador.
+
+```ts
+provideRouter(routes, withRouterConfig({ canceledNavigationResolution: 'computed' }));
+```
+
+### Reaccionar a navegaciones de la misma URL
+
+`onSameUrlNavigation` configura qué debe suceder cuando el usuario solicita navegar a la URL actual. El valor predeterminado `'ignore'` omite el trabajo, mientras que `'reload'` vuelve a ejecutar guards y resolvers y actualiza las instancias de componentes.
+
+Esto es útil cuando quieres que los clics repetidos en un filtro de lista, elemento de navegación izquierda o botón de actualización disparen una nueva recuperación de datos aunque la URL no cambie.
+
+```ts
+provideRouter(routes, withRouterConfig({ onSameUrlNavigation: 'reload' }));
+```
+
+También puedes controlar este comportamiento en navegaciones individuales en lugar de globalmente. Esto te permite mantener el valor predeterminado de `'ignore'` mientras habilitas selectivamente el comportamiento de recarga para casos de uso específicos:
+
+```ts
+router.navigate(['/some-path'], { onSameUrlNavigation: 'reload' });
+```
+
+### Controlar la herencia de parámetros
+
+`paramsInheritanceStrategy` define cómo fluyen los parámetros y datos de ruta desde las rutas padre.
+
+Con el valor predeterminado `'emptyOnly'`, las rutas hijas heredan parámetros solo cuando su ruta está vacía o el padre no declara un componente.
+
+```ts
+provideRouter(routes, withRouterConfig({ paramsInheritanceStrategy: 'always' }));
+```
+
+```ts
+export const routes: Routes = [
+  {
+    path: 'org/:orgId',
+    component: Organization,
+    children: [
+      {
+        path: 'projects/:projectId',
+        component: Project,
+        children: [
+          {
+            path: 'customers/:customerId',
+            component: Customer
+          }
+        ]
+      }
+    ]
+  }
+];
+```
+
+```ts
+@Component({ /* ... */})
+export class CustomerComponent {
+  private route = inject(ActivatedRoute);
+
+  orgId = this.route.parent?.parent?.snapshot.params['orgId'];
+  projectId = this.route.parent?.snapshot.params['projectId'];
+  customerId = this.route.snapshot.params['customerId'];
+}
+```
+
+Usar `'always'` asegura que los parámetros de matriz, datos de ruta y valores resueltos estén disponibles más abajo en el árbol de rutas—útil cuando compartes identificadores contextuales entre áreas de características como `/org/:orgId/projects/:projectId/customers/:customerId`.
+
+```ts
+@Component({ /* ... */})
+export class CustomerComponent {
+  private route = inject(ActivatedRoute);
+
+  // Todos los parámetros padre están disponibles directamente
+  orgId = this.route.snapshot.params['orgId'];
+  projectId = this.route.snapshot.params['projectId'];
+  customerId = this.route.snapshot.params['customerId'];
+}
+```
+
+### Decidir cuándo se actualiza la URL
+
+`urlUpdateStrategy` determina cuándo Angular escribe en la barra de direcciones del navegador. El valor predeterminado `'deferred'` espera una navegación exitosa antes de cambiar la URL. Usa `'eager'` para actualizar inmediatamente cuando comienza la navegación. Las actualizaciones eager facilitan mostrar la URL intentada si la navegación falla debido a guards o errores, pero pueden mostrar brevemente una URL en progreso si tienes guards de larga duración.
+
+Considera esto cuando tu pipeline de análisis necesita ver la ruta intentada incluso si los guards la bloquean.
+
+```ts
+provideRouter(routes, withRouterConfig({ urlUpdateStrategy: 'eager' }));
+```
+
+### Elegir el manejo predeterminado de parámetros de consulta
+
+`defaultQueryParamsHandling` establece el comportamiento de respaldo para `Router.createUrlTree` cuando la llamada no especifica `queryParamsHandling`. `'replace'` es el valor predeterminado y reemplaza la cadena de consulta existente. `'merge'` combina los valores proporcionados con los actuales, y `'preserve'` mantiene los parámetros de consulta existentes a menos que proporciones explícitamente nuevos.
+
+```ts
+provideRouter(routes, withRouterConfig({ defaultQueryParamsHandling: 'merge' }));
+```
+
+Esto es especialmente útil para páginas de búsqueda y filtros para retener automáticamente los filtros existentes cuando se proporcionan parámetros adicionales.
+
 Angular Router expone cuatro áreas principales para personalización:
 
-  <docs-pill-row>
-    <docs-pill href="#route-reuse-strategy" title="Estrategia de reutilización de rutas"/>
-    <docs-pill href="#preloading-strategy" title="Estrategia de precarga"/>
-    <docs-pill href="#url-handling-strategy" title="Estrategia de manejo de URL"/>
-    <docs-pill href="#custom-route-matchers" title="Matchers de ruta personalizados"/>
-  </docs-pill-row>
+<docs-pill-row>
+  <docs-pill href="#estrategia-de-reutilización-de-rutas" title="Estrategia de reutilización de rutas"/>
+  <docs-pill href="#estrategia-de-precarga" title="Estrategia de precarga"/>
+  <docs-pill href="#estrategia-de-manejo-de-url" title="Estrategia de manejo de URL"/>
+  <docs-pill href="#matchers-de-ruta-personalizados" title="Matchers de ruta personalizados"/>
+</docs-pill-row>
 
 ## Estrategia de reutilización de rutas
 
@@ -53,12 +160,12 @@ La clase `RouteReuseStrategy` proporciona cinco métodos que controlan el ciclo
 El siguiente ejemplo demuestra una estrategia personalizada de reutilización de rutas que preserva selectivamente el estado del componente basado en metadatos de ruta:
 
 ```ts
-import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+import { RouteReuseStrategy, Route, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class CustomRouteReuseStrategy implements RouteReuseStrategy {
-  private handlers = new Map<string, DetachedRouteHandle>();
+  private handlers = new Map<Route | null, DetachedRouteHandle>();
 
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
     // Determina si una ruta debe almacenarse para reutilización posterior
@@ -90,12 +197,14 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
     return future.routeConfig === curr.routeConfig;
   }
 
-  private getRouteKey(route: ActivatedRouteSnapshot): string {
-    return route.routeConfig ?? '';
+  private getRouteKey(route: ActivatedRouteSnapshot): Route | null {
+    return route.routeConfig;
   }
 }
 ```
 
+NOTA: Evita usar la ruta path como clave cuando hay guards `canMatch` involucrados, ya que puede llevar a entradas duplicadas.
+
 ### Configurando una ruta para usar una estrategia personalizada de reutilización
 
 Las rutas pueden optar por el comportamiento de reutilización a través de metadatos de configuración de ruta. Este enfoque mantiene la lógica de reutilización separada del código del componente, facilitando el ajuste del comportamiento sin modificar componentes:
@@ -339,7 +448,7 @@ export const routes: Routes = [
 
 El componente recibe los parámetros extraídos a través de inputs de ruta:
 
-```ts
+```angular-ts
 import { Component, input, inject } from '@angular/core';
 import { resource } from '@angular/core';
 
diff --git a/adev-es/src/content/guide/routing/data-resolvers.en.md b/adev-es/src/content/guide/routing/data-resolvers.en.md
index 4407598..da83b8b 100644
--- a/adev-es/src/content/guide/routing/data-resolvers.en.md
+++ b/adev-es/src/content/guide/routing/data-resolvers.en.md
@@ -4,7 +4,7 @@ Data resolvers allow you to fetch data before navigating to a route, ensuring th
 
 ## What are data resolvers?
 
-A data resolver is a service that implements the [`ResolveFn`](api/router/ResolveFn) function. It runs before a route activates and can fetch data from APIs, databases, or other sources. The resolved data becomes available to the component through the [`ActivatedRoute`](api/router/ActivatedRoute).
+A data resolver is a service that implements the `ResolveFn` function. It runs before a route activates and can fetch data from APIs, databases, or other sources. The resolved data becomes available to the component through the `ActivatedRoute`.
 
 ## Why use data resolvers?
 
@@ -17,9 +17,9 @@ Data resolvers solve common routing challenges:
 
 ## Creating a resolver
 
-You create a resolver by writing a function with the [`ResolveFn`](api/router/ResolveFn) type.
+You create a resolver by writing a function with the `ResolveFn` type.
 
-It receives the [`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot) and [`RouterStateSnapshot`](api/router/RouterStateSnapshot) as parameters.
+It receives the `ActivatedRouteSnapshot` and `RouterStateSnapshot` as parameters.
 
 Here is a resolver that gets the user information before rendering a route using the [`inject`](api/core/inject) function:
 
@@ -44,7 +44,7 @@ export const settingsResolver: ResolveFn<Settings> = (route: ActivatedRouteSnaps
 
 ## Configuring routes with resolvers
 
-When you want to add one or more data resolvers to a route, you can add it under the `resolve` key in the route configuration. The [`Routes`](api/router/Routes) type defines the structure for route configurations:
+When you want to add one or more data resolvers to a route, you can add it under the `resolve` key in the route configuration. The `Routes` type defines the structure for route configurations:
 
 ```ts
 import { Routes } from '@angular/router';
@@ -67,7 +67,7 @@ You can learn more about the [`resolve` configuration in the API docs](api/route
 
 ### Using ActivatedRoute
 
-You can access the resolved data in a component by accessing the snapshot data from the [`ActivatedRoute`](api/router/ActivatedRoute) using the [`signal`](api/core/signal) function:
+You can access the resolved data in a component by accessing the snapshot data from the `ActivatedRoute` using the `signal` function:
 
 ```angular-ts
 import { Component, inject, computed } from '@angular/core';
@@ -92,7 +92,7 @@ export class UserDetail {
 
 ### Using withComponentInputBinding
 
-A different approach to accessing the resolved data is to use [`withComponentInputBinding()`](api/router/withComponentInputBinding) when configuring your router with [`provideRouter`](api/router/provideRouter). This allows resolved data to be passed directly as component inputs:
+A different approach to accessing the resolved data is to use `withComponentInputBinding()` when configuring your router with `provideRouter`. This allows resolved data to be passed directly as component inputs:
 
 ```ts
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -106,7 +106,7 @@ bootstrapApplication(App, {
 });
 ```
 
-With this configuration, you can define inputs in your component that match the resolver keys using the [`input`](api/core/input) function and [`input.required`](api/core/input#required) for required inputs:
+With this configuration, you can define inputs in your component that match the resolver keys using the `input` function and `input.required` for required inputs:
 
 ```angular-ts
 import { Component, input } from '@angular/core';
@@ -133,9 +133,9 @@ In the event of navigation failures, it is important to handle errors gracefully
 
 There are three primary ways to handle errors with data resolvers:
 
-1. [Centralizing error handling in `withNavigationErrorHandler`](#centralize-error-handling-in-withnavigationerrorhandler)
-2. [Managing errors through a subscription to router events](#managing-errors-through-a-subscription-to-router-events)
-3. [Handling errors directly in the resolver](#handling-errors-directly-in-the-resolver)
+1. Centralize error handling in `withNavigationErrorHandler`
+2. Manage errors through a subscription to router events
+3. Handle errors directly in the resolver
 
 ### Centralize error handling in `withNavigationErrorHandler`
 
@@ -176,13 +176,13 @@ export const userResolver: ResolveFn<User> = (route) => {
 
 ### Managing errors through a subscription to router events
 
-You can also handle resolver errors by subscribing to router events and listening for [`NavigationError`](api/router/NavigationError) events. This approach gives you more granular control over error handling and allows you to implement custom error recovery logic.
+You can also handle resolver errors by subscribing to router events and listening for `NavigationError` events. This approach gives you more granular control over error handling and allows you to implement custom error recovery logic.
 
 ```angular-ts
 import { Component, inject, signal } from '@angular/core';
 import { Router, NavigationError } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, map } from 'rxjs';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -202,15 +202,17 @@ export class App {
 
   private navigationErrors = toSignal(
     this.router.events.pipe(
-      filter((event): event is NavigationError => event instanceof NavigationError),
       map(event => {
-        this.lastFailedUrl.set(event.url);
-
-        if (event.error) {
-          console.error('Navigation error', event.error)
+        if (event instanceof NavigationError) {
+          this.lastFailedUrl.set(event.url);
+  
+          if (event.error) {
+            console.error('Navigation error', event.error)
+          }
+  
+          return 'Navigation failed. Please try again.';
         }
-
-        return 'Navigation failed. Please try again.';
+        return '';
       })
     ),
     { initialValue: '' }
@@ -234,7 +236,7 @@ This approach is particularly useful when you need to:
 
 ### Handling errors directly in the resolver
 
-Here's an updated example of the `userResolver` that logs the error and navigates back to the generic `/users` page using the [`Router`](api/router/Router) service:
+Here's an updated example of the `userResolver` that logs the error and navigates back to the generic `/users` page using the `Router` service:
 
 ```ts
 import { inject } from '@angular/core';
@@ -296,3 +298,38 @@ This approach ensures users receive visual feedback that navigation is in progre
 - **Consider navigation UX**: Implement loading indicators for resolver execution since navigation is blocked during data fetching
 - **Set reasonable timeouts**: Avoid resolvers that could hang indefinitely and block navigation
 - **Type safety**: Use TypeScript interfaces for resolved data
+
+## Reading parent resolved data in child resolvers
+
+Resolvers execute from parent to child. When a parent route defines a resolver, its resolved data is available to child resolvers that run afterward.
+
+```ts
+import { inject } from '@angular/core';
+import { provideRouter , ActivatedRouteSnapshot } from '@angular/router';
+import { userResolver } from './resolvers';
+import { UserPosts } from './pages';
+import { PostService } from './services',
+import type { User } from './types';
+
+provideRouter([
+  {
+    path: 'users/:id',
+    resolve: { user: userResolver }, // user resolver in the parent route
+    children: [
+      {
+        path: 'posts',
+        component: UserPosts,
+        // route.data.user is available here while this resolver runs
+        resolve: {
+          posts: (route: ActivatedRouteSnapshot) => {
+            const postService = inject(PostService);
+            const user = route.data['user'] as User; // parent data
+            const userId = user.id;
+            return postService.getPostByUser(userId);
+          },
+        },
+      },
+    ],
+  },
+]);
+```
diff --git a/adev-es/src/content/guide/routing/data-resolvers.md b/adev-es/src/content/guide/routing/data-resolvers.md
index 7f3c48a..71aa5a3 100644
--- a/adev-es/src/content/guide/routing/data-resolvers.md
+++ b/adev-es/src/content/guide/routing/data-resolvers.md
@@ -4,7 +4,7 @@ Los data resolvers te permiten obtener datos antes de navegar a una ruta, asegur
 
 ## ¿Qué son los data resolvers?
 
-Un data resolver es un servicio que implementa la función [`ResolveFn`](api/router/ResolveFn). Se ejecuta antes de que una ruta se active y puede obtener datos de APIs, bases de datos u otras fuentes. Los datos resueltos se vuelven disponibles para el componente a través del [`ActivatedRoute`](api/router/ActivatedRoute).
+Un data resolver es un servicio que implementa la función `ResolveFn`. Se ejecuta antes de que una ruta se active y puede obtener datos de APIs, bases de datos u otras fuentes. Los datos resueltos se vuelven disponibles para el componente a través del `ActivatedRoute`.
 
 ## ¿Por qué usar data resolvers?
 
@@ -17,9 +17,9 @@ Los data resolvers resuelven desafíos comunes de enrutamiento:
 
 ## Creando un resolver
 
-Creas un resolver escribiendo una función con el tipo [`ResolveFn`](api/router/ResolveFn).
+Creas un resolver escribiendo una función con el tipo `ResolveFn`.
 
-Recibe el [`ActivatedRouteSnapshot`](api/router/ActivatedRouteSnapshot) y el [`RouterStateSnapshot`](api/router/RouterStateSnapshot) como parámetros.
+Recibe el `ActivatedRouteSnapshot` y el `RouterStateSnapshot` como parámetros.
 
 Aquí hay un resolver que obtiene la información del usuario antes de renderizar una ruta usando la función [`inject`](api/core/inject):
 
@@ -44,7 +44,7 @@ export const settingsResolver: ResolveFn<Settings> = (route: ActivatedRouteSnaps
 
 ## Configurando rutas con resolvers
 
-Cuando quieres agregar uno o más data resolvers a una ruta, puedes agregarlo bajo la clave `resolve` en la configuración de ruta. El tipo [`Routes`](api/router/Routes) define la estructura para las configuraciones de ruta:
+Cuando quieres agregar uno o más data resolvers a una ruta, puedes agregarlo bajo la clave `resolve` en la configuración de ruta. El tipo `Routes` define la estructura para las configuraciones de ruta:
 
 ```ts
 import { Routes } from '@angular/router';
@@ -67,7 +67,7 @@ Puedes aprender más sobre la [configuración de `resolve` en los docs de la API
 
 ### Usando ActivatedRoute
 
-Puedes acceder a los datos resueltos en un componente accediendo a los datos del snapshot desde el [`ActivatedRoute`](api/router/ActivatedRoute) usando la función [`signal`](api/core/signal):
+Puedes acceder a los datos resueltos en un componente accediendo a los datos del snapshot desde el `ActivatedRoute` usando la función `toSignal`:
 
 ```angular-ts
 import { Component, inject, computed } from '@angular/core';
@@ -92,7 +92,7 @@ export class UserDetail {
 
 ### Usando withComponentInputBinding
 
-Un enfoque diferente para acceder a los datos resueltos es usar [`withComponentInputBinding()`](api/router/withComponentInputBinding) al configurar tu router con [`provideRouter`](api/router/provideRouter). Esto permite que los datos resueltos se pasen directamente como inputs de componente:
+Un enfoque diferente para acceder a los datos resueltos es usar `withComponentInputBinding()` al configurar tu router con `provideRouter`. Esto permite que los datos resueltos se pasen directamente como inputs de componente:
 
 ```ts
 import { bootstrapApplication } from '@angular/platform-browser';
@@ -106,7 +106,7 @@ bootstrapApplication(App, {
 });
 ```
 
-Con esta configuración, puedes definir inputs en tu componente que coincidan con las claves del resolver usando la función [`input`](api/core/input) e [`input.required`](api/core/input#required) para inputs requeridos:
+Con esta configuración, puedes definir inputs en tu componente que coincidan con las claves del resolver usando la función `input` y `input.required` para inputs requeridos:
 
 ```angular-ts
 import { Component, input } from '@angular/core';
@@ -133,9 +133,9 @@ En caso de fallos de navegación, es importante manejar errores de forma elegant
 
 Hay tres formas principales de manejar errores con data resolvers:
 
-1. [Centralizar el manejo de errores en `withNavigationErrorHandler`](#centralize-error-handling-in-withnavigationerrorhandler)
-2. [Gestionar errores a través de una suscripción a eventos del router](#managing-errors-through-a-subscription-to-router-events)
-3. [Manejar errores directamente en el resolver](#handling-errors-directly-in-the-resolver)
+1. Centralizar el manejo de errores en `withNavigationErrorHandler`
+2. Gestionar errores a través de una suscripción a eventos del router
+3. Manejar errores directamente en el resolver
 
 ### Centralizar el manejo de errores en `withNavigationErrorHandler`
 
@@ -176,13 +176,13 @@ export const userResolver: ResolveFn<User> = (route) => {
 
 ### Gestionar errores a través de una suscripción a eventos del router
 
-También puedes manejar errores de resolver suscribiéndote a eventos del router y escuchando eventos [`NavigationError`](api/router/NavigationError). Este enfoque te da un control más granular sobre el manejo de errores y te permite implementar lógica personalizada de recuperación de errores.
+También puedes manejar errores de resolver suscribiéndote a eventos del router y escuchando eventos `NavigationError`. Este enfoque te da un control más granular sobre el manejo de errores y te permite implementar lógica personalizada de recuperación de errores.
 
 ```angular-ts
 import { Component, inject, signal } from '@angular/core';
 import { Router, NavigationError } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { filter, map } from 'rxjs';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -202,15 +202,17 @@ export class App {
 
   private navigationErrors = toSignal(
     this.router.events.pipe(
-      filter((event): event is NavigationError => event instanceof NavigationError),
       map(event => {
-        this.lastFailedUrl.set(event.url);
-
-        if (event.error) {
-          console.error('Navigation error', event.error)
+        if (event instanceof NavigationError) {
+          this.lastFailedUrl.set(event.url);
+  
+          if (event.error) {
+            console.error('Navigation error', event.error)
+          }
+  
+          return 'Navigation failed. Please try again.';
         }
-
-        return 'Navigation failed. Please try again.';
+        return '';
       })
     ),
     { initialValue: '' }
@@ -234,7 +236,7 @@ Este enfoque es particularmente útil cuando necesitas:
 
 ### Manejar errores directamente en el resolver
 
-Aquí hay un ejemplo actualizado del `userResolver` que registra el error y navega de vuelta a la página genérica `/users` usando el servicio [`Router`](api/router/Router):
+Aquí hay un ejemplo actualizado del `userResolver` que registra el error y navega de vuelta a la página genérica `/users` usando el servicio `Router`:
 
 ```ts
 import { inject } from '@angular/core';
@@ -266,10 +268,8 @@ Aunque los data resolvers previenen estados de carga dentro de los componentes,
 Para mejorar la experiencia del usuario durante la ejecución de resolvers, puedes escuchar eventos del router y mostrar indicadores de carga:
 
 ```angular-ts
-import { Component, inject } from '@angular/core';
+import { Component, inject, computed } from '@angular/core';
 import { Router } from '@angular/router';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -296,3 +296,38 @@ Este enfoque asegura que los usuarios reciban retroalimentación visual de que l
 - **Considera la UX de navegación**: Implementa indicadores de carga para la ejecución de resolvers ya que la navegación se bloquea durante la obtención de datos
 - **Establece timeouts razonables**: Evita resolvers que puedan colgarse indefinidamente y bloquear la navegación
 - **Seguridad de tipos**: Usa interfaces de TypeScript para datos resueltos
+
+## Leyendo datos resueltos del padre en resolvers hijos
+
+Los resolvers se ejecutan de padre a hijo. Cuando una ruta padre define un resolver, sus datos resueltos están disponibles para los resolvers hijos que se ejecutan después.
+
+```ts
+import { inject } from '@angular/core';
+import { provideRouter , ActivatedRouteSnapshot } from '@angular/router';
+import { userResolver } from './resolvers';
+import { UserPosts } from './pages';
+import { PostService } from './services',
+import type { User } from './types';
+
+provideRouter([
+  {
+    path: 'users/:id',
+    resolve: { user: userResolver }, // user resolver en la ruta padre
+    children: [
+      {
+        path: 'posts',
+        component: UserPosts,
+        // route.data.user está disponible aquí mientras este resolver se ejecuta
+        resolve: {
+          posts: (route: ActivatedRouteSnapshot) => {
+            const postService = inject(PostService);
+            const user = route.data['user'] as User; // datos del padre
+            const userId = user.id;
+            return postService.getPostByUser(userId);
+          },
+        },
+      },
+    ],
+  },
+]);
+```
diff --git a/adev-es/src/content/guide/routing/define-routes.en.md b/adev-es/src/content/guide/routing/define-routes.en.md
index cfadb1a..a06ba21 100644
--- a/adev-es/src/content/guide/routing/define-routes.en.md
+++ b/adev-es/src/content/guide/routing/define-routes.en.md
@@ -8,7 +8,7 @@ In Angular, a **route** is an object that defines which component should render
 
 Here is a basic example of a route:
 
-```angular-ts
+```ts
 import { AdminPage } from './app-admin/app-admin.component';
 
 const adminPage = {
@@ -25,7 +25,7 @@ Most projects define routes in a separate file that contains `routes` in the fil
 
 A collection of routes looks like this:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomePage } from './home-page/home-page.component';
 import { AdminPage } from './about-page/admin-page.component';
@@ -50,7 +50,7 @@ When bootstrapping an Angular application without the Angular CLI, you can pass
 
 Inside of the `providers` array, you can add the Angular router to your application by adding a `provideRouter` function call with your routes.
 
-```angular-ts
+```ts
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
@@ -80,16 +80,16 @@ Examples of this include:
 
 Parameterized URLs allow you to define dynamic paths that allow multiple URLs to the same component while dynamically displaying data based on parameters in the URL.
 
-You can define this type of pattern by adding parameters to your route's `path` string and prefixing each parameter with the colon (`:`) character.
+You can define this type of pattern by adding parameters to your route’s `path` string and prefixing each parameter with the colon (`:`) character.
 
 IMPORTANT: Parameters are distinct from information in the URL's [query string](https://en.wikipedia.org/wiki/Query_string).
 Learn more about [query parameters in Angular in this guide](/guide/routing/read-route-state#query-parameters).
 
 The following example displays a user profile component based on the user id passed in through the URL.
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
-import { UserProfile } from './user-profile/user-profile;
+import { UserProfile } from './user-profile/user-profile';
 
 const routes: Routes = [
   { path: 'user/:id', component: UserProfile }
@@ -107,7 +107,7 @@ Valid route parameter names must start with a letter (a-z, A-Z) and can only con
 
 You can also define paths with multiple parameters:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { UserProfile } from './user-profile/user-profile.component';
 import { SocialMediaFeed } from './user-profile/social–media-feed.component';
@@ -128,7 +128,7 @@ When you need to catch all routes for a specific path, the solution is a wildcar
 
 A common example is defining a Page Not Found component.
 
-```angular-ts
+```ts
 import { Home } from './home/home.component';
 import { UserProfile } from './user-profile/user-profile.component';
 import { NotFound } from './not-found/not-found.component';
@@ -150,7 +150,7 @@ When you define routes, the order is important because Angular uses a first-matc
 
 The following example shows routes defined from most-specific to least specific:
 
-```angular-ts
+```ts
 const routes: Routes = [
   { path: '', component: HomeComponent },              // Empty path
   { path: 'users/new', component: NewUserComponent },  // Static, most specific
@@ -181,7 +181,7 @@ Each approach offers distinct advantages for different scenarios.
 
 When you define a route with the `component` property, the referenced component is eagerly loaded as part of the same JavaScript bundle as the route configuration.
 
-```angular-ts
+```ts
 import { Routes } from "@angular/router";
 import { HomePage } from "./components/home/home-page"
 import { LoginPage } from "./components/auth/login-page"
@@ -208,7 +208,7 @@ While including more JavaScript in your initial page load leads to slower initia
 
 You can use the `loadComponent` property to lazily load the JavaScript for a route only at the point at which that route would become active.
 
-```angular-ts
+```ts
 import { Routes } from "@angular/router";
 
 export const routes: Routes = [
@@ -229,6 +229,29 @@ The `loadComponent` property accepts a loader function that returns a Promise th
 
 Lazily loading routes can significantly improve the load speed of your Angular application by removing large portions of JavaScript from the initial bundle. These portions of your code compile into separate JavaScript "chunks" that the router requests only when the user visits the corresponding route.
 
+### Injection context lazy loading
+
+The Router executes `loadComponent` and `loadChildren` within the **injection context of the current route**, allowing you to call `inject` inside these loader functions to access providers declared on that route, inherited from parent routes through hierarchical dependency injection, or available globally. This enables context-aware lazy loading.
+
+```ts
+import { Routes } from '@angular/router';
+import { inject } from '@angular/core';
+import { FeatureFlags } from './feature-flags';
+
+export const routes: Routes = [
+  {
+    path: 'dashboard',
+    // Runs inside the route's injection context
+    loadComponent: () => {
+      const flags = inject(FeatureFlags);
+      return flags.isPremium
+        ? import('./dashboard/premium-dashboard').then(m => m.PremiumDashboard)
+        : import('./dashboard/basic-dashboard').then(m => m.BasicDashboard);
+    },
+  },
+];
+```
+
 ### Should I use an eager or a lazy route?
 
 There are many factors to consider when deciding on whether a route should be eager or lazy.
@@ -241,7 +264,7 @@ Note: While lazy routes have the upfront performance benefit of reducing the amo
 
 You can define a route that redirects to another route instead of rendering a component:
 
-```angular-ts
+```ts
 import { BlogComponent } from './home/blog.component';
 
 const routes: Routes = [
@@ -299,13 +322,51 @@ const routes: Routes = [
 
 Route titles can also be set via a service extending the [`TitleStrategy`](/api/router/TitleStrategy) abstract class. By default, Angular uses the [`DefaultTitleStrategy`](/api/router/DefaultTitleStrategy).
 
+### Using TitleStrategy for page titles
+
+For advanced scenarios where you need centralized control over how the document title is composed, implement a `TitleStrategy`.
+
+`TitleStrategy` is a token you can provide to override the default title strategy used by Angular. You can supply a custom `TitleStrategy` to implement conventions such as adding an application suffix, formatting titles from breadcrumbs, or generating titles dynamically from route data.
+
+```ts
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class AppTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+
+  updateTitle(snapshot: RouterStateSnapshot): void {
+    // PageTitle is equal to the "Title" of a route if it's set
+    // If its not set it will use the "title" given in index.html
+    const pageTitle = this.buildTitle(snapshot) || this.title.getTitle();
+    this.title.setTitle(`MyAwesomeApp - ${pageTitle}`);
+  }
+}
+```
+
+To use the custom strategy, provide it with the `TitleStrategy` token at the application level:
+
+```ts
+import { provideRouter, TitleStrategy } from '@angular/router';
+import { AppTitleStrategy } from './app-title.strategy';
+
+export const appConfig = {
+  providers: [
+    provideRouter(routes),
+    { provide: TitleStrategy, useClass: AppTitleStrategy },
+  ],
+};
+```
+
 ## Route-level providers for dependency injection
 
 Each route has a `providers` property that lets you provide dependencies to that route's content via [dependency injection](/guide/di).
 
 Common scenarios where this can be helpful include applications that have different services based on whether the user is an admin or not.
 
-```angular-ts
+```ts
 export const ROUTES: Route[] = [
   {
     path: 'admin',
@@ -337,7 +398,7 @@ There are two ways to work with route data: static data that remains constant, a
 
 You can associate arbitrary static data with a route via the `data` property in order to centralize things like route-specific metadata (e.g., analytics tracking, permissions, etc.):
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
@@ -373,7 +434,7 @@ Nested routes, also known as child routes, are a common technique for managing m
 
 You can add child routes to any route definition with the `children` property:
 
-```angular-ts
+```ts
 const routes: Routes = [
   {
     path: 'product/:id',
diff --git a/adev-es/src/content/guide/routing/define-routes.md b/adev-es/src/content/guide/routing/define-routes.md
index 380ff37..148e234 100644
--- a/adev-es/src/content/guide/routing/define-routes.md
+++ b/adev-es/src/content/guide/routing/define-routes.md
@@ -42,7 +42,7 @@ export const routes: Routes = [
 ];
 ```
 
-Consejo: Si generaste un proyecto con Angular CLI, tus rutas están definidas en `src/app/app.routes.ts`.
+CONSEJO: Si generaste un proyecto con Angular CLI, tus rutas están definidas en `app.routes.ts`.
 
 ### Agregando el router a tu aplicación
 
diff --git a/adev-es/src/content/guide/routing/lifecycle-and-events.en.md b/adev-es/src/content/guide/routing/lifecycle-and-events.en.md
index 6e3676f..5ee8f80 100644
--- a/adev-es/src/content/guide/routing/lifecycle-and-events.en.md
+++ b/adev-es/src/content/guide/routing/lifecycle-and-events.en.md
@@ -38,7 +38,7 @@ import { Event, Router, NavigationStart, NavigationEnd } from '@angular/router';
 @Component({ ... })
 export class RouterEventsComponent {
   private readonly router = inject(Router);
-  
+
   constructor() {
     // Subscribe to router events and react to events
     this.router.events.pipe(takeUntilDestroyed()).subscribe((event: Event) => {
@@ -102,7 +102,7 @@ import { map } from 'rxjs/operators';
 })
 export class AppComponent {
   private router = inject(Router);
-  
+
   readonly loading = toSignal(
     this.router.events.pipe(
       map(() => !!this.router.getCurrentNavigation())
@@ -116,8 +116,9 @@ export class AppComponent {
 
 Track page views for analytics:
 
-```typescript
-import { Component, inject, signal, effect } from '@angular/core';
+```ts
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, Injectable, DestroyRef } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
@@ -131,7 +132,7 @@ export class AnalyticsService {
         // Track page views when URL changes
         if (event instanceof NavigationEnd) {
            // Send page view to analytics
-          this.analytics.trackPageView(url);
+          this.analytics.trackPageView(event.url);
         }
       });
   }
@@ -151,6 +152,7 @@ Handle navigation errors gracefully and provide user feedback:
 ```angular-ts
 import { Component, inject, signal } from '@angular/core';
 import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-error-handler',
@@ -176,7 +178,7 @@ export class ErrorHandlerComponent {
         this.errorMessage.set('Failed to load page. Please try again.');
       } else if (event instanceof NavigationCancel) {
         console.warn('Navigation cancelled:', event.reason);
-        if (event.reason === NavigationCancellationCode.GuardRejected) {
+        if (event.code === NavigationCancellationCode.GuardRejected) {
           this.errorMessage.set('Access denied. Please check your permissions.');
         }
       }
diff --git a/adev-es/src/content/guide/routing/lifecycle-and-events.md b/adev-es/src/content/guide/routing/lifecycle-and-events.md
index 31eb92c..1617368 100644
--- a/adev-es/src/content/guide/routing/lifecycle-and-events.md
+++ b/adev-es/src/content/guide/routing/lifecycle-and-events.md
@@ -24,7 +24,7 @@ Los siguientes son eventos de error comunes:
 | [`NavigationCancel`](api/router/NavigationCancel) | Ocurre cuando el router cancela la navegación. A menudo debido a que un guard retorna false. |
 | [`NavigationError`](api/router/NavigationError)   | Ocurre cuando la navegación falla. Podría ser debido a rutas inválidas o errores de resolver. |
 
-Para una lista de todos los eventos de ciclo de vida, consulta la [tabla completa de esta guía](#all-router-events).
+Para una lista de todos los eventos de ciclo de vida, consulta la [tabla completa de esta guía](#todos-los-eventos-del-router).
 
 ## Cómo suscribirse a eventos del router
 
@@ -116,8 +116,9 @@ export class AppComponent {
 
 Rastrear vistas de página para analíticas:
 
-```typescript
-import { Component, inject, signal, effect } from '@angular/core';
+```ts
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, Injectable, DestroyRef } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
@@ -131,7 +132,7 @@ export class AnalyticsService {
         // Rastrear vistas de página cuando cambia la URL
         if (event instanceof NavigationEnd) {
            // Enviar vista de página a analíticas
-          this.analytics.trackPageView(url);
+          this.analytics.trackPageView(event.url);
         }
       });
   }
@@ -151,6 +152,7 @@ Manejar errores de navegación con gracia y proporcionar retroalimentación al u
 ```angular-ts
 import { Component, inject, signal } from '@angular/core';
 import { Router, NavigationStart, NavigationError, NavigationCancel, NavigationCancellationCode } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-error-handler',
@@ -176,7 +178,7 @@ export class ErrorHandlerComponent {
         this.errorMessage.set('Failed to load page. Please try again.');
       } else if (event instanceof NavigationCancel) {
         console.warn('Navigation cancelled:', event.reason);
-        if (event.reason === NavigationCancellationCode.GuardRejected) {
+        if (event.code === NavigationCancellationCode.GuardRejected) {
           this.errorMessage.set('Access denied. Please check your permissions.');
         }
       }
diff --git a/adev-es/src/content/guide/routing/navigate-to-routes.en.md b/adev-es/src/content/guide/routing/navigate-to-routes.en.md
index 3602045..7a270b9 100644
--- a/adev-es/src/content/guide/routing/navigate-to-routes.en.md
+++ b/adev-es/src/content/guide/routing/navigate-to-routes.en.md
@@ -5,8 +5,10 @@ The RouterLink directive is Angular's declarative approach to navigation. It all
 ## How to use RouterLink
 
 Instead of using regular anchor elements `<a>` with an `href` attribute, you add a RouterLink directive with the appropriate path in order to leverage Angular routing.
+
 ```angular-ts
 import {RouterLink} from '@angular/router';
+
 @Component({
   template: `
     <nav>
@@ -34,7 +36,7 @@ export class App {}
 
 In this example, the first example contains the full path with the protocol (i.e., `https://`) and the root domain (i.e., `angular.dev`) explicitly defined for the essentials page. In contrast, the second example assumes the user is already on the correct root domain for `/essentials`.
 
-Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don't need to know their absolute position within the routing hierarchy.
+Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don’t need to know their absolute position within the routing hierarchy.
 
 ### How relative URLs work
 
@@ -65,7 +67,7 @@ For example, if the user is on `example.com/settings`, here is how different rel
 
 <!-- Navigates to /team/:teamId/user/:userId -->
 <a routerLink="/team/123/user/456">User 456</a>
-<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>"
+<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>”
 ```
 
 ## Programmatic navigation to routes
@@ -99,13 +101,16 @@ export class AppDashboard {
     this.router.navigate(['/search'], {
       queryParams: { category: 'books', sort: 'price' }
     });
+
+    // With matrix parameters
+    this.router.navigate(['/products', { featured: true, onSale: true }]);
   }
 }
 ```
 
 `router.navigate()` supports both simple and complex routing scenarios, allowing you to pass route parameters, [query parameters](/guide/routing/read-route-state#query-parameters), and control navigation behavior.
 
-You can also build dynamic navigation paths relative to your component's location in the routing tree using the `relativeTo` option.
+You can also build dynamic navigation paths relative to your component’s location in the routing tree using the `relativeTo` option.
 
 ```angular-ts
 import { Router, ActivatedRoute } from '@angular/router';
@@ -143,9 +148,9 @@ export class UserDetailComponent {
 
 The `router.navigateByUrl()` method provides a direct way to programmatically navigate using URL path strings rather than array segments. This method is ideal when you have a full URL path and need to perform absolute navigation, especially when working with externally provided URLs or deep linking scenarios.
 
-```angular-ts
+```ts
 // Standard route navigation
-router.navigateByUrl('/products);
+router.navigateByUrl('/products');
 
 // Navigate to nested route
 router.navigateByUrl('/products/featured');
@@ -155,11 +160,14 @@ router.navigateByUrl('/products/123?view=details#reviews');
 
 // Navigate with query parameters
 router.navigateByUrl('/search?category=books&sortBy=price');
+
+// With matrix parameters
+router.navigateByUrl('/sales-awesome;isOffer=true;showModal=false')
 ```
 
 In the event you need to replace the current URL in history, `navigateByUrl` also accepts a configuration object that has a `replaceUrl` option.
 
-```angular-ts
+```ts
 // Replace current URL in history
 router.navigateByUrl('/checkout', {
   replaceUrl: true
diff --git a/adev-es/src/content/guide/routing/navigate-to-routes.md b/adev-es/src/content/guide/routing/navigate-to-routes.md
index 97adda3..157aa12 100644
--- a/adev-es/src/content/guide/routing/navigate-to-routes.md
+++ b/adev-es/src/content/guide/routing/navigate-to-routes.md
@@ -5,8 +5,10 @@ La directiva RouterLink es el enfoque declarativo de Angular para la navegación
 ## Cómo usar RouterLink
 
 En lugar de usar elementos anchor regulares `<a>` con un atributo `href`, agregas una directiva RouterLink con la ruta apropiada para aprovechar el enrutamiento en Angular.
+
 ```angular-ts
 import {RouterLink} from '@angular/router';
+
 @Component({
   template: `
     <nav>
@@ -99,6 +101,9 @@ export class AppDashboard {
     this.router.navigate(['/search'], {
       queryParams: { category: 'books', sort: 'price' }
     });
+    
+    // Con parámetros de matriz
+    this.router.navigate(['/products', { featured: true, onSale: true }]);
   }
 }
 ```
@@ -143,7 +148,7 @@ export class UserDetailComponent {
 
 El método `router.navigateByUrl()` proporciona una forma directa de navegar programáticamente usando strings de ruta URL en lugar de segmentos de array. Este método es ideal cuando tienes una ruta URL completa y necesitas realizar navegación absoluta, especialmente cuando trabajas con URLs proporcionadas externamente o escenarios de deep linking.
 
-```angular-ts
+```ts
 // Navegación de ruta estándar
 router.navigateByUrl('/products);
 
@@ -155,11 +160,14 @@ router.navigateByUrl('/products/123?view=details#reviews');
 
 // Navegar con parámetros de consulta
 router.navigateByUrl('/search?category=books&sortBy=price');
+
+// Con parámetros de matriz
+router.navigateByUrl('/sales-awesome;isOffer=true;showModal=false')
 ```
 
 En caso de que necesites reemplazar la URL actual en el historial, `navigateByUrl` también acepta un objeto de configuración que tiene una opción `replaceUrl`.
 
-```angular-ts
+```ts
 // Reemplazar URL actual en el historial
 router.navigateByUrl('/checkout', {
   replaceUrl: true
diff --git a/adev-es/src/content/guide/routing/read-route-state.en.md b/adev-es/src/content/guide/routing/read-route-state.en.md
index 4e3807b..85d74ae 100644
--- a/adev-es/src/content/guide/routing/read-route-state.en.md
+++ b/adev-es/src/content/guide/routing/read-route-state.en.md
@@ -39,7 +39,7 @@ Page navigations are events over time, and you can access the router state at a
 
 Route snapshots contain essential information about the route, including its parameters, data, and child routes. In addition, snapshots are static and will not reflect future changes.
 
-Here's an example of how you'd access a route snapshot:
+Here’s an example of how you’d access a route snapshot:
 
 ```angular-ts
 import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
@@ -177,10 +177,47 @@ export class ProductListComponent implements OnInit {
 }
 ```
 
-In this example, users can use a select element to sort the product list by name or price. The associated change handler updates the URL's query parameters, which in turn triggers a change event that can read the updated query parameters and update the product list.
+In this example, users can use a select element to sort the product list by name or price. The associated change handler updates the URL’s query parameters, which in turn triggers a change event that can read the updated query parameters and update the product list.
 
 For more information, check out the [official docs on QueryParamsHandling](/api/router/QueryParamsHandling).
 
+### Matrix Parameters
+
+Matrix parameters are optional parameters that belong to a specific URL segment, rather than applying to the entire route. Unlike query parameters which appear after a `?` and apply globally, matrix parameters use semicolons (`;`) and are scoped to individual path segments.
+
+Matrix parameters are useful when you need to pass auxiliary data to a specific route segment without affecting the route definition or matching behavior. Like query parameters, they don't need to be defined in your route configuration.
+
+```ts
+// URL format: /path;key=value
+// Multiple parameters: /path;key1=value1;key2=value2
+
+// Navigate with matrix parameters
+this.router.navigate(['/awesome-products', { view: 'grid', filter: 'new' }]);
+// Results in URL: /awesome-products;view=grid;filter=new
+```
+
+**Using ActivatedRoute**
+
+```ts
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component(/* ... */)
+export class AwesomeProducts  {
+  private route = inject(ActivatedRoute);
+
+  constructor() {
+    // Access matrix parameters via params
+    this.route.params.subscribe((params) => {
+      const view = params['view']; // e.g., 'grid'
+      const filter = params['filter']; // e.g., 'new'
+    });
+  }
+}
+```
+
+NOTE: As an alternative to using `ActivatedRoute`, matrix parameters are also bound to component inputs when using the `withComponentInputBinding`.
+
 ## Detect active current route with RouterLinkActive
 
 You can use the `RouterLinkActive` directive to dynamically style navigation elements based on the current active route. This is common in navigation elements to inform users what the active route is.
@@ -216,7 +253,7 @@ If you need to add multiple classes onto the element, you can use either a space
 
 When you specify a value for routerLinkActive, you are also defining the same value for `ariaCurrentWhenActive`. This makes sure that visually impaired users (which may not perceive the different styling being applied) can also identify the active button.
 
-If you want to define a different value for aria, you'll need to explicitly set the value using the `ariaCurrentWhenActive` directive.
+If you want to define a different value for aria, you’ll need to explicitly set the value using the `ariaCurrentWhenActive` directive.
 
 ### Route matching strategy
 
@@ -252,7 +289,7 @@ If you only want to apply the class on an exact match, you need to provide the `
 </a>
 ```
 
-If you want to be more precise in how a route is matched, it's worth noting that `exact: true` is actually syntactic sugar for the full set of matching options:
+If you want to be more precise in how a route is matched, it’s worth noting that `exact: true` is actually syntactic sugar for the full set of matching options:
 
 ```angular-ts
 // `exact: true` is equivalent to
diff --git a/adev-es/src/content/guide/routing/read-route-state.md b/adev-es/src/content/guide/routing/read-route-state.md
index 9b57327..86bb84b 100644
--- a/adev-es/src/content/guide/routing/read-route-state.md
+++ b/adev-es/src/content/guide/routing/read-route-state.md
@@ -72,7 +72,7 @@ Consulta los [docs de la API de `ActivatedRoute`](/api/router/ActivatedRoute) y
 
 ## Leyendo parámetros en una ruta
 
-Hay dos tipos de parámetros que los desarrolladores pueden utilizar desde una ruta: parámetros de ruta y parámetros de consulta.
+Hay tres tipos de parámetros que los desarrolladores pueden utilizar desde una ruta: parámetros de ruta, parámetros de consulta y parámetros de matriz.
 
 ### Parámetros de ruta
 
@@ -181,6 +181,43 @@ En este ejemplo, los usuarios pueden usar un elemento select para ordenar la lis
 
 Para más información, consulta los [docs oficiales sobre QueryParamsHandling](/api/router/QueryParamsHandling).
 
+### Parámetros de matriz
+
+Los parámetros de matriz son parámetros opcionales que pertenecen a un segmento de URL específico, en lugar de aplicarse a toda la ruta. A diferencia de los parámetros de consulta que aparecen después de un `?` y se aplican globalmente, los parámetros de matriz usan punto y coma (`;`) y están limitados a segmentos de ruta individuales.
+
+Los parámetros de matriz son útiles cuando necesitas pasar datos auxiliares a un segmento de ruta específico sin afectar la definición de ruta o el comportamiento de coincidencia. Al igual que los parámetros de consulta, no necesitan estar definidos en tu configuración de ruta.
+
+```ts
+// Formato de URL: /path;key=value
+// Múltiples parámetros: /path;key1=value1;key2=value2
+
+// Navegar con parámetros de matriz
+this.router.navigate(['/awesome-products', { view: 'grid', filter: 'new' }]);
+// Resulta en URL: /awesome-products;view=grid;filter=new
+```
+
+**Usando ActivatedRoute**
+
+```ts
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component(/* ... */)
+export class AwesomeProducts  {
+  private route = inject(ActivatedRoute);
+
+  constructor() {
+    // Acceder a parámetros de matriz vía params
+    this.route.params.subscribe((params) => {
+      const view = params['view']; // p.ej., 'grid'
+      const filter = params['filter']; // p.ej., 'new'
+    });
+  }
+}
+```
+
+NOTA: Como alternativa a usar `ActivatedRoute`, los parámetros de matriz también se vinculan a inputs de componente cuando se usa `withComponentInputBinding`.
+
 ## Detectar ruta activa actual con RouterLinkActive
 
 Puedes usar la directiva `RouterLinkActive` para estilizar dinámicamente elementos de navegación basándose en la ruta activa actual. Esto es común en elementos de navegación para informar a los usuarios cuál es la ruta activa.
diff --git a/adev-es/src/content/guide/routing/redirecting-routes.en.md b/adev-es/src/content/guide/routing/redirecting-routes.en.md
index 1d3fa96..d8b6148 100644
--- a/adev-es/src/content/guide/routing/redirecting-routes.en.md
+++ b/adev-es/src/content/guide/routing/redirecting-routes.en.md
@@ -16,7 +16,7 @@ const routes: Routes = [
   // Redirect with path parameters
   { path: 'legacy-user/:id', redirectTo: 'users/:id' },
 
-  // Redirect any other URLs that don't match
+  // Redirect any other URLs that don’t match
   // (also known as a "wildcard" redirect)
   { path: '**', redirectTo: '/login' }
 ];
@@ -26,7 +26,7 @@ In this example, there are three redirects:
 
 1. When a user visits the `/marketing` path, they are redirected to `/newsletter`.
 2. When a user visits any `/legacy-user/:id` path, they are routed to the corresponding `/users/:id` path.
-3. When a user visit any path that's not defined in the router, they are redirected to the login page because of the `**` wildcard path definition.
+3. When a user visit any path that’s not defined in the router, they are redirected to the login page because of the `**` wildcard path definition.
 
 ## Understanding `pathMatch`
 
diff --git a/adev-es/src/content/guide/routing/redirecting-routes.md b/adev-es/src/content/guide/routing/redirecting-routes.md
index 27b4409..964a222 100644
--- a/adev-es/src/content/guide/routing/redirecting-routes.md
+++ b/adev-es/src/content/guide/routing/redirecting-routes.md
@@ -48,7 +48,7 @@ Por defecto, todas las redirecciones usan la estrategia `prefix`.
 ```ts
 export const routes: Routes = [
   // Esta ruta de redirección es equivalente a…
-  { path: 'news', redirectTo: 'blog },
+  { path: 'news', redirectTo: 'blog' },
 
   // Esta ruta de redirección define explícitamente pathMatch
   { path: 'news', redirectTo: 'blog', pathMatch: 'prefix' },
diff --git a/adev-es/src/content/guide/routing/route-guards.en.md b/adev-es/src/content/guide/routing/route-guards.en.md
index b25e9eb..774e5f9 100644
--- a/adev-es/src/content/guide/routing/route-guards.en.md
+++ b/adev-es/src/content/guide/routing/route-guards.en.md
@@ -187,7 +187,7 @@ const routes: Routes = [
     children: [
       // /users/list - PROTECTED
       { path: 'list', component: UserListComponent },
-      // /useres/detail/:id - PROTECTED
+      // /users/detail/:id - PROTECTED
       { path: 'detail/:id', component: UserDetailComponent }
     ]
   },
diff --git a/adev-es/src/content/guide/routing/route-guards.md b/adev-es/src/content/guide/routing/route-guards.md
index 8f010f4..7d4e58f 100644
--- a/adev-es/src/content/guide/routing/route-guards.md
+++ b/adev-es/src/content/guide/routing/route-guards.md
@@ -12,7 +12,7 @@ Puedes generar un guard de ruta usando Angular CLI:
 ng generate guard CUSTOM_NAME
 ```
 
-Esto te solicitará que selecciones qué [tipo de guard de ruta](#types-of-route-guards) usar y luego creará el archivo `CUSTOM_NAME-guard.ts` correspondiente.
+Esto te solicitará que selecciones qué [tipo de guard de ruta](#tipos-de-guards-de-ruta) usar y luego creará el archivo `CUSTOM_NAME-guard.ts` correspondiente.
 
 CONSEJO: También puedes crear un guard de ruta manualmente creando un archivo TypeScript separado en tu proyecto Angular. Los desarrolladores típicamente agregan un sufijo de `-guard.ts` en el nombre del archivo para distinguirlo de otros archivos.
 
@@ -187,7 +187,7 @@ const routes: Routes = [
     children: [
       // /users/list - PROTEGIDO
       { path: 'list', component: UserListComponent },
-      // /useres/detail/:id - PROTEGIDO
+      // /users/detail/:id - PROTEGIDO
       { path: 'detail/:id', component: UserDetailComponent }
     ]
   },
diff --git a/adev-es/src/content/guide/routing/route-transition-animations.en.md b/adev-es/src/content/guide/routing/route-transition-animations.en.md
index 4b372c2..a9aa290 100644
--- a/adev-es/src/content/guide/routing/route-transition-animations.en.md
+++ b/adev-es/src/content/guide/routing/route-transition-animations.en.md
@@ -108,7 +108,7 @@ Here's an example that adds a rotation effect to a counter element:
 
 IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
 
-[Try the updated "count" example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
+[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
 ## Advanced transition control with onViewTransitionCreated
 
diff --git a/adev-es/src/content/guide/routing/route-transition-animations.md b/adev-es/src/content/guide/routing/route-transition-animations.md
index 9a67229..be12693 100644
--- a/adev-es/src/content/guide/routing/route-transition-animations.md
+++ b/adev-es/src/content/guide/routing/route-transition-animations.md
@@ -27,7 +27,7 @@ Para más detalles sobre la API del navegador, consulta el [Chrome Explainer](ht
 
 Angular Router integra view transitions en el ciclo de vida de navegación para crear cambios de ruta fluidos. Durante la navegación, el Router:
 
-1. **Completa la preparación de navegación** - Se ejecutan coincidencia de ruta, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards) y [resolvers](/guide/routing/data-resolvers)
+1. **Completa la preparación de navegación** - Se ejecutan coincidencia de ruta, [lazy loading](/guide/routing/define-routes#componentes-cargados-de-forma-lazy), [guards](/guide/routing/route-guards) y [resolvers](/guide/routing/data-resolvers)
 2. **Inicia la view transition** - El Router llama a `startViewTransition` cuando las rutas están listas para activación
 3. **Actualiza el DOM** - El Router activa nuevas rutas y desactiva las antiguas dentro del callback de transición
 4. **Finaliza la transición** - La Promise de transición se resuelve cuando Angular completa la renderización
@@ -36,7 +36,7 @@ La integración de view transition del Router actúa como una [mejora progresiva
 
 ## Habilitar View Transitions en el Router
 
-Habilita view transitions agregando la característica `withViewTransitions` a tu [configuración del router](/guide/routing/define-routes#adding-the-router-to-your-application). Angular soporta tanto enfoques de bootstrap standalone como NgModule:
+Habilita view transitions agregando la característica `withViewTransitions` a tu [configuración del router](/guide/routing/define-routes#agregando-el-router-a-tu-aplicación). Angular soporta tanto enfoques de bootstrap standalone como NgModule:
 
 ### Bootstrap standalone
 
@@ -108,7 +108,7 @@ Aquí hay un ejemplo que agrega un efecto de rotación a un elemento contador:
 
 IMPORTANTE: Define animaciones de view transition en tu archivo de estilos globales, no en estilos de componentes. La [encapsulación de vista](/guide/components/styling#view-encapsulation) de Angular limita el alcance de los estilos de componentes, lo que les impide seleccionar correctamente los pseudo-elementos de transición.
 
-[Prueba el ejemplo actualizado "count" en StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
+[Prueba el ejemplo actualizado “count“ en StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
 ## Control avanzado de transición con onViewTransitionCreated
 
@@ -146,7 +146,7 @@ withViewTransitions({
 })
 ```
 
-Este ejemplo omite la view transition cuando la navegación solo cambia el [fragmento de URL o parámetros de consulta](/guide/routing/read-route-state#query-parameters) (como enlaces anchor dentro de la misma página). El método `skipTransition()` previene la animación mientras aún permite que la navegación se complete.
+Este ejemplo omite la view transition cuando la navegación solo cambia el [fragmento de URL o parámetros de consulta](/guide/routing/read-route-state#parámetros-de-consulta) (como enlaces anchor dentro de la misma página). El método `skipTransition()` previene la animación mientras aún permite que la navegación se complete.
 
 ## Ejemplos del Chrome explainer adaptados a Angular
 
diff --git a/adev-es/src/content/guide/routing/router-reference.en.md b/adev-es/src/content/guide/routing/router-reference.en.md
index 03951d7..12008ad 100644
--- a/adev-es/src/content/guide/routing/router-reference.en.md
+++ b/adev-es/src/content/guide/routing/router-reference.en.md
@@ -56,7 +56,7 @@ The in-application URLs can be indistinguishable from server URLs.
 Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs.
 
 HELPFUL: HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
+In the [LocationStrategy and browser URL styles](common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
 
 You must add a [`<base href>` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') to the application's `index.html` for `pushState` routing to work.
 The browser uses the `<base href>` value to prefix relative URLs when referencing CSS files, scripts, and images.
@@ -64,7 +64,7 @@ The browser uses the `<base href>` value to prefix relative URLs when referencin
 Add the `<base>` element just after the `<head>` tag.
 If the `app` folder is the application root, as it is for this application, set the `href` value in `index.html` as shown here.
 
-<docs-code header="src/index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
+<docs-code header="index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
 
 ### HTML5 URLs and the `<base href>`
 
@@ -94,7 +94,6 @@ Those developers can still use HTML5 URLs by taking the following two steps:
 
 1. Provide the router with an appropriate `APP_BASE_HREF` value.
 1. Use root URLs \(URLs with an `authority`\) for all web resources: CSS, images, scripts, and template HTML files.
-
    - The `<base href>` `path` should end with a "/", as browsers ignore characters in the `path` that follow the right-most "`/`"
    - If the `<base href>` includes a `query` part, the `query` is only used if the `path` of a link in the page is empty and has no `query`.
      This means that a `query` in the `<base href>` is only included when using `HashLocationStrategy`.
diff --git a/adev-es/src/content/guide/routing/router-reference.md b/adev-es/src/content/guide/routing/router-reference.md
index fed072a..934a24a 100644
--- a/adev-es/src/content/guide/routing/router-reference.md
+++ b/adev-es/src/content/guide/routing/router-reference.md
@@ -56,7 +56,7 @@ Las URLs dentro de la aplicación pueden ser indistinguibles de las URLs del ser
 Los navegadores HTML5 modernos fueron los primeros en soportar `pushState`, razón por la cual muchas personas se refieren a estas URLs como URLs "estilo HTML5".
 
 ÚTIL: La navegación estilo HTML5 es el valor predeterminado del router.
-En la sección [LocationStrategy y estilos de URL del navegador](#locationstrategy-and-browser-url-styles), aprende por qué el estilo HTML5 es preferable, cómo ajustar su comportamiento y cómo cambiar al estilo hash \(`#`\) más antiguo, si es necesario.
+En la sección [LocationStrategy y estilos de URL del navegador](common-router-tasks#locationstrategy-y-estilos-de-url-del-navegador), aprende por qué el estilo HTML5 es preferable, cómo ajustar su comportamiento y cómo cambiar al estilo hash \(`#`\) más antiguo, si es necesario.
 
 Debes agregar un [elemento `<base href>`](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') al `index.html` de la aplicación para que el enrutamiento `pushState` funcione.
 El navegador usa el valor `<base href>` para prefijar URLs relativas al referenciar archivos CSS, scripts e imágenes.
@@ -64,7 +64,7 @@ El navegador usa el valor `<base href>` para prefijar URLs relativas al referenc
 Agrega el elemento `<base>` justo después de la etiqueta `<head>`.
 Si la carpeta `app` es la raíz de la aplicación, como lo es para esta aplicación, establece el valor `href` en `index.html` como se muestra aquí.
 
-<docs-code header="src/index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
+<docs-code header="index.html (base-href)" path="adev/src/content/examples/router/src/index.html" visibleRegion="base-href"/>
 
 ### URLs HTML5 y el `<base href>`
 
@@ -94,7 +94,6 @@ Esos desarrolladores aún pueden usar URLs HTML5 siguiendo los siguientes dos pa
 
 1. Proporciona al router un valor `APP_BASE_HREF` apropiado.
 1. Usa URLs raíz \(URLs con un `authority`\) para todos los recursos web: CSS, imágenes, scripts y archivos HTML de plantilla.
-
    - El `path` de `<base href>` debe terminar con un "/", ya que los navegadores ignoran caracteres en el `path` que siguen al "`/`" más a la derecha
    - Si el `<base href>` incluye una parte `query`, el `query` solo se usa si el `path` de un enlace en la página está vacío y no tiene `query`.
      Esto significa que un `query` en el `<base href>` solo se incluye cuando se usa `HashLocationStrategy`.
diff --git a/adev-es/src/content/guide/routing/router-tutorial.en.md b/adev-es/src/content/guide/routing/router-tutorial.en.md
index 9b0bd46..f87e148 100644
--- a/adev-es/src/content/guide/routing/router-tutorial.en.md
+++ b/adev-es/src/content/guide/routing/router-tutorial.en.md
@@ -12,73 +12,73 @@ You can also configure routes to guard against unexpected or unauthorized behavi
 
 ## Objectives
 
-* Organize a sample application's features into modules.
-* Define how to navigate to a component.
-* Pass information to a component using a parameter.
-* Structure routes by nesting several routes.
-* Check whether users can access a route.
-* Control whether the application can discard unsaved changes.
-* Improve performance by pre-fetching route data and lazy loading feature modules.
-* Require specific criteria to load components.
+- Organize a sample application's features into modules.
+- Define how to navigate to a component.
+- Pass information to a component using a parameter.
+- Structure routes by nesting several routes.
+- Check whether users can access a route.
+- Control whether the application can discard unsaved changes.
+- Improve performance by pre-fetching route data and lazy loading feature modules.
+- Require specific criteria to load components.
 
 ## Create a sample application
 
-Using the Angular CLI, create a new application, *angular-router-sample*.
-This application will have two components: *crisis-list* and *heroes-list*.
+Using the Angular CLI, create a new application, _angular-router-sample_.
+This application will have two components: _crisis-list_ and _heroes-list_.
 
-1. Create a new Angular project, *angular-router-sample*.
+1. Create a new Angular project, _angular-router-sample_.
 
-    <docs-code language="shell">
-    ng new angular-router-sample
-    </docs-code>
+   ```shell
+   ng new angular-router-sample
+   ```
 
-    When prompted with `Would you like to add Angular routing?`, select `N`.
+   When prompted with `Would you like to add Angular routing?`, select `N`.
 
-    When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
+   When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
 
-    After a few moments, a new project, `angular-router-sample`, is ready.
+   After a few moments, a new project, `angular-router-sample`, is ready.
 
 1. From your terminal, navigate to the `angular-router-sample` directory.
-1. Create a component, *crisis-list*.
+1. Create a component, _crisis-list_.
 
-    <docs-code language="shell">
-    ng generate component crisis-list
-    </docs-code>
+```shell
+ng generate component crisis-list
+```
 
 1. In your code editor, locate the file, `crisis-list.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/crisis-list/crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
+<docs-code header="crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
 
-1. Create a second component, *heroes-list*.
+1. Create a second component, _heroes-list_.
 
-    <docs-code language="shell">
-    ng generate component heroes-list
-    </docs-code>
+```shell
+ng generate component heroes-list
+```
 
 1. In your code editor, locate the file, `heroes-list.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/heroes-list/heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
+<docs-code header="heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
 
 1. In your code editor, open the file, `app.component.html` and replace its contents with the following HTML.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
 
 1. Verify that your new application runs as expected by running the `ng serve` command.
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+```shell
+ng serve
+```
 
 1. Open a browser to `http://localhost:4200`.
 
-    You should see a single web page, consisting of a title and the HTML of your two components.
+   You should see a single web page, consisting of a title and the HTML of your two components.
 
 ## Define your routes
 
 In this section, you'll define two routes:
 
-* The route `/crisis-center` opens the `crisis-center` component.
-* The route `/heroes-list` opens the `heroes-list` component.
+- The route `/crisis-center` opens the `crisis-center` component.
+- The route `/heroes-list` opens the `heroes-list` component.
 
 A route definition is a JavaScript object.
 Each route typically has two properties.
@@ -88,18 +88,18 @@ The second property, `component`, is a string that specifies what component your
 1. From your code editor, create and open the `app.routes.ts` file.
 1. Create and export a routes list for your application:
 
-    ```ts
-    import {Routes} from '@angular/router';
+   ```ts
+   import {Routes} from '@angular/router';
 
-    export const routes = [];
-    ```
+   export const routes = [];
+   ```
 
 1. Add two routes for your first two components:
 
-    ```ts
-    {path: 'crisis-list', component: CrisisListComponent},
-    {path: 'heroes-list', component: HeroesListComponent},
-    ```
+   ```ts
+   {path: 'crisis-list', component: CrisisListComponent},
+   {path: 'heroes-list', component: HeroesListComponent},
+   ```
 
 This routes list is an array of JavaScript objects, with each object defining the properties of a route.
 
@@ -112,16 +112,16 @@ You import this provider function from `@angular/router`.
 1. From your code editor, open the `app.config.ts` file.
 1. Add the following import statements:
 
-    ```ts
-    import { provideRouter } from '@angular/router';
-    import { routes } from './app.routes';
-    ```
+   ```ts
+   import { provideRouter } from '@angular/router';
+   import { routes } from './app.routes';
+   ```
 
 1. Update the providers in the `appConfig`:
 
-    ```ts
-    providers: [provideRouter(routes)]
-    ```
+   ```ts
+   providers: [provideRouter(routes)]
+   ```
 
 For `NgModule` based applications, put the `provideRouter` in the `providers` list of the `AppModule`, or whichever module is passed to `bootstrapModule` in the application.
 
@@ -136,17 +136,17 @@ To implement this functionality, you add the `router-outlet` directive to your t
 1. From your code editor, open the `app.component.html` file.
 1. Delete the following lines.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
 
 1. Add the `router-outlet` directive.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
 
 1. Add `RouterOutlet` to the imports of the `AppComponent` in `app.component.ts`
 
-    ```ts
-    imports: [RouterOutlet],
-    ```
+   ```ts
+   imports: [RouterOutlet],
+   ```
 
 View your updated application in your browser.
 You should see only the application title.
@@ -176,16 +176,16 @@ You'll add that functionality in the next section.
 
 1. Open the `app.component.html` file and add the following HTML below the title.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
+   <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
 
-    This HTML uses an Angular directive, `routerLink`.
-    This directive connects the routes you defined to your template files.
+   This HTML uses an Angular directive, `routerLink`.
+   This directive connects the routes you defined to your template files.
 
 1. Add the `RouterLink` directive to the imports list of `AppComponent` in `app.component.ts`.
 
 1. Open the `app.component.css` file and add the following styles.
 
-    <docs-code header="src/app/app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
+<docs-code header="app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
 
 If you view your application in the browser, you should see these two links.
 When you click on a link, the corresponding component appears.
@@ -198,7 +198,8 @@ Add this functionality using Angular's `routerLinkActive` directive.
 1. From your code editor, open the `app.component.html` file.
 1. Update the anchor tags to include the `routerLinkActive` directive.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
+
 1. Add the `RouterLinkActive` directive to the `imports` list of `AppComponent` in `app.component.ts`.
 
 View your application again.
@@ -215,17 +216,17 @@ In this step of the tutorial, you add a route that redirects the user to display
 1. From your code editor, open the `app.routes.ts` file.
 1. Update the `routes` section as follows.
 
-    ```ts
-    {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
-    ```
+   ```ts
+   {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
+   ```
 
-    Notice that this new route uses an empty string as its path.
-    In addition, it replaces the `component` property with two new ones:
+   Notice that this new route uses an empty string as its path.
+   In addition, it replaces the `component` property with two new ones:
 
-    | Properties   | Details |
-    |:---        |:---    |
-    | `redirectTo` | This property instructs Angular to redirect from an empty path to the `heroes-list` path.                                                                                                                                                       |
-    | `pathMatch`  | This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the [Route API documentation](api/router/Route). |
+   | Properties   | Details                                                                                                                                                                                                                                                                                           |
+   | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+   | `redirectTo` | This property instructs Angular to redirect from an empty path to the `heroes-list` path.                                                                                                                                                                                                         |
+   | `pathMatch`  | This property instructs Angular on how much of the URL to match. For this tutorial, you should set this property to `full`. This strategy is recommended when you have an empty string for a path. For more information about this property, see the [Route API documentation](api/router/Route). |
 
 Now when you open your application, it displays the `heroes-list` component by default.
 
@@ -237,23 +238,23 @@ In this section, you'll create a 404 page and update your route configuration to
 
 1. From the terminal, create a new component, `PageNotFound`.
 
-    <docs-code language="shell">
-    ng generate component page-not-found
-    </docs-code>
+```shell
+ng generate component page-not-found
+```
 
 1. From your code editor, open the `page-not-found.component.html` file and replace its contents with the following HTML.
 
-    <docs-code header="src/app/page-not-found/page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
+<docs-code header="page-not-found/page-not-found.component.html" path="adev/src/content/examples/router-tutorial/src/app/page-not-found/page-not-found.component.html"/>
 
 1. Open the `app.routes.ts` file and add the following route to the routes list:
 
-    ```ts
-    {path: '**', component: PageNotFoundComponent}
-    ```
+   ```ts
+   {path: '**', component: PageNotFoundComponent}
+   ```
 
-    The new route uses a path, `**`.
-    This path is how Angular identifies a wildcard route.
-    Any route that does not match an existing route in your configuration will use this route.
+   The new route uses a path, `**`.
+   This path is how Angular identifies a wildcard route.
+   Any route that does not match an existing route in your configuration will use this route.
 
 IMPORTANT: Notice that the wildcard route is placed at the end of the array.
 The order of your routes is important, as Angular applies routes in order and uses the first match it finds.
diff --git a/adev-es/src/content/guide/routing/router-tutorial.md b/adev-es/src/content/guide/routing/router-tutorial.md
index 07a3e46..4f69bc3 100644
--- a/adev-es/src/content/guide/routing/router-tutorial.md
+++ b/adev-es/src/content/guide/routing/router-tutorial.md
@@ -12,25 +12,25 @@ También puedes configurar rutas para protegerse contra comportamientos inespera
 
 ## Objetivos
 
-* Organizar las características de una aplicación de ejemplo en módulos.
-* Definir cómo navegar a un componente.
-* Pasar información a un componente usando un parámetro.
-* Estructurar rutas anidando varias rutas.
-* Verificar si los usuarios pueden acceder a una ruta.
-* Controlar si la aplicación puede descartar cambios no guardados.
-* Mejorar el rendimiento precargando datos de ruta y cargando módulos de características con lazy loading.
-* Requerir criterios específicos para cargar componentes.
+- Organizar las características de una aplicación de ejemplo en módulos.
+- Definir cómo navegar a un componente.
+- Pasar información a un componente usando un parámetro.
+- Estructurar rutas anidando varias rutas.
+- Verificar si los usuarios pueden acceder a una ruta.
+- Controlar si la aplicación puede descartar cambios no guardados.
+- Mejorar el rendimiento precargando datos de ruta y cargando módulos de características con lazy loading.
+- Requerir criterios específicos para cargar componentes.
 
 ## Crear una aplicación de ejemplo
 
-Usando Angular CLI, crea una nueva aplicación, *angular-router-sample*.
-Esta aplicación tendrá dos componentes: *crisis-list* y *heroes-list*.
+Usando Angular CLI, crea una nueva aplicación, _angular-router-sample_.
+Esta aplicación tendrá dos componentes: _crisis-list_ y _heroes-list_.
 
-1. Crea un nuevo proyecto Angular, *angular-router-sample*.
+1. Crea un nuevo proyecto Angular, _angular-router-sample_.
 
-    <docs-code language="shell">
+    ```shell
     ng new angular-router-sample
-    </docs-code>
+    ```
 
     Cuando se te pregunte `Would you like to add Angular routing?`, selecciona `N`.
 
@@ -39,35 +39,35 @@ Esta aplicación tendrá dos componentes: *crisis-list* y *heroes-list*.
     Después de unos momentos, un nuevo proyecto, `angular-router-sample`, estará listo.
 
 1. Desde tu terminal, navega al directorio `angular-router-sample`.
-1. Crea un componente, *crisis-list*.
+1. Crea un componente, _crisis-list_.
 
-    <docs-code language="shell">
+    ```shell
     ng generate component crisis-list
-    </docs-code>
+    ```
 
 1. En tu editor de código, localiza el archivo `crisis-list.component.html` y reemplaza el contenido placeholder con el siguiente HTML.
 
-    <docs-code header="src/app/crisis-list/crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
+    <docs-code header="crisis-list/crisis-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/crisis-list/crisis-list.component.html"/>
 
-1. Crea un segundo componente, *heroes-list*.
+1. Crea un segundo componente, _heroes-list_.
 
-    <docs-code language="shell">
+    ```shell
     ng generate component heroes-list
-    </docs-code>
+    ```
 
 1. En tu editor de código, localiza el archivo `heroes-list.component.html` y reemplaza el contenido placeholder con el siguiente HTML.
 
-    <docs-code header="src/app/heroes-list/heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
+    <docs-code header="heroes-list/heroes-list.component.html" path="adev/src/content/examples/router-tutorial/src/app/heroes-list/heroes-list.component.html"/>
 
 1. En tu editor de código, abre el archivo `app.component.html` y reemplaza su contenido con el siguiente HTML.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="setup"/>
 
 1. Verifica que tu nueva aplicación se ejecuta como se espera ejecutando el comando `ng serve`.
 
-    <docs-code language="shell">
+    ```shell
     ng serve
-    </docs-code>
+    ```
 
 1. Abre un navegador en `http://localhost:4200`.
 
@@ -77,8 +77,8 @@ Esta aplicación tendrá dos componentes: *crisis-list* y *heroes-list*.
 
 En esta sección, definirás dos rutas:
 
-* La ruta `/crisis-center` abre el componente `crisis-center`.
-* La ruta `/heroes-list` abre el componente `heroes-list`.
+- La ruta `/crisis-center` abre el componente `crisis-center`.
+- La ruta `/heroes-list` abre el componente `heroes-list`.
 
 Una definición de ruta es un objeto JavaScript.
 Cada ruta típicamente tiene dos propiedades.
@@ -136,11 +136,11 @@ Para implementar esta funcionalidad, agregas la directiva `router-outlet` a tu a
 1. Desde tu editor de código, abre el archivo `app.component.html`.
 1. Elimina las siguientes líneas.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="components"/>
 
 1. Agrega la directiva `router-outlet`.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="router-outlet"/>
 
 1. Agrega `RouterOutlet` a los imports del `AppComponent` en `app.component.ts`
 
@@ -176,7 +176,7 @@ Agregarás esa funcionalidad en la siguiente sección.
 
 1. Abre el archivo `app.component.html` y agrega el siguiente HTML debajo del título.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="nav"/>
 
     Este HTML usa una directiva de Angular, `routerLink`.
     Esta directiva conecta las rutas que definiste a tus archivos de plantilla.
@@ -185,7 +185,7 @@ Agregarás esa funcionalidad en la siguiente sección.
 
 1. Abre el archivo `app.component.css` y agrega los siguientes estilos.
 
-    <docs-code header="src/app/app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
+    <docs-code header="app.component.css" path="adev/src/content/examples/router-tutorial/src/app/app.component.css"/>
 
 Si visualizas tu aplicación en el navegador, deberías ver estos dos enlaces.
 Cuando haces clic en un enlace, aparece el componente correspondiente.
@@ -198,7 +198,8 @@ Agrega esta funcionalidad usando la directiva `routerLinkActive` de Angular.
 1. Desde tu editor de código, abre el archivo `app.component.html`.
 1. Actualiza las etiquetas anchor para incluir la directiva `routerLinkActive`.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/router-tutorial/src/app/app.component.html" visibleRegion="routeractivelink"/>
+    
 1. Agrega la directiva `RouterLinkActive` a la lista de `imports` de `AppComponent` en `app.component.ts`.
 
 Visualiza tu aplicación nuevamente.
@@ -222,9 +223,9 @@ En este paso del tutorial, agregas una ruta que redirige al usuario para mostrar
     Nota que esta nueva ruta usa un string vacío como su ruta.
     Además, reemplaza la propiedad `component` con dos nuevas:
 
-    | Propiedades   | Detalles |
-    |:---        |:---    |
-    | `redirectTo` | Esta propiedad instruye a Angular a redirigir desde una ruta vacía a la ruta `heroes-list`.                                                                                                                                                       |
+    | Propiedades  | Detalles                                                                                                                                                                                                                                                                                                                        |
+    |:-----------  |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `redirectTo` | Esta propiedad instruye a Angular a redirigir desde una ruta vacía a la ruta `heroes-list`.                                                                                                                                                                                                                                     |
     | `pathMatch`  | Esta propiedad instruye a Angular sobre cuánto de la URL debe coincidir. Para este tutorial, deberías establecer esta propiedad en `full`. Esta estrategia se recomienda cuando tienes un string vacío para una ruta. Para más información sobre esta propiedad, consulta la [documentación de la API Route](api/router/Route). |
 
 Ahora cuando abres tu aplicación, muestra el componente `heroes-list` por defecto.
@@ -237,9 +238,9 @@ En esta sección, crearás una página 404 y actualizarás tu configuración de
 
 1. Desde la terminal, crea un nuevo componente, `PageNotFound`.
 
-    <docs-code language="shell">
+    ```shell
     ng generate component page-not-found
-    </docs-code>
+    ```
 
 1. Desde tu editor de código, abre el archivo `page-not-found.component.html` y reemplaza su contenido con el siguiente HTML.
 
diff --git a/adev-es/src/content/guide/routing/routing-with-urlmatcher.en.md b/adev-es/src/content/guide/routing/routing-with-urlmatcher.en.md
index 2368c3f..33e4370 100644
--- a/adev-es/src/content/guide/routing/routing-with-urlmatcher.en.md
+++ b/adev-es/src/content/guide/routing/routing-with-urlmatcher.en.md
@@ -13,35 +13,35 @@ Implement Angular's `UrlMatcher` to create a custom route matcher.
 
 ## Create a sample application
 
-Using the Angular CLI, create a new application, *angular-custom-route-match*.
-In addition to the default Angular application framework, you will also create a *profile* component.
+Using the Angular CLI, create a new application, _angular-custom-route-match_.
+In addition to the default Angular application framework, you will also create a _profile_ component.
 
-1. Create a new Angular project, *angular-custom-route-match*.
+1. Create a new Angular project, _angular-custom-route-match_.
 
-    ```shell
-    ng new angular-custom-route-match
-    ```
+   ```shell
+   ng new angular-custom-route-match
+   ```
 
-    When prompted with `Would you like to add Angular routing?`, select `Y`.
+   When prompted with `Would you like to add Angular routing?`, select `Y`.
 
-    When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
+   When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
 
-    After a few moments, a new project, `angular-custom-route-match`, is ready.
+   After a few moments, a new project, `angular-custom-route-match`, is ready.
 
 1. From your terminal, navigate to the `angular-custom-route-match` directory.
-1. Create a component, *profile*.
+1. Create a component, _profile_.
 
-    ```shell
-    ng generate component profile
-    ```
+   ```shell
+   ng generate component profile
+   ```
 
 1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
+   <docs-code header="profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
 
 1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
+   <docs-code header="app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
 
 ## Configure your routes for your application
 
@@ -52,24 +52,24 @@ This handle is identified by a preceding `@` symbol.
 1. In your code editor, open your `app.config.ts` file.
 1. Add an `import` statement for Angular's `provideRouter` and `withComponentInputBinding` as well as the application routes.
 
-    ```ts
-    import {provideRouter, withComponentInputBinding} from '@angular/router';
+   ```ts
+   import {provideRouter, withComponentInputBinding} from '@angular/router';
 
-    import {routes} from './app.routes';
-    ```
+   import {routes} from './app.routes';
+   ```
 
 1. In the providers array, add a `provideRouter(routes, withComponentInputBinding())` statement.
 
 1. Define the custom route matcher by adding the following code to the application routes.
 
-    <docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
+   <docs-code header="app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
 
 This custom matcher is a function that performs the following tasks:
 
-* The matcher verifies that the array contains only one segment
-* The matcher employs a regular expression to ensure that the format of the username is a match
-* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path
-* If there isn't a match, the function returns null and the router continues to look for other routes that match the URL
+- The matcher verifies that the array contains only one segment
+- The matcher employs a regular expression to ensure that the format of the username is a match
+- If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path
+- If there isn't a match, the function returns null and the router continues to look for other routes that match the URL
 
 HELPFUL: A custom URL matcher behaves like any other route definition. Define child routes or lazy loaded routes as you would with any other route.
 
@@ -77,12 +77,12 @@ HELPFUL: A custom URL matcher behaves like any other route definition. Define ch
 
 With the custom matcher in place, you can now bind the route parameter in the `profile` component.
 
-In your code editor, open your `profile.component.ts` file and create an `Input` matching the `username` parameter.
+In your code editor, open your `profile.component.ts` file and create an `input` matching the `username` parameter.
 We added the `withComponentInputBinding` feature earlier
 in `provideRouter`. This allows the `Router` to bind information directly to the route components.
 
 ```ts
-@Input() username!: string;
+username = input.required<string>();
 ```
 
 ## Test your custom URL matcher
@@ -91,17 +91,17 @@ With your code in place, you can now test your custom URL matcher.
 
 1. From a terminal window, run the `ng serve` command.
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+   ```shell
+   ng serve
+   ```
 
 1. Open a browser to `http://localhost:4200`.
 
-    You should see a single web page, consisting of a sentence that reads `Navigate to my profile`.
+   You should see a single web page, consisting of a sentence that reads `Navigate to my profile`.
 
 1. Click the **my profile** hyperlink.
 
-    A new sentence, reading `Hello, Angular!` appears on the page.
+   A new sentence, reading `Hello, Angular!` appears on the page.
 
 ## Next steps
 
diff --git a/adev-es/src/content/guide/routing/routing-with-urlmatcher.md b/adev-es/src/content/guide/routing/routing-with-urlmatcher.md
index 055ba0d..3d1dce9 100644
--- a/adev-es/src/content/guide/routing/routing-with-urlmatcher.md
+++ b/adev-es/src/content/guide/routing/routing-with-urlmatcher.md
@@ -13,35 +13,35 @@ Implementar `UrlMatcher` de Angular para crear un matcher de ruta personalizado.
 
 ## Crear una aplicación de ejemplo
 
-Usando Angular CLI, crea una nueva aplicación, *angular-custom-route-match*.
-Además del framework de aplicación Angular predeterminado, también crearás un componente *profile*.
+Usando Angular CLI, crea una nueva aplicación, _angular-custom-route-match_.
+Además del framework de aplicación Angular predeterminado, también crearás un componente _profile_.
 
-1. Crea un nuevo proyecto Angular, *angular-custom-route-match*.
+1. Crea un nuevo proyecto Angular, _angular-custom-route-match_.
 
-    ```shell
-    ng new angular-custom-route-match
-    ```
+   ```shell
+   ng new angular-custom-route-match
+   ```
 
-    Cuando se te pregunte `Would you like to add Angular routing?`, selecciona `Y`.
+   Cuando se te pregunte `Would you like to add Angular routing?`, selecciona `Y`.
 
-    Cuando se te pregunte `Which stylesheet format would you like to use?`, selecciona `CSS`.
+   Cuando se te pregunte `Which stylesheet format would you like to use?`, selecciona `CSS`.
 
-    Después de unos momentos, un nuevo proyecto, `angular-custom-route-match`, estará listo.
+   Después de unos momentos, un nuevo proyecto, `angular-custom-route-match`, estará listo.
 
 1. Desde tu terminal, navega al directorio `angular-custom-route-match`.
-1. Crea un componente, *profile*.
+1. Crea un componente, _profile_.
 
-    ```shell
-    ng generate component profile
-    ```
+   ```shell
+   ng generate component profile
+   ```
 
 1. En tu editor de código, localiza el archivo `profile.component.html` y reemplaza el contenido placeholder con el siguiente HTML.
 
-    <docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
+    <docs-code header="profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
 
 1. En tu editor de código, localiza el archivo `app.component.html` y reemplaza el contenido placeholder con el siguiente HTML.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
+    <docs-code header="app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
 
 ## Configurar las rutas para tu aplicación
 
@@ -52,24 +52,24 @@ Este handle se identifica por un símbolo `@` precedente.
 1. En tu editor de código, abre tu archivo `app.config.ts`.
 1. Agrega una declaración `import` para `provideRouter` y `withComponentInputBinding` de Angular, así como las rutas de la aplicación.
 
-    ```ts
-    import {provideRouter, withComponentInputBinding} from '@angular/router';
+   ```ts
+   import {provideRouter, withComponentInputBinding} from '@angular/router';
 
-    import {routes} from './app.routes';
-    ```
+   import {routes} from './app.routes';
+   ```
 
 1. En el array de providers, agrega una declaración `provideRouter(routes, withComponentInputBinding())`.
 
 1. Define el matcher de ruta personalizado agregando el siguiente código a las rutas de la aplicación.
 
-    <docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
+    <docs-code header="app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
 
 Este matcher personalizado es una función que realiza las siguientes tareas:
 
-* El matcher verifica que el array contiene solo un segmento
-* El matcher emplea una expresión regular para asegurar que el formato del nombre de usuario coincida
-* Si hay una coincidencia, la función retorna la URL completa, definiendo un parámetro de ruta `username` como una subcadena de la ruta
-* Si no hay coincidencia, la función retorna null y el router continúa buscando otras rutas que coincidan con la URL
+- El matcher verifica que el array contiene solo un segmento
+- El matcher emplea una expresión regular para asegurar que el formato del nombre de usuario coincida
+- Si hay una coincidencia, la función retorna la URL completa, definiendo un parámetro de ruta `username` como una subcadena de la ruta
+- Si no hay coincidencia, la función retorna null y el router continúa buscando otras rutas que coincidan con la URL
 
 ÚTIL: Un matcher de URL personalizado se comporta como cualquier otra definición de ruta. Define rutas hijo o rutas con lazy loading como lo harías con cualquier otra ruta.
 
@@ -77,12 +77,12 @@ Este matcher personalizado es una función que realiza las siguientes tareas:
 
 Con el matcher personalizado en su lugar, ahora puedes vincular el parámetro de ruta en el componente `profile`.
 
-En tu editor de código, abre tu archivo `profile.component.ts` y crea un `Input` que coincida con el parámetro `username`.
+En tu editor de código, abre tu archivo `profile.component.ts` y crea un `input` que coincida con el parámetro `username`.
 Agregamos la característica `withComponentInputBinding` anteriormente
 en `provideRouter`. Esto permite que el `Router` vincule información directamente a los componentes de ruta.
 
 ```ts
-@Input() username!: string;
+username = input.required<string>();
 ```
 
 ## Probar tu matcher de URL personalizado
@@ -91,17 +91,17 @@ Con tu código en su lugar, ahora puedes probar tu matcher de URL personalizado.
 
 1. Desde una ventana de terminal, ejecuta el comando `ng serve`.
 
-    <docs-code language="shell">
+    ```shell
     ng serve
-    </docs-code>
+    ```
 
 1. Abre un navegador en `http://localhost:4200`.
 
-    Deberías ver una sola página web, consistiendo en una oración que dice `Navigate to my profile`.
+   Deberías ver una sola página web, consistiendo en una oración que dice `Navigate to my profile`.
 
 1. Haz clic en el hipervínculo **my profile**.
 
-    Una nueva oración, que dice `Hello, Angular!` aparece en la página.
+   Una nueva oración, que dice `Hello, Angular!` aparece en la página.
 
 ## Próximos pasos
 
diff --git a/adev-es/src/content/guide/routing/show-routes-with-outlets.en.md b/adev-es/src/content/guide/routing/show-routes-with-outlets.en.md
index 3b82895..3b74649 100644
--- a/adev-es/src/content/guide/routing/show-routes-with-outlets.en.md
+++ b/adev-es/src/content/guide/routing/show-routes-with-outlets.en.md
@@ -8,7 +8,7 @@ The `RouterOutlet` directive is a placeholder that marks the location where the
 <app-footer />
 ```
 
-```angular-ts
+```ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -23,7 +23,7 @@ export class AppComponent {}
 
 In this example, if an application has the following routes defined:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ProductsComponent } from './products/products.component';
@@ -81,7 +81,7 @@ As your application grows more complex, you might want to create routes that are
 
 These types of nested routes are called child routes. This means you're adding a second `<router-outlet>` to your app, because it is in addition to the `<router-outlet>` in AppComponent.
 
-In this example, the `Settings` component will display the desired panel based on what the user selects. One of the unique things you'll notice about child routes is that the component often has its own `<nav>` and `<router-outlet>`.
+In this example, the `Settings` component will display the desired panel based on what the user selects. One of the unique things you’ll notice about child routes is that the component often has its own `<nav>` and `<router-outlet>`.
 
 ```angular-html
 <h1>Settings</h1>
@@ -96,7 +96,7 @@ In this example, the `Settings` component will display the desired panel based o
 
 A child route is like any other route, in that it needs both a `path` and a `component`. The one difference is that you place child routes in a children array within the parent route.
 
-```angular-ts
+```ts
 const routes: Routes = [
   {
     path: 'settings-component',
@@ -133,7 +133,7 @@ Each outlet must have a unique name. The name cannot be set or changed dynamical
 
 Angular matches the outlet's name to the `outlet` property defined on each route:
 
-```angular-ts
+```ts
 {
   path: 'user/:id',
   component: UserDetails,
@@ -163,7 +163,47 @@ You can add event listeners with the standard event binding syntax:
 />
 ```
 
-Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if you'd like to learn more.
+Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if you’d like to learn more.
+
+## Passing contextual data to routed components
+
+Passing contextual data to routed components often requires global state or complicated route configurations. To make this easier, each `RouterOutlet` supports a `routerOutletData` input. Routed components and their children can read this data as a signal using the `ROUTER_OUTLET_DATA` injection token, allowing outlet-specific configuration without modifying route definitions.
+
+```angular-ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [RouterOutlet],
+  template: `
+    <h2>Dashboard</h2>
+    <router-outlet [routerOutletData]="{ layout: 'sidebar' }" />
+  `,
+})
+export class DashboardComponent {}
+```
+
+The routed component can inject the provided outlet data using `ROUTER_OUTLET_DATA`:
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { ROUTER_OUTLET_DATA } from '@angular/router';
+
+@Component({
+  selector: 'app-stats',
+  template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
+})
+export class StatsComponent {
+  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>;
+}
+```
+
+When Angular activates the `StatsComponent` in that outlet, it receives `{ layout: 'sidebar' }` as injected data.
+
+NOTE: When the `routerOutletData` input is unset, the injected value is null by default.
+
+---
 
 ## Next steps
 
diff --git a/adev-es/src/content/guide/routing/show-routes-with-outlets.md b/adev-es/src/content/guide/routing/show-routes-with-outlets.md
index 7cfd21d..9809491 100644
--- a/adev-es/src/content/guide/routing/show-routes-with-outlets.md
+++ b/adev-es/src/content/guide/routing/show-routes-with-outlets.md
@@ -8,7 +8,7 @@ La directiva `RouterOutlet` es un marcador de posición que marca la ubicación
 <app-footer />
 ```
 
-```angular-ts
+```ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -23,7 +23,7 @@ export class AppComponent {}
 
 En este ejemplo, si una aplicación tiene las siguientes rutas definidas:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ProductsComponent } from './products/products.component';
@@ -96,7 +96,7 @@ En este ejemplo, el componente `Settings` mostrará el panel deseado según lo q
 
 Una ruta hija es como cualquier otra ruta, en que necesita tanto un `path` como un `component`. La única diferencia es que colocas las rutas hijas en un array children dentro de la ruta padre.
 
-```angular-ts
+```ts
 const routes: Routes = [
   {
     path: 'settings-component',
@@ -165,6 +165,46 @@ Puedes agregar escuchadores de eventos con la sintaxis estándar de vinculación
 
 Consulta la [documentación de la API para RouterOutlet](/api/router/RouterOutlet?tab=api) si deseas aprender más.
 
+## Pasar datos contextuales a componentes enrutados
+
+Pasar datos contextuales a componentes enrutados a menudo requiere estado global o configuraciones de ruta complicadas. Para facilitar esto, cada `RouterOutlet` soporta un input `routerOutletData`. Los componentes enrutados y sus hijos pueden leer estos datos como un signal usando el token de inyección `ROUTER_OUTLET_DATA`, permitiendo configuración específica del outlet sin modificar definiciones de ruta.
+
+```angular-ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [RouterOutlet],
+  template: `
+    <h2>Dashboard</h2>
+    <router-outlet [routerOutletData]="{ layout: 'sidebar' }" />
+  `,
+})
+export class DashboardComponent {}
+```
+
+El componente enrutado puede inyectar los datos del outlet proporcionados usando `ROUTER_OUTLET_DATA`:
+
+```angular-ts
+import { Component, inject } from '@angular/core';
+import { ROUTER_OUTLET_DATA } from '@angular/router';
+
+@Component({
+  selector: 'app-stats',
+  template: `<p>Stats view (layout: {{ outletData().layout }})</p>`,
+})
+export class StatsComponent {
+  outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ layout: string }>;
+}
+```
+
+Cuando Angular activa el `StatsComponent` en ese outlet, recibe `{ layout: 'sidebar' }` como datos inyectados.
+
+NOTA: Cuando el input `routerOutletData` no está establecido, el valor inyectado es null por defecto.
+
+---
+
 ## Próximos pasos
 
 Aprende cómo [navegar a rutas](/guide/routing/navigate-to-routes) con Angular Router.
diff --git a/adev-es/src/content/guide/routing/testing.en.md b/adev-es/src/content/guide/routing/testing.en.md
index 5a1f2fe..c231e55 100644
--- a/adev-es/src/content/guide/routing/testing.en.md
+++ b/adev-es/src/content/guide/routing/testing.en.md
@@ -46,7 +46,7 @@ describe('UserProfile', () => {
 });
 ```
 
-```ts
+```angular-ts
 // user-profile.component.ts
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -186,7 +186,7 @@ describe('App Router Outlet', () => {
 });
 ```
 
-```ts
+```angular-ts
 // app.component.ts
 import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
@@ -254,7 +254,7 @@ describe('Nested Routes', () => {
 });
 ```
 
-```ts
+```angular-ts
 // nested-components.ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
@@ -314,7 +314,7 @@ describe('Search', () => {
 });
 ```
 
-```ts
+```angular-ts
 // search.component.ts
 import { Component, inject, computed } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
diff --git a/adev-es/src/content/guide/routing/testing.md b/adev-es/src/content/guide/routing/testing.md
index 18e1c8f..41f068d 100644
--- a/adev-es/src/content/guide/routing/testing.md
+++ b/adev-es/src/content/guide/routing/testing.md
@@ -46,7 +46,7 @@ describe('UserProfile', () => {
 });
 ```
 
-```ts
+```angular-ts
 // user-profile.component.ts
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -186,7 +186,7 @@ describe('App Router Outlet', () => {
 });
 ```
 
-```ts
+```angular-ts
 // app.component.ts
 import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
@@ -254,7 +254,7 @@ describe('Nested Routes', () => {
 });
 ```
 
-```ts
+```angular-ts
 // nested-components.ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
@@ -314,7 +314,7 @@ describe('Search', () => {
 });
 ```
 
-```ts
+```angular-ts
 // search.component.ts
 import { Component, inject, computed } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
diff --git a/adev-es/src/content/guide/security.md b/adev-es/src/content/guide/security.md
index 6ad5dff..65150b8 100644
--- a/adev-es/src/content/guide/security.md
+++ b/adev-es/src/content/guide/security.md
@@ -51,7 +51,7 @@ For this reason, it is strongly encouraged to take advantage of these features.
 
 ### Sanitization and security contexts
 
-*Sanitization* is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM.
+_Sanitization_ is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM.
 In many cases, sanitization doesn't change a value at all.
 Sanitization depends on a context.
 For example, a value that's harmless in CSS is potentially dangerous in a URL.
@@ -72,7 +72,7 @@ In development mode, Angular prints a console warning when it has to change a va
 
 The following template binds the value of `htmlSnippet`. Once by interpolating it into an element's content, and once by binding it to the `innerHTML` property of an element:
 
-<docs-code header="src/app/inner-html-binding.component.html" path="adev/src/content/examples/security/src/app/inner-html-binding.component.html"/>
+<docs-code header="inner-html-binding.component.html" path="adev/src/content/examples/security/src/app/inner-html-binding.component.html"/>
 
 Interpolated content is always escaped —the HTML isn't interpreted and the browser displays angle brackets in the element's text content.
 
@@ -80,7 +80,7 @@ For the HTML to be interpreted, bind it to an HTML property such as `innerHTML`.
 Be aware that binding a value that an attacker might control into `innerHTML` normally causes an XSS vulnerability.
 For example, one could run JavaScript in a following way:
 
-<docs-code header="src/app/inner-html-binding.component.ts (class)" path="adev/src/content/examples/security/src/app/inner-html-binding.component.ts" visibleRegion="class"/>
+<docs-code header="inner-html-binding.component.ts (class)" path="adev/src/content/examples/security/src/app/inner-html-binding.component.ts" visibleRegion="class"/>
 
 Angular recognizes the value as unsafe and automatically sanitizes it, which removes the `script` element but keeps safe content such as the `<b>` element.
 
@@ -107,21 +107,21 @@ If in doubt, find a professional security reviewer.
 
 To mark a value as trusted, inject `DomSanitizer` and call one of the following methods:
 
-* `bypassSecurityTrustHtml`
-* `bypassSecurityTrustScript`
-* `bypassSecurityTrustStyle`
-* `bypassSecurityTrustUrl`
-* `bypassSecurityTrustResourceUrl`
+- `bypassSecurityTrustHtml`
+- `bypassSecurityTrustScript`
+- `bypassSecurityTrustStyle`
+- `bypassSecurityTrustUrl`
+- `bypassSecurityTrustResourceUrl`
 
 Remember, whether a value is safe depends on context, so choose the right context for your intended use of the value.
 Imagine that the following template needs to bind a URL to a `javascript:alert(...)` call:
 
-<docs-code header="src/app/bypass-security.component.html (URL)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="URL"/>
+<docs-code header="bypass-security.component.html (URL)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="URL"/>
 
 Normally, Angular automatically sanitizes the URL, disables the dangerous code, and in development mode, logs this action to the console.
 To prevent this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` call:
 
-<docs-code header="src/app/bypass-security.component.ts (trust-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-url"/>
+<docs-code header="bypass-security.component.ts (trust-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-url"/>
 
 <img alt="A screenshot showing an alert box created from a trusted URL" src="assets/images/guide/security/bypass-security-component.png#medium">
 
@@ -130,9 +130,9 @@ The following template lets users enter a YouTube video ID and load the correspo
 The `<iframe src>` attribute is a resource URL security context, because an untrusted source can, for example, smuggle in file downloads that unsuspecting users could run.
 To prevent this, call a method on the component to construct a trusted video URL, which causes Angular to let binding into `<iframe src>`:
 
-<docs-code header="src/app/bypass-security.component.html (iframe)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="iframe"/>
+<docs-code header="bypass-security.component.html (iframe)" path="adev/src/content/examples/security/src/app/bypass-security.component.html" visibleRegion="iframe"/>
 
-<docs-code header="src/app/bypass-security.component.ts (trust-video-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-video-url"/>
+<docs-code header="bypass-security.component.ts (trust-video-url)" path="adev/src/content/examples/security/src/app/bypass-security.component.ts" visibleRegion="trust-video-url"/>
 
 ### Content security policy
 
@@ -142,21 +142,19 @@ Read more about content security policy at the [Web Fundamentals guide](https://
 
 The minimal policy required for a brand-new Angular application is:
 
-<docs-code language="text">
-
+```txt
 default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'self' 'nonce-randomNonceGoesHere';
+```
 
-</docs-code>
-
-When serving your Angular application, the server should include a  randomly-generated nonce in the HTTP header for each request.
+When serving your Angular application, the server should include a randomly-generated nonce in the HTTP header for each request.
 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 two ways:
 
+1. Set the `autoCsp` option to `true` 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.
-2. 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`.
-
-<docs-code language="typescript">
+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`.
 
+```ts
 import {bootstrapApplication, CSP_NONCE} from '@angular/core';
 import {AppComponent} from './app/app.component';
 
@@ -166,8 +164,7 @@ bootstrapApplication(AppComponent, {
     useValue: globalThis.myRandomNonceValue
   }]
 });
-
-</docs-code>
+```
 
 <docs-callout title="Unique nonces">
 
@@ -176,6 +173,8 @@ If an attacker can predict future nonces, they can circumvent the protections of
 
 </docs-callout>
 
+NOTE: If you want to [inline the critical CSS](/tools/cli/build#critical-css-inlining) of your application, you can not use the `CSP_NONCE` token, and should prefer the `autoCsp` option or set the `ngCspNonce` attribute on the root application element.
+
 If you cannot generate nonces in your project, you can allow inline styles by adding `'unsafe-inline'` to the `style-src` section of the CSP header.
 
 | Sections                                         | Details                                                                                                                                                                                                         |
@@ -209,45 +208,37 @@ To enforce Trusted Types for your application, you must configure your applicati
 | `angular#bundler`        | This policy is used by the Angular CLI bundler when creating lazy chunk files.                                                                                                                                                                                                             |
 | `angular#unsafe-bypass`  | This policy is used for applications that use any of the methods in Angular's [DomSanitizer](api/platform-browser/DomSanitizer) that bypass security, such as `bypassSecurityTrustHtml`. Any application that uses these methods must enable this policy.                                  |
 | `angular#unsafe-jit`     | This policy is used by the [Just-In-Time (JIT) compiler](api/core/Compiler). You must enable this policy if your application interacts directly with the JIT compiler or is running in JIT mode using the [platform browser dynamic](api/platform-browser-dynamic/platformBrowserDynamic). |
-| `angular#unsafe-upgrade` | This policy is used by the [@angular/upgrade](api/upgrade/static/UpgradeModule) package. You must enable this policy if your application is an AngularJS hybrid. |
+| `angular#unsafe-upgrade` | This policy is used by the [@angular/upgrade](api/upgrade/static/UpgradeModule) package. You must enable this policy if your application is an AngularJS hybrid.                                                                                                                           |
 
 You should configure the HTTP headers for Trusted Types in the following locations:
 
-* Production serving infrastructure
-* Angular CLI \(`ng serve`\), using the `headers` property in the `angular.json` file, for local development and end-to-end testing
-* Karma \(`ng test`\), using the `customHeaders` property in the `karma.config.js` file, for unit testing
+- Production serving infrastructure
+- Angular CLI \(`ng serve`\), using the `headers` property in the `angular.json` file, for local development and end-to-end testing
+- Karma \(`ng test`\), using the `customHeaders` property in the `karma.config.js` file, for unit testing
 
 The following is an example of a header specifically configured for Trusted Types and Angular:
 
-<docs-code language="html">
-
+```html
 Content-Security-Policy: trusted-types angular; require-trusted-types-for 'script';
-
-</docs-code>
+```
 
 An example of a header specifically configured for Trusted Types and Angular applications that use any of Angular's methods in [DomSanitizer](api/platform-browser/DomSanitizer) that bypasses security:
 
-<docs-code language="html">
-
+```html
 Content-Security-Policy: trusted-types angular angular#unsafe-bypass; require-trusted-types-for 'script';
-
-</docs-code>
+```
 
 The following is an example of a header specifically configured for Trusted Types and Angular applications using JIT:
 
-<docs-code language="html">
-
+```html
 Content-Security-Policy: trusted-types angular angular#unsafe-jit; require-trusted-types-for 'script';
-
-</docs-code>
+```
 
 The following is an example of a header specifically configured for Trusted Types and Angular applications that use lazy loading of modules:
 
-<docs-code language="html">
-
+```html
 Content-Security-Policy: trusted-types angular angular#bundler; require-trusted-types-for 'script';
-
-</docs-code>
+```
 
 <docs-callout title="Community contributions">
 
@@ -328,7 +319,7 @@ If your backend service uses different names for the XSRF token cookie or header
 
 Add it to the `provideHttpClient` call as follows:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -339,13 +330,13 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
 ### Disabling XSRF protection
 
 If the built-in XSRF protection mechanism doesn't work for your application, you can disable it using the `withNoXsrfProtection` feature:
 
-<docs-code language="ts">
+```ts
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(
@@ -353,12 +344,12 @@ export const appConfig: ApplicationConfig = {
     ),
   ]
 };
-</docs-code>
+```
 
 For information about CSRF at the Open Web Application Security Project \(OWASP\), see [Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf) and [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
 The Stanford University paper [Robust Defenses for Cross-Site Request Forgery](https://seclab.stanford.edu/websec/csrf/csrf.pdf) is a rich source of detail.
 
-See also Dave Smith's [talk on XSRF at AngularConnect 2016](https://www.youtube.com/watch?v=9inczw6qtpY "Cross Site Request Funkery Securing Your Angular Apps From Evil Doers").
+See also Dave Smith's [talk on XSRF at AngularConnect 2016](https://www.youtube.com/watch?v=9inczw6qtpY 'Cross Site Request Funkery Securing Your Angular Apps From Evil Doers').
 
 ### Cross-site script inclusion (XSSI)
 
diff --git a/adev-es/src/content/guide/signals/linked-signal.en.md b/adev-es/src/content/guide/signals/linked-signal.en.md
index ac13187..e9e86b2 100644
--- a/adev-es/src/content/guide/signals/linked-signal.en.md
+++ b/adev-es/src/content/guide/signals/linked-signal.en.md
@@ -108,7 +108,7 @@ The `source` can be any signal, such as a `computed` or component `input`. When
 
 The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous value of the `linkedSignal`. You can use these previous values to decide the new result of the computation.
 
-HELPFUL: When using the `previous` parameter, it is necessary to provide the generic type arguments of `linkedSignal` explicitly. The first generic type corresponds with the type of `source` and the second generic type determines the output type of `computation`.  
+HELPFUL: When using the `previous` parameter, it is necessary to provide the generic type arguments of `linkedSignal` explicitly. The first generic type corresponds with the type of `source` and the second generic type determines the output type of `computation`.
 
 ## Custom equality comparison
 
diff --git a/adev-es/src/content/guide/signals/linked-signal.md b/adev-es/src/content/guide/signals/linked-signal.md
index d097573..1333ca0 100644
--- a/adev-es/src/content/guide/signals/linked-signal.md
+++ b/adev-es/src/content/guide/signals/linked-signal.md
@@ -108,7 +108,7 @@ La `source` puede ser cualquier signal, como un `computed` o `input` de componen
 
 El `computation` es una función que recibe el nuevo valor de `source` y un objeto `previous`. El objeto `previous` tiene dos propiedades, `previous.source` es el valor anterior de `source`, y `previous.value` es el valor de anterior de `linkedSignal`. Puedes usar estos valores anteriores para decidir el nuevo resultado del cómputo.
 
-ÚTIL: Cuando uses el parámetro `previous`, es necesario proporcionar explícitamente los argumentos de tipo genérico de `linkedSignal`. El primer tipo genérico corresponde con el tipo de `source` y el segundo tipo genérico determina el tipo de salida del `cómputo`.
+CONSEJO: Cuando uses el parámetro `previous`, es necesario proporcionar explícitamente los argumentos de tipo genérico de `linkedSignal`. El primer tipo genérico corresponde con el tipo de `source` y el segundo tipo genérico determina el tipo de salida del `computation`.
 
 ## Comparación de igualdad personalizada
 
diff --git a/adev-es/src/content/guide/signals/overview.en.md b/adev-es/src/content/guide/signals/overview.en.md
index ccd4ba2..3fcc0e3 100644
--- a/adev-es/src/content/guide/signals/overview.en.md
+++ b/adev-es/src/content/guide/signals/overview.en.md
@@ -195,6 +195,29 @@ Equality functions can be provided to both writable and computed signals.
 
 HELPFUL: By default, signals use referential equality ([`Object.is()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison).
 
+### Type checking signals
+
+You can use `isSignal` to check if a value is a `Signal`:
+
+```ts
+const count = signal(0);
+const doubled = computed(() => count() * 2);
+
+isSignal(count); // true
+isSignal(doubled); // true
+isSignal(42); // false
+```
+
+To specifically check if a signal is writable, use `isWritableSignal`:
+
+```ts
+const count = signal(0);
+const doubled = computed(() => count() * 2);
+
+isWritableSignal(count); // true
+isWritableSignal(doubled); // false
+```
+
 ### Reading without tracking dependencies
 
 Rarely, you may want to execute code which may read signals within a reactive function such as `computed` or `effect` _without_ creating a dependency.
diff --git a/adev-es/src/content/guide/signals/overview.md b/adev-es/src/content/guide/signals/overview.md
index 9a27257..3918a7b 100644
--- a/adev-es/src/content/guide/signals/overview.md
+++ b/adev-es/src/content/guide/signals/overview.md
@@ -1,8 +1,8 @@
 <docs-decorative-header title="Angular Signals" imgSrc="adev/src/assets/images/signals.svg"> <!-- markdownlint-disable-line -->
-Las Signals en Angular son un sistema que raestrea granularmente cómo y dónde se usa tu estado a lo largo de una aplicación, permitiendo al framework optimizar las actualizaciones de renderizado.
+Las Signals en Angular son un sistema que rastrea granularmente cómo y dónde se usa tu estado a lo largo de una aplicación, permitiendo al framework optimizar las actualizaciones de renderizado.
 </docs-decorative-header>
 
-SUGERENCIA: Revisa los [Fundamentos](essentials/signals) de Angular antes de profundizar en esta guía completa.
+CONSEJO: Revisa los [Fundamentos](essentials/signals) de Angular antes de profundizar en esta guía completa.
 
 ## ¿Qué son las Signals?
 
@@ -10,7 +10,7 @@ Una **signal** es un contenedor alrededor de un valor que notifica a los consumi
 
 Lees el valor de una signal llamando a su función getter, lo que permite a Angular rastrear dónde se usa la signal.
 
-Las signals puede ser Escribibles (_writable_) o Solo Lectura (_read-only_).
+Las signals pueden ser Escribibles (_writable_) o Solo Lectura (_read-only_).
 
 ### Signals escribibles (_writable_)
 
@@ -36,11 +36,11 @@ O usa la operación `.update()` para calcular un nuevo valor desde el anterior:
 count.update(value => value + 1);
 ```
 
-Las signals escribibles tiene el tipo `WritableSignal`.
+Las signals escribibles tienen el tipo `WritableSignal`.
 
 ### Signals computadas
 
-Las **Signals computadas** son signals de solo lectura que derivan su valor de otras signals. Defines signals computadas usando la función `computed` and especificando una derivación.
+Las **signals computadas** son signals de solo lectura que derivan su valor de otras signals. Defines signals computadas usando la función `computed` y especificando una derivación.
 
 ```typescript
 const count: WritableSignal<number> = signal(0);
@@ -49,9 +49,9 @@ const doubleCount: Signal<number> = computed(() => count() * 2);
 La signals `doubleCount` depende de la signal `count`.
 Cada vez que la signal `count` se actualiza, Angular sabe que `doubleCount` también necesita actualizarse.
 
-#### Signals computadas se evalún y memorizan de forma perezosa
+#### Signals computadas se evalúan y memorizan de forma perezosa
 
-La functión de derivación de `doubleCount` no se ejecuta para calcular su valor hasta la primera que vez que lees `doubleCount`. El valor calculado se almacena en caché, y si lees `doubleCount` nuevamente, devolverá el valor en caché sin recalcular.
+La función de derivación de `doubleCount` no se ejecuta para calcular su valor hasta la primera vez que lees `doubleCount`. El valor calculado se almacena en caché, y si lees `doubleCount` nuevamente, devolverá el valor en caché sin recalcular.
 
 Si luego cambias `count`, Angular sabe que el valor en caché de `doubleCount` ya no es válido, y la próxima vez que leas `doubleCount` se calculará su nuevo valor.
 
@@ -193,7 +193,30 @@ data.set(['test']);
 
 Las funciones de igualdad pueden ser proporcionadas tanto a signals escribibles como computadas.
 
-ÚTIL: Por defecto, las signals usan igualdad referencial (comparación [`Object.is()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/is)).
+CONSEJO: Por defecto, las signals usan igualdad referencial (comparación [`Object.is()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/is)).
+
+### Verificación de tipos de signals
+
+Puedes usar `isSignal` para verificar si un valor es una `Signal`:
+
+```ts
+const count = signal(0);
+const doubled = computed(() => count() * 2);
+
+isSignal(count); // true
+isSignal(doubled); // true
+isSignal(42); // false
+```
+
+Para verificar específicamente si una signal es escribible, usa `isWritableSignal`:
+
+```ts
+const count = signal(0);
+const doubled = computed(() => count() * 2);
+
+isWritableSignal(count); // true
+isWritableSignal(doubled); // false
+```
 
 ### Leer sin rastrear dependencias
 
diff --git a/adev-es/src/content/guide/signals/resource.en.md b/adev-es/src/content/guide/signals/resource.en.md
index 44c5efb..2db8fe5 100644
--- a/adev-es/src/content/guide/signals/resource.en.md
+++ b/adev-es/src/content/guide/signals/resource.en.md
@@ -115,7 +115,7 @@ The `status` signal provides a specific `ResourceStatus` that describes the stat
 | ------------- | :---------------- | ---------------------------------------------------------------------------- |
 | `'idle'`      | `undefined`       | The resource has no valid request and the loader has not run.                |
 | `'error'`     | `undefined`       | The loader has encountered an error.                                         |
-| `'loading'`   | `undefined`       | The loader is running as a result of the `params` value changing.           |
+| `'loading'`   | `undefined`       | The loader is running as a result of the `params` value changing.            |
 | `'reloading'` | Previous value    | The loader is running as a result calling of the resource's `reload` method. |
 | `'resolved'`  | Resolved value    | The loader has completed.                                                    |
 | `'local'`     | Locally set value | The resource's value has been set locally via `.set()` or `.update()`        |
diff --git a/adev-es/src/content/guide/signals/resource.md b/adev-es/src/content/guide/signals/resource.md
index 7d466a6..b6fe200 100644
--- a/adev-es/src/content/guide/signals/resource.md
+++ b/adev-es/src/content/guide/signals/resource.md
@@ -55,7 +55,7 @@ El objeto `ResourceLoaderParams` contiene tres propiedades: `params`, `previous`
 | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `params`     | El valor del cómputo `params` del resource.                                                                                                      |
 | `previous`   | Un objeto con una propiedad `status`, que contiene el `ResourceStatus` anterior.                                                                 |
-| `abortSignal`| Un [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). Constalta [Abortando peticiones](#abortando-peticiones) para más detalles. |
+| `abortSignal`| Un [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal). Consulta [Abortando peticiones](#abortando-peticiones) para más detalles. |
 
 Si el cómputo `params` devuelve `undefined`, la función loader no se ejecuta y el estado del resource se convierte en `'idle'`.
 
@@ -71,7 +71,7 @@ const userId: Signal<string> = getUserId();
 const userResource = resource({
   params: () => ({id: userId()}),
   loader: ({params, abortSignal}): Promise<User> => {
-    // fetch cancela cualquier pretición HTTP pendiente cuando el `AbortSignal` dado
+    // fetch cancela cualquier petición HTTP pendiente cuando el `AbortSignal` dado
     // indica que la petición ha sido abortada.
     return fetch(`users/${params.id}`, {signal: abortSignal});
   },
@@ -118,7 +118,7 @@ El `status` de una signal proporciona un `ResourceStatus` específico que descri
 | `'loading'`   | `undefined`       | El loader se está ejecutando como resultado de que el valor de `params` haya cambiando. |
 | `'reloading'` | Valor anterior    | El loader se está ejecutando como resultado de llamar al método `reload` del resource. |
 | `'resolved'`  | Valor resuelto    | El loader ha completado.                                                     |
-| `'local'`     | Valor establecido localmente | El valor del resource ha sido establecido localmente vía `.set()` o `.update()` |
+| `'local'`     | Valor establecido localmente | El valor del resource ha sido establecido localmente mediante `.set()` o `.update()` |
 
 Puedes usar esta información de estado para mostrar condicionalmente elementos de interfaz de usuario, como indicadores de carga y mensajes de error.
 
diff --git a/adev-es/src/content/guide/ssr.md b/adev-es/src/content/guide/ssr.md
index aad8870..bd88fbd 100644
--- a/adev-es/src/content/guide/ssr.md
+++ b/adev-es/src/content/guide/ssr.md
@@ -1,6 +1,6 @@
 # Server and hybrid rendering
 
-Angular ships all applications as client-side rendered (CSR) by default. While this approach delivers a initial payload that's lightweight, it introduces trade-offs including slower load times, degraded performance metrics, and higher resource demands since the user's device performs most of the computations. As a result, many applications achieve significant performance improvements by integrating server-side rendering (SSR) into a hybrid rendering strategy.
+Angular ships all applications as client-side rendered (CSR) by default. While this approach delivers an initial payload that's lightweight, it introduces trade-offs including slower load times, degraded performance metrics, and higher resource demands since the user's device performs most of the computations. As a result, many applications achieve significant performance improvements by integrating server-side rendering (SSR) into a hybrid rendering strategy.
 
 ## What is hybrid rendering?
 
@@ -211,7 +211,7 @@ export const serverRoutes: ServerRoute[] = [
 
 Because [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPrerenderParams 'API reference') exclusively applies to [`RenderMode.Prerender`](api/ssr/RenderMode#Prerender 'API reference'), this function always runs at _build-time_. `getPrerenderParams` must not rely on any browser-specific or server-specific APIs for data.
 
-IMPORTANT: When using [`inject`](api/core/inject 'API reference') inside `getPrerenderParams`, please remember that `inject` must be used synchronously. It cannot be invoked within asynchronous callbacks or following any `await` statements. For more information, refer to [`runInInjectionContext`](api/core/runInInjectionContext).
+IMPORTANT: When using [`inject`](api/core/inject 'API reference') inside `getPrerenderParams`, please remember that `inject` must be used synchronously. It cannot be invoked within asynchronous callbacks or following any `await` statements. For more information, refer to `runInInjectionContext`.
 
 #### Fallback strategies
 
@@ -223,7 +223,7 @@ The available fallback strategies are:
 - **Client:** Falls back to client-side rendering.
 - **None:** No fallback. Angular will not handle requests for paths that are not prerendered.
 
-```typescript
+```ts
 // app.routes.server.ts
 import { RenderMode, PrerenderFallback, ServerRoute } from '@angular/ssr';
 
@@ -246,27 +246,59 @@ export const serverRoutes: ServerRoute[] = [
 
 Some common browser APIs and capabilities might not be available on the server. Applications cannot make use of browser-specific global objects like `window`, `document`, `navigator`, or `location` as well as certain properties of `HTMLElement`.
 
-In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the [`afterEveryRender`](api/core/afterEveryRender) and [`afterNextRender`](api/core/afterNextRender) lifecycle hooks. These are only executed on the browser and skipped on the server.
+In general, code which relies on browser-specific symbols should only be executed in the browser, not on the server. This can be enforced through the `afterEveryRender` and `afterNextRender` lifecycle hooks. These are only executed on the browser and skipped on the server.
 
 ```angular-ts
-import { Component, ViewChild, afterNextRender } from '@angular/core';
+import { Component, viewChild, afterNextRender } from '@angular/core';
 
 @Component({
   selector: 'my-cmp',
   template: `<span #content>{{ ... }}</span>`,
 })
 export class MyComponent {
-  @ViewChild('content') contentRef: ElementRef;
+  contentRef = viewChild.required<ElementRef>('content');
 
   constructor() {
     afterNextRender(() => {
       // Safe to check `scrollHeight` because this will only run in the browser, not the server.
-      console.log('content height: ' + this.contentRef.nativeElement.scrollHeight);
+      console.log('content height: ' + this.contentRef().nativeElement.scrollHeight);
     });
   }
 }
 ```
 
+## Setting providers on the server
+
+On the server side, top level provider values are set once when the application code is initially parsed and evaluated.
+This means that providers configured with `useValue` will keep their value across multiple requests, until the server application is restarted.
+
+If you want to generate a new value for each request, use a factory provider with `useFactory`. The factory function will run for every incoming request, ensuring that a new value is created and assigned to the token each time.
+
+## Accessing Document via DI
+
+When working with server-side rendering, you should avoid directly referencing browser-specific globals like `document`. Instead, use the [`DOCUMENT`](api/core/DOCUMENT) token to access the document object in a platform-agnostic way.
+
+```ts
+import { Injectable, inject, DOCUMENT } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class CanonicalLinkService {
+  private readonly document = inject(DOCUMENT);
+
+  // During server rendering, inject a <link rel="canonical"> tag
+  // so the generated HTML includes the correct canonical URL
+  setCanonical(href: string): void {
+    const link = this.document.createElement('link');
+    link.rel = 'canonical';
+    link.href = href;
+    this.document.head.appendChild(link);
+  }
+}
+
+```
+
+HELPFUL: For managing meta tags, Angular provides the `Meta` service.
+
 ## Accessing Request and Response via DI
 
 The `@angular/core` package provides several tokens for interacting with the server-side rendering environment. These tokens give you access to crucial information and objects within your Angular application during SSR.
@@ -323,27 +355,138 @@ To configure this, update your `angular.json` file as follows:
 
 ## Caching data when using HttpClient
 
-[`HttpClient`](api/common/http/HttpClient) cached 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.
+`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.
 
-By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contain `Authorization` or `Proxy-Authorization` headers. You can override those settings by using [`withHttpTransferCacheOptions`](api/platform-browser/withHttpTransferCacheOptions) when providing hydration.
+### 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` or `Proxy-Authorization` headers. You can override those settings by using `withHttpTransferCacheOptions` to the hydration configuration.
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideClientHydration(
+      withHttpTransferCacheOptions({
+        includeHeaders: ['ETag', 'Cache-Control'],
+        filter: (req) => !req.url.includes('/api/profile'),
+        includePostRequests: true,
+        includeRequestsWithAuthHeaders: false,
+      }),
+    ),
+  ],
+});
+```
+
+---
+
+### `includeHeaders`
+
+Specifies which headers from the server response should be included in cached entries.  
+No headers are included by default.
+
+```ts
+withHttpTransferCacheOptions({
+  includeHeaders: ['ETag', 'Cache-Control'],
+});
+```
+
+IMPORTANT: Avoid including sensitive headers like authentication tokens. These can leak user‑specific data between requests.
+
+---
+
+### `includePostRequests`
+
+By default, only `GET` and `HEAD` requests are cached.  
+You can enable caching for `POST` requests when they are used as read operations such as GraphQL queries.
+
+```ts
+withHttpTransferCacheOptions({
+  includePostRequests: true,
+});
+```
+
+Use this only when `POST` requests are **idempotent** and safe to reuse between server and client renders.
+
+---
+
+### `includeRequestsWithAuthHeaders`
+
+Determines whether requests containing `Authorization` or `Proxy‑Authorization` headers are eligible for caching.  
+By default, these are excluded to prevent caching user‑specific responses.
+
+```ts
+withHttpTransferCacheOptions({
+  includeRequestsWithAuthHeaders: true,
+});
+```
+
+Enable only when authentication headers do **not** affect the response content (for example, public tokens for analytics APIs).
+
+### Per‑request overrides
+
+You can override caching behavior for a specific request using the `transferCache` request option.
+
+```ts
+// Include specific headers for this request
+http.get('/api/profile', { transferCache: { includeHeaders: ['CustomHeader'] } });
+```
+
+### Disabling caching
+
+You can disable HTTP caching of requests sent from the server either globally or individually.
+
+#### Globally
+
+To disable caching for all requests in your application, use the `withNoHttpTransferCache` feature:
+
+```ts
+import { bootstrapApplication, provideClientHydration, withNoHttpTransferCache } from '@angular/platform-browser';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideClientHydration(withNoHttpTransferCache())
+  ]
+});
+```
+
+#### `filter`
+
+You can also selectively disable caching for certain requests using the [`filter`](api/common/http/HttpTransferCacheOptions) option in `withHttpTransferCacheOptions`. For example, you can disable caching for a specific API endpoint:
+
+```ts
+import { bootstrapApplication, provideClientHydration, withHttpTransferCacheOptions } from '@angular/platform-browser';
 
-```typescript
 bootstrapApplication(AppComponent, {
   providers: [
     provideClientHydration(withHttpTransferCacheOptions({
-      includePostRequests: true
+      filter: (req) => !req.url.includes('/api/sensitive-data')
     }))
   ]
 });
 ```
 
+Use this option to exclude endpoints with user‑specific or dynamic data (for example `/api/profile`).
+
+#### Individually
+
+To disable caching for an individual request, you can specify the [`transferCache`](api/common/http/HttpRequest#transferCache) option in an `HttpRequest`.
+
+```ts
+httpClient.get('/api/sensitive-data', { transferCache: false });
+```
+
 ## Configuring a server
 
 ### Node.js
 
 The `@angular/ssr/node` extends `@angular/ssr` specifically for Node.js environments. It provides APIs that make it easier to implement server-side rendering within your Node.js application. For a complete list of functions and usage examples, refer to the [`@angular/ssr/node` API reference](api/ssr/node/AngularNodeAppEngine) API reference.
 
-```typescript
+```ts
 // server.ts
 import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
 import express from 'express';
@@ -374,7 +517,7 @@ export const reqHandler = createNodeRequestHandler(app);
 
 The `@angular/ssr` provides essential APIs for server-side rendering your Angular application on platforms other than Node.js. It leverages the standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects from the Web API, enabling you to integrate Angular SSR into various server environments. For detailed information and examples, refer to the [`@angular/ssr` API reference](api/ssr/AngularAppEngine).
 
-```typescript
+```ts
 // server.ts
 import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
 
diff --git a/adev-es/src/content/guide/tailwind.md b/adev-es/src/content/guide/tailwind.md
index b5b8094..b0b6e85 100644
--- a/adev-es/src/content/guide/tailwind.md
+++ b/adev-es/src/content/guide/tailwind.md
@@ -2,37 +2,69 @@
 
 [Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.
 
-## Setting up Tailwind CSS
+## Automated Setup with `ng add`
+
+Angular CLI provides a streamlined way to integrate Tailwind CSS into your project using the `ng add` command. This command automatically installs the necessary packages, configures Tailwind CSS, and updates your project's build settings.
+
+First, navigate to your Angular project's root directory in a terminal and run the following command:
+
+```shell
+ng add tailwindcss
+```
+
+This command performs the following actions:
+
+- Installs `tailwindcss` and its peer dependencies.
+- Configures the project to use Tailwind CSS.
+- Adds the Tailwind CSS `@import` statement to your styles.
+
+After running `ng add tailwindcss`, you can immediately start using Tailwind's utility classes in your component templates.
+
+## Manual Setup (Alternative Method)
+
+If you prefer to set up Tailwind CSS manually, follow these steps:
 
 ### 1. Create an Angular project
 
 First, create a new Angular project if you don't have one set up already.
 
-<docs-code language="shell">
+```shell
 ng new my-project
 cd my-project
-</docs-code>
+```
 
 ### 2. Install Tailwind CSS
 
 Next, open a terminal in your Angular project's root directory and run the following command to install Tailwind CSS and its peer dependencies:
 
-<docs-code language="shell">
-npm install tailwindcss @tailwindcss/postcss postcss
-</docs-code>
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install tailwindcss @tailwindcss/postcss postcss
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add tailwindcss @tailwindcss/postcss postcss
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add tailwindcss @tailwindcss/postcss postcss
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add tailwindcss @tailwindcss/postcss postcss
+  </docs-code>
+</docs-code-multifile>
 
 ### 3. Configure PostCSS Plugins
 
 Next, add a `.postcssrc.json` file in the file root of the project.
 Add the `@tailwindcss/postcss` plugin into your PostCSS configuration.
 
-<docs-code language="json" header=".postcssrc.json">
+```json {header: '.postcssrc.json'}
+
 {
   "plugins": {
     "@tailwindcss/postcss": {}
   }
 }
-</docs-code>
+```
 
 ### 4. Import Tailwind CSS
 
@@ -50,20 +82,16 @@ If you're using SCSS, add `@use` to `./src/styles.scss`.
 
 ### 5. Start using Tailwind in your project
 
-You can now start using Tailwind's utility classes in your component templates to style your application.
+You can now start using Tailwind's utility classes in your component templates to style your application. Run your build process with `ng serve` and you should see the styled heading.
 
 For example, you can add the following to your `app.html` file:
 
-<docs-code language="html">
+```html
 <h1 class="text-3xl font-bold underline">
   Hello world!
 </h1>
-</docs-code>
-
-### 6. Start using Tailwind in your project
-
-Run your build process with `ng serve` and you should see the styled heading.
+```
 
 ## Additional Resources
 
-- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
\ No newline at end of file
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
diff --git a/adev-es/src/content/guide/templates/binding.md b/adev-es/src/content/guide/templates/binding.md
index cd7eb30..d3e00f2 100644
--- a/adev-es/src/content/guide/templates/binding.md
+++ b/adev-es/src/content/guide/templates/binding.md
@@ -30,18 +30,19 @@ Bindings that change over time should read values from [signals](/guide/signals)
 ```angular-ts
 @Component({
   template: `
-    <!-- Does not necessarily update when `welcomeMessage` changes. --> 
-    <p>{{ welcomeMessage }}</p> 
+    <!-- Does not necessarily update when `welcomeMessage` changes. -->
+    <p>{{ welcomeMessage }}</p>
 
     <p>Your color preference is {{ theme() }}.</p> <!-- Always updates when the value of the `name` signal changes. -->
   `
   ...
 })
 export class AppComponent {
-  welcomeMessage = "Welcome, enjoy this app that we built for you"; 
+  welcomeMessage = "Welcome, enjoy this app that we built for you";
   theme = signal('dark');
 }
 ```
+
 For more details, see the [Signals guide](/guide/signals).
 
 Continuing the theme example, if a user clicks on a button that updates the `theme` signal to `'light'` after the page loads, the page updates accordingly to:
@@ -92,7 +93,7 @@ You can bind to directive properties as well.
 
 ### Attributes
 
-When you need to set HTML attributes that do not have corresponding DOM properties, such as ARIA attributes or SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
+When you need to set HTML attributes that do not have corresponding DOM properties, such as SVG attributes, you can bind attributes to elements in your template with the `attr.` prefix.
 
 ```angular-html
 <!-- Bind the `role` attribute on the `<ul>` element to the component's `listRole` property. -->
@@ -112,12 +113,6 @@ You can also use text interpolation syntax in properties and attributes by using
 <img src="profile-photo.jpg" alt="Profile photo of {{ firstName() }}" >
 ```
 
-To bind to an attribute with the text interpolation syntax, prefix the attribute name with `attr.`
-
-```angular-html
-<button attr.aria-label="Save changes to {{ objectType() }}">
-```
-
 ## CSS class and style property bindings
 
 Angular supports additional features for binding CSS classes and CSS style properties to elements.
@@ -193,7 +188,7 @@ When binding `class` to an array or an object, Angular compares the previous val
 
 If an element has multiple bindings for the same CSS class, Angular resolves collisions by following its style precedence order.
 
-NOTE: Class bindings do not support space-separated class names in a single key. They also don't support mutations on objects as the reference of the binding remains the same. If you need one or the other, use the [ngClass](/api/common/NgClass) directive. 
+NOTE: Class bindings do not support space-separated class names in a single key. They also don't support mutations on objects as the reference of the binding remains the same. If you need one or the other, use the [ngClass](/api/common/NgClass) directive.
 
 ### CSS style properties
 
@@ -245,3 +240,17 @@ The above example renders the following DOM.
 When binding `style` to an object, Angular compares the previous value to the current value with the triple-equals operator (`===`). You must create a new object instance when you modify these values in order to Angular to apply any updates.
 
 If an element has multiple bindings for the same style property, Angular resolves collisions by following its style precedence order.
+
+## ARIA attributes
+
+Angular supports binding string values to ARIA attributes.
+
+```angular-html
+<button type="button" [aria-label]="actionLabel()">
+  {{ actionLabel() }}
+</button>
+```
+
+Angular writes the string value to the element’s `aria-label` attribute and removes it when the bound value is `null`.
+
+Some ARIA features expose DOM properties or directive inputs that accept structured values (such as element references). Use standard property bindings for those cases. See the [accessibility guide](best-practices/a11y#aria-attributes-and-properties) for examples and additional guidance.
diff --git a/adev-es/src/content/guide/templates/control-flow.md b/adev-es/src/content/guide/templates/control-flow.md
index c3196b5..af08598 100644
--- a/adev-es/src/content/guide/templates/control-flow.md
+++ b/adev-es/src/content/guide/templates/control-flow.md
@@ -93,7 +93,7 @@ You can optionally include an `@empty` section immediately after the `@for` bloc
 @for (item of items; track item.name) {
   <li> {{ item.name }}</li>
 } @empty {
-  <li aria-hidden="true"> There are no items. </li>
+  <li> There are no items. </li>
 }
 ```
 
diff --git a/adev-es/src/content/guide/templates/defer.md b/adev-es/src/content/guide/templates/defer.md
index badcf76..79abd39 100644
--- a/adev-es/src/content/guide/templates/defer.md
+++ b/adev-es/src/content/guide/templates/defer.md
@@ -35,7 +35,7 @@ Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-
 
 This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/templates/defer#triggers) occurs or the `when` condition is met.
 
-By default, a @defer block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
+By default, a `@defer` block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
 
 ```angular-html
 @defer {
@@ -177,6 +177,24 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
 }
 ```
 
+If you want to customize the options of the `IntersectionObserver`, the `viewport` trigger supports passing in an object literal. The literal supports all properties from the second parameter of `IntersectionObserver`, except for `root`. When using the object literal notation, you have to pass your trigger using the `trigger` property.
+
+```angular-html
+<div #greeting>Hello!</div>
+
+<!-- With options and a trigger -->
+@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
+  <greetings-cmp />
+}
+
+<!-- With options and an implied trigger -->
+@defer (on viewport({rootMargin: '100px', threshold: 0.5})) {
+  <greetings-cmp />
+} @placeholder {
+  <div>Implied trigger</div>
+}
+```
+
 #### `interaction`
 
 The `interaction` trigger loads the deferred content when the user interacts with the specified element through `click` or `keydown` events.
@@ -342,3 +360,26 @@ When you have nested `@defer` blocks, they should have different triggers in ord
 Avoid deferring components that are visible in the user’s viewport on initial load. Doing this may negatively affect Core Web Vitals by causing an increase in cumulative layout shift (CLS).
 
 In the event this is necessary, avoid `immediate`, `timer`, `viewport`, and custom `when` triggers that cause the content to load during the initial page render.
+
+### Keep accessibility in mind
+
+When using `@defer` blocks, consider the impact on users with assistive technologies like screen readers.
+Screen readers that focus on a deferred section will initially read the placeholder or loading content, but may not announce changes when the deferred content loads.
+
+To ensure deferred content changes are announced to screen readers, you can wrap your `@defer` block in an element with a live region:
+
+```angular-html
+<div aria-live="polite" aria-atomic="true">
+  @defer (on timer(2000)) {
+    <user-profile [user]="currentUser" />
+  } @placeholder {
+    Loading user profile...
+  } @loading {
+    Please wait...
+  } @error {
+    Failed to load profile
+  }
+</div>
+```
+
+This ensures that changes are announced to the user when transitions (placeholder &rarr; loading &rarr; content/error) occur.
diff --git a/adev-es/src/content/guide/templates/event-listeners.md b/adev-es/src/content/guide/templates/event-listeners.md
index f8c10de..de0d54c 100644
--- a/adev-es/src/content/guide/templates/event-listeners.md
+++ b/adev-es/src/content/guide/templates/event-listeners.md
@@ -117,4 +117,110 @@ export class AppComponent{
 }
 ```
 
-If the event handler statement evaluates to `false`, Angular automatically calls `preventDefault()`, similar to [native event handler attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes). *Always prefer explicitly calling `preventDefault`*, as this approach makes the code's intent obvious.
+If the event handler statement evaluates to `false`, Angular automatically calls `preventDefault()`, similar to [native event handler attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes#event_handler_attributes). _Always prefer explicitly calling `preventDefault`_, as this approach makes the code's intent obvious.
+
+## Extend event handling
+
+Angular’s event system is extensible via custom event plugins registered with the `EVENT_MANAGER_PLUGINS` injection token.
+
+### Implementing Event Plugin
+
+To create a custom event plugin, extend the `EventManagerPlugin` class and implement the required methods.
+
+```ts
+import { Injectable } from '@angular/core';
+import { EventManagerPlugin } from '@angular/platform-browser';
+
+@Injectable()
+export class DebounceEventPlugin extends EventManagerPlugin {
+  constructor() {
+    super(document);
+  }
+
+  // Define which events this plugin supports
+  override supports(eventName: string) {
+    return /debounce/.test(eventName);
+  }
+
+  // Handle the event registration
+  override addEventListener(
+    element: HTMLElement,
+    eventName: string,
+    handler: Function
+  ) {
+    // Parse the event: e.g., "click.debounce.500"
+    // event: "click", delay: 500
+    const [event, method , delay = 300 ] = eventName.split('.');
+
+    let timeoutId: number;
+
+    const listener = (event: Event) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+          handler(event);
+      }, delay);
+    };
+
+    element.addEventListener(event, listener);
+
+    // Return cleanup function
+    return () => {
+      clearTimeout(timeoutId);
+      element.removeEventListener(event, listener);
+    };
+  }
+}
+```
+
+Register your custom plugin using the `EVENT_MANAGER_PLUGINS` token in your application's providers:
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { DebounceEventPlugin } from './debounce-event-plugin';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    {
+      provide: EVENT_MANAGER_PLUGINS,
+      useClass: DebounceEventPlugin,
+      multi: true
+    }
+  ]
+});
+```
+
+Once registered, you can use your custom event syntax in templates, as well as with the `host` property:
+
+```angular-ts
+@Component({
+  template: `
+    <input
+      type="text"
+      (input.debounce.500)="onSearch($event.target.value)"
+      placeholder="Search..."
+    />
+  `,
+  ...
+})
+export class Search {
+ onSearch(query: string): void {
+    console.log('Searching for:', query);
+  }
+}
+```
+
+```ts
+@Component({
+  ...,
+  host: {
+    '(click.debounce.500)': 'handleDebouncedClick()',
+  },
+})
+export class AwesomeCard {
+  handleDebouncedClick(): void {
+   console.log('Debounced click!');
+  }
+}
+```
diff --git a/adev-es/src/content/guide/templates/expression-syntax.md b/adev-es/src/content/guide/templates/expression-syntax.md
index edf9154..dc0a8af 100644
--- a/adev-es/src/content/guide/templates/expression-syntax.md
+++ b/adev-es/src/content/guide/templates/expression-syntax.md
@@ -17,17 +17,12 @@ Angular supports a subset of [literal values](https://developer.mozilla.org/en-U
 | Array           | `['Onion', 'Cheese', 'Garlic']` |
 | null            | `null`                          |
 | Template string | `` `Hello ${name}` ``           |
-
-### Unsupported literals
-
-| Literal type | Example value |
-| ------------ | ------------- |
-| RegExp       | `/\d+/`       |
+| RegExp          | `/\d+/`                         |
 
 ### Unsupported value literals
 
 | Literal type | Example values |
-|--------------|----------------|
+| ------------ | -------------- |
 | BigInt       | `1n`           |
 
 ## Globals
diff --git a/adev-es/src/content/guide/templates/ng-content.md b/adev-es/src/content/guide/templates/ng-content.md
index 46508c9..5476618 100644
--- a/adev-es/src/content/guide/templates/ng-content.md
+++ b/adev-es/src/content/guide/templates/ng-content.md
@@ -20,14 +20,14 @@ export class BaseButton {}
 ```angular-ts
 // ./app.component.ts
 import { Component } from '@angular/core';
-import { BaseButton } from './base-button/base-button.component.ts';
+import { BaseButton } from './base-button/base-button.component';
 
 @Component({
   selector: 'app-root',
   imports: [BaseButton],
   template: `
     <button baseButton>
-      Next <span class="icon arrow-right" />
+      Next <span class="icon arrow-right"></span>
     </button>
   `,
 })
diff --git a/adev-es/src/content/guide/templates/whitespace.md b/adev-es/src/content/guide/templates/whitespace.md
index a0ff607..21886c5 100644
--- a/adev-es/src/content/guide/templates/whitespace.md
+++ b/adev-es/src/content/guide/templates/whitespace.md
@@ -8,7 +8,7 @@ Most developers prefer to format their templates with newlines and indentation t
 
 ```angular-html
 <section>
-  <h3>User profile</p>
+  <h3>User profile</h3>
   <label>
     User name
     <input>
@@ -20,7 +20,7 @@ This template contains whitespace between all of the elements. The following sni
 
 ```angular-html
 <!-- Total Whitespace: 20 -->
-<section>###<h3>User profile</p>###<label>#####User name#####<input>###</label>#</section>
+<section>###<h3>User profile</h3>###<label>#####User name#####<input>###</label>#</section>
 ```
 
 Preserving the whitespace as written in the template would result in many unnecessary [text nodes](https://developer.mozilla.org/en-US/docs/Web/API/Text) and increase page rendering overhead. By ignoring this whitespace between elements, Angular performs less work when rendering the template on the page, improving overall performance.
diff --git a/adev-es/src/content/guide/testing/attribute-directives.en.md b/adev-es/src/content/guide/testing/attribute-directives.en.md
index f605c75..20b7552 100644
--- a/adev-es/src/content/guide/testing/attribute-directives.en.md
+++ b/adev-es/src/content/guide/testing/attribute-directives.en.md
@@ -1,7 +1,6 @@
-
 # Testing Attribute Directives
 
-An *attribute directive* modifies the behavior of an element, component or another directive.
+An _attribute directive_ modifies the behavior of an element, component or another directive.
 Its name reflects the way the directive is applied: as an attribute on a host element.
 
 ## Testing the `HighlightDirective`
@@ -9,25 +8,25 @@ Its name reflects the way the directive is applied: as an attribute on a host el
 The sample application's `HighlightDirective` sets the background color of an element based on either a data bound color or a default color \(lightgray\).
 It also sets a custom property of the element \(`customProperty`\) to `true` for no reason other than to show that it can.
 
-<docs-code header="app/shared/highlight.directive.ts" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.ts"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.ts"/>
 
 It's used throughout the application, perhaps most simply in the `AboutComponent`:
 
-<docs-code header="app/about/about.component.ts" path="adev/src/content/examples/testing/src/app/about/about.component.ts"/>
+<docs-code header="about.component.ts" path="adev/src/content/examples/testing/src/app/about/about.component.ts"/>
 
 Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the techniques explored in the ["Nested component tests"](guide/testing/components-scenarios#nested-component-tests) section of [Component testing scenarios](guide/testing/components-scenarios).
 
-<docs-code header="app/about/about.component.spec.ts" path="adev/src/content/examples/testing/src/app/about/about.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="about.component.spec.ts" path="adev/src/content/examples/testing/src/app/about/about.component.spec.ts" visibleRegion="tests"/>
 
 However, testing a single use case is unlikely to explore the full range of a directive's capabilities.
 Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
 
-*Class-only tests* might be helpful, but attribute directives like this one tend to manipulate the DOM.
+_Class-only tests_ might be helpful, but attribute directives like this one tend to manipulate the DOM.
 Isolated unit tests don't touch the DOM and, therefore, do not inspire confidence in the directive's efficacy.
 
 A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
 
-<docs-code header="app/shared/highlight.directive.spec.ts (TestComponent)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="test-component"/>
+<docs-code header="highlight.directive.spec.ts (TestComponent)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="test-component"/>
 
 <img alt="HighlightDirective spec in action" src="assets/images/guide/testing/highlight-directive-spec.png">
 
@@ -36,18 +35,18 @@ The initial value is the word "cyan" which should be the background color of the
 
 Here are some tests of this component:
 
-<docs-code header="app/shared/highlight.directive.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="selected-tests"/>
+<docs-code header="highlight.directive.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="selected-tests"/>
 
 A few techniques are noteworthy:
 
-* The `By.directive` predicate is a great way to get the elements that have this directive *when their element types are unknown*
-* The [`:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not) in `By.css('h2:not([highlight])')` helps find `<h2>` elements that *do not* have the directive.
-    `By.css('*:not([highlight])')` finds *any* element that does not have the directive.
+- The `By.directive` predicate is a great way to get the elements that have this directive _when their element types are unknown_
+- The [`:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not) in `By.css('h2:not([highlight])')` helps find `<h2>` elements that _do not_ have the directive.
+  `By.css('*:not([highlight])')` finds _any_ element that does not have the directive.
 
-* `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
-    But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
+- `DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
+  But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
 
-* Angular adds a directive to the injector of the element to which it is applied.
-    The test for the default color uses the injector of the second `<h2>` to get its `HighlightDirective` instance and its `defaultColor`.
+- Angular adds a directive to the injector of the element to which it is applied.
+  The test for the default color uses the injector of the second `<h2>` to get its `HighlightDirective` instance and its `defaultColor`.
 
-* `DebugElement.properties` affords access to the artificial custom property that is set by the directive
+- `DebugElement.properties` affords access to the artificial custom property that is set by the directive
diff --git a/adev-es/src/content/guide/testing/attribute-directives.md b/adev-es/src/content/guide/testing/attribute-directives.md
index e7d047c..6f0bc03 100644
--- a/adev-es/src/content/guide/testing/attribute-directives.md
+++ b/adev-es/src/content/guide/testing/attribute-directives.md
@@ -1,7 +1,6 @@
-
 # Probar directivas de atributo
 
-Una *directiva de atributo* modifica el comportamiento de un elemento, componente u otra directiva.
+Una _directiva de atributo_ modifica el comportamiento de un elemento, componente u otra directiva.
 Su nombre refleja la forma en que se aplica la directiva: como un atributo en un elemento host.
 
 ## Probar la `HighlightDirective`
@@ -9,25 +8,25 @@ Su nombre refleja la forma en que se aplica la directiva: como un atributo en un
 La `HighlightDirective` de la aplicación de muestra establece el color de fondo de un elemento basado en un color vinculado a datos o un color predeterminado \(lightgray\).
 También establece una propiedad personalizada del elemento \(`customProperty`\) a `true` sin otra razón que mostrar que puede hacerlo.
 
-<docs-code header="app/shared/highlight.directive.ts" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.ts"/>
+<docs-code header="highlight.directive.ts" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.ts"/>
 
 Se usa en toda la aplicación, quizás más simplemente en el `AboutComponent`:
 
-<docs-code header="app/about/about.component.ts" path="adev/src/content/examples/testing/src/app/about/about.component.ts"/>
+<docs-code header="about.component.ts" path="adev/src/content/examples/testing/src/app/about/about.component.ts"/>
 
 Probar el uso específico de la `HighlightDirective` dentro del `AboutComponent` requiere solo las técnicas exploradas en la sección ["Pruebas de componentes anidados"](guide/testing/components-scenarios#nested-component-tests) de [Escenarios de prueba de componentes](guide/testing/components-scenarios).
 
-<docs-code header="app/about/about.component.spec.ts" path="adev/src/content/examples/testing/src/app/about/about.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="about.component.spec.ts" path="adev/src/content/examples/testing/src/app/about/about.component.spec.ts" visibleRegion="tests"/>
 
 Sin embargo, probar un solo caso de uso es poco probable que explore el rango completo de las capacidades de una directiva.
 Encontrar y probar todos los componentes que usan la directiva es tedioso, frágil y casi tan poco probable de ofrecer cobertura completa.
 
-Las *pruebas solo de clase* podrían ser útiles, pero las directivas de atributo como esta tienden a manipular el DOM.
+Las _pruebas solo de clase_ podrían ser útiles, pero las directivas de atributo como esta tienden a manipular el DOM.
 Las pruebas unitarias aisladas no tocan el DOM y, por lo tanto, no inspiran confianza en la eficacia de la directiva.
 
 Una mejor solución es crear un componente de prueba artificial que demuestre todas las formas de aplicar la directiva.
 
-<docs-code header="app/shared/highlight.directive.spec.ts (TestComponent)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="test-component"/>
+<docs-code header="highlight.directive.spec.ts (TestComponent)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="test-component"/>
 
 <img alt="HighlightDirective spec en acción" src="assets/images/guide/testing/highlight-directive-spec.png">
 
@@ -36,18 +35,18 @@ El valor inicial es la palabra "cyan" que debería ser el color de fondo del cua
 
 Aquí hay algunas pruebas de este componente:
 
-<docs-code header="app/shared/highlight.directive.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="selected-tests"/>
+<docs-code header="highlight.directive.spec.ts (tests seleccionados)" path="adev/src/content/examples/testing/src/app/shared/highlight.directive.spec.ts" visibleRegion="selected-tests"/>
 
 Algunas técnicas son dignas de mención:
 
-* El predicado `By.directive` es una excelente manera de obtener los elementos que tienen esta directiva *cuando sus tipos de elemento son desconocidos*
-* La [pseudo-clase `:not`](https://developer.mozilla.org/docs/Web/CSS/:not) en `By.css('h2:not([highlight])')` ayuda a encontrar elementos `<h2>` que *no* tienen la directiva.
-    `By.css('*:not([highlight])')` encuentra *cualquier* elemento que no tenga la directiva.
+- El predicado `By.directive` es una excelente manera de obtener los elementos que tienen esta directiva _cuando sus tipos de elemento son desconocidos_
+- La [pseudo-clase `:not`](https://developer.mozilla.org/docs/Web/CSS/:not) en `By.css('h2:not([highlight])')` ayuda a encontrar elementos `<h2>` que _no_ tienen la directiva.
+  `By.css('*:not([highlight])')` encuentra _cualquier_ elemento que no tenga la directiva.
 
-* `DebugElement.styles` permite el acceso a los estilos del elemento incluso en ausencia de un navegador real, gracias a la abstracción `DebugElement`.
-    Pero siéntete libre de explotar el `nativeElement` cuando eso parezca más fácil o más claro que la abstracción.
+- `DebugElement.styles` permite el acceso a los estilos del elemento incluso en ausencia de un navegador real, gracias a la abstracción `DebugElement`.
+  Pero siéntete libre de explotar el `nativeElement` cuando eso parezca más fácil o más claro que la abstracción.
 
-* Angular agrega una directiva al injector del elemento al que se aplica.
-    La prueba para el color predeterminado usa el injector del segundo `<h2>` para obtener su instancia de `HighlightDirective` y su `defaultColor`.
+- Angular agrega una directiva al injector del elemento al que se aplica.
+  La prueba para el color predeterminado usa el injector del segundo `<h2>` para obtener su instancia de `HighlightDirective` y su `defaultColor`.
 
-* `DebugElement.properties` permite el acceso a la propiedad personalizada artificial que se establece por la directiva
+- `DebugElement.properties` permite el acceso a la propiedad personalizada artificial que se establece por la directiva
diff --git a/adev-es/src/content/guide/testing/code-coverage.en.md b/adev-es/src/content/guide/testing/code-coverage.en.md
index 2ea638b..b9b57d2 100644
--- a/adev-es/src/content/guide/testing/code-coverage.en.md
+++ b/adev-es/src/content/guide/testing/code-coverage.en.md
@@ -1,57 +1,114 @@
+# Code coverage
 
-# Find out how much code you're testing
-
-The Angular CLI can run unit tests and create code coverage reports.
 Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
 
-To generate a coverage report run the following command in the root of your project.
+## Prerequisites
+
+To generate code coverage reports with Vitest, you must install the `@vitest/coverage-v8` package:
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev @vitest/coverage-v8
+  </docs-code>
+</docs-code-multifile>
+
+## Generating a report
 
-<docs-code language="shell">
-ng test --no-watch --code-coverage
-</docs-code>
+To generate a coverage report, add the `--coverage` flag to the `ng test` command:
 
-When the tests are complete, the command creates a new `/coverage` directory in the project.
-Open the `index.html` file to see a report with your source code and code coverage values.
+```shell
+ng test --coverage
+```
 
-If you want to create code-coverage reports every time you test, set the following option in the Angular CLI configuration file, `angular.json`:
+After the tests run, the command creates a new `coverage/` directory in the project. Open the `index.html` file to see a report with your source code and code coverage values.
 
-<docs-code language="json">
-"test": {
-  "options": {
-    "codeCoverage": true
+If you want to create code-coverage reports every time you test, you can set the `coverage` option to `true` in your `angular.json` file:
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true
+          }
+        }
+      }
+    }
   }
 }
-</docs-code>
-
-## Code coverage enforcement
-
-The code coverage percentages let you estimate how much of your code is tested.
-If your team decides on a set minimum amount to be unit tested, enforce this minimum with the Angular CLI.
-
-For example, suppose you want the code base to have a minimum of 80% code coverage.
-To enable this, open the [Karma](https://karma-runner.github.io) test platform configuration file, `karma.conf.js`, and add the `check` property in the `coverageReporter:` key.
-
-<docs-code language="javascript">
-coverageReporter: {
-  dir: require('path').join(__dirname, './coverage/<project-name>'),
-  subdir: '.',
-  reporters: [
-    { type: 'html' },
-    { type: 'text-summary' }
-  ],
-  check: {
-    global: {
-      statements: 80,
-      branches: 80,
-      functions: 80,
-      lines: 80
+```
+
+## Enforcing code coverage thresholds
+
+The code coverage percentages let you estimate how much of your code is tested. If your team decides on a minimum amount to be unit tested, you can enforce this minimum in your configuration.
+
+For example, suppose you want the code base to have a minimum of 80% code coverage. To enable this, add the `coverageThresholds` option to your `angular.json` file:
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true,
+            "coverageThresholds": {
+              "statements": 80,
+              "branches": 80,
+              "functions": 80,
+              "lines": 80
+            }
+          }
+        }
+      }
     }
   }
 }
-</docs-code>
+```
+
+Now, if your coverage drops below 80% when you run your tests, the command will fail.
+
+## Advanced configuration
 
-HELPFUL: Read more about creating and fine tuning Karma configuration in the [testing guide](guide/testing#configuration).
+You can configure several other coverage options in your `angular.json` file:
 
-The `check` property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.
+- `coverageInclude`: Glob patterns of files to include in the coverage report.
+- `coverageReporters`: An array of reporters to use (e.g., `html`, `lcov`, `json`).
+- `coverageWatermarks`: An object specifying `[low, high]` watermarks for the HTML reporter, which can affect the color-coding of the report.
 
-Read more on coverage configuration options in the [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true,
+            "coverageReporters": ["html", "lcov"],
+            "coverageWatermarks": {
+              "statements": [50, 80],
+              "branches": [50, 80],
+              "functions": [50, 80],
+              "lines": [50, 80]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
diff --git a/adev-es/src/content/guide/testing/code-coverage.md b/adev-es/src/content/guide/testing/code-coverage.md
index cffedf8..5cd4a84 100644
--- a/adev-es/src/content/guide/testing/code-coverage.md
+++ b/adev-es/src/content/guide/testing/code-coverage.md
@@ -1,57 +1,114 @@
+# Cobertura de código
 
-# Descubrir cuánto código estás probando
-
-Angular CLI puede ejecutar pruebas unitarias y crear reportes de cobertura de código.
 Los reportes de cobertura de código te muestran cualquier parte de tu código base que podría no estar correctamente probada por tus pruebas unitarias.
 
-Para generar un reporte de cobertura ejecuta el siguiente comando en la raíz de tu proyecto.
+## Prerrequisitos
+
+Para generar reportes de cobertura de código con Vitest, debes instalar el paquete `@vitest/coverage-v8`:
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D @vitest/coverage-v8
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev @vitest/coverage-v8
+  </docs-code>
+</docs-code-multifile>
+
+## Generar un reporte
 
-<docs-code language="shell">
-ng test --no-watch --code-coverage
-</docs-code>
+Para generar un reporte de cobertura, agrega la bandera `--coverage` al comando `ng test`:
 
-Cuando las pruebas estén completas, el comando crea un nuevo directorio `/coverage` en el proyecto.
-Abre el archivo `index.html` para ver un reporte con tu código fuente y valores de cobertura de código.
+```shell
+ng test --coverage
+```
 
-Si quieres crear reportes de cobertura de código cada vez que pruebas, establece la siguiente opción en el archivo de configuración de Angular CLI, `angular.json`:
+Después de que se ejecuten las pruebas, el comando crea un nuevo directorio `coverage/` en el proyecto. Abre el archivo `index.html` para ver un reporte con tu código fuente y valores de cobertura de código.
 
-<docs-code language="json">
-"test": {
-  "options": {
-    "codeCoverage": true
+Si quieres crear reportes de cobertura de código cada vez que pruebas, puedes establecer la opción `coverage` en `true` en tu archivo `angular.json`:
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true
+          }
+        }
+      }
+    }
   }
 }
-</docs-code>
-
-## Aplicación de cobertura de código
-
-Los porcentajes de cobertura de código te permiten estimar cuánto de tu código está probado.
-Si tu equipo decide sobre una cantidad mínima establecida para ser probada unitariamente, aplica este mínimo con Angular CLI.
-
-Por ejemplo, supón que quieres que la base de código tenga un mínimo de 80% de cobertura de código.
-Para habilitar esto, abre el archivo de configuración de la plataforma de pruebas [Karma](https://karma-runner.github.io), `karma.conf.js`, y agrega la propiedad `check` en la clave `coverageReporter:`.
-
-<docs-code language="javascript">
-coverageReporter: {
-  dir: require('path').join(__dirname, './coverage/<project-name>'),
-  subdir: '.',
-  reporters: [
-    { type: 'html' },
-    { type: 'text-summary' }
-  ],
-  check: {
-    global: {
-      statements: 80,
-      branches: 80,
-      functions: 80,
-      lines: 80
+```
+
+## Aplicar umbrales de cobertura de código
+
+Los porcentajes de cobertura de código te permiten estimar cuánto de tu código está probado. Si tu equipo decide sobre una cantidad mínima para ser probada unitariamente, puedes aplicar este mínimo en tu configuración.
+
+Por ejemplo, supón que quieres que la base de código tenga un mínimo de 80% de cobertura de código. Para habilitar esto, agrega la opción `coverageThresholds` a tu archivo `angular.json`:
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true,
+            "coverageThresholds": {
+              "statements": 80,
+              "branches": 80,
+              "functions": 80,
+              "lines": 80
+            }
+          }
+        }
+      }
     }
   }
 }
-</docs-code>
+```
+
+Ahora, si tu cobertura cae por debajo del 80% cuando ejecutas tus pruebas, el comando fallará.
+
+## Configuración avanzada
 
-ÚTIL: Lee más sobre crear y ajustar la configuración de Karma en la [guía de pruebas](guide/testing#configuration).
+Puedes configurar varias otras opciones de cobertura en tu archivo `angular.json`:
 
-La propiedad `check` hace que la herramienta aplique un mínimo de 80% de cobertura de código cuando las pruebas unitarias se ejecutan en el proyecto.
+- `coverageInclude`: Patrones glob de archivos para incluir en el reporte de cobertura.
+- `coverageReporters`: Un array de reportes para usar (por ejemplo, `html`, `lcov`, `json`).
+- `coverageWatermarks`: Un objeto que especifica marcas de agua `[low, high]` para el reporte HTML, que puede afectar la codificación de colores del reporte.
 
-Lee más sobre opciones de configuración de cobertura en la [documentación de karma coverage](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "coverage": true,
+            "coverageReporters": ["html", "lcov"],
+            "coverageWatermarks": {
+              "statements": [50, 80],
+              "branches": [50, 80],
+              "functions": [50, 80],
+              "lines": [50, 80]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
diff --git a/adev-es/src/content/guide/testing/component-harnesses-testing-environments.en.md b/adev-es/src/content/guide/testing/component-harnesses-testing-environments.en.md
index 75fa6de..ada708a 100644
--- a/adev-es/src/content/guide/testing/component-harnesses-testing-environments.en.md
+++ b/adev-es/src/content/guide/testing/component-harnesses-testing-environments.en.md
@@ -19,9 +19,9 @@ Otherwise, to add support for other environments, you need to define how to inte
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Creating a `TestElement` implementation
 
diff --git a/adev-es/src/content/guide/testing/component-harnesses-testing-environments.md b/adev-es/src/content/guide/testing/component-harnesses-testing-environments.md
index f4118f1..73dfc15 100644
--- a/adev-es/src/content/guide/testing/component-harnesses-testing-environments.md
+++ b/adev-es/src/content/guide/testing/component-harnesses-testing-environments.md
@@ -19,9 +19,9 @@ De lo contrario, para agregar soporte para otros entornos, necesitas definir có
 
 El [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) es un conjunto de primitivas de comportamiento para construir componentes. Para usar los component harnesses, primero instala `@angular/cdk` desde npm. Puedes hacer esto desde tu terminal usando Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Crear una implementación de `TestElement`
 
diff --git a/adev-es/src/content/guide/testing/components-basics.en.md b/adev-es/src/content/guide/testing/components-basics.en.md
index e22f608..55c26cb 100644
--- a/adev-es/src/content/guide/testing/components-basics.en.md
+++ b/adev-es/src/content/guide/testing/components-basics.en.md
@@ -1,13 +1,13 @@
 # Basics of testing components
 
 A component, unlike all other parts of an Angular application, combines an HTML template and a TypeScript class.
-The component truly is the template and the class *working together*.
+The component truly is the template and the class _working together_.
 To adequately test a component, you should test that they work together as intended.
 
 Such tests require creating the component's host element in the browser DOM, as Angular does, and investigating the component class's interaction with the DOM as described by its template.
 
 The Angular `TestBed` facilitates this kind of testing as you'll see in the following sections.
-But in many cases, *testing the component class alone*, without DOM involvement, can validate much of the component's behavior in a straightforward, more obvious way.
+But in many cases, _testing the component class alone_, without DOM involvement, can validate much of the component's behavior in a straightforward, more obvious way.
 
 ## Component DOM testing
 
@@ -15,11 +15,11 @@ A component is more than just its class.
 A component interacts with the DOM and with other components.
 Classes alone cannot tell you if the component is going to render properly, respond to user input and gestures, or integrate with its parent and child components.
 
-* Is `Lightswitch.clicked()` bound to anything such that the user can invoke it?
-* Is the `Lightswitch.message` displayed?
-* Can the user actually select the hero displayed by `DashboardHeroComponent`?
-* Is the hero name displayed as expected \(such as uppercase\)?
-* Is the welcome message displayed by the template of `WelcomeComponent`?
+- Is `Lightswitch.clicked()` bound to anything such that the user can invoke it?
+- Is the `Lightswitch.message` displayed?
+- Can the user actually select the hero displayed by `DashboardHeroComponent`?
+- Is the hero name displayed as expected \(such as uppercase\)?
+- Is the welcome message displayed by the template of `WelcomeComponent`?
 
 These might not be troubling questions for the preceding simple components illustrated.
 But many components have complex interactions with the DOM elements described in their templates, causing HTML to appear and disappear as the component state changes.
@@ -34,15 +34,13 @@ The CLI creates an initial test file for you by default when you ask it to gener
 
 For example, the following CLI command generates a `BannerComponent` in the `app/banner` folder \(with inline template and styles\):
 
-<docs-code language="shell">
-
+```shell
 ng generate component banner --inline-template --inline-style --module app
-
-</docs-code>
+```
 
 It also generates an initial test file for the component, `banner-external.component.spec.ts`, that looks like this:
 
-<docs-code header="app/banner/banner-external.component.spec.ts (initial)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v1"/>
+<docs-code header="banner-external.component.spec.ts (initial)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v1"/>
 
 HELPFUL: Because `compileComponents` is asynchronous, it uses the [`waitForAsync`](api/core/testing/waitForAsync) utility function imported from `@angular/core/testing`.
 
@@ -52,12 +50,12 @@ Refer to the [waitForAsync](guide/testing/components-scenarios#waitForAsync) sec
 
 Only the last three lines of this file actually test the component and all they do is assert that Angular can create the component.
 
-The rest of the file is boilerplate setup code anticipating more advanced tests that *might* become necessary if the component evolves into something substantial.
+The rest of the file is boilerplate setup code anticipating more advanced tests that _might_ become necessary if the component evolves into something substantial.
 
 You'll learn about these advanced test features in the following sections.
 For now, you can radically reduce this test file to a more manageable size:
 
-<docs-code header="app/banner/banner-initial.component.spec.ts (minimal)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v2"/>
+<docs-code header="banner-initial.component.spec.ts (minimal)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v2"/>
 
 In this example, the metadata object passed to `TestBed.configureTestingModule` simply declares `BannerComponent`, the component to test.
 
@@ -109,7 +107,7 @@ The value of `ComponentFixture.nativeElement` has the `any` type.
 Later you'll encounter the `DebugElement.nativeElement` and it too has the `any` type.
 
 Angular can't know at compile time what kind of HTML element the `nativeElement` is or if it even is an HTML element.
-The application might be running on a *non-browser platform*, such as the server or a [Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API), where the element might have a diminished API or not exist at all.
+The application might be running on a _non-browser platform_, such as the server or a [Web Worker](https://developer.mozilla.org/docs/Web/API/Web_Workers_API), where the element might have a diminished API or not exist at all.
 
 The tests in this guide are designed to run in a browser so a `nativeElement` value will always be an `HTMLElement` or one of its derived classes.
 
@@ -121,7 +119,7 @@ Here's another test that calls `HTMLElement.querySelector` to get the paragraph
 
 ### `DebugElement`
 
-The Angular *fixture* provides the component's element directly through the `fixture.nativeElement`.
+The Angular _fixture_ provides the component's element directly through the `fixture.nativeElement`.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="nativeElement"/>
 
@@ -132,10 +130,10 @@ This is actually a convenience method, implemented as `fixture.debugElement.nati
 There's a good reason for this circuitous path to the element.
 
 The properties of the `nativeElement` depend upon the runtime environment.
-You could be running these tests on a *non-browser* platform that doesn't have a DOM or whose DOM-emulation doesn't support the full `HTMLElement` API.
+You could be running these tests on a _non-browser_ platform that doesn't have a DOM or whose DOM-emulation doesn't support the full `HTMLElement` API.
 
-Angular relies on the `DebugElement` abstraction to work safely across *all supported platforms*.
-Instead of creating an HTML element tree, Angular creates a `DebugElement` tree that wraps the *native elements* for the runtime platform.
+Angular relies on the `DebugElement` abstraction to work safely across _all supported platforms_.
+Instead of creating an HTML element tree, Angular creates a `DebugElement` tree that wraps the _native elements_ for the runtime platform.
 The `nativeElement` property unwraps the `DebugElement` and returns the platform-specific element object.
 
 Because the sample tests for this guide are designed to run only in a browser, a `nativeElement` in these tests is always an `HTMLElement` whose familiar methods and properties you can explore within a test.
@@ -159,9 +157,9 @@ The server-side renderer might not support the full HTML element API.
 If it doesn't support `querySelector`, the previous test could fail.
 
 The `DebugElement` offers query methods that work for all supported platforms.
-These query methods take a *predicate* function that returns `true` when a node in the `DebugElement` tree matches the selection criteria.
+These query methods take a _predicate_ function that returns `true` when a node in the `DebugElement` tree matches the selection criteria.
 
-You create a *predicate* with the help of a `By` class imported from a library for the runtime platform.
+You create a _predicate_ with the help of a `By` class imported from a library for the runtime platform.
 Here's the `By` import for the browser platform:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="import-by"/>
@@ -172,10 +170,10 @@ The following example re-implements the previous test with `DebugElement.query()
 
 Some noteworthy observations:
 
-* The `By.css()` static method selects `DebugElement` nodes with a [standard CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors').
-* The query returns a `DebugElement` for the paragraph.
-* You must unwrap that result to get the paragraph element.
+- The `By.css()` static method selects `DebugElement` nodes with a [standard CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors').
+- The query returns a `DebugElement` for the paragraph.
+- You must unwrap that result to get the paragraph element.
 
-When you're filtering by CSS selector and only testing properties of a browser's *native element*, the `By.css` approach might be overkill.
+When you're filtering by CSS selector and only testing properties of a browser's _native element_, the `By.css` approach might be overkill.
 
 It's often more straightforward and clear to filter with a standard `HTMLElement` method such as `querySelector()` or `querySelectorAll()`.
diff --git a/adev-es/src/content/guide/testing/components-basics.md b/adev-es/src/content/guide/testing/components-basics.md
index 561c1cc..936aab7 100644
--- a/adev-es/src/content/guide/testing/components-basics.md
+++ b/adev-es/src/content/guide/testing/components-basics.md
@@ -1,13 +1,13 @@
 # Fundamentos de probar componentes
 
 Un componente, a diferencia de todas las otras partes de una aplicación Angular, combina una plantilla HTML y una clase TypeScript.
-El componente verdaderamente es la plantilla y la clase *trabajando juntas*.
+El componente verdaderamente es la plantilla y la clase _trabajando juntas_.
 Para probar adecuadamente un componente, deberías probar que trabajen juntos como se pretende.
 
 Tales pruebas requieren crear el elemento host del componente en el DOM del navegador, como hace Angular, e investigar la interacción de la clase del componente con el DOM como se describe en su plantilla.
 
 El `TestBed` de Angular facilita este tipo de pruebas como verás en las siguientes secciones.
-Pero en muchos casos, *probar la clase del componente sola*, sin involucramiento del DOM, puede validar mucho del comportamiento del componente de una manera más directa y obvia.
+Pero en muchos casos, _probar la clase del componente sola_, sin involucramiento del DOM, puede validar mucho del comportamiento del componente de una manera más directa y obvia.
 
 ## Pruebas del DOM de componentes
 
@@ -15,11 +15,11 @@ Un componente es más que solo su clase.
 Un componente interactúa con el DOM y con otros componentes.
 Las clases solas no pueden decirte si el componente va a renderizar correctamente, responder a la entrada y gestos del usuario, o integrarse con sus componentes padre e hijo.
 
-* ¿Está `Lightswitch.clicked()` vinculado a algo de modo que el usuario pueda invocarlo?
-* ¿Se muestra el `Lightswitch.message`?
-* ¿Puede el usuario realmente seleccionar el héroe mostrado por `DashboardHeroComponent`?
-* ¿Se muestra el nombre del héroe como se espera \(como mayúsculas\)?
-* ¿Se muestra el mensaje de bienvenida por la plantilla de `WelcomeComponent`?
+- ¿Está `Lightswitch.clicked()` vinculado a algo de modo que el usuario pueda invocarlo?
+- ¿Se muestra el `Lightswitch.message`?
+- ¿Puede el usuario realmente seleccionar el héroe mostrado por `DashboardHeroComponent`?
+- ¿Se muestra el nombre del héroe como se espera \(como mayúsculas\)?
+- ¿Se muestra el mensaje de bienvenida por la plantilla de `WelcomeComponent`?
 
 Estas podrían no ser preguntas problemáticas para los componentes simples precedentes ilustrados.
 Pero muchos componentes tienen interacciones complejas con los elementos DOM descritos en sus plantillas, causando que HTML aparezca y desaparezca a medida que el estado del componente cambia.
@@ -34,17 +34,15 @@ El CLI crea un archivo de prueba inicial para ti por defecto cuando le pides que
 
 Por ejemplo, el siguiente comando del CLI genera un `BannerComponent` en la carpeta `app/banner` \(con plantilla y estilos inline\):
 
-<docs-code language="shell">
-
+```shell
 ng generate component banner --inline-template --inline-style --module app
-
-</docs-code>
+```
 
 También genera un archivo de prueba inicial para el componente, `banner-external.component.spec.ts`, que se ve así:
 
-<docs-code header="app/banner/banner-external.component.spec.ts (initial)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v1"/>
+<docs-code header="banner-external.component.spec.ts (inicial)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v1"/>
 
-ÚTIL: Porque `compileComponents` es asíncrono, usa la función utilitaria [`waitForAsync`](api/core/testing/waitForAsync) importada de `@angular/core/testing`.
+CONSEJO: Porque `compileComponents` es asíncrono, usa la función utilitaria [`waitForAsync`](api/core/testing/waitForAsync) importada de `@angular/core/testing`.
 
 Consulta la sección [waitForAsync](guide/testing/components-scenarios#waitForAsync) para más detalles.
 
@@ -52,18 +50,18 @@ Consulta la sección [waitForAsync](guide/testing/components-scenarios#waitForAs
 
 Solo las últimas tres líneas de este archivo realmente prueban el componente y todo lo que hacen es afirmar que Angular puede crear el componente.
 
-El resto del archivo es código de configuración boilerplate anticipando pruebas más avanzadas que *podrían* volverse necesarias si el componente evoluciona en algo sustancial.
+El resto del archivo es código de configuración boilerplate anticipando pruebas más avanzadas que _podrían_ volverse necesarias si el componente evoluciona en algo sustancial.
 
 Aprenderás sobre estas características de prueba avanzadas en las siguientes secciones.
 Por ahora, puedes reducir radicalmente este archivo de prueba a un tamaño más manejable:
 
-<docs-code header="app/banner/banner-initial.component.spec.ts (minimal)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v2"/>
+<docs-code header="banner-initial.component.spec.ts (mínimo)" path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="v2"/>
 
 En este ejemplo, el objeto de metadata pasado a `TestBed.configureTestingModule` simplemente declara `BannerComponent`, el componente a probar.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="configureTestingModule"/>
 
-ÚTIL: No hay necesidad de declarar o importar nada más.
+CONSEJO: No hay necesidad de declarar o importar nada más.
 El módulo de prueba por defecto está pre-configurado con algo como el `BrowserModule` de `@angular/platform-browser`.
 
 Más tarde llamarás a `TestBed.configureTestingModule()` con imports, providers y más declarations para adaptarse a tus necesidades de pruebas.
@@ -121,7 +119,7 @@ Aquí hay otra prueba que llama a `HTMLElement.querySelector` para obtener el el
 
 ### `DebugElement`
 
-El *fixture* de Angular proporciona el elemento del componente directamente a través del `fixture.nativeElement`.
+El _fixture_ de Angular proporciona el elemento del componente directamente a través del `fixture.nativeElement`.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner-initial.component.spec.ts" visibleRegion="nativeElement"/>
 
@@ -132,9 +130,9 @@ Esto es en realidad un método de conveniencia, implementado como `fixture.debug
 Hay una buena razón para esta ruta indirecta al elemento.
 
 Las propiedades del `nativeElement` dependen del entorno de ejecución.
-Podrías estar ejecutando estas pruebas en una plataforma *no-navegador* que no tiene un DOM o cuya emulación de DOM no soporta la API completa de `HTMLElement`.
+Podrías estar ejecutando estas pruebas en una plataforma _no-navegador_ que no tiene un DOM o cuya emulación de DOM no soporta la API completa de `HTMLElement`.
 
-Angular depende de la abstracción `DebugElement` para trabajar de forma segura en *todas las plataformas soportadas*.
+Angular depende de la abstracción `DebugElement` para trabajar de forma segura en _todas las plataformas soportadas_.
 En lugar de crear un árbol de elementos HTML, Angular crea un árbol `DebugElement` que envuelve los *elementos nativos* para la plataforma de ejecución.
 La propiedad `nativeElement` desenvuelve el `DebugElement` y retorna el objeto de elemento específico de la plataforma.
 
@@ -172,10 +170,10 @@ El siguiente ejemplo re-implementa la prueba anterior con `DebugElement.query()`
 
 Algunas observaciones dignas de mención:
 
-* El método estático `By.css()` selecciona nodos `DebugElement` con un [selector CSS estándar](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors').
-* La consulta retorna un `DebugElement` para el párrafo.
-* Debes desenvolver ese resultado para obtener el elemento párrafo.
+- El método estático `By.css()` selecciona nodos `DebugElement` con un [selector CSS estándar](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors 'CSS selectors').
+- La consulta retorna un `DebugElement` para el párrafo.
+- Debes desenvolver ese resultado para obtener el elemento párrafo.
 
-Cuando estás filtrando por selector CSS y solo probando propiedades del *elemento nativo* de un navegador, el enfoque `By.css` podría ser excesivo.
+Cuando estás filtrando por selector CSS y solo probando propiedades del _elemento nativo_ de un navegador, el enfoque `By.css` podría ser excesivo.
 
 A menudo es más directo y claro filtrar con un método `HTMLElement` estándar como `querySelector()` o `querySelectorAll()`.
diff --git a/adev-es/src/content/guide/testing/components-scenarios.en.md b/adev-es/src/content/guide/testing/components-scenarios.en.md
index 7efc281..4e95d35 100644
--- a/adev-es/src/content/guide/testing/components-scenarios.en.md
+++ b/adev-es/src/content/guide/testing/components-scenarios.en.md
@@ -8,17 +8,17 @@ In the example application, the `BannerComponent` presents static title text in
 
 After a few changes, the `BannerComponent` presents a dynamic title by binding to the component's `title` property like this.
 
-<docs-code header="app/banner/banner.component.ts" path="adev/src/content/examples/testing/src/app/banner/banner.component.ts" visibleRegion="component"/>
+<docs-code header="banner.component.ts" path="adev/src/content/examples/testing/src/app/banner/banner.component.ts" visibleRegion="component"/>
 
 As minimal as this is, you decide to add a test to confirm that component actually displays the right content where you think it should.
 
 ### Query for the `<h1>`
 
-You'll write a sequence of tests that inspect the value of the `<h1>` element that wraps the *title* property interpolation binding.
+You'll write a sequence of tests that inspect the value of the `<h1>` element that wraps the _title_ property interpolation binding.
 
 You update the `beforeEach` to find that element with a standard HTML `querySelector` and assign it to the `h1` variable.
 
-<docs-code header="app/banner/banner.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="banner.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="setup"/>
 
 ### `createComponent()` does not bind data
 
@@ -27,7 +27,7 @@ Your instinct is to write a test that immediately inspects the `<h1>` like this:
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default-v1"/>
 
-*That test fails* with the message:
+_That test fails_ with the message:
 
 <docs-code language="javascript">
 
@@ -51,9 +51,9 @@ Only then does the `<h1>` have the expected title.
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default"/>
 
 Delayed change detection is intentional and useful.
-It gives the tester an opportunity to inspect and change the state of the component *before Angular initiates data binding and calls [lifecycle hooks](guide/components/lifecycle)*.
+It gives the tester an opportunity to inspect and change the state of the component _before Angular initiates data binding and calls [lifecycle hooks](guide/components/lifecycle)_.
 
-Here's another test that changes the component's `title` property *before* calling `fixture.detectChanges()`.
+Here's another test that changes the component's `title` property _before_ calling `fixture.detectChanges()`.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="after-change"/>
 
@@ -65,11 +65,11 @@ Many testers prefer that the Angular test environment run change detection autom
 That's possible by configuring the `TestBed` with the `ComponentFixtureAutoDetect` provider.
 First import it from the testing utility library:
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (import)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="import-ComponentFixtureAutoDetect"/>
+<docs-code header="banner.component.detect-changes.spec.ts (import)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="import-ComponentFixtureAutoDetect"/>
 
 Then add it to the `providers` array of the testing module configuration:
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect"/>
+<docs-code header="banner.component.detect-changes.spec.ts (AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect"/>
 
 HELPFUL: You can also use the `fixture.autoDetectChanges()` function instead if you only want to enable automatic change detection
 after making updates to the state of the fixture's component. In addition, automatic change detection is on by default
@@ -77,7 +77,7 @@ when using `provideZonelessChangeDetection` and turning it off is not recommende
 
 Here are three tests that illustrate how automatic change detection works.
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect Tests)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect-tests"/>
+<docs-code header="banner.component.detect-changes.spec.ts (AutoDetect Tests)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect-tests"/>
 
 The first test shows the benefit of automatic change detection.
 
@@ -99,19 +99,19 @@ It won't read that property until you raise the element's `input` event by calli
 
 The following example demonstrates the proper sequence.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
+<docs-code header="hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
 
 ## Component with external files
 
-The preceding `BannerComponent` is defined with an *inline template* and *inline css*, specified in the `@Component.template` and `@Component.styles` properties respectively.
+The preceding `BannerComponent` is defined with an _inline template_ and _inline css_, specified in the `@Component.template` and `@Component.styles` properties respectively.
 
-Many components specify *external templates* and *external css* with the `@Component.templateUrl` and `@Component.styleUrls` properties respectively, as the following variant of `BannerComponent` does.
+Many components specify _external templates_ and _external css_ with the `@Component.templateUrl` and `@Component.styleUrls` properties respectively, as the following variant of `BannerComponent` does.
 
-<docs-code header="app/banner/banner-external.component.ts (metadata)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts" visibleRegion="metadata"/>
+<docs-code header="banner-external.component.ts (metadata)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts" visibleRegion="metadata"/>
 
 This syntax tells the Angular compiler to read the external files during component compilation.
 
-That's not a problem when you run the CLI `ng test` command because it *compiles the application before running the tests*.
+That's not a problem when you run the CLI `ng test` command because it _compiles the application before running the tests_.
 
 However, if you run the tests in a **non-CLI environment**, tests of this component might fail.
 For example, if you run the `BannerComponent` tests in a web coding environment such as [plunker](https://plnkr.co), you'll see a message like this one:
@@ -124,9 +124,9 @@ Please call "TestBed.compileComponents" before your test.
 
 </docs-code>
 
-You get this test failure message when the runtime environment compiles the source code *during the tests themselves*.
+You get this test failure message when the runtime environment compiles the source code _during the tests themselves_.
 
-To correct the problem, call `compileComponents()` as explained in the following [Calling compileComponents](#calling-compilecomponents) section.
+To correct the problem, call `compileComponents()`.
 
 ## Component with a dependency
 
@@ -135,13 +135,13 @@ Components often have service dependencies.
 The `WelcomeComponent` displays a welcome message to the logged-in user.
 It knows who the user is based on a property of the injected `UserService`:
 
-<docs-code header="app/welcome/welcome.component.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.ts"/>
+<docs-code header="welcome.component.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.ts"/>
 
 The `WelcomeComponent` has decision logic that interacts with the service, logic that makes this component worth testing.
 
 ### Provide service test doubles
 
-A *component-under-test* doesn't have to be provided with real services.
+A _component-under-test_ doesn't have to be provided with real services.
 
 Injecting the real `UserService` could be difficult.
 The real service might ask the user for login credentials and attempt to reach an authentication server.
@@ -154,8 +154,8 @@ The tests need access to the `UserService` injected into the `WelcomeComponent`.
 Angular has a hierarchical injection system.
 There can be injectors at multiple levels, from the root injector created by the `TestBed` down through the component tree.
 
-The safest way to get the injected service, the way that ***always works***,
-is to **get it from the injector of the *component-under-test***.
+The safest way to get the injected service, the way that **_always works_**,
+is to **get it from the injector of the _component-under-test_**.
 The component injector is a property of the fixture's `DebugElement`.
 
 <docs-code header="WelcomeComponent's injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="injected-service"/>
@@ -166,21 +166,21 @@ HELPFUL: This is _usually_ not necessary. Services are often provided in the roo
 
 This is easier to remember and less verbose than retrieving a service using the fixture's `DebugElement`.
 
-In this test suite, the *only* provider of `UserService` is the root testing module, so it is safe to call `TestBed.inject()` as follows:
+In this test suite, the _only_ provider of `UserService` is the root testing module, so it is safe to call `TestBed.inject()` as follows:
 
 <docs-code header="TestBed injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="inject-from-testbed" />
 
-HELPFUL: For a use case in which `TestBed.inject()` does not work, see the [*Override component providers*](#override-component-providers) section that explains when and why you must get the service from the component's injector instead.
+HELPFUL: For a use case in which `TestBed.inject()` does not work, see the [_Override component providers_](#override-component-providers) section that explains when and why you must get the service from the component's injector instead.
 
 ### Final setup and tests
 
 Here's the complete `beforeEach()`, using `TestBed.inject()`:
 
-<docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="setup"/>
 
 And here are some tests:
 
-<docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="tests"/>
 
 The first is a sanity test; it confirms that the `UserService` is called and working.
 
@@ -197,14 +197,14 @@ The third test checks that the component displays the proper message when there
 In this sample, the `AboutComponent` template hosts a `TwainComponent`.
 The `TwainComponent` displays Mark Twain quotes.
 
-<docs-code header="app/twain/twain.component.ts (template)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="template" />
+<docs-code header="twain.component.ts (template)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="template" />
 
 HELPFUL: The value of the component's `quote` property passes through an `AsyncPipe`.
 That means the property returns either a `Promise` or an `Observable`.
 
 In this example, the `TwainComponent.getQuote()` method tells you that the `quote` property returns an `Observable`.
 
-<docs-code header="app/twain/twain.component.ts (getQuote)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="get-quote"/>
+<docs-code header="twain.component.ts (getQuote)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="get-quote"/>
 
 The `TwainComponent` gets quotes from an injected `TwainService`.
 The component starts the returned `Observable` with a placeholder value \(`'...'`\), before the service can return its first quote.
@@ -220,7 +220,7 @@ In general, tests themselves should not make calls to remote servers.
 They should emulate such calls.
 The setup in this `app/twain/twain.component.spec.ts` shows one way to do that:
 
-<docs-code header="app/twain/twain.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="twain.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="setup"/>
 
 Focus on the spy.
 
@@ -233,7 +233,6 @@ You can write many useful tests with this spy, even though its `Observable` is s
 
 HELPFUL: It is best to limit the usage of spies to only what is necessary for the test. Creating mocks or spies for more than what's necessary can be brittle. As the component and injectable evolves, the unrelated tests can fail because they no longer mock enough behaviors that would otherwise not affect the test.
 
-
 ### Async test with `fakeAsync()`
 
 To use `fakeAsync()` functionality, you must import `zone.js/testing` in your test setup file.
@@ -247,7 +246,7 @@ HELPFUL: The `it()` function receives an argument of the following form.
 
 <docs-code language="javascript">
 
-fakeAsync(() => { /*test body*/ })
+fakeAsync(() => { /_test body_/ })
 
 </docs-code>
 
@@ -256,7 +255,7 @@ The test body appears to be synchronous.
 There is no nested syntax \(like a `Promise.then()`\) to disrupt the flow of control.
 
 HELPFUL: Limitation: The `fakeAsync()` function won't work if the test body makes an `XMLHttpRequest` \(XHR\) call.
-XHR calls within a test are rare, but if you need to call XHR, see the [`waitForAsync()`](#waitForAsync) section.
+XHR calls within a test are rare, but if you need to call XHR, use `waitForAsync()`.
 
 IMPORTANT: Be aware that asynchronous tasks that happen inside the `fakeAsync` zone need to be manually executed with `flush` or `tick`. If you attempt to
 wait for them to complete (i.e. using `fixture.whenStable`) without using the
@@ -307,7 +306,7 @@ If you use the Angular CLI, configure this flag in `src/test.ts`.
 
 <docs-code language="typescript">
 
-[window as any]('&lowbar;&lowbar;zone&lowbar;symbol__fakeAsyncPatchLock') = true;
+[window as any]('__zone_symbol__fakeAsyncPatchLock') = true;
 import 'zone.js/testing';
 
 </docs-code>
@@ -324,23 +323,23 @@ You can also use RxJS scheduler in `fakeAsync()` just like using `setTimeout()`
 
 By default, `fakeAsync()` supports the following macro tasks.
 
-* `setTimeout`
-* `setInterval`
-* `requestAnimationFrame`
-* `webkitRequestAnimationFrame`
-* `mozRequestAnimationFrame`
+- `setTimeout`
+- `setInterval`
+- `requestAnimationFrame`
+- `webkitRequestAnimationFrame`
+- `mozRequestAnimationFrame`
 
-If you run other macro tasks such as `HTMLCanvasElement.toBlob()`, an *"Unknown macroTask scheduled in fake async test"* error is thrown.
+If you run other macro tasks such as `HTMLCanvasElement.toBlob()`, an _"Unknown macroTask scheduled in fake async test"_ error is thrown.
 
 <docs-code-multifile>
-    <docs-code header="src/app/shared/canvas.component.spec.ts (failing)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="without-toBlob-macrotask"/>
-    <docs-code header="src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="main"/>
+    <docs-code header="canvas.component.spec.ts (failing)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="without-toBlob-macrotask"/>
+    <docs-code header="canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="main"/>
 </docs-code-multifile>
 
 If you want to support such a case, you need to define the macro task you want to support in `beforeEach()`.
 For example:
 
-<docs-code header="src/app/shared/canvas.component.spec.ts (excerpt)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="enable-toBlob-macrotask"/>
+<docs-code header="canvas.component.spec.ts (excerpt)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="enable-toBlob-macrotask"/>
 
 HELPFUL: In order to make the `<canvas>` element Zone.js-aware in your app, you need to import the `zone-patch-canvas` patch \(either in `polyfills.ts` or in the specific file that uses `<canvas>`\):
 
@@ -354,7 +353,7 @@ However, you might be troubled by the fact that the real service doesn't quite b
 The real service sends requests to a remote server.
 A server takes time to respond and the response certainly won't be available immediately as in the previous two tests.
 
-Your tests will reflect the real world more faithfully if you return an *asynchronous* observable from the `getQuote()` spy like this.
+Your tests will reflect the real world more faithfully if you return an _asynchronous_ observable from the `getQuote()` spy like this.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="async-setup"/>
 
@@ -369,7 +368,7 @@ This helper's observable emits the `data` value in the next turn of the JavaScri
 
 The [RxJS `defer()` operator](http://reactivex.io/documentation/operators/defer.html) returns an observable.
 It takes a factory function that returns either a promise or an observable.
-When something subscribes to *defer*'s observable, it adds the subscriber to a new observable created with that factory.
+When something subscribes to _defer_'s observable, it adds the subscriber to a new observable created with that factory.
 
 The `defer()` operator transforms the `Promise.resolve()` into a new observable that, like `HttpClient`, emits once and completes.
 Subscribers are unsubscribed after they receive the data value.
@@ -408,7 +407,6 @@ Instead of calling [tick()](api/core/testing/tick), it calls `fixture.whenStable
 The `fixture.whenStable()` returns a promise that resolves when the JavaScript engine's task queue becomes empty.
 In this example, the task queue becomes empty when the observable emits the first quote.
 
-
 ## Component with inputs and outputs
 
 A component with inputs and outputs typically appears inside the view template of a host component.
@@ -423,20 +421,20 @@ Clicking that hero tells the `DashboardComponent` that the user has selected the
 
 The `DashboardHeroComponent` is embedded in the `DashboardComponent` template like this:
 
-<docs-code header="app/dashboard/dashboard.component.html (excerpt)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.html" visibleRegion="dashboard-hero"/>
+<docs-code header="dashboard.component.html (excerpt)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.html" visibleRegion="dashboard-hero"/>
 
 The `DashboardHeroComponent` appears in an `@for` block, which sets each component's `hero` input property to the looping value and listens for the component's `selected` event.
 
 Here's the component's full definition:
 
-<docs-code header="app/dashboard/dashboard-hero.component.ts (component)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts" visibleRegion="component"/>
+<docs-code header="dashboard-hero.component.ts (component)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts" visibleRegion="component"/>
 
 While testing a component this simple has little intrinsic value, it's worth knowing how.
 Use one of these approaches:
 
-* Test it as used by `DashboardComponent`
-* Test it as a standalone component
-* Test it as used by a substitute for `DashboardComponent`
+- Test it as used by `DashboardComponent`
+- Test it as a standalone component
+- Test it as used by a substitute for `DashboardComponent`
 
 The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardComponent`, so, try the second and third options.
 
@@ -444,7 +442,7 @@ The immediate goal is to test the `DashboardHeroComponent`, not the `DashboardCo
 
 Here's the meat of the spec file setup.
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="dashboard-hero.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="setup"/>
 
 Notice how the setup code assigns a test hero \(`expectedHero`\) to the component's `hero` property, emulating the way the `DashboardComponent` would set it using the property binding in its repeater.
 
@@ -452,7 +450,7 @@ The following test verifies that the hero name is propagated to the template usi
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="name-test"/>
 
-Because the [template](#dashboard-hero-component) passes the hero name through the Angular `UpperCasePipe`, the test must match the element value with the upper-cased name.
+Because the template passes the hero name through the Angular `UpperCasePipe`, the test must match the element value with the upper-cased name.
 
 ### Clicking
 
@@ -461,7 +459,7 @@ Clicking the hero should raise a `selected` event that the host component \(`Das
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test"/>
 
 The component's `selected` property returns an `EventEmitter`, which looks like an RxJS synchronous `Observable` to consumers.
-The test subscribes to it *explicitly* just as the host component does *implicitly*.
+The test subscribes to it _explicitly_ just as the host component does _implicitly_.
 
 If the component behaves as expected, clicking the hero's element should tell the component's `selected` property to emit the `hero` object.
 
@@ -475,7 +473,7 @@ It has Angular properties and methods that abstract interaction with the native
 This test calls the `DebugElement.triggerEventHandler` with the "click" event name.
 The "click" event binding responds by calling `DashboardHeroComponent.click()`.
 
-The Angular `DebugElement.triggerEventHandler` can raise *any data-bound event* by its *event name*.
+The Angular `DebugElement.triggerEventHandler` can raise _any data-bound event_ by its _event name_.
 The second parameter is the event object passed to the handler.
 
 The test triggered a "click" event.
@@ -490,7 +488,7 @@ The `RouterLink` directive throws an error if the event object is missing.
 
 ### Click the element
 
-The following test alternative calls the native element's own `click()` method, which is perfectly fine for *this component*.
+The following test alternative calls the native element's own `click()` method, which is perfectly fine for _this component_.
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-2"/>
 
@@ -498,29 +496,29 @@ The following test alternative calls the native element's own `click()` method,
 
 Clicking a button, an anchor, or an arbitrary HTML element is a common test task.
 
-Make that consistent and straightforward by encapsulating the *click-triggering* process in a helper such as the following `click()` function:
+Make that consistent and straightforward by encapsulating the _click-triggering_ process in a helper such as the following `click()` function:
 
 <docs-code header="testing/index.ts (click helper)" path="adev/src/content/examples/testing/src/testing/index.ts" visibleRegion="click-event"/>
 
-The first parameter is the *element-to-click*.
+The first parameter is the _element-to-click_.
 If you want, pass a custom event object as the second parameter.
 The default is a partial [left-button mouse event object](https://developer.mozilla.org/docs/Web/API/MouseEvent/button) accepted by many handlers including the `RouterLink` directive.
 
 IMPORTANT: The `click()` helper function is **not** one of the Angular testing utilities.
-It's a function defined in *this guide's sample code*.
+It's a function defined in _this guide's sample code_.
 All of the sample tests use it.
 If you like it, add it to your own collection of helpers.
 
 Here's the previous test, rewritten using the click helper.
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-3"/>
+<docs-code header="dashboard-hero.component.spec.ts (test with click helper)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-3"/>
 
 ## Component inside a test host
 
 The previous tests played the role of the host `DashboardComponent` themselves.
 But does the `DashboardHeroComponent` work correctly when properly data-bound to a host component?
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host"/>
+<docs-code header="dashboard-hero.component.spec.ts (test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host"/>
 
 The test host sets the component's `hero` input property with its test hero.
 It binds the component's `selected` event with its `onSelected` handler, which records the emitted hero in its `selectedHero` property.
@@ -529,12 +527,12 @@ Later, the tests will be able to check `selectedHero` to verify that the `Dashbo
 
 The setup for the `test-host` tests is similar to the setup for the stand-alone tests:
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-setup"/>
+<docs-code header="dashboard-hero.component.spec.ts (test host setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-setup"/>
 
 This testing module configuration shows two important differences:
 
-* It *creates* the `TestHostComponent` instead of the `DashboardHeroComponent`
-* The `TestHostComponent` sets the `DashboardHeroComponent.hero` with a binding
+- It _creates_ the `TestHostComponent` instead of the `DashboardHeroComponent`
+- The `TestHostComponent` sets the `DashboardHeroComponent.hero` with a binding
 
 The `createComponent` returns a `fixture` that holds an instance of `TestHostComponent` instead of an instance of `DashboardHeroComponent`.
 
@@ -543,31 +541,31 @@ The query for the hero element \(`heroEl`\) still finds it in the test DOM, albe
 
 The tests themselves are almost identical to the stand-alone version:
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test-host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-tests"/>
+<docs-code header="dashboard-hero.component.spec.ts (test-host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-tests"/>
 
 Only the selected event test differs.
 It confirms that the selected `DashboardHeroComponent` hero really does find its way up through the event binding to the host component.
 
 ## Routing component
 
-A *routing component* is a component that tells the `Router` to navigate to another component.
-The `DashboardComponent` is a *routing component* because the user can navigate to the `HeroDetailComponent` by clicking on one of the *hero buttons* on the dashboard.
+A _routing component_ is a component that tells the `Router` to navigate to another component.
+The `DashboardComponent` is a _routing component_ because the user can navigate to the `HeroDetailComponent` by clicking on one of the _hero buttons_ on the dashboard.
 
 Angular provides test helpers to reduce boilerplate and more effectively test code which depends on `HttpClient`. The `provideRouter` function can be used directly in the test module as well.
 
-<docs-code header="app/dashboard/dashboard.component.spec.ts" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="router-harness"/>
+<docs-code header="dashboard.component.spec.ts" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="router-harness"/>
 
 The following test clicks the displayed hero and confirms that we navigate to the expected URL.
 
-<docs-code header="app/dashboard/dashboard.component.spec.ts (navigate test)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="navigate-test"/>
+<docs-code header="dashboard.component.spec.ts (navigate test)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="navigate-test"/>
 
 ## Routed components
 
-A *routed component* is the destination of a `Router` navigation.
-It can be trickier to test, especially when the route to the component *includes parameters*.
-The `HeroDetailComponent` is a *routed component* that is the destination of such a route.
+A _routed component_ is the destination of a `Router` navigation.
+It can be trickier to test, especially when the route to the component _includes parameters_.
+The `HeroDetailComponent` is a _routed component_ that is the destination of such a route.
 
-When a user clicks a *Dashboard* hero, the `DashboardComponent` tells the `Router` to navigate to `heroes/:id`.
+When a user clicks a _Dashboard_ hero, the `DashboardComponent` tells the `Router` to navigate to `heroes/:id`.
 The `:id` is a route parameter whose value is the `id` of the hero to edit.
 
 The `Router` matches that URL to a route to the `HeroDetailComponent`.
@@ -575,15 +573,15 @@ It creates an `ActivatedRoute` object with the routing information and injects i
 
 Here are the services injected into `HeroDetailComponent`:
 
-<docs-code header="app/hero/hero-detail.component.ts (inject)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="inject"/>
+<docs-code header="hero-detail.component.ts (inject)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="inject"/>
 
 The `HeroDetail` component needs the `id` parameter so it can fetch the corresponding hero using the `HeroDetailService`.
 The component has to get the `id` from the `ActivatedRoute.paramMap` property which is an `Observable`.
 
 It can't just reference the `id` property of the `ActivatedRoute.paramMap`.
-The component has to *subscribe* to the `ActivatedRoute.paramMap` observable and be prepared for the `id` to change during its lifetime.
+The component has to _subscribe_ to the `ActivatedRoute.paramMap` observable and be prepared for the `id` to change during its lifetime.
 
-<docs-code header="app/hero/hero-detail.component.ts (constructor)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ctor"/>
+<docs-code header="hero-detail.component.ts (constructor)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ctor"/>
 
 Tests can explore how the `HeroDetailComponent` responds to different `id` parameter values by navigating to different routes.
 
@@ -595,9 +593,9 @@ The component tree can be very deep and sometimes the nested components play no
 
 The `AppComponent`, for example, displays a navigation bar with anchors and their `RouterLink` directives.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/testing/src/app/app.component.html"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/testing/src/app/app.component.html"/>
 
-To validate the links but not the navigation, you don't need the `Router` to navigate and you don't need the `<router-outlet>` to mark where the `Router` inserts *routed components*.
+To validate the links but not the navigation, you don't need the `Router` to navigate and you don't need the `<router-outlet>` to mark where the `Router` inserts _routed components_.
 
 The `BannerComponent` and `WelcomeComponent` \(indicated by `<app-banner>` and `<app-welcome>`\) are also irrelevant.
 
@@ -605,7 +603,7 @@ Yet any test that creates the `AppComponent` in the DOM also creates instances o
 
 If you neglect to declare them, the Angular compiler won't recognize the `<app-banner>`, `<app-welcome>`, and `<router-outlet>` tags in the `AppComponent` template and will throw an error.
 
-If you declare the real components, you'll also have to declare *their* nested components and provide for *all* services injected in *any* component in the tree.
+If you declare the real components, you'll also have to declare _their_ nested components and provide for _all_ services injected in _any_ component in the tree.
 
 This section describes two techniques for minimizing the setup.
 Use them, alone or in combination, to stay focused on testing the primary component.
@@ -614,14 +612,14 @@ Use them, alone or in combination, to stay focused on testing the primary compon
 
 In the first technique, you create and declare stub versions of the components and directive that play little or no role in the tests.
 
-<docs-code header="app/app.component.spec.ts (stub declaration)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="component-stubs"/>
+<docs-code header="app.component.spec.ts (stub declaration)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="component-stubs"/>
 
 The stub selectors match the selectors for the corresponding real components.
 But their templates and classes are empty.
 
-Then declare them by overriding the `imports` of your component using `TestBed.overrideComponent`. 
+Then declare them by overriding the `imports` of your component using `TestBed.overrideComponent`.
 
-<docs-code header="app/app.component.spec.ts (TestBed stubs)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="testbed-stubs"/>
+<docs-code header="app.component.spec.ts (TestBed stubs)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="testbed-stubs"/>
 
 HELPFUL: The `set` key in this example replaces all the exisiting imports on your component, make sure to imports all dependencies, not only the stubs. Alternatively you can use the `remove`/`add` keys to selectively remove and add imports.
 
@@ -629,7 +627,7 @@ HELPFUL: The `set` key in this example replaces all the exisiting imports on you
 
 In the second approach, add `NO_ERRORS_SCHEMA` to the metadata overrides of your component.
 
-<docs-code header="app/app.component.spec.ts (NO_ERRORS_SCHEMA)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="no-errors-schema"/>
+<docs-code header="app.component.spec.ts (NO_ERRORS_SCHEMA)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="no-errors-schema"/>
 
 The `NO_ERRORS_SCHEMA` tells the Angular compiler to ignore unrecognized elements and attributes.
 
@@ -642,19 +640,19 @@ You no longer need the stub components.
 
 ### Use both techniques together
 
-These are techniques for *Shallow Component Testing*, so-named because they reduce the visual surface of the component to just those elements in the component's template that matter for tests.
+These are techniques for _Shallow Component Testing_, so-named because they reduce the visual surface of the component to just those elements in the component's template that matter for tests.
 
 The `NO_ERRORS_SCHEMA` approach is the easier of the two but don't overuse it.
 
 The `NO_ERRORS_SCHEMA` also prevents the compiler from telling you about the missing components and attributes that you omitted inadvertently or misspelled.
 You could waste hours chasing phantom bugs that the compiler would have caught in an instant.
 
-The *stub component* approach has another advantage.
-While the stubs in *this* example were empty, you could give them stripped-down templates and classes if your tests need to interact with them in some way.
+The _stub component_ approach has another advantage.
+While the stubs in _this_ example were empty, you could give them stripped-down templates and classes if your tests need to interact with them in some way.
 
 In practice you will combine the two techniques in the same setup, as seen in this example.
 
-<docs-code header="app/app.component.spec.ts (mixed setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="mixed-setup"/>
+<docs-code header="app.component.spec.ts (mixed setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="mixed-setup"/>
 
 The Angular compiler creates the `BannerStubComponent` for the `<app-banner>` element and applies the `RouterLink` to the anchors with the `routerLink` attribute, but it ignores the `<app-welcome>` and `<router-outlet>` tags.
 
@@ -662,21 +660,21 @@ The Angular compiler creates the `BannerStubComponent` for the `<app-banner>` el
 
 A little more setup triggers the initial data binding and gets references to the navigation links:
 
-<docs-code header="app/app.component.spec.ts (test setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="test-setup"/>
+<docs-code header="app.component.spec.ts (test setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="test-setup"/>
 
 Three points of special interest:
 
-* Locate the anchor elements with an attached directive using `By.directive`
-* The query returns `DebugElement` wrappers around the matching elements
-* Each `DebugElement` exposes a dependency injector with the specific instance of the directive attached to that element
+- Locate the anchor elements with an attached directive using `By.directive`
+- The query returns `DebugElement` wrappers around the matching elements
+- Each `DebugElement` exposes a dependency injector with the specific instance of the directive attached to that element
 
 The `AppComponent` links to validate are as follows:
 
-<docs-code header="app/app.component.html (navigation links)" path="adev/src/content/examples/testing/src/app/app.component.html" visibleRegion="links"/>
+<docs-code header="app.component.html (navigation links)" path="adev/src/content/examples/testing/src/app/app.component.html" visibleRegion="links"/>
 
 Here are some tests that confirm those links are wired to the `routerLink` directives as expected:
 
-<docs-code header="app/app.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="app.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="tests"/>
 
 ## Use a `page` object
 
@@ -685,14 +683,14 @@ The `HeroDetailComponent` is a simple view with a title, two hero fields, and tw
 But there's plenty of template complexity even in this simple form.
 
 <docs-code
-  path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.html" header="app/hero/hero-detail.component.html"/>
+  path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.html" header="hero-detail.component.html"/>
 
 Tests that exercise the component need …
 
-* To wait until a hero arrives before elements appear in the DOM
-* A reference to the title text
-* A reference to the name input box to inspect and set it
-* References to the two buttons so they can click them
+- To wait until a hero arrives before elements appear in the DOM
+- A reference to the title text
+- A reference to the name input box to inspect and set it
+- References to the two buttons so they can click them
 
 Even a small form such as this one can produce a mess of tortured conditional setup and CSS element selection.
 
@@ -700,29 +698,29 @@ Tame the complexity with a `Page` class that handles access to component propert
 
 Here is such a `Page` class for the `hero-detail.component.spec.ts`
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (Page)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="page"/>
+<docs-code header="hero-detail.component.spec.ts (Page)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="page"/>
 
 Now the important hooks for component manipulation and inspection are neatly organized and accessible from an instance of `Page`.
 
 A `createComponent` method creates a `page` object and fills in the blanks once the `hero` arrives.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (createComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="create-component"/>
+<docs-code header="hero-detail.component.spec.ts (createComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="create-component"/>
 
 Here are a few more `HeroDetailComponent` tests to reinforce the point.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="selected-tests"/>
+<docs-code header="hero-detail.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="selected-tests"/>
 
 ## Override component providers
 
 The `HeroDetailComponent` provides its own `HeroDetailService`.
 
-<docs-code header="app/hero/hero-detail.component.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="prototype"/>
+<docs-code header="hero-detail.component.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="prototype"/>
 
 It's not possible to stub the component's `HeroDetailService` in the `providers` of the `TestBed.configureTestingModule`.
-Those are providers for the *testing module*, not the component.
-They prepare the dependency injector at the *fixture level*.
+Those are providers for the _testing module_, not the component.
+They prepare the dependency injector at the _fixture level_.
 
-Angular creates the component with its *own* injector, which is a *child* of the fixture injector.
+Angular creates the component with its _own_ injector, which is a _child_ of the fixture injector.
 It registers the component's providers \(the `HeroDetailService` in this case\) with the child injector.
 
 A test cannot get to child injector services from the fixture injector.
@@ -735,25 +733,25 @@ There might not be a remote server to call.
 
 Fortunately, the `HeroDetailService` delegates responsibility for remote data access to an injected `HeroService`.
 
-<docs-code header="app/hero/hero-detail.service.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts" visibleRegion="prototype"/>
+<docs-code header="hero-detail.service.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts" visibleRegion="prototype"/>
 
-The [previous test configuration](#import-a-feature-module) replaces the real `HeroService` with a `TestHeroService` that intercepts server requests and fakes their responses.
+The previous test configuration replaces the real `HeroService` with a `TestHeroService` that intercepts server requests and fakes their responses.
 
 What if you aren't so lucky.
 What if faking the `HeroService` is hard?
 What if `HeroDetailService` makes its own server requests?
 
-The `TestBed.overrideComponent` method can replace the component's `providers` with easy-to-manage *test doubles* as seen in the following setup variation:
+The `TestBed.overrideComponent` method can replace the component's `providers` with easy-to-manage _test doubles_ as seen in the following setup variation:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (Override setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-override"/>
+<docs-code header="hero-detail.component.spec.ts (Override setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-override"/>
 
-Notice that `TestBed.configureTestingModule` no longer provides a fake `HeroService` because it's [not needed](#spy-stub).
+Notice that `TestBed.configureTestingModule` no longer provides a fake `HeroService` because it's [not needed](#provide-a-spy-stub-herodetailservicespy).
 
 ### The `overrideComponent` method
 
 Focus on the `overrideComponent` method.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (overrideComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-component-method"/>
+<docs-code header="hero-detail.component.spec.ts (overrideComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-component-method"/>
 
 It takes two arguments: the component type to override \(`HeroDetailComponent`\) and an override metadata object.
 The [override metadata object](guide/testing/utility-apis#metadata-override-object) is a generic defined as follows:
@@ -761,9 +759,9 @@ The [override metadata object](guide/testing/utility-apis#metadata-override-obje
 <docs-code language="javascript">
 
 type MetadataOverride<T> = {
-  add?: Partial<T>;
-  remove?: Partial<T>;
-  set?: Partial<T>;
+add?: Partial<T>;
+remove?: Partial<T>;
+set?: Partial<T>;
 };
 
 </docs-code>
@@ -783,7 +781,7 @@ providers?: any[];
 
 </docs-code>
 
-### Provide a *spy stub* (`HeroDetailServiceSpy`)
+### Provide a _spy stub_ (`HeroDetailServiceSpy`)
 
 This example completely replaces the component's `providers` array with a new array containing a `HeroDetailServiceSpy`.
 
@@ -793,13 +791,13 @@ It neither injects nor delegates to the lower level `HeroService` so there's no
 The related `HeroDetailComponent` tests will assert that methods of the `HeroDetailService` were called by spying on the service methods.
 Accordingly, the stub implements its methods as spies:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (HeroDetailServiceSpy)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="hds-spy"/>
+<docs-code header="hero-detail.component.spec.ts (HeroDetailServiceSpy)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="hds-spy"/>
 
 ### The override tests
 
 Now the tests can control the component's hero directly by manipulating the spy-stub's `testHero` and confirm that service methods were called.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (override tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-tests"/>
+<docs-code header="hero-detail.component.spec.ts (override tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-tests"/>
 
 ### More overrides
 
diff --git a/adev-es/src/content/guide/testing/components-scenarios.md b/adev-es/src/content/guide/testing/components-scenarios.md
index 976ef8e..f3daee8 100644
--- a/adev-es/src/content/guide/testing/components-scenarios.md
+++ b/adev-es/src/content/guide/testing/components-scenarios.md
@@ -8,17 +8,17 @@ En la aplicación de ejemplo, el `BannerComponent` presenta texto de título est
 
 Después de algunos cambios, el `BannerComponent` presenta un título dinámico vinculándose a la propiedad `title` del componente como esto.
 
-<docs-code header="app/banner/banner.component.ts" path="adev/src/content/examples/testing/src/app/banner/banner.component.ts" visibleRegion="component"/>
+<docs-code header="banner.component.ts" path="adev/src/content/examples/testing/src/app/banner/banner.component.ts" visibleRegion="component"/>
 
 Por mínimo que sea esto, decides agregar una prueba para confirmar que el componente realmente muestra el contenido correcto donde crees que debería.
 
 ### Consultar por el `<h1>`
 
-Escribirás una secuencia de pruebas que inspeccionan el valor del elemento `<h1>` que envuelve el binding de interpolación de la propiedad *title*.
+Escribirás una secuencia de pruebas que inspeccionan el valor del elemento `<h1>` que envuelve el binding de interpolación de la propiedad _title_.
 
 Actualizas el `beforeEach` para encontrar ese elemento con un `querySelector` HTML estándar y asignarlo a la variable `h1`.
 
-<docs-code header="app/banner/banner.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="banner.component.spec.ts (configuración)" path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="setup"/>
 
 ### `createComponent()` no vincula datos
 
@@ -27,7 +27,7 @@ Tu instinto es escribir una prueba que inmediatamente inspecciona el `<h1>` así
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default-v1"/>
 
-*Esa prueba falla* con el mensaje:
+_Esa prueba falla_ con el mensaje:
 
 <docs-code language="javascript">
 
@@ -51,9 +51,9 @@ Solo entonces el `<h1>` tiene el título esperado.
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="expect-h1-default"/>
 
 La detección de cambios retrasada es intencional y útil.
-Le da al probador una oportunidad de inspeccionar y cambiar el estado del componente *antes de que Angular inicie el binding de datos y llame a [hooks de ciclo de vida](guide/components/lifecycle)*.
+Le da al probador una oportunidad de inspeccionar y cambiar el estado del componente _antes de que Angular inicie el binding de datos y llame a [hooks de ciclo de vida](guide/components/lifecycle)_.
 
-Aquí hay otra prueba que cambia la propiedad `title` del componente *antes* de llamar a `fixture.detectChanges()`.
+Aquí hay otra prueba que cambia la propiedad `title` del componente _antes_ de llamar a `fixture.detectChanges()`.
 
 <docs-code path="adev/src/content/examples/testing/src/app/banner/banner.component.spec.ts" visibleRegion="after-change"/>
 
@@ -65,17 +65,19 @@ Muchos probadores prefieren que el entorno de prueba de Angular ejecute la detec
 Eso es posible configurando el `TestBed` con el provider `ComponentFixtureAutoDetect`.
 Primero impórtalo de la librería utilitaria de testing:
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (import)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="import-ComponentFixtureAutoDetect"/>
+<docs-code header="banner.component.detect-changes.spec.ts (importar)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="import-ComponentFixtureAutoDetect"/>
 
 Luego agrégalo al array `providers` de la configuración del módulo de testing:
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect"/>
+<docs-code header="banner.component.detect-changes.spec.ts (AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect"/>
 
-ÚTIL: También puedes usar la función `fixture.autoDetectChanges()` en su lugar si solo quieres habilitar la detección automática de cambios después de hacer actualizaciones al estado del componente del fixture. Además, la detección automática de cambios está activada por defecto cuando usas `provideZonelessChangeDetection` y desactivarla no es recomendado.
+ÚTIL: También puedes usar la función `fixture.autoDetectChanges()` en su lugar si solo quieres habilitar la detección automática de cambios 
+después de hacer actualizaciones al estado del componente del fixture. Además, la detección automática de cambios está activada por defecto 
+cuando usas `provideZonelessChangeDetection` y desactivarla no es recomendado.
 
 Aquí hay tres pruebas que ilustran cómo funciona la detección automática de cambios.
 
-<docs-code header="app/banner/banner.component.detect-changes.spec.ts (AutoDetect Tests)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect-tests"/>
+<docs-code header="banner.component.detect-changes.spec.ts (Pruebas AutoDetect)" path="adev/src/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts" visibleRegion="auto-detect-tests"/>
 
 La primera prueba muestra el beneficio de la detección automática de cambios.
 
@@ -83,7 +85,8 @@ La segunda y tercera prueba revelan una limitación importante.
 El entorno de testing de Angular no ejecuta detección de cambios síncronamente cuando las actualizaciones ocurren dentro del caso de prueba que cambió el `title` del componente.
 La prueba debe llamar a `await fixture.whenStable` para esperar otra ronda de detección de cambios.
 
-ÚTIL: Angular no sabe sobre actualizaciones directas a valores que no son signals. La forma más fácil de asegurar que la detección de cambios se programe es usar signals para valores leídos en la plantilla.
+ÚTIL: Angular no sabe sobre actualizaciones directas a valores que no son signals. La forma más fácil de asegurar que la detección de cambios se 
+programe es usar signals para valores leídos en la plantilla.
 
 ### Cambiar un valor de input con `dispatchEvent()`
 
@@ -96,15 +99,15 @@ No leerá esa propiedad hasta que generes el evento `input` del elemento llamand
 
 El siguiente ejemplo demuestra la secuencia adecuada.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
+<docs-code header="hero-detail.component.spec.ts (prueba de pipe)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
 
 ## Componente con archivos externos
 
-El `BannerComponent` precedente está definido con una *plantilla inline* y *css inline*, especificados en las propiedades `@Component.template` y `@Component.styles` respectivamente.
+El `BannerComponent` precedente está definido con una _plantilla inline_ y _css inline_, especificados en las propiedades `@Component.template` y `@Component.styles` respectivamente.
 
-Muchos componentes especifican *plantillas externas* y *css externo* con las propiedades `@Component.templateUrl` y `@Component.styleUrls` respectivamente, como lo hace la siguiente variante de `BannerComponent`.
+Muchos componentes especifican _plantillas externas_ y _css externo_ con las propiedades `@Component.templateUrl` y `@Component.styleUrls` respectivamente, como lo hace la siguiente variante de `BannerComponent`.
 
-<docs-code header="app/banner/banner-external.component.ts (metadata)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts" visibleRegion="metadata"/>
+<docs-code header="banner-external.component.ts (metadatos)" path="adev/src/content/examples/testing/src/app/banner/banner-external.component.ts" visibleRegion="metadata"/>
 
 Esta sintaxis le dice al compilador de Angular que lea los archivos externos durante la compilación del componente.
 
@@ -123,7 +126,7 @@ Please call "TestBed.compileComponents" before your test.
 
 Obtienes este mensaje de fallo de prueba cuando el entorno de runtime compila el código fuente *durante las pruebas mismas*.
 
-Para corregir el problema, llama a `compileComponents()` como se explica en la siguiente sección [Llamando compileComponents](#calling-compilecomponents).
+Para corregir el problema, llama a `compileComponents()`.
 
 ## Componente con una dependencia
 
@@ -132,13 +135,13 @@ Los componentes a menudo tienen dependencias de servicio.
 El `WelcomeComponent` muestra un mensaje de bienvenida al usuario autenticado.
 Sabe quién es el usuario basado en una propiedad del `UserService` inyectado:
 
-<docs-code header="app/welcome/welcome.component.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.ts"/>
+<docs-code header="welcome.component.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.ts"/>
 
 El `WelcomeComponent` tiene lógica de decisión que interactúa con el servicio, lógica que hace que este componente valga la pena probar.
 
 ### Proporcionar dobles de prueba de servicio
 
-Un *componente-bajo-prueba* no tiene que ser proporcionado con servicios reales.
+Un _componente-bajo-prueba_ no tiene que ser proporcionado con servicios reales.
 
 Inyectar el `UserService` real podría ser difícil.
 El servicio real podría pedirle al usuario credenciales de inicio de sesión e intentar llegar a un servidor de autenticación.
@@ -151,8 +154,8 @@ Las pruebas necesitan acceso al `UserService` inyectado en el `WelcomeComponent`
 Angular tiene un sistema de inyección jerárquico.
 Puede haber inyectores en múltiples niveles, desde el inyector raíz creado por el `TestBed` hacia abajo a través del árbol de componentes.
 
-La forma más segura de obtener el servicio inyectado, la forma que ***siempre funciona***,
-es **obtenerlo del inyector del *componente-bajo-prueba***.
+La forma más segura de obtener el servicio inyectado, la forma que **_siempre funciona_**,
+es **obtenerlo del inyector del **_componente-bajo-prueba_**.
 El inyector del componente es una propiedad del `DebugElement` del fixture.
 
 <docs-code header="WelcomeComponent's injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="injected-service"/>
@@ -163,21 +166,21 @@ El inyector del componente es una propiedad del `DebugElement` del fixture.
 
 Esto es más fácil de recordar y menos verboso que recuperar un servicio usando el `DebugElement` del fixture.
 
-En esta suite de pruebas, el *único* provider de `UserService` es el módulo de testing raíz, por lo que es seguro llamar a `TestBed.inject()` de la siguiente manera:
+En esta suite de pruebas, el _único_ provider de `UserService` es el módulo de testing raíz, por lo que es seguro llamar a `TestBed.inject()` de la siguiente manera:
 
 <docs-code header="TestBed injector" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="inject-from-testbed" />
 
-ÚTIL: Para un caso de uso en el que `TestBed.inject()` no funciona, consulta la sección [*Override component providers*](#override-component-providers) que explica cuándo y por qué debes obtener el servicio del inyector del componente en su lugar.
+ÚTIL: Para un caso de uso en el que `TestBed.inject()` no funciona, consulta la sección [_Override component providers_](#override-component-providers) que explica cuándo y por qué debes obtener el servicio del inyector del componente en su lugar.
 
 ### Configuración final y pruebas
 
 Aquí está el `beforeEach()` completo, usando `TestBed.inject()`:
 
-<docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="setup"/>
 
 Y aquí hay algunas pruebas:
 
-<docs-code header="app/welcome/welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="welcome.component.spec.ts" path="adev/src/content/examples/testing/src/app/welcome/welcome.component.spec.ts" visibleRegion="tests"/>
 
 La primera es una prueba de cordura; confirma que el `UserService` es llamado y funciona.
 
@@ -194,14 +197,14 @@ La tercera prueba verifica que el componente muestra el mensaje apropiado cuando
 En esta muestra, la plantilla `AboutComponent` aloja un `TwainComponent`.
 El `TwainComponent` muestra citas de Mark Twain.
 
-<docs-code header="app/twain/twain.component.ts (template)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="template" />
+<docs-code header="twain.component.ts (plantilla)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="template" />
 
 ÚTIL: El valor de la propiedad `quote` del componente pasa a través de un `AsyncPipe`.
 Eso significa que la propiedad retorna ya sea una `Promise` o un `Observable`.
 
 En este ejemplo, el método `TwainComponent.getQuote()` te dice que la propiedad `quote` retorna un `Observable`.
 
-<docs-code header="app/twain/twain.component.ts (getQuote)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="get-quote"/>
+<docs-code header="twain.component.ts (getQuote)" path="adev/src/content/examples/testing/src/app/twain/twain.component.ts" visibleRegion="get-quote"/>
 
 El `TwainComponent` obtiene citas de un `TwainService` inyectado.
 El componente inicia el `Observable` retornado con un valor placeholder \(`'...'`\), antes de que el servicio pueda retornar su primera cita.
@@ -215,9 +218,9 @@ Estas son todas características que querrás probar.
 Cuando se prueba un componente, solo la API pública del servicio debería importar.
 En general, las pruebas mismas no deberían hacer llamadas a servidores remotos.
 Deberían emular tales llamadas.
-La configuración en este `app/twain/twain.component.spec.ts` muestra una forma de hacerlo:
+La configuración en este `twain.component.spec.ts` muestra una forma de hacerlo:
 
-<docs-code header="app/twain/twain.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="twain.component.spec.ts (configuración)" path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="setup"/>
 
 Enfócate en el spy.
 
@@ -244,7 +247,7 @@ La siguiente prueba confirma el comportamiento esperado cuando el servicio retor
 
 <docs-code language="javascript">
 
-fakeAsync(() => { /*test body*/ })
+fakeAsync(() => { /_test body_/ })
 
 </docs-code>
 
@@ -253,7 +256,7 @@ El cuerpo de la prueba aparece ser síncrono.
 No hay sintaxis anidada \(como un `Promise.then()`\) para interrumpir el flujo de control.
 
 ÚTIL: Limitación: La función `fakeAsync()` no funcionará si el cuerpo de la prueba hace una llamada `XMLHttpRequest` \(XHR\).
-Las llamadas XHR dentro de una prueba son raras, pero si necesitas llamar XHR, consulta la sección [`waitForAsync()`](#waitForAsync).
+Las llamadas XHR dentro de una prueba son raras, pero si necesitas llamar XHR, consulta la sección [`waitForAsync()`](#prueba-async-sin-fakeasync).
 
 IMPORTANTE: Ten en cuenta que las tareas asíncronas que ocurren dentro de la zona `fakeAsync` necesitan ejecutarse manualmente con `flush` o `tick`. Si intentas esperar a que se completen (es decir, usando `fixture.whenStable`) sin usar los helpers de prueba `fakeAsync` para avanzar el tiempo, tu prueba probablemente fallará. Ver abajo para más información.
 
@@ -302,7 +305,7 @@ Si usas Angular CLI, configura esta bandera en `src/test.ts`.
 
 <docs-code language="typescript">
 
-[window as any]('&lowbar;&lowbar;zone&lowbar;symbol__fakeAsyncPatchLock') = true;
+[window as any]('__zone_symbol__fakeAsyncPatchLock') = true;
 import 'zone.js/testing';
 
 </docs-code>
@@ -319,27 +322,27 @@ También puedes usar el scheduler de RxJS en `fakeAsync()` igual que usando `set
 
 Por defecto, `fakeAsync()` soporta las siguientes macro tasks.
 
-* `setTimeout`
-* `setInterval`
-* `requestAnimationFrame`
-* `webkitRequestAnimationFrame`
-* `mozRequestAnimationFrame`
+- `setTimeout`
+- `setInterval`
+- `requestAnimationFrame`
+- `webkitRequestAnimationFrame`
+- `mozRequestAnimationFrame`
 
-Si ejecutas otras macro tasks como `HTMLCanvasElement.toBlob()`, se lanza un error *"Unknown macroTask scheduled in fake async test"*.
+Si ejecutas otras macro tasks como `HTMLCanvasElement.toBlob()`, se lanza un error _"Unknown macroTask scheduled in fake async test"_.
 
 <docs-code-multifile>
-    <docs-code header="src/app/shared/canvas.component.spec.ts (failing)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="without-toBlob-macrotask"/>
-    <docs-code header="src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="main"/>
+    <docs-code header="canvas.component.spec.ts (fallando)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="without-toBlob-macrotask"/>
+    <docs-code header="canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="main"/>
 </docs-code-multifile>
 
 Si quieres soportar tal caso, necesitas definir la macro task que quieres soportar en `beforeEach()`.
 Por ejemplo:
 
-<docs-code header="src/app/shared/canvas.component.spec.ts (excerpt)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="enable-toBlob-macrotask"/>
+<docs-code header="canvas.component.spec.ts (extracto)" path="adev/src/content/examples/testing/src/app/shared/canvas.component.spec.ts" visibleRegion="enable-toBlob-macrotask"/>
 
 ÚTIL: Para hacer que el elemento `<canvas>` sea Zone.js-aware en tu aplicación, necesitas importar el parche `zone-patch-canvas` \(ya sea en `polyfills.ts` o en el archivo específico que usa `<canvas>`\):
 
-<docs-code header="src/polyfills.ts or src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="import-canvas-patch"/>
+<docs-code header="src/polyfills.ts o src/app/shared/canvas.component.ts" path="adev/src/content/examples/testing/src/app/shared/canvas.component.ts" visibleRegion="import-canvas-patch"/>
 
 ### Observables async
 
@@ -349,7 +352,7 @@ Sin embargo, podrías estar preocupado por el hecho de que el servicio real no s
 El servicio real envía solicitudes a un servidor remoto.
 Un servidor toma tiempo en responder y la respuesta ciertamente no estará disponible inmediatamente como en las dos pruebas anteriores.
 
-Tus pruebas reflejarán el mundo real más fielmente si retornas un observable *asíncrono* del spy `getQuote()` así.
+Tus pruebas reflejarán el mundo real más fielmente si retornas un observable _asíncrono_ del spy `getQuote()` así.
 
 <docs-code path="adev/src/content/examples/testing/src/app/twain/twain.component.spec.ts" visibleRegion="async-setup"/>
 
@@ -364,7 +367,7 @@ El observable de este helper emite el valor `data` en el siguiente turno del mot
 
 El [operador `defer()` de RxJS](http://reactivex.io/documentation/operators/defer.html) retorna un observable.
 Toma una función factory que retorna ya sea una promesa o un observable.
-Cuando algo se suscribe al observable de *defer*, agrega el suscriptor a un nuevo observable creado con esa factory.
+Cuando algo se suscribe al observable de _defer_, agrega el suscriptor a un nuevo observable creado con esa factory.
 
 El operador `defer()` transforma el `Promise.resolve()` en un nuevo observable que, como `HttpClient`, emite una vez y se completa.
 Los suscriptores se desuscriben después de recibir el valor de datos.
@@ -418,20 +421,20 @@ Hacer clic en ese héroe le dice al `DashboardComponent` que el usuario ha selec
 
 El `DashboardHeroComponent` está incrustado en la plantilla `DashboardComponent` así:
 
-<docs-code header="app/dashboard/dashboard.component.html (excerpt)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.html" visibleRegion="dashboard-hero"/>
+<docs-code header="dashboard.component.html (extracto)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.html" visibleRegion="dashboard-hero"/>
 
 El `DashboardHeroComponent` aparece en un bloque `@for`, que establece la propiedad input `hero` de cada componente al valor de bucle y escucha el evento `selected` del componente.
 
 Aquí está la definición completa del componente:
 
-<docs-code header="app/dashboard/dashboard-hero.component.ts (component)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts" visibleRegion="component"/>
+<docs-code header="dashboard-hero.component.ts (componente)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts" visibleRegion="component"/>
 
 Aunque probar un componente tan simple tiene poco valor intrínseco, vale la pena saber cómo.
 Usa uno de estos enfoques:
 
-* Probarlo como se usa por `DashboardComponent`
-* Probarlo como un componente standalone
-* Probarlo como se usa por un sustituto para `DashboardComponent`
+- Probarlo como se usa por `DashboardComponent`
+- Probarlo como un componente standalone
+- Probarlo como se usa por un sustituto para `DashboardComponent`
 
 El objetivo inmediato es probar el `DashboardHeroComponent`, no el `DashboardComponent`, así que, prueba la segunda y tercera opciones.
 
@@ -439,7 +442,7 @@ El objetivo inmediato es probar el `DashboardHeroComponent`, no el `DashboardCom
 
 Aquí está la parte principal de la configuración del archivo spec.
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="setup"/>
+<docs-code header="dashboard-hero.component.spec.ts (configuración)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="setup"/>
 
 Nota cómo el código de configuración asigna un héroe de prueba \(`expectedHero`\) a la propiedad `hero` del componente, emulando la forma en que el `DashboardComponent` lo establecería usando el property binding en su repeater.
 
@@ -447,7 +450,7 @@ La siguiente prueba verifica que el nombre del héroe se propaga a la plantilla
 
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="name-test"/>
 
-Porque la [plantilla](#dashboard-hero-component) pasa el nombre del héroe a través del `UpperCasePipe` de Angular, la prueba debe coincidir el valor del elemento con el nombre en mayúsculas.
+Porque la [plantilla](#probar-dashboardherocomponent-standalone) pasa el nombre del héroe a través del `UpperCasePipe` de Angular, la prueba debe coincidir el valor del elemento con el nombre en mayúsculas.
 
 ### Hacer clic
 
@@ -456,7 +459,7 @@ Hacer clic en el héroe debería generar un evento `selected` que el componente
 <docs-code path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test"/>
 
 La propiedad `selected` del componente retorna un `EventEmitter`, que se ve como un `Observable` síncrono de RxJS para los consumidores.
-La prueba se suscribe a él *explícitamente* igual que el componente host lo hace *implícitamente*.
+La prueba se suscribe a él _explícitamente_ igual que el componente host lo hace _implícitamente_.
 
 Si el componente se comporta como se espera, hacer clic en el elemento del héroe debería decirle a la propiedad `selected` del componente que emita el objeto `hero`.
 
@@ -470,7 +473,7 @@ Tiene propiedades y métodos de Angular que abstraen la interacción con el elem
 Esta prueba llama al `DebugElement.triggerEventHandler` con el nombre de evento "click".
 El binding de evento "click" responde llamando a `DashboardHeroComponent.click()`.
 
-El `DebugElement.triggerEventHandler` de Angular puede generar *cualquier evento vinculado a datos* por su *nombre de evento*.
+El `DebugElement.triggerEventHandler` de Angular puede generar _cualquier evento vinculado a datos_ por su _nombre de evento_.
 El segundo parámetro es el objeto de evento pasado al handler.
 
 La prueba desencadenó un evento "click".
@@ -493,29 +496,29 @@ La siguiente alternativa de prueba llama al método `click()` propio del element
 
 Hacer clic en un botón, un anchor, o un elemento HTML arbitrario es una tarea de prueba común.
 
-Haz eso consistente y directo encapsulando el proceso *click-triggering* en un helper como la siguiente función `click()`:
+Haz eso consistente y directo encapsulando el proceso _click-triggering en un helper como la siguiente función `click()`:
 
 <docs-code header="testing/index.ts (click helper)" path="adev/src/content/examples/testing/src/testing/index.ts" visibleRegion="click-event"/>
 
-El primer parámetro es el *elemento-a-hacer-clic*.
+El primer parámetro es el *elemento-a-hacer-clic_.
 Si quieres, pasa un objeto de evento personalizado como segundo parámetro.
 El predeterminado es un [objeto de evento de mouse de botón izquierdo](https://developer.mozilla.org/docs/Web/API/MouseEvent/button) parcial aceptado por muchos handlers incluyendo la directiva `RouterLink`.
 
 IMPORTANTE: La función helper `click()` **no** es una de las utilidades de testing de Angular.
-Es una función definida en el *código de muestra de esta guía*.
+Es una función definida en el _código de muestra de esta guía_.
 Todas las pruebas de muestra la usan.
 Si te gusta, agrégala a tu propia colección de helpers.
 
 Aquí está la prueba anterior, reescrita usando el helper click.
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test with click helper)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-3"/>
+<docs-code header="dashboard-hero.component.spec.ts (prueba con helper click)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="click-test-3"/>
 
 ## Componente dentro de un test host
 
 Las pruebas anteriores jugaron el rol del `DashboardComponent` host ellas mismas.
 ¿Pero funciona correctamente el `DashboardHeroComponent` cuando está correctamente vinculado a datos a un componente host?
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host"/>
+<docs-code header="dashboard-hero.component.spec.ts (test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host"/>
 
 El test host establece la propiedad input `hero` del componente con su héroe de prueba.
 Vincula el evento `selected` del componente con su handler `onSelected`, que registra el héroe emitido en su propiedad `selectedHero`.
@@ -524,7 +527,7 @@ Más tarde, las pruebas podrán verificar `selectedHero` para verificar que el e
 
 La configuración para las pruebas `test-host` es similar a la configuración para las pruebas standalone:
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test host setup)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-setup"/>
+<docs-code header="dashboard-hero.component.spec.ts (configuración test host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-setup"/>
 
 Esta configuración de módulo de testing muestra dos diferencias importantes:
 
@@ -538,23 +541,23 @@ La consulta para el elemento héroe \(`heroEl`\) aún lo encuentra en el DOM de
 
 Las pruebas mismas son casi idénticas a la versión standalone:
 
-<docs-code header="app/dashboard/dashboard-hero.component.spec.ts (test-host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-tests"/>
+<docs-code header="dashboard-hero.component.spec.ts (test-host)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts" visibleRegion="test-host-tests"/>
 
 Solo la prueba de evento selected difiere.
 Confirma que el héroe `DashboardHeroComponent` seleccionado realmente encuentra su camino hacia arriba a través del event binding al componente host.
 
 ## Componente de enrutamiento
 
-Un *componente de enrutamiento* es un componente que le dice al `Router` que navegue a otro componente.
-El `DashboardComponent` es un *componente de enrutamiento* porque el usuario puede navegar al `HeroDetailComponent` haciendo clic en uno de los *botones de héroe* en el dashboard.
+Un _componente de enrutamiento_ es un componente que le dice al `Router` que navegue a otro componente.
+El `DashboardComponent` es un _componente de enrutamiento_ porque el usuario puede navegar al `HeroDetailComponent` haciendo clic en uno de los _botones de héroe_ en el dashboard.
 
 Angular proporciona helpers de prueba para reducir boilerplate y probar más efectivamente código que depende de `HttpClient`. La función `provideRouter` puede usarse directamente en el módulo de prueba también.
 
-<docs-code header="app/dashboard/dashboard.component.spec.ts" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="router-harness"/>
+<docs-code header="dashboard.component.spec.ts" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="router-harness"/>
 
 La siguiente prueba hace clic en el héroe mostrado y confirma que navegamos a la URL esperada.
 
-<docs-code header="app/dashboard/dashboard.component.spec.ts (navigate test)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="navigate-test"/>
+<docs-code header="dashboard.component.spec.ts (prueba de navegación)" path="adev/src/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts" visibleRegion="navigate-test"/>
 
 ## Componentes enrutados
 
@@ -570,15 +573,15 @@ Crea un objeto `ActivatedRoute` con la información de enrutamiento y lo inyecta
 
 Aquí están los servicios inyectados en `HeroDetailComponent`:
 
-<docs-code header="app/hero/hero-detail.component.ts (inject)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="inject"/>
+<docs-code header="hero-detail.component.ts (inyectar)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="inject"/>
 
 El componente `HeroDetail` necesita el parámetro `id` para poder obtener el héroe correspondiente usando el `HeroDetailService`.
 El componente tiene que obtener el `id` de la propiedad `ActivatedRoute.paramMap` que es un `Observable`.
 
 No puede simplemente referenciar la propiedad `id` del `ActivatedRoute.paramMap`.
-El componente tiene que *suscribirse* al observable `ActivatedRoute.paramMap` y estar preparado para que el `id` cambie durante su vida útil.
+El componente tiene que _suscribirse_ al observable `ActivatedRoute.paramMap` y estar preparado para que el `id` cambie durante su vida útil.
 
-<docs-code header="app/hero/hero-detail.component.ts (constructor)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ctor"/>
+<docs-code header="hero-detail.component.ts (constructor)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="ctor"/>
 
 Las pruebas pueden explorar cómo el `HeroDetailComponent` responde a diferentes valores de parámetro `id` navegando a diferentes rutas.
 
@@ -590,9 +593,9 @@ El árbol de componentes puede ser muy profundo y a veces los componentes anidad
 
 El `AppComponent`, por ejemplo, muestra una barra de navegación con anchors y sus directivas `RouterLink`.
 
-<docs-code header="app/app.component.html" path="adev/src/content/examples/testing/src/app/app.component.html"/>
+<docs-code header="app.component.html" path="adev/src/content/examples/testing/src/app/app.component.html"/>
 
-Para validar los enlaces pero no la navegación, no necesitas el `Router` para navegar y no necesitas el `<router-outlet>` para marcar dónde el `Router` inserta *componentes enrutados*.
+Para validar los enlaces pero no la navegación, no necesitas el `Router` para navegar y no necesitas el `<router-outlet>` para marcar dónde el `Router` inserta _componentes enrutados_.
 
 El `BannerComponent` y `WelcomeComponent` \(indicados por `<app-banner>` y `<app-welcome>`\) también son irrelevantes.
 
@@ -600,7 +603,7 @@ Sin embargo, cualquier prueba que cree el `AppComponent` en el DOM también crea
 
 Si descuidas declararlos, el compilador de Angular no reconocerá las etiquetas `<app-banner>`, `<app-welcome>` y `<router-outlet>` en la plantilla `AppComponent` y lanzará un error.
 
-Si declaras los componentes reales, también tendrás que declarar *sus* componentes anidados y proporcionar *todos* los servicios inyectados en *cualquier* componente en el árbol.
+Si declaras los componentes reales, también tendrás que declarar _sus_ componentes anidados y proporcionar _todos_ los servicios inyectados en _cualquier_ componente en el árbol.
 
 Esta sección describe dos técnicas para minimizar la configuración.
 Úsalas, solas o en combinación, para mantener el foco en probar el componente primario.
@@ -609,14 +612,14 @@ Esta sección describe dos técnicas para minimizar la configuración.
 
 En la primera técnica, creas y declaras versiones stub de los componentes y directiva que juegan poco o ningún rol en las pruebas.
 
-<docs-code header="app/app.component.spec.ts (stub declaration)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="component-stubs"/>
+<docs-code header="app.component.spec.ts (declaración stub)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="component-stubs"/>
 
 Los selectores stub coinciden con los selectores para los componentes reales correspondientes.
 Pero sus plantillas y clases están vacías.
 
-Luego declár alos sobrescribiendo los `imports` de tu componente usando `TestBed.overrideComponent`. 
+Luego decláralos sobrescribiendo los `imports` de tu componente usando `TestBed.overrideComponent`. 
 
-<docs-code header="app/app.component.spec.ts (TestBed stubs)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="testbed-stubs"/>
+<docs-code header="app.component.spec.ts (stubs TestBed)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="testbed-stubs"/>
 
 ÚTIL: La clave `set` en este ejemplo reemplaza todos los imports existentes en tu componente, asegúrate de importar todas las dependencias, no solo los stubs. Alternativamente puedes usar las claves `remove`/`add` para remover y agregar imports selectivamente.
 
@@ -624,7 +627,7 @@ Luego declár alos sobrescribiendo los `imports` de tu componente usando `TestBe
 
 En el segundo enfoque, agrega `NO_ERRORS_SCHEMA` a los overrides de metadata de tu componente.
 
-<docs-code header="app/app.component.spec.ts (NO_ERRORS_SCHEMA)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="no-errors-schema"/>
+<docs-code header="app.component.spec.ts (NO_ERRORS_SCHEMA)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="no-errors-schema"/>
 
 El `NO_ERRORS_SCHEMA` le dice al compilador de Angular que ignore elementos y atributos no reconocidos.
 
@@ -637,19 +640,19 @@ Ya no necesitas los componentes stub.
 
 ### Usar ambas técnicas juntas
 
-Estas son técnicas para *Shallow Component Testing*, llamadas así porque reducen la superficie visual del componente solo a aquellos elementos en la plantilla del componente que importan para las pruebas.
+Estas son técnicas para _Shallow Component Testing_, llamadas así porque reducen la superficie visual del componente solo a aquellos elementos en la plantilla del componente que importan para las pruebas.
 
 El enfoque `NO_ERRORS_SCHEMA` es el más fácil de los dos pero no lo uses en exceso.
 
 El `NO_ERRORS_SCHEMA` también evita que el compilador te diga sobre los componentes y atributos faltantes que omitiste inadvertidamente o escribiste mal.
 Podrías desperdiciar horas persiguiendo bugs fantasma que el compilador habría capturado en un instante.
 
-El enfoque de *componente stub* tiene otra ventaja.
-Aunque los stubs en *este* ejemplo están vacíos, podrías darles plantillas y clases reducidas si tus pruebas necesitan interactuar con ellos de alguna manera.
+El enfoque de _componente stub_ tiene otra ventaja.
+Aunque los stubs en _este_ ejemplo están vacíos, podrías darles plantillas y clases reducidas si tus pruebas necesitan interactuar con ellos de alguna manera.
 
 En la práctica combinarás las dos técnicas en la misma configuración, como se ve en este ejemplo.
 
-<docs-code header="app/app.component.spec.ts (mixed setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="mixed-setup"/>
+<docs-code header="app.component.spec.ts (configuración mixta)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="mixed-setup"/>
 
 El compilador de Angular crea el `BannerStubComponent` para el elemento `<app-banner>` y aplica el `RouterLink` a los anchors con el atributo `routerLink`, pero ignora las etiquetas `<app-welcome>` y `<router-outlet>`.
 
@@ -657,7 +660,7 @@ El compilador de Angular crea el `BannerStubComponent` para el elemento `<app-ba
 
 Un poco más de configuración desencadena el binding de datos inicial y obtiene referencias a los enlaces de navegación:
 
-<docs-code header="app/app.component.spec.ts (test setup)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="test-setup"/>
+<docs-code header="app.component.spec.ts (configuración de prueba)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="test-setup"/>
 
 Tres puntos de interés especial:
 
@@ -667,11 +670,11 @@ Tres puntos de interés especial:
 
 Los enlaces del `AppComponent` a validar son los siguientes:
 
-<docs-code header="app/app.component.html (navigation links)" path="adev/src/content/examples/testing/src/app/app.component.html" visibleRegion="links"/>
+<docs-code header="app.component.html (enlaces de navegación)" path="adev/src/content/examples/testing/src/app/app.component.html" visibleRegion="links"/>
 
 Aquí hay algunas pruebas que confirman que esos enlaces están conectados a las directivas `routerLink` como se espera:
 
-<docs-code header="app/app.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="tests"/>
+<docs-code header="app.component.spec.ts (pruebas seleccionadas)" path="adev/src/content/examples/testing/src/app/app.component.spec.ts" visibleRegion="tests"/>
 
 ## Usar un objeto `page`
 
@@ -680,14 +683,14 @@ El `HeroDetailComponent` es una vista simple con un título, dos campos de héro
 Pero hay bastante complejidad de plantilla incluso en este formulario simple.
 
 <docs-code
-  path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.html" header="app/hero/hero-detail.component.html"/>
+  path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.html" header="hero-detail.component.html"/>
 
 Las pruebas que ejercitan el componente necesitan…
 
-* Esperar hasta que un héroe llegue antes de que los elementos aparezcan en el DOM
-* Una referencia al texto del título
-* Una referencia al cuadro de entrada de nombre para inspeccionarlo y establecerlo
-* Referencias a los dos botones para poder hacer clic en ellos
+- Esperar hasta que un héroe llegue antes de que los elementos aparezcan en el DOM
+- Una referencia al texto del título
+- Una referencia al cuadro de entrada de nombre para inspeccionarlo y establecerlo
+- Referencias a los dos botones para poder hacer clic en ellos
 
 Incluso un formulario pequeño como este puede producir un lío de configuración condicional tortuosa y selección de elementos CSS.
 
@@ -695,29 +698,29 @@ Domestica la complejidad con una clase `Page` que maneja el acceso a las propied
 
 Aquí hay tal clase `Page` para el `hero-detail.component.spec.ts`
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (Page)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="page"/>
+<docs-code header="hero-detail.component.spec.ts (Page)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="page"/>
 
 Ahora los hooks importantes para manipulación e inspección de componentes están organizados ordenadamente y son accesibles desde una instancia de `Page`.
 
 Un método `createComponent` crea un objeto `page` y llena los espacios en blanco una vez que el `hero` llega.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (createComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="create-component"/>
+<docs-code header="hero-detail.component.spec.ts (createComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="create-component"/>
 
 Aquí hay algunas pruebas más de `HeroDetailComponent` para reforzar el punto.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (selected tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="selected-tests"/>
+<docs-code header="hero-detail.component.spec.ts (pruebas seleccionadas)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="selected-tests"/>
 
 ## Override component providers
 
 El `HeroDetailComponent` proporciona su propio `HeroDetailService`.
 
-<docs-code header="app/hero/hero-detail.component.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="prototype"/>
+<docs-code header="hero-detail.component.ts (prototipo)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.ts" visibleRegion="prototype"/>
 
 No es posible hacer stub del `HeroDetailService` del componente en los `providers` del `TestBed.configureTestingModule`.
-Esos son providers para el *módulo de testing*, no el componente.
-Preparan el inyector de dependencias en el *nivel del fixture*.
+Esos son providers para el _módulo de testing_, no el componente.
+Preparan el inyector de dependencias en el _nivel del fixture_.
 
-Angular crea el componente con su *propio* inyector, que es un *hijo* del inyector del fixture.
+Angular crea el componente con su _propio_ inyector, que es un _hijo_ del inyector del fixture.
 Registra los providers del componente \(el `HeroDetailService` en este caso\) con el inyector hijo.
 
 Una prueba no puede llegar a servicios del inyector hijo desde el inyector del fixture.
@@ -730,25 +733,25 @@ Podría no haber un servidor remoto al cual llamar.
 
 Afortunadamente, el `HeroDetailService` delega responsabilidad para acceso a datos remotos a un `HeroService` inyectado.
 
-<docs-code header="app/hero/hero-detail.service.ts (prototype)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts" visibleRegion="prototype"/>
+<docs-code header="hero-detail.service.ts (prototipo)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.service.ts" visibleRegion="prototype"/>
 
-La [configuración de prueba anterior](#import-a-feature-module) reemplaza el `HeroService` real con un `TestHeroService` que intercepta solicitudes de servidor y falsifica sus respuestas.
+La configuración de prueba anterior reemplaza el `HeroService` real con un `TestHeroService` que intercepta solicitudes de servidor y falsifica sus respuestas.
 
 ¿Qué pasa si no tienes tanta suerte?
 ¿Qué pasa si falsificar el `HeroService` es difícil?
 ¿Qué pasa si `HeroDetailService` hace sus propias solicitudes de servidor?
 
-El método `TestBed.overrideComponent` puede reemplazar los `providers` del componente con *test doubles* fáciles de manejar como se ve en la siguiente variación de configuración:
+El método `TestBed.overrideComponent` puede reemplazar los `providers` del componente con _test doubles_ fáciles de manejar como se ve en la siguiente variación de configuración:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (Override setup)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-override"/>
+<docs-code header="hero-detail.component.spec.ts (configuración Override)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="setup-override"/>
 
-Nota que `TestBed.configureTestingModule` ya no proporciona un `HeroService` falso porque [no es necesario](#spy-stub).
+Nota que `TestBed.configureTestingModule` ya no proporciona un `HeroService` falso porque [no es necesario](#proporcionar-un-spy-stub-herodetailservicespy).
 
 ### El método `overrideComponent`
 
 Enfócate en el método `overrideComponent`.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (overrideComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-component-method"/>
+<docs-code header="hero-detail.component.spec.ts (overrideComponent)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-component-method"/>
 
 Toma dos argumentos: el tipo de componente a sobrescribir \(`HeroDetailComponent`\) y un objeto de metadata de override.
 El [objeto de metadata de override](guide/testing/utility-apis#metadata-override-object) es un genérico definido como sigue:
@@ -778,7 +781,7 @@ providers?: any[];
 
 </docs-code>
 
-### Proporcionar un *spy stub* (`HeroDetailServiceSpy`)
+### Proporcionar un _spy stub_ (`HeroDetailServiceSpy`)
 
 Este ejemplo reemplaza completamente el array `providers` del componente con un nuevo array que contiene un `HeroDetailServiceSpy`.
 
@@ -788,13 +791,13 @@ No inyecta ni delega al `HeroService` de nivel inferior, por lo que no hay neces
 Las pruebas relacionadas con `HeroDetailComponent` afirmarán que los métodos del `HeroDetailService` fueron llamados espiando en los métodos del servicio.
 En consecuencia, el stub implementa sus métodos como spies:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (HeroDetailServiceSpy)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="hds-spy"/>
+<docs-code header="hero-detail.component.spec.ts (HeroDetailServiceSpy)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="hds-spy"/>
 
 ### Las pruebas override
 
 Ahora las pruebas pueden controlar el héroe del componente directamente manipulando el `testHero` del spy-stub y confirmar que los métodos del servicio fueron llamados.
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (override tests)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-tests"/>
+<docs-code header="hero-detail.component.spec.ts (pruebas override)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="override-tests"/>
 
 ### Más overrides
 
diff --git a/adev-es/src/content/guide/testing/creating-component-harnesses.en.md b/adev-es/src/content/guide/testing/creating-component-harnesses.en.md
index 622305a..fcce760 100644
--- a/adev-es/src/content/guide/testing/creating-component-harnesses.en.md
+++ b/adev-es/src/content/guide/testing/creating-component-harnesses.en.md
@@ -14,9 +14,9 @@ For components that appear in only one place, such as a page in an application,
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Extending `ComponentHarness`
 
@@ -37,11 +37,11 @@ The `hostSelector` property identifies elements in the DOM that match this harne
 class MyPopup {
   triggerText = input('');
 
-  isOpen = signal(false);
+isOpen = signal(false);
 
-  toggle() {
-    this.isOpen.update((value) => !value);
-  }
+toggle() {
+this.isOpen.update((value) => !value);
+}
 }
 </docs-code>
 
@@ -69,11 +69,11 @@ For example, the `MyPopupHarness` example discussed above could provide methods
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  // Gets the trigger element
-  getTriggerElement = this.locatorFor('button');
+// Gets the trigger element
+getTriggerElement = this.locatorFor('button');
 
-  // Gets the content element.
-  getContentElement = this.locatorForOptional('.my-popup-content');
+// Gets the content element.
+getContentElement = this.locatorForOptional('.my-popup-content');
 }
 </docs-code>
 
@@ -91,20 +91,20 @@ Instead, provide more narrow-focused methods for specific actions the end-user m
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  protected getTriggerElement = this.locatorFor('button');
-  protected getContentElement = this.locatorForOptional('.my-popup-content');
+protected getTriggerElement = this.locatorFor('button');
+protected getContentElement = this.locatorForOptional('.my-popup-content');
 
-  /** Toggles the open state of the popup. */
-  async toggle() {
-    const trigger = await this.getTriggerElement();
-    return trigger.click();
-  }
+/\*_ Toggles the open state of the popup. _/
+async toggle() {
+const trigger = await this.getTriggerElement();
+return trigger.click();
+}
 
-  /** Checks if the popup us open. */
-  async isOpen() {
-    const content = await this.getContentElement();
-    return !!content;
-  }
+/\*_ Checks if the popup us open. _/
+async isOpen() {
+const content = await this.getContentElement();
+return !!content;
+}
 }
 </docs-code>
 
@@ -123,17 +123,16 @@ For example, consider a menu build using the popup from above:
 class MyMenuItem {}
 
 @Component({
-  selector: 'my-menu',
-  template: `
-    <my-popup>
+selector: 'my-menu',
+template: `     <my-popup>
       <ng-content></ng-content>
     </my-popup>
   `
 })
 class MyMenu {
-  triggerText = input('');
+triggerText = input('');
 
-  @ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
+@ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
 }
 </docs-code>
 
@@ -143,20 +142,20 @@ The harness for `MyMenu` can then take advantage of other harnesses for `MyPopup
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  protected getPopupHarness = this.locatorFor(MyPopupHarness);
+protected getPopupHarness = this.locatorFor(MyPopupHarness);
 
-  /** Gets the currently shown menu items (empty list if menu is closed). */
-  getItems = this.locatorForAll(MyMenuItemHarness);
+/\*_ Gets the currently shown menu items (empty list if menu is closed). _/
+getItems = this.locatorForAll(MyMenuItemHarness);
 
-  /** Toggles open state of the menu. */
-  async toggle() {
-    const popupHarness = await this.getPopupHarness();
-    return popupHarness.toggle();
-  }
+/\*_ Toggles open state of the menu. _/
+async toggle() {
+const popupHarness = await this.getPopupHarness();
+return popupHarness.toggle();
+}
 }
 
 class MyMenuItemHarness extends ComponentHarness {
-  static hostSelector = 'my-menu-item';
+static hostSelector = 'my-menu-item';
 }
 </docs-code>
 
@@ -177,45 +176,45 @@ interface MyMenuHarnessFilters extends BaseHarnessFilters {
 }
 
 interface MyMenuItemHarnessFilters extends BaseHarnessFilters {
-  /** Filters based on the text of the menu item. */
-  text?: string | RegExp;
+/\*_ Filters based on the text of the menu item. _/
+text?: string | RegExp;
 }
 
 class MyMenuHarness extends ComponentHarness {
-  static hostSelector = 'my-menu';
+static hostSelector = 'my-menu';
+
+/\*_ Creates a `HarnessPredicate` used to locate a particular `MyMenuHarness`. _/
+static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
+return new HarnessPredicate(MyMenuHarness, options)
+.addOption('trigger text', options.triggerText,
+(harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
+}
+
+protected getPopupHarness = this.locatorFor(MyPopupHarness);
 
-  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuHarness`. */
-  static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
-    return new HarnessPredicate(MyMenuHarness, options)
-      .addOption('trigger text', options.triggerText,
-        (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
-  }
-
-  protected getPopupHarness = this.locatorFor(MyPopupHarness);
-
-  /** Gets the text of the menu trigger. */
-  async getTriggerText(): Promise<string> {
-    const popupHarness = await this.getPopupHarness();
-    return popupHarness.getTriggerText();
-  }
-  ...
+/\*_ Gets the text of the menu trigger. _/
+async getTriggerText(): Promise<string> {
+const popupHarness = await this.getPopupHarness();
+return popupHarness.getTriggerText();
+}
+...
 }
 
 class MyMenuItemHarness extends ComponentHarness {
-  static hostSelector = 'my-menu-item';
-
-  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuItemHarness`. */
-  static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
-    return new HarnessPredicate(MyMenuItemHarness, options)
-      .addOption('text', options.text,
-        (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
-  }
-
-  /** Gets the text of the menu item. */
-  async getText(): Promise<string> {
-    const host = await this.host();
-    return host.text();
-  }
+static hostSelector = 'my-menu-item';
+
+/\*_ Creates a `HarnessPredicate` used to locate a particular `MyMenuItemHarness`. _/
+static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
+return new HarnessPredicate(MyMenuItemHarness, options)
+.addOption('text', options.text,
+(harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+}
+
+/\*_ Gets the text of the menu item. _/
+async getText(): Promise<string> {
+const host = await this.host();
+return host.text();
+}
 }
 </docs-code>
 
@@ -225,12 +224,12 @@ You can pass a `HarnessPredicate` instead of a `ComponentHarness` class to any o
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Gets a list of items in the menu, optionally filtered based on the given criteria. */
-  async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
-    const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
-    return getFilteredItems();
-  }
-  ...
+/\*_ Gets a list of items in the menu, optionally filtered based on the given criteria. _/
+async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
+const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
+return getFilteredItems();
+}
+...
 }
 </docs-code>
 
@@ -260,11 +259,11 @@ Consider if the `MyPopup` component above used the CDK overlay for the popup con
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  /** Gets a `HarnessLoader` whose root element is the popup's content element. */
-  async getHarnessLoaderForContent(): Promise<HarnessLoader> {
-    const rootLocator = this.documentRootLocatorFactory();
-    return rootLocator.harnessLoaderFor('my-popup-content');
-  }
+/\*_ Gets a `HarnessLoader` whose root element is the popup's content element. _/
+async getHarnessLoaderForContent(): Promise<HarnessLoader> {
+const rootLocator = this.documentRootLocatorFactory();
+return rootLocator.harnessLoaderFor('my-popup-content');
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/guide/testing/creating-component-harnesses.md b/adev-es/src/content/guide/testing/creating-component-harnesses.md
index 338fd28..5723051 100644
--- a/adev-es/src/content/guide/testing/creating-component-harnesses.md
+++ b/adev-es/src/content/guide/testing/creating-component-harnesses.md
@@ -14,9 +14,9 @@ Para componentes que aparecen en solo un lugar, como una página en una aplicaci
 
 El [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) es un conjunto de primitivas de comportamiento para construir componentes. Para usar los component harnesses, primero instala `@angular/cdk` desde npm. Puedes hacer esto desde tu terminal usando Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Extender `ComponentHarness`
 
@@ -37,11 +37,11 @@ La propiedad `hostSelector` identifica elementos en el DOM que coinciden con est
 class MyPopup {
   triggerText = input('');
 
-  isOpen = signal(false);
+isOpen = signal(false);
 
-  toggle() {
-    this.isOpen.update((value) => !value);
-  }
+toggle() {
+  this.isOpen.update((value) => !value);
+}
 }
 </docs-code>
 
@@ -69,11 +69,11 @@ Por ejemplo, el ejemplo `MyPopupHarness` discutido arriba podría proporcionar m
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  // Obtiene el elemento trigger
-  getTriggerElement = this.locatorFor('button');
+// Obtiene el elemento trigger
+getTriggerElement = this.locatorFor('button');
 
-  // Obtiene el elemento content.
-  getContentElement = this.locatorForOptional('.my-popup-content');
+// Obtiene el elemento content.
+getContentElement = this.locatorForOptional('.my-popup-content');
 }
 </docs-code>
 
@@ -91,20 +91,20 @@ En su lugar, proporciona métodos más enfocados para acciones específicas que
 class MyPopupHarness extends ComponentHarness {
   static hostSelector = 'my-popup';
 
-  protected getTriggerElement = this.locatorFor('button');
-  protected getContentElement = this.locatorForOptional('.my-popup-content');
+protected getTriggerElement = this.locatorFor('button');
+protected getContentElement = this.locatorForOptional('.my-popup-content');
 
-  /** Alterna el estado abierto del popup. */
-  async toggle() {
-    const trigger = await this.getTriggerElement();
-    return trigger.click();
-  }
+/\*_ Alterna el estado abierto del popup. _/
+async toggle() {
+const trigger = await this.getTriggerElement();
+return trigger.click();
+}
 
-  /** Verifica si el popup está abierto. */
-  async isOpen() {
-    const content = await this.getContentElement();
-    return !!content;
-  }
+/\*_ Verifica si el popup está abierto. _/
+async isOpen() {
+const content = await this.getContentElement();
+return !!content;
+}
 }
 </docs-code>
 
@@ -123,17 +123,16 @@ Por ejemplo, considera un menú construido usando el popup de arriba:
 class MyMenuItem {}
 
 @Component({
-  selector: 'my-menu',
-  template: `
-    <my-popup>
+selector: 'my-menu',
+template: `     <my-popup>
       <ng-content></ng-content>
     </my-popup>
   `
 })
 class MyMenu {
-  triggerText = input('');
+triggerText = input('');
 
-  @ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
+@ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
 }
 </docs-code>
 
@@ -143,20 +142,20 @@ El harness para `MyMenu` puede entonces aprovechar otros harnesses para `MyPopup
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  protected getPopupHarness = this.locatorFor(MyPopupHarness);
+protected getPopupHarness = this.locatorFor(MyPopupHarness);
 
-  /** Obtiene los items de menú actualmente mostrados (lista vacía si el menú está cerrado). */
-  getItems = this.locatorForAll(MyMenuItemHarness);
+/\*_ Obtiene los items de menú actualmente mostrados (lista vacía si el menú está cerrado). _/
+getItems = this.locatorForAll(MyMenuItemHarness);
 
-  /** Alterna el estado abierto del menú. */
-  async toggle() {
-    const popupHarness = await this.getPopupHarness();
-    return popupHarness.toggle();
-  }
+/\*_ Alterna el estado abierto del menú. _/
+async toggle() {
+const popupHarness = await this.getPopupHarness();
+return popupHarness.toggle();
+}
 }
 
 class MyMenuItemHarness extends ComponentHarness {
-  static hostSelector = 'my-menu-item';
+static hostSelector = 'my-menu-item';
 }
 </docs-code>
 
@@ -172,50 +171,50 @@ Por ejemplo, cuando se trabaja con un menú es útil filtrar basado en el texto
 
 <docs-code language="typescript">
 interface MyMenuHarnessFilters extends BaseHarnessFilters {
-  /** Filtra basado en el texto del trigger para el menú. */
-  triggerText?: string | RegExp;
+/\*_ Filtra basado en el texto del trigger para el menú. _/
+triggerText?: string | RegExp;
 }
 
 interface MyMenuItemHarnessFilters extends BaseHarnessFilters {
-  /** Filtra basado en el texto del item de menú. */
-  text?: string | RegExp;
+/** Filtra basado en el texto del item de menú. */
+text?: string | RegExp;
 }
 
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Crea un `HarnessPredicate` usado para localizar un `MyMenuHarness` particular. */
-  static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
-    return new HarnessPredicate(MyMenuHarness, options)
-      .addOption('trigger text', options.triggerText,
-        (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
-  }
-
-  protected getPopupHarness = this.locatorFor(MyPopupHarness);
-
-  /** Obtiene el texto del trigger del menú. */
-  async getTriggerText(): Promise<string> {
-    const popupHarness = await this.getPopupHarness();
-    return popupHarness.getTriggerText();
-  }
-  ...
+/\*_ Crea un `HarnessPredicate` usado para localizar un `MyMenuHarness` particular. _/
+static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
+return new HarnessPredicate(MyMenuHarness, options)
+.addOption('trigger text', options.triggerText,
+  (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
+}
+
+protected getPopupHarness = this.locatorFor(MyPopupHarness);
+
+/\*_ Obtiene el texto del trigger del menú. _/
+async getTriggerText(): Promise<string> {
+const popupHarness = await this.getPopupHarness();
+return popupHarness.getTriggerText();
+}
+...
 }
 
 class MyMenuItemHarness extends ComponentHarness {
-  static hostSelector = 'my-menu-item';
-
-  /** Crea un `HarnessPredicate` usado para localizar un `MyMenuItemHarness` particular. */
-  static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
-    return new HarnessPredicate(MyMenuItemHarness, options)
-      .addOption('text', options.text,
-        (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
-  }
-
-  /** Obtiene el texto del item de menú. */
-  async getText(): Promise<string> {
-    const host = await this.host();
-    return host.text();
-  }
+static hostSelector = 'my-menu-item';
+
+/\*_ Crea un `HarnessPredicate` usado para localizar un `MyMenuItemHarness` particular. _/
+static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
+return new HarnessPredicate(MyMenuItemHarness, options)
+.addOption('text', options.text,
+(harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+}
+
+/\*_ Obtiene el texto del item de menú. _/
+async getText(): Promise<string> {
+const host = await this.host();
+return host.text();
+}
 }
 </docs-code>
 
@@ -225,12 +224,12 @@ Puedes pasar un `HarnessPredicate` en lugar de una clase `ComponentHarness` a cu
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Obtiene una lista de items en el menú, opcionalmente filtrados basados en el criterio dado. */
-  async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
-    const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
-    return getFilteredItems();
-  }
-  ...
+/\*_ Obtiene una lista de items en el menú, opcionalmente filtrados basados en el criterio dado. _/
+async getItems(filters: MyMenuItemHarnessFilters = {}): Promise<MyMenuItemHarness[]> {
+  const getFilteredItems = this.locatorForAll(MyMenuItemHarness.with(filters));
+  return getFilteredItems();
+}
+...
 }
 </docs-code>
 
@@ -258,13 +257,13 @@ Considera si el componente `MyPopup` arriba usara el overlay del CDK para el con
 
 <docs-code language="typescript">
 class MyPopupHarness extends ComponentHarness {
-  static hostSelector = 'my-popup';
+static hostSelector = 'my-popup';
 
-  /** Obtiene un `HarnessLoader` cuyo elemento raíz es el elemento content del popup. */
-  async getHarnessLoaderForContent(): Promise<HarnessLoader> {
-    const rootLocator = this.documentRootLocatorFactory();
-    return rootLocator.harnessLoaderFor('my-popup-content');
-  }
+/\*_ Obtiene un `HarnessLoader` cuyo elemento raíz es el elemento content del popup. _/
+async getHarnessLoaderForContent(): Promise<HarnessLoader> {
+const rootLocator = this.documentRootLocatorFactory();
+return rootLocator.harnessLoaderFor('my-popup-content');
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/guide/testing/debugging.en.md b/adev-es/src/content/guide/testing/debugging.en.md
index c5822b4..a1de79f 100644
--- a/adev-es/src/content/guide/testing/debugging.en.md
+++ b/adev-es/src/content/guide/testing/debugging.en.md
@@ -1,17 +1,30 @@
 # Debugging tests
 
-If your tests aren't working as you expect them to, you can inspect and debug them in the browser.
+If your tests aren't working as you expect, you can debug them in both the default Node.js environment and in a real browser.
 
-Debug specs in the browser in the same way that you debug an application.
+## Debugging in Node.js
 
-1. Reveal the Karma browser window.
-    See [Set up testing](guide/testing#set-up-testing) if you need help with this step.
+Debugging in the default Node.js environment is often the quickest way to diagnose issues that are not related to browser-specific APIs or rendering.
 
-1. Click the **DEBUG** button to open a new browser tab and re-run the tests.
-1. Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
-1. Pick the **Sources** section.
-1. Press `Control/Command-P`, and then start typing the name of your test file to open it.
-1. Set a breakpoint in the test.
-1. Refresh the browser, and notice how it stops at the breakpoint.
+1.  Run the `ng test` command with the `--debug` flag:
+    ```shell
+    ng test --debug
+    ```
+2.  The test runner will start in debug mode and wait for a debugger to attach.
+3.  You can now attach your preferred debugger. For example, you can use the built-in Node.js debugger in VS Code or the Chrome DevTools for Node.js.
 
-<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">
+## Debugging in a browser
+
+Debugging in a browser is recommended for tests that rely on the DOM or other browser-specific APIs. This approach allows you to use the browser's own developer tools.
+
+1.  Ensure you have a browser provider installed. See [Running tests in a browser](guide/testing/overview#running-tests-in-a-browser) for setup instructions.
+2.  Run the `ng test` command with both the `--browsers` and `--debug` flags:
+    ```shell
+    ng test --browsers=chromium --debug
+    ```
+3.  This command runs the tests in a headed browser and keeps it open after the tests finish, allowing you to inspect the output.
+4.  Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
+5.  Go to the **Sources** tab.
+6.  Use `Control/Command-P` to search for and open your test file.
+7.  Set a breakpoint in your test.
+8.  Reload the test runner UI in the browser. The execution will now stop at your breakpoint.
diff --git a/adev-es/src/content/guide/testing/debugging.md b/adev-es/src/content/guide/testing/debugging.md
index 2b9abc0..62cca7d 100644
--- a/adev-es/src/content/guide/testing/debugging.md
+++ b/adev-es/src/content/guide/testing/debugging.md
@@ -1,17 +1,30 @@
 # Depurar pruebas
 
-Si tus pruebas no están funcionando como esperas, puedes inspeccionarlas y depurarlas en el navegador.
+Si tus pruebas no están funcionando como esperas, puedes depurarlas tanto en el entorno predeterminado de Node.js como en un navegador real.
 
-Depura specs en el navegador de la misma manera que depuras una aplicación.
+## Depurar en Node.js
 
-1. Revela la ventana del navegador de Karma.
-    Consulta [Configurar testing](guide/testing#set-up-testing) si necesitas ayuda con este paso.
+Depurar en el entorno predeterminado de Node.js suele ser la forma más rápida de diagnosticar problemas que no están relacionados con APIs específicas del navegador o renderizado.
 
-1. Haz clic en el botón **DEBUG** para abrir una nueva pestaña del navegador y re-ejecutar las pruebas.
-1. Abre las **Herramientas de Desarrollador** del navegador. En Windows, presiona `Ctrl-Shift-I`. En macOS, presiona `Command-Option-I`.
-1. Selecciona la sección **Sources**.
-1. Presiona `Control/Command-P`, y luego comienza a escribir el nombre de tu archivo de prueba para abrirlo.
-1. Establece un breakpoint en la prueba.
-1. Actualiza el navegador, y nota cómo se detiene en el breakpoint.
+1.  Ejecuta el comando `ng test` con la bandera `--debug`:
+    ```shell
+    ng test --debug
+    ```
+2.  El ejecutor de pruebas se iniciará en modo debug y esperará a que se adjunte un depurador.
+3.  Ahora puedes adjuntar tu depurador preferido. Por ejemplo, puedes usar el depurador integrado de Node.js en VS Code o Chrome DevTools para Node.js.
 
-<img alt="Depuración de Karma" src="assets/images/guide/testing/karma-1st-spec-debug.png">
+## Depurar en un navegador
+
+Depurar en un navegador se recomienda para pruebas que dependen del DOM u otras APIs específicas del navegador. Este enfoque te permite usar las herramientas de desarrollador del propio navegador.
+
+1.  Asegúrate de tener un proveedor de navegador instalado. Consulta [Ejecutar pruebas en un navegador](guide/testing/overview#ejecutar-pruebas-en-un-navegador) para instrucciones de configuración.
+2.  Ejecuta el comando `ng test` con las banderas `--browsers` y `--debug`:
+    ```shell
+    ng test --browsers=chromium --debug
+    ```
+3.  Este comando ejecuta las pruebas en un navegador con interfaz gráfica y lo mantiene abierto después de que las pruebas terminen, permitiéndote inspeccionar la salida.
+4.  Abre las **Herramientas de Desarrollador** del navegador. En Windows, presiona `Ctrl-Shift-I`. En macOS, presiona `Command-Option-I`.
+5.  Ve a la pestaña **Sources**.
+6.  Usa `Control/Command-P` para buscar y abrir tu archivo de prueba.
+7.  Establece un breakpoint en tu prueba.
+8.  Recarga la interfaz del ejecutor de pruebas en el navegador. La ejecución ahora se detendrá en tu breakpoint.
diff --git a/adev-es/src/content/guide/testing/experimental-unit-test.en.md b/adev-es/src/content/guide/testing/experimental-unit-test.en.md
deleted file mode 100644
index ccca5dc..0000000
--- a/adev-es/src/content/guide/testing/experimental-unit-test.en.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# Experimental unit testing system
-
-The Angular CLI provides an experimental unit test system that can use [Vitest](https://vitest.dev/) as a test runner.
-
-IMPORTANT: This experimental unit testing system requires the use of the `application` build system.
-The `application` build system is the default for all newly created projects.
-
-## Installing dependencies
-
-Some packages are required for the new builder to work. In order to install the new packages, run the following command : 
-
-<docs-code language="bash">
-
-npm install vitest jsdom --save-dev
-
-</docs-code>
-
-If no other projects in your workspace use Karma, run the following command to uninstall the corresponding packages :
-
-<docs-code language="bash">
-
-npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter --save-dev
-
-</docs-code>
-
-## Set up testing
-
-The Angular CLI includes the test system within a new project but must be configured before it can be used.
-
-The project you create with the CLI is setup to use the `karma` test system by default.
-To change to the experimental unit test system, update the `test` target as follows:
-
-<docs-code language="json">
-"test": {
-  "builder": "@angular/build:unit-test",
-  "options": {
-    "tsConfig": "tsconfig.spec.json",
-    "runner": "vitest",
-    "buildTarget": "::development"
-  }
-}
-</docs-code>
-
-The `buildTarget` operates similarly to the option available to the development server.
-The `build` target configures build options for the tests.
-If the `development` build configuration is missing for a project or you need
-different options for testing, you can create and use a `testing` or similarly named build configuration.
-
-To execute the application's testing, just run the [`ng test`](cli/test) CLI command as before:
-
-<docs-code language="shell">
-
-ng test
-
-</docs-code>
-
-The `ng test` command builds the application in *watch mode*, and launches the configured runner.
-
-The console output looks like below:
-
-<docs-code language="shell">
- ✓ spec-app-app.spec.js (2 tests) 31ms
-   ✓ App > should create the app 22ms
-   ✓ App > should render title 8ms
-
- Test Files  1 passed (1)
-      Tests  2 passed (2)
-   Start at  14:24:15
-   Duration  1.16s (transform 628ms, setup 703ms, collect 64ms, tests 31ms, environment 188ms, prepare 33ms)
-</docs-code>
-
-Watch mode is enabled by default when using an interactive terminal and not running on CI.
-
-## Configuration
-
-The Angular CLI takes care of the Vitest configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
-Directly customizing the underlying test runner configuration is currently not supported.
-
-## Bug reports
-
-Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues).
-
-Please provide a minimal reproduction where possible to aid the team in addressing issues.
diff --git a/adev-es/src/content/guide/testing/experimental-unit-test.md b/adev-es/src/content/guide/testing/experimental-unit-test.md
deleted file mode 100644
index 3a0baec..0000000
--- a/adev-es/src/content/guide/testing/experimental-unit-test.md
+++ /dev/null
@@ -1,83 +0,0 @@
-# Sistema experimental de pruebas unitarias
-
-Angular CLI proporciona un sistema experimental de pruebas unitarias que puede usar [Vitest](https://vitest.dev/) como test runner.
-
-IMPORTANTE: Este sistema experimental de pruebas unitarias requiere el uso del sistema de build `application`.
-El sistema de build `application` es el predeterminado para todos los proyectos creados recientemente.
-
-## Instalar dependencias
-
-Algunos paquetes son requeridos para que el nuevo builder funcione. Para instalar los nuevos paquetes, ejecuta el siguiente comando:
-
-<docs-code language="bash">
-
-npm install vitest jsdom --save-dev
-
-</docs-code>
-
-Si ningún otro proyecto en tu workspace usa Karma, ejecuta el siguiente comando para desinstalar los paquetes correspondientes:
-
-<docs-code language="bash">
-
-npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter --save-dev
-
-</docs-code>
-
-## Configurar testing
-
-Angular CLI incluye el sistema de pruebas dentro de un nuevo proyecto pero debe configurarse antes de que pueda usarse.
-
-El proyecto que creas con el CLI está configurado para usar el sistema de pruebas `karma` por defecto.
-Para cambiar al sistema experimental de pruebas unitarias, actualiza el target `test` como sigue:
-
-<docs-code language="json">
-"test": {
-  "builder": "@angular/build:unit-test",
-  "options": {
-    "tsConfig": "tsconfig.spec.json",
-    "runner": "vitest",
-    "buildTarget": "::development"
-  }
-}
-</docs-code>
-
-El `buildTarget` opera de manera similar a la opción disponible para el servidor de desarrollo.
-El target `build` configura opciones de build para las pruebas.
-Si la configuración de build `development` falta para un proyecto o necesitas
-opciones diferentes para testing, puedes crear y usar una configuración de build `testing` o con nombre similar.
-
-Para ejecutar el testing de la aplicación, solo ejecuta el comando CLI [`ng test`](cli/test) como antes:
-
-<docs-code language="shell">
-
-ng test
-
-</docs-code>
-
-El comando `ng test` construye la aplicación en modo *watch*, y lanza el runner configurado.
-
-La salida de consola se ve como a continuación:
-
-<docs-code language="shell">
- ✓ spec-app-app.spec.js (2 tests) 31ms
-   ✓ App > should create the app 22ms
-   ✓ App > should render title 8ms
-
- Test Files  1 passed (1)
-      Tests  2 passed (2)
-   Start at  14:24:15
-   Duration  1.16s (transform 628ms, setup 703ms, collect 64ms, tests 31ms, environment 188ms, prepare 33ms)
-</docs-code>
-
-El modo watch está habilitado por defecto cuando se usa una terminal interactiva y no se está ejecutando en CI.
-
-## Configuración
-
-Angular CLI se encarga de la configuración de Vitest por ti. Construye la configuración completa en memoria, basándose en opciones especificadas en el archivo `angular.json`.
-Personalizar directamente la configuración del test runner subyacente actualmente no está soportado.
-
-## Reportes de bugs
-
-Reporta problemas y solicitudes de características en [GitHub](https://github.com/angular/angular-cli/issues).
-
-Por favor proporciona una reproducción mínima cuando sea posible para ayudar al equipo a abordar problemas.
diff --git a/adev-es/src/content/guide/testing/karma.md b/adev-es/src/content/guide/testing/karma.md
new file mode 100644
index 0000000..d5d59cf
--- /dev/null
+++ b/adev-es/src/content/guide/testing/karma.md
@@ -0,0 +1,199 @@
+# Testing with Karma and Jasmine
+
+While [Vitest](https://vitest.dev) is the default test runner for new Angular projects, [Karma](https://karma-runner.github.io) is still a supported and widely used test runner. This guide provides instructions for testing your Angular application using the Karma test runner with the [Jasmine](https://jasmine.github.io) testing framework.
+
+## Setting Up Karma and Jasmine
+
+You can set up Karma and Jasmine for a new project or add it to an existing one.
+
+### For New Projects
+
+To create a new project with Karma and Jasmine pre-configured, run the `ng new` command with the `--test-runner=karma` option:
+
+```shell
+ng new my-karma-app --test-runner=karma
+```
+
+### For Existing Projects
+
+To add Karma and Jasmine to an existing project, follow these steps:
+
+1.  **Install the necessary packages:**
+
+    <docs-code-multifile>
+      <docs-code header="npm" language="shell">
+        npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
+      </docs-code>
+      <docs-code header="yarn" language="shell">
+        yarn add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
+      </docs-code>
+      <docs-code header="pnpm" language="shell">
+        pnpm add -D karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
+      </docs-code>
+      <docs-code header="bun" language="shell">
+        bun add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
+      </docs-code>
+    </docs-code-multifile>
+
+2.  **Configure the test runner in `angular.json`:**
+
+    In your `angular.json` file, find the `test` target and set the `runner` option to `karma`:
+
+    ```json
+    {
+      // ...
+      "projects": {
+        "your-project-name": {
+          // ...
+          "architect": {
+            "test": {
+              "builder": "@angular/build:unit-test",
+              "options": {
+                "runner": "karma",
+                // ... other options
+              }
+            }
+          }
+        }
+      }
+    }
+    ```
+
+3.  **Update `tsconfig.spec.json` for Jasmine types:**
+
+    To ensure TypeScript recognizes global testing functions like `describe` and `it`, add `"jasmine"` to the `types` array in your `tsconfig.spec.json`:
+
+    ```json
+    {
+      // ...
+      "compilerOptions": {
+        // ...
+        "types": [
+          "jasmine"
+        ]
+      },
+      // ...
+    }
+    ```
+
+## Running Tests
+
+Once your project is configured, run the tests using the [`ng test`](cli/test) command:
+
+```shell
+ng test
+```
+
+The `ng test` command builds the application in _watch mode_ and launches the [Karma test runner](https://karma-runner.github.io).
+
+The console output looks like below:
+
+```shell
+
+02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
+02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
+02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
+02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
+Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
+TOTAL: 3 SUCCESS
+
+```
+
+The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
+
+<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
+
+Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").
+
+Meanwhile, the `ng test` command is watching for changes. To see this in action, make a small change to a source file and save. The tests run again, the browser refreshes, and the new test results appear.
+
+## Configuration
+
+The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
+
+### Customizing Karma Configuration
+
+If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
+
+```shell
+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).
+
+### Setting the Test Runner in `angular.json`
+
+To explicitly set Karma as the test runner for your project, locate the `test` target in your `angular.json` file and set the `runner` option to `karma`:
+
+```json
+{
+  // ...
+  "projects": {
+    "your-project-name": {
+      // ...
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "runner": "karma",
+            // ... other options
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Code coverage enforcement
+
+To enforce a minimum code coverage level, you can use the `check` property in the `coverageReporter` section of your `karma.conf.js` file.
+
+For example, to require a minimum of 80% coverage:
+
+```javascript
+coverageReporter: {
+  dir: require('path').join(__dirname, './coverage/<project-name>'),
+  subdir: '.',
+  reporters: [
+    { type: 'html' },
+    { type: 'text-summary' }
+  ],
+  check: {
+    global: {
+      statements: 80,
+      branches: 80,
+      functions: 80,
+      lines: 80
+    }
+  }
+}
+```
+
+This will cause the test run to fail if the specified coverage thresholds are not met.
+
+## Testing in continuous integration
+
+To run your Karma tests in a CI environment, use the following command:
+
+```shell
+ng test --no-watch --no-progress --browsers=ChromeHeadless
+```
+
+NOTE: The `--no-watch` and `--no-progress` flags are crucial for Karma in CI environments to ensure tests run once and exit cleanly. The `--browsers=ChromeHeadless` flag is also essential for running tests in a browser environment without a graphical interface.
+
+## Debugging tests
+
+If your tests aren't working as you expect, you can inspect and debug them in the browser.
+
+To debug an application with the Karma test runner:
+
+1.  Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#configurar-pruebas) if you need help with this step.
+2.  Click the **DEBUG** button to open a new browser tab and re-run the tests.
+3.  Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
+4.  Pick the **Sources** section.
+5.  Press `Control/Command-P`, and then start typing the name of your test file to open it.
+6.  Set a breakpoint in the test.
+7.  Refresh the browser, and notice how it stops at the breakpoint.
+
+<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">
diff --git a/adev-es/src/content/guide/testing/migrating-to-vitest.md b/adev-es/src/content/guide/testing/migrating-to-vitest.md
new file mode 100644
index 0000000..eda97ef
--- /dev/null
+++ b/adev-es/src/content/guide/testing/migrating-to-vitest.md
@@ -0,0 +1,229 @@
+# Migrating from Karma to Vitest
+
+The Angular CLI uses [Vitest](https://vitest.dev/) as the default unit test runner for new projects. This guide provides instructions for migrating an existing project from Karma and Jasmine to Vitest.
+
+IMPORTANT: Migrating an existing project to Vitest is considered experimental. This process also requires the use of the `application` build system, which is the default for all newly created projects.
+
+## Manual migration steps
+
+Before using the automated refactoring schematic, you must manually update your project to use the Vitest test runner.
+
+### 1. Install dependencies
+
+Install `vitest` and a DOM emulation library. While browser testing is still possible (see [step 5](#5-configure-browser-mode-optional)), Vitest uses a DOM emulation library by default to simulate a browser environment within Node.js for faster test execution. The CLI automatically detects and uses `happy-dom` if it's installed; otherwise, it falls back to `jsdom`. You must have one of these packages installed.
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev vitest jsdom
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev vitest jsdom
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D vitest jsdom
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev vitest jsdom
+  </docs-code>
+</docs-code-multifile>
+
+### 2. Update `angular.json`
+
+In your `angular.json` file, find the `test` target for your project and change the `builder` to `@angular/build:unit-test`.
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}
+```
+
+The `unit-test` builder defaults to `"tsConfig": "tsconfig.spec.json"` and `"buildTarget": "::development"`. You can explicitly set these options if your project requires different values. For example, if the `development` build configuration is missing or you need different options for testing, you can create and use a `testing` or similarly named build configuration for `buildTarget`.
+
+The `@angular/build:karma` builder previously allowed build options (like `polyfills`, `assets`, or `styles`) to be configured directly within the `test` target. The new `@angular/build:unit-test` builder does not support this. If your test-specific build options differ from your existing `development` build configuration, you must move them to a dedicated build target configuration. If your test build options already match your `development` build configuration, no action is needed.
+
+### 3. Handle custom `karma.conf.js` configurations
+
+Custom configurations in `karma.conf.js` are not automatically migrated. Before deleting your `karma.conf.js` file, review it for any custom settings that need to be migrated.
+
+Many Karma options have equivalents in Vitest that can be set in a custom Vitest configuration file (e.g., `vitest.config.ts`) and linked to your `angular.json` via the `runnerConfig` option.
+
+Common migration paths include:
+
+- **Reporters**: Karma reporters must be replaced with Vitest-compatible reporters. These can often be configured directly in your `angular.json` under the `test.options.reporters` property. For more advanced configurations, use a custom `vitest.config.ts` file.
+- **Plugins**: Karma plugins may have Vitest equivalents that you will need to find and install. Note that code coverage is a first-class feature in the Angular CLI and can be enabled with `ng test --coverage`.
+- **Custom Browser Launchers**: These are replaced by the `browsers` option in `angular.json` and the installation of a browser provider like `@vitest/browser-playwright`.
+
+For other settings, consult the official [Vitest documentation](https://vitest.dev/config/).
+
+### 4. Remove Karma and `test.ts` files
+
+You can now delete `karma.conf.js` and `src/test.ts` from your project and uninstall the Karma-related packages. The following commands are based on the packages installed in a new Angular CLI project; your project may have other Karma-related packages to remove.
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
+  </docs-code>
+</docs-code-multifile>
+
+### 5. Configure browser mode (optional)
+
+If you need to run tests in a real browser, you must install a browser provider and configure your `angular.json`.
+
+**Install a browser provider:**
+
+Choose one of the following browser providers based on your needs:
+
+- **Playwright**: `@vitest/browser-playwright` for Chromium, Firefox, and WebKit.
+- **WebdriverIO**: `@vitest/browser-webdriverio` for Chrome, Firefox, Safari, and Edge.
+- **Preview**: `@vitest/browser-preview` for Webcontainer environments (like StackBlitz).
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev @vitest/browser-playwright
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev @vitest/browser-playwright
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D @vitest/browser-playwright
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev @vitest/browser-playwright
+  </docs-code>
+</docs-code-multifile>
+
+**Update `angular.json` for browser mode:**
+
+Add the `browsers` option to your `test` target's options. The browser name depends on the provider you installed (e.g., `chromium` for Playwright, `chrome` for WebdriverIO).
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "browsers": ["chromium"]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Headless mode is enabled automatically if the `CI` environment variable is set or if a browser name includes "Headless" (e.g., `ChromeHeadless`). Otherwise, tests will run in a headed browser.
+
+## Automated test refactoring with schematics
+
+IMPORTANT: The `refactor-jasmine-vitest` schematic is experimental and may not cover all possible test patterns. Always review the changes made by the schematic.
+
+The Angular CLI provides the `refactor-jasmine-vitest` schematic to automatically refactor your Jasmine tests to use Vitest.
+
+### Overview
+
+The schematic automates the following transformations in your test files (`.spec.ts`):
+
+- Converts `fit` and `fdescribe` to `it.only` and `describe.only`.
+- Converts `xit` and `xdescribe` to `it.skip` and `describe.skip`.
+- Converts `spyOn` calls to the equivalent `vi.spyOn`.
+- Replaces `jasmine.objectContaining` with `expect.objectContaining`.
+- Replaces `jasmine.any` with `expect.any`.
+- Replaces `jasmine.createSpy` with `vi.fn`.
+- Updates `beforeAll`, `beforeEach`, `afterAll`, and `afterEach` to their Vitest equivalents.
+- Converts `fail()` to Vitest's `vi.fail()`.
+- Adjusts expectations to match Vitest APIs
+- Adds TODO comments for code that cannot be automatically converted
+
+The schematic **does not** perform the following actions:
+
+- It does not install `vitest` or other related dependencies.
+- It does not change your `angular.json` to use the Vitest builder or migrate any build options (like `polyfills` or `styles`) from the `test` target.
+- It does not remove `karma.conf.js` or `test.ts` files.
+- It does not handle complex or nested spy scenarios, which may require manual refactoring.
+
+### Running the schematic
+
+Once your project is configured for Vitest, you can run the schematic to refactor your test files.
+
+To refactor **all** test files in your default project, run:
+
+```bash
+ng g @schematics/angular:refactor-jasmine-vitest
+```
+
+### Options
+
+You can use the following options to customize the schematic's behavior:
+
+| Option                   | Description                                                                                         |
+| :----------------------- | :-------------------------------------------------------------------------------------------------- |
+| `--project <name>`       | Specify the project to refactor in a multi-project workspace. <br> Example: `--project=my-lib`      |
+| `--include <path>`       | Refactor only a specific file or directory. <br> Example: `--include=src/app/app.component.spec.ts` |
+| `--file-suffix <suffix>` | Specify a different file suffix for test files. <br> Example: `--file-suffix=.test.ts`              |
+| `--add-imports`          | Add explicit `vitest` imports if you have disabled globals in your Vitest configuration.            |
+| `--verbose`              | See detailed logging of all transformations applied.                                                |
+
+### After migrating
+
+After the schematic completes, it's a good practice to:
+
+1.  **Run your tests**: Execute `ng test` to ensure that all tests still pass after the refactoring.
+2.  **Review the changes**: Look over the changes made by the schematic, paying close attention to any complex tests, especially those with intricate spies or mocks, as they may require further manual adjustments.
+
+The `ng test` command builds the application in _watch mode_ and launches the configured runner. Watch mode is enabled by default when using an interactive terminal and not running on CI.
+
+## Configuration
+
+The Angular CLI takes care of the Vitest configuration for you, constructing the full configuration in memory based on options in `angular.json`.
+
+### Custom Vitest configuration
+
+IMPORTANT: While using a custom configuration enables advanced options, the Angular team does not provide direct support for the specific contents of the configuration file or for any third-party plugins used within it. The CLI will also override certain properties (`test.projects`, `test.include`) to ensure proper operation.
+
+You can provide a custom Vitest configuration file to override the default settings. For a full list of available options, see the official [Vitest documentation](https://vitest.dev/config/).
+
+**1. Direct path:**
+Provide a direct path to a Vitest configuration file in your `angular.json`:
+
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": { "runnerConfig": "vitest.config.ts" }
+        }
+      }
+    }
+  }
+}
+```
+
+**2. Automatic search for base configuration:**
+If you set `runnerConfig` to `true`, the builder will automatically search for a shared `vitest-base.config.*` file in your project and workspace roots.
+
+## Bug reports
+
+Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues).
+
+Please provide a minimal reproduction where possible to aid the team in addressing issues.
diff --git a/adev-es/src/content/guide/testing/overview.en.md b/adev-es/src/content/guide/testing/overview.en.md
index 661b3f1..2bf9e72 100644
--- a/adev-es/src/content/guide/testing/overview.en.md
+++ b/adev-es/src/content/guide/testing/overview.en.md
@@ -1,125 +1,203 @@
-# Testing
+# Unit testing
 
-Testing your Angular application helps you check that your application is working as you expect.
+Testing your Angular application helps you check that it is working as you expect. Unit tests are crucial for catching bugs early, ensuring code quality, and facilitating safe refactoring.
 
-## Set up testing
+NOTE: This guide focuses on the default testing setup for new Angular CLI projects. If you are migrating an existing project from Karma to Vitest, see the [Migrating from Karma to Vitest guide](guide/testing/migrating-to-vitest). While Vitest is the default test runner, Karma is still fully supported. For information on testing with Karma, see the [Karma testing guide](guide/testing/karma).
 
-The Angular CLI downloads and installs everything you need to test an Angular application with [Jasmine testing framework](https://jasmine.github.io).
+## Set up for testing
 
-The project you create with the CLI is immediately ready to test.
-Just run the [`ng test`](cli/test) CLI command:
+The Angular CLI downloads and installs everything you need to test an Angular application with the [Vitest testing framework](https://vitest.dev). By default, new projects include `vitest` and `jsdom`.
 
-<docs-code language="shell">
+Vitest runs your unit tests in a Node.js environment, using `jsdom` to emulate the DOM. This allows for faster test execution by avoiding the overhead of launching a browser. You can also use `happy-dom` as an alternative by installing it and removing `jsdom`. The CLI will automatically detect and use `happy-dom` if it is present.
 
-ng test
-
-</docs-code>
+The project you create with the CLI is immediately ready to test. Just run the [`ng test`](cli/test) CLI command:
 
-The `ng test` command builds the application in *watch mode*,
-and launches the [Karma test runner](https://karma-runner.github.io).
+```shell
+ng test
+```
 
-The console output looks like below:
+The `ng test` command builds the application in _watch mode_ and launches the [Vitest test runner](https://vitest.dev).
 
-<docs-code language="shell">
+The console output looks like this:
 
-02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
-02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
-02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
-02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
-Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
-TOTAL: 3 SUCCESS
+```shell
+ ✓ src/app/app.spec.ts (3)
+   ✓ AppComponent should create the app
+   ✓ AppComponent should have as title 'my-app'
+   ✓ AppComponent should render title
+ Test Files  1 passed (1)
+      Tests  3 passed (3)
+   Start at  18:18:01
+   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)
+```
 
-</docs-code>
+The `ng test` command also watches for changes. To see this in action, make a small change to `app.ts` and save it. The tests run again, and the new results appear in the console.
 
-The last line of the log shows that Karma ran three tests that all passed.
+## Configuration
 
-The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
+The Angular CLI handles most of the Vitest configuration for you. For many common use cases, you can adjust the test behavior by modifying options directly in your `angular.json` file.
 
-<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
+### Built-in configuration options
 
-Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group \("test suite"\).
+You can change the following options in the `test` target of your `angular.json` file:
 
-Meanwhile, the `ng test` command is watching for changes.
+- `include`: Glob patterns for files to include for testing. Defaults to `['**/*.spec.ts', '**/*.test.ts']`.
+- `exclude`: Glob patterns for files to exclude from testing.
+- `setupFiles`: A list of paths to global setup files (e.g., polyfills or global mocks) that are executed before your tests.
+- `providersFile`: The path to a file that exports a default array of Angular providers for the test environment. This is useful for setting up global test providers which are injected into your tests.
+- `coverage`: A boolean to enable or disable code coverage reporting. Defaults to `false`.
+- `browsers`: An array of browser names to run tests in (e.g., `["chromium"]`). Requires a browser provider to be installed.
+
+For example, you could create a `src/test-providers.ts` file to provide `provideHttpClientTesting` to all your tests:
+
+```typescript
+import { Provider } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+const testProviders: Provider[] = [
+  provideHttpClient(),
+  provideHttpClientTesting(),
+];
+
+export default testProviders;
+```
+
+You would then reference this file in your `angular.json`:
 
-To see this in action, make a small change to `app.component.ts` and save.
-The tests run again, the browser refreshes, and the new test results appear.
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "include": ["src/**/*.spec.ts"],
+            "setupFiles": ["src/test-setup.ts"],
+            "providersFile": "src/test-providers.ts",
+            "coverage": true,
+            "browsers": ["chromium"]
+          }
+        }
+      }
+    }
+  }
+}
+```
 
-## Configuration
+### Advanced: Custom Vitest configuration
 
-The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
+For advanced use cases, you can provide a custom Vitest configuration file.
 
-If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
+IMPORTANT: While using a custom configuration enables advanced options, the Angular team does not provide direct support for the specific contents of the configuration file or for any third-party plugins used within it. The CLI will also override certain properties (`test.projects`, `test.include`) to ensure proper operation.
 
-<docs-code language="shell">
+You can create a Vitest configuration file (e.g., `vitest-base.config.ts`) and reference it in your `angular.json` using the `runnerConfig` option.
 
-ng generate config karma
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "runnerConfig": "vitest-base.config.ts"
+          }
+        }
+      }
+    }
+  }
+}
+```
 
-</docs-code>
+You can also generate a base configuration file using the CLI:
 
-HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
+```shell
+ng generate config vitest
+```
 
-### Other test frameworks
+This creates a `vitest-base.config.ts` file that you can customize.
 
-You can also unit test an Angular application with other testing libraries and test runners.
-Each library and runner has its own distinctive installation procedures, configuration, and syntax.
+HELPFUL: Read more about Vitest configuration in the [Vitest configuration guide](https://vitest.dev/config/).
 
-### Test file name and location
+## Code coverage
 
-Inside the `src/app` folder the Angular CLI generated a test file for the `AppComponent` named `app.component.spec.ts`.
+You can generate code coverage reports by adding the `--coverage` flag to the `ng test` command. The report is generated in the `coverage/` directory.
 
-IMPORTANT: The test file extension **must be `.spec.ts`** so that tooling can identify it as a file with tests \(also known as a *spec* file\).
+For more detailed information on prerequisites, enforcing coverage thresholds, and advanced configuration, see the [Code coverage guide](guide/testing/code-coverage).
 
-The `app.component.ts` and `app.component.spec.ts` files are siblings in the same folder.
-The root file names \(`app.component`\) are the same for both files.
+## Running tests in a browser
 
-Adopt these two conventions in your own projects for *every kind* of test file.
+While the default Node.js environment is faster for most unit tests, you can also run your tests in a real browser. This is useful for tests that rely on browser-specific APIs (like rendering) or for debugging.
 
-#### Place your spec file next to the file it tests
+To run tests in a browser, you must first install a browser provider.
+Choose one of the following browser providers based on your needs:
 
-It's a good idea to put unit test spec files in the same folder
-as the application source code files that they test:
+- **Playwright**: `@vitest/browser-playwright` for Chromium, Firefox, and WebKit.
+- **WebdriverIO**: `@vitest/browser-webdriverio` for Chrome, Firefox, Safari, and Edge.
+- **Preview**: `@vitest/browser-preview` for Webcontainer environments (like StackBlitz).
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev @vitest/browser-playwright playwright
+  </docs-code>
+</docs-code-multifile>
+
+Once the provider is installed, you can run your tests in the browser using the `--browsers` flag:
 
-* Such tests are painless to find
-* You see at a glance if a part of your application lacks tests
-* Nearby tests can reveal how a part works in context
-* When you move the source \(inevitable\), you remember to move the test
-* When you rename the source file \(inevitable\), you remember to rename the test file
+```bash
+# Example for Playwright
+ng test --browsers=chromium
 
-#### Place your spec files in a test folder
+# Example for WebdriverIO
+ng test --browsers=chrome
+```
 
-Application integration specs can test the interactions of multiple parts
-spread across folders and modules.
-They don't really belong to any part in particular, so they don't have a
-natural home next to any one file.
+Headless mode is enabled automatically if the `CI` environment variable is set. Otherwise, tests will run in a headed browser.
+
+## Other test frameworks
+
+You can also unit test an Angular application with other testing libraries and test runners. Each library and runner has its own distinctive installation procedures, configuration, and syntax.
 
-It's often better to create an appropriate folder for them in the `tests` directory.
+## Testing in continuous integration
 
-Of course specs that test the test helpers belong in the `test` folder,
-next to their corresponding helper files.
+A robust test suite is a key part of a continuous integration (CI) pipeline. CI servers let you set up your project repository so that your tests run on every commit and pull request.
 
-## Testing in continuous integration
+To test your Angular application in a continuous integration (CI) server, you can typically run the standard test command:
 
-One of the best ways to keep your project bug-free is through a test suite, but you might forget to run tests all the time.
+```shell
+ng test
+```
 
-Continuous integration \(CI\) servers let you set up your project repository so that your tests run on every commit and pull request.
+Most CI servers set a `CI=true` environment variable, which `ng test` detects. This automatically runs your tests in the appropriate non-interactive, single-run mode.
 
-To test your Angular CLI application in Continuous integration \(CI\) run the following command:
+If your CI server does not set this variable, or if you need to force single-run mode manually, you can use the `--no-watch` and `--no-progress` flags:
 
-<docs-code language="shell">
-ng test --no-watch --no-progress --browsers=ChromeHeadless
-</docs-code>
+```shell
+ng test --no-watch --no-progress
+```
 
 ## More information on testing
 
 After you've set up your application for testing, you might find the following testing guides useful.
 
-|                                                                    | Details |
-|:---                                                                |:---     |
+|                                                                    | Details                                                                           |
+| :----------------------------------------------------------------- | :-------------------------------------------------------------------------------- |
 | [Code coverage](guide/testing/code-coverage)                       | How much of your app your tests are covering and how to specify required amounts. |
 | [Testing services](guide/testing/services)                         | How to test the services your application uses.                                   |
 | [Basics of testing components](guide/testing/components-basics)    | Basics of testing Angular components.                                             |
 | [Component testing scenarios](guide/testing/components-scenarios)  | Various kinds of component testing scenarios and use cases.                       |
 | [Testing attribute directives](guide/testing/attribute-directives) | How to test your attribute directives.                                            |
 | [Testing pipes](guide/testing/pipes)                               | How to test pipes.                                                                |
-| [Debugging tests](guide/testing/debugging)                            | Common testing bugs.                                                              |
+| [Debugging tests](guide/testing/debugging)                         | Common testing bugs.                                                              |
 | [Testing utility APIs](guide/testing/utility-apis)                 | Angular testing features.                                                         |
diff --git a/adev-es/src/content/guide/testing/overview.md b/adev-es/src/content/guide/testing/overview.md
index 410e674..86c43f8 100644
--- a/adev-es/src/content/guide/testing/overview.md
+++ b/adev-es/src/content/guide/testing/overview.md
@@ -1,125 +1,203 @@
-# Pruebas
+# Pruebas unitarias
 
-Probar tu aplicación Angular te ayuda a verificar que tu aplicación está funcionando como esperas.
+Probar tu aplicación Angular te ayuda a verificar que está funcionando como esperas. Las pruebas unitarias son cruciales para detectar errores temprano, asegurar la calidad del código y facilitar la refactorización segura.
+
+NOTA: Esta guía se enfoca en la configuración de pruebas predeterminada para nuevos proyectos de Angular CLI. Si estás migrando un proyecto existente de Karma a Vitest, consulta la [guía de Migración de Karma a Vitest](guide/testing/migrating-to-vitest). Aunque Vitest es el ejecutor de pruebas predeterminado, Karma todavía está completamente soportado. Para información sobre pruebas con Karma, consulta la [guía de pruebas de Karma](guide/testing/karma).
 
 ## Configurar pruebas
 
-Angular CLI descarga e instala todo lo que necesitas para probar una aplicación Angular con [Jasmine testing framework](https://jasmine.github.io).
+Angular CLI descarga e instala todo lo que necesitas para probar una aplicación Angular con el [framework de pruebas Vitest](https://vitest.dev). Por defecto, los nuevos proyectos incluyen `vitest` y `jsdom`.
 
-El proyecto que creas con el CLI está inmediatamente listo para probar.
-Solo ejecuta el comando CLI [`ng test`](cli/test):
+Vitest ejecuta tus pruebas unitarias en un entorno de Node.js, usando `jsdom` para emular el DOM. Esto permite una ejecución de pruebas más rápida al evitar la sobrecarga de lanzar un navegador. También puedes usar `happy-dom` como alternativa instalándolo y eliminando `jsdom`. El CLI detectará y usará automáticamente `happy-dom` si está presente.
 
-<docs-code language="shell">
+El proyecto que creas con el CLI está inmediatamente listo para probar. Solo ejecuta el comando CLI [`ng test`](cli/test):
 
+```shell
 ng test
+```
 
-</docs-code>
-
-El comando `ng test` construye la aplicación en modo *watch*,
-y lanza el [Karma test runner](https://karma-runner.github.io).
+El comando `ng test` construye la aplicación en _modo watch_ y lanza el [ejecutor de pruebas Vitest](https://vitest.dev).
 
-La salida de consola se ve como a continuación:
+La salida de consola se ve así:
 
-<docs-code language="shell">
+```shell
+ ✓ src/app/app.spec.ts (3)
+   ✓ AppComponent should create the app
+   ✓ AppComponent should have as title 'my-app'
+   ✓ AppComponent should render title
+ Test Files  1 passed (1)
+      Tests  3 passed (3)
+   Start at  18:18:01
+   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)
+```
 
-02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
-02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
-02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
-02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
-Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
-TOTAL: 3 SUCCESS
+El comando `ng test` también observa cambios. Para ver esto en acción, haz un pequeño cambio a `app.ts` y guárdalo. Las pruebas se ejecutan nuevamente y los nuevos resultados aparecen en la consola.
 
-</docs-code>
-
-La última línea del log muestra que Karma ejecutó tres pruebas que todas pasaron.
+## Configuración
 
-La salida de pruebas se muestra en el navegador usando [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
+Angular CLI maneja la mayor parte de la configuración de Vitest por ti. Para muchos casos de uso comunes, puedes ajustar el comportamiento de las pruebas modificando opciones directamente en tu archivo `angular.json`.
 
-<img alt="Jasmine HTML Reporter en el navegador" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
+### Opciones de configuración integradas
 
-Haz clic en una fila de prueba para re-ejecutar solo esa prueba o haz clic en una descripción para re-ejecutar las pruebas en el grupo de pruebas seleccionado \("test suite"\).
+Puedes cambiar las siguientes opciones en el target `test` de tu archivo `angular.json`:
 
-Mientras tanto, el comando `ng test` está observando cambios.
+- `include`: Patrones glob de archivos para incluir en las pruebas. Por defecto es `['**/*.spec.ts', '**/*.test.ts']`.
+- `exclude`: Patrones glob de archivos para excluir de las pruebas.
+- `setupFiles`: Una lista de rutas a archivos de configuración global (por ejemplo, polyfills o mocks globales) que se ejecutan antes de tus pruebas.
+- `providersFile`: La ruta a un archivo que exporta un array predeterminado de proveedores de Angular para el entorno de pruebas. Esto es útil para configurar proveedores de prueba globales que se inyectan en tus pruebas.
+- `coverage`: Un booleano para habilitar o deshabilitar reportes de cobertura de código. Por defecto es `false`.
+- `browsers`: Un array de nombres de navegadores para ejecutar pruebas (por ejemplo, `["chromium"]`). Requiere que se instale un proveedor de navegador.
+
+Por ejemplo, podrías crear un archivo `src/test-providers.ts` para proporcionar `provideHttpClientTesting` a todas tus pruebas:
+
+```typescript
+import { Provider } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+const testProviders: Provider[] = [
+  provideHttpClient(),
+  provideHttpClientTesting(),
+];
+
+export default testProviders;
+```
+
+Luego referenciarías este archivo en tu `angular.json`:
 
-Para ver esto en acción, haz un pequeño cambio a `app.component.ts` y guarda.
-Las pruebas se ejecutan nuevamente, el navegador se actualiza y los nuevos resultados de prueba aparecen.
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "include": ["src/**/*.spec.ts"],
+            "setupFiles": ["src/test-setup.ts"],
+            "providersFile": "src/test-providers.ts",
+            "coverage": true,
+            "browsers": ["chromium"]
+          }
+        }
+      }
+    }
+  }
+}
+```
 
-## Configuración
+### Avanzado: Configuración personalizada de Vitest
 
-Angular CLI se encarga de la configuración de Jasmine y Karma por ti. Construye la configuración completa en memoria, basándose en opciones especificadas en el archivo `angular.json`.
+Para casos de uso avanzados, puedes proporcionar un archivo de configuración personalizado de Vitest.
 
-Si quieres personalizar Karma, puedes crear un `karma.conf.js` ejecutando el siguiente comando:
+IMPORTANTE: Aunque usar una configuración personalizada habilita opciones avanzadas, el equipo de Angular no proporciona soporte directo para el contenido específico del archivo de configuración o para cualquier plugin de terceros usado dentro de él. El CLI también sobrescribirá ciertas propiedades (`test.projects`, `test.include`) para asegurar el funcionamiento adecuado.
 
-<docs-code language="shell">
+Puedes crear un archivo de configuración de Vitest (por ejemplo, `vitest-base.config.ts`) y referenciarlo en tu `angular.json` usando la opción `runnerConfig`.
 
-ng generate config karma
+```json
+{
+  "projects": {
+    "your-project-name": {
+      "architect": {
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "runnerConfig": "vitest-base.config.ts"
+          }
+        }
+      }
+    }
+  }
+}
+```
 
-</docs-code>
+También puedes generar un archivo de configuración base usando el CLI:
 
-ÚTIL: Lee más sobre la configuración de Karma en la [guía de configuración de Karma](http://karma-runner.github.io/6.4/config/configuration-file.html).
+```shell
+ng generate config vitest
+```
 
-### Otros frameworks de prueba
+Esto crea un archivo `vitest-base.config.ts` que puedes personalizar.
 
-También puedes hacer pruebas unitarias de una aplicación Angular con otras librerías de prueba y test runners.
-Cada librería y runner tiene sus propios procedimientos de instalación, configuración y sintaxis distintivos.
+CONSEJO: Lee más sobre la configuración de Vitest en la [guía de configuración de Vitest](https://vitest.dev/config/).
 
-### Nombre y ubicación del archivo de prueba
+## Cobertura de código
 
-Dentro de la carpeta `src/app` el Angular CLI generó un archivo de prueba para el `AppComponent` llamado `app.component.spec.ts`.
+Puedes generar reportes de cobertura de código agregando la bandera `--coverage` al comando `ng test`. El reporte se genera en el directorio `coverage/`.
 
-IMPORTANTE: La extensión del archivo de prueba **debe ser `.spec.ts`** para que las herramientas puedan identificarlo como un archivo con pruebas \(también conocido como un archivo *spec*\).
+Para información más detallada sobre prerrequisitos, aplicar umbrales de cobertura y configuración avanzada, consulta la [guía de Cobertura de código](guide/testing/code-coverage).
 
-Los archivos `app.component.ts` y `app.component.spec.ts` son hermanos en la misma carpeta.
-Los nombres raíz de los archivos \(`app.component`\) son los mismos para ambos archivos.
+## Ejecutar pruebas en un navegador
 
-Adopta estas dos convenciones en tus propios proyectos para *cada tipo* de archivo de prueba.
+Aunque el entorno predeterminado de Node.js es más rápido para la mayoría de las pruebas unitarias, también puedes ejecutar tus pruebas en un navegador real. Esto es útil para pruebas que dependen de APIs específicas del navegador (como renderizado) o para depuración.
 
-#### Coloca tu archivo spec junto al archivo que prueba
+Para ejecutar pruebas en un navegador, primero debes instalar un proveedor de navegador.
+Elige uno de los siguientes proveedores de navegador según tus necesidades:
 
-Es una buena idea colocar los archivos spec de prueba unitaria en la misma carpeta
-que los archivos de código fuente de la aplicación que prueban:
+- **Playwright**: `@vitest/browser-playwright` para Chromium, Firefox y WebKit.
+- **WebdriverIO**: `@vitest/browser-webdriverio` para Chrome, Firefox, Safari y Edge.
+- **Preview**: `@vitest/browser-preview` para entornos Webcontainer (como StackBlitz).
+
+<docs-code-multifile>
+  <docs-code header="npm" language="shell">
+    npm install --save-dev @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="yarn" language="shell">
+    yarn add --dev @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="pnpm" language="shell">
+    pnpm add -D @vitest/browser-playwright playwright
+  </docs-code>
+  <docs-code header="bun" language="shell">
+    bun add --dev @vitest/browser-playwright playwright
+  </docs-code>
+</docs-code-multifile>
+
+Una vez que el proveedor esté instalado, puedes ejecutar tus pruebas en el navegador usando la bandera `--browsers`:
 
-* Tales pruebas son fáciles de encontrar
-* Ves de un vistazo si una parte de tu aplicación carece de pruebas
-* Las pruebas cercanas pueden revelar cómo funciona una parte en contexto
-* Cuando mueves el código fuente \(inevitable\), recuerdas mover la prueba
-* Cuando renombras el archivo fuente \(inevitable\), recuerdas renombrar el archivo de prueba
+```bash
+# Ejemplo para Playwright
+ng test --browsers=chromium
 
-#### Coloca tus archivos spec en una carpeta de prueba
+# Ejemplo para WebdriverIO
+ng test --browsers=chrome
+```
 
-Las specs de integración de aplicación pueden probar las interacciones de múltiples partes
-distribuidas en carpetas y módulos.
-Realmente no pertenecen a ninguna parte en particular, por lo que no tienen un
-hogar natural junto a ningún archivo.
+El modo headless se habilita automáticamente si la variable de entorno `CI` está establecida. De lo contrario, las pruebas se ejecutarán en un navegador con interfaz gráfica.
+
+## Otros frameworks de prueba
+
+También puedes hacer pruebas unitarias de una aplicación Angular con otras librerías de prueba y ejecutores de pruebas. Cada librería y ejecutor tiene sus propios procedimientos de instalación, configuración y sintaxis distintivos.
 
-A menudo es mejor crear una carpeta apropiada para ellas en el directorio `tests`.
+## Pruebas en integración continua
 
-Por supuesto, las specs que prueban los helpers de prueba pertenecen en la carpeta `test`,
-junto a sus archivos helper correspondientes.
+Un conjunto de pruebas robusto es una parte clave de una canalización de integración continua (CI). Los servidores de CI te permiten configurar el repositorio de tu proyecto para que tus pruebas se ejecuten en cada commit y pull request.
 
-## Pruebas en integración continua
+Para probar tu aplicación Angular en un servidor de integración continua (CI), típicamente puedes ejecutar el comando de prueba estándar:
 
-Una de las mejores maneras de mantener tu proyecto libre de errores es a través de un conjunto de pruebas, pero podrías olvidar ejecutar las pruebas todo el tiempo.
+```shell
+ng test
+```
 
-Los servidores de integración continua \(CI\) te permiten configurar el repositorio de tu proyecto para que tus pruebas se ejecuten en cada commit y pull request.
+La mayoría de los servidores de CI establecen una variable de entorno `CI=true`, que `ng test` detecta. Esto ejecuta automáticamente tus pruebas en el modo apropiado no interactivo de ejecución única.
 
-Para probar tu aplicación Angular CLI en integración continua \(CI\) ejecuta el siguiente comando:
+Si tu servidor de CI no establece esta variable, o si necesitas forzar el modo de ejecución única manualmente, puedes usar las banderas `--no-watch` y `--no-progress`:
 
-<docs-code language="shell">
-ng test --no-watch --no-progress --browsers=ChromeHeadless
-</docs-code>
+```shell
+ng test --no-watch --no-progress
+```
 
 ## Más información sobre pruebas
 
 Después de que hayas configurado tu aplicación para pruebas, podrías encontrar útiles las siguientes guías de pruebas.
 
-|                                                                    | Detalles |
-|:---                                                                |:---     |
-| [Cobertura de código](guide/testing/code-coverage)                       | Cuánto de tu aplicación cubren tus pruebas y cómo especificar cantidades requeridas. |
-| [Probar servicios](guide/testing/services)                         | Cómo probar los servicios que usa tu aplicación.                                   |
-| [Fundamentos de probar componentes](guide/testing/components-basics)    | Fundamentos de probar componentes en Angular.                                             |
-| [Escenarios de prueba de componentes](guide/testing/components-scenarios)  | Varios tipos de escenarios de prueba de componentes y casos de uso.                       |
-| [Probar directivas de atributo](guide/testing/attribute-directives) | Cómo probar tus directivas de atributo.                                            |
-| [Probar pipes](guide/testing/pipes)                               | Cómo probar pipes.                                                                |
-| [Depurar pruebas](guide/testing/debugging)                            | Bugs comunes de pruebas.                                                              |
-| [APIs utilitarias de pruebas](guide/testing/utility-apis)                 | Características de pruebas en Angular.                                                         |
+|                                                                           | Detalles                                                                            |
+| :------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- |
+| [Cobertura de código](guide/testing/code-coverage)                        | Cuánto de tu aplicación cubren tus pruebas y cómo especificar cantidades requeridas. |
+| [Probar servicios](guide/testing/services)                                | Cómo probar los servicios que usa tu aplicación.                                    |
+| [Fundamentos de probar componentes](guide/testing/components-basics)      | Fundamentos de probar componentes Angular.                                          |
+| [Escenarios de prueba de componentes](guide/testing/components-scenarios) | Varios tipos de escenarios de prueba de componentes y casos de uso.                 |
+| [Probar directivas de atributo](guide/testing/attribute-directives)       | Cómo probar tus directivas de atributo.                                             |
+| [Probar pipes](guide/testing/pipes)                                       | Cómo probar pipes.                                                                  |
+| [Depurar pruebas](guide/testing/debugging)                                | Errores comunes de pruebas.                                                         |
+| [APIs utilitarias de pruebas](guide/testing/utility-apis)                 | Características de pruebas en Angular.                                              |
diff --git a/adev-es/src/content/guide/testing/pipes.en.md b/adev-es/src/content/guide/testing/pipes.en.md
index 260f73a..c621250 100644
--- a/adev-es/src/content/guide/testing/pipes.en.md
+++ b/adev-es/src/content/guide/testing/pipes.en.md
@@ -11,18 +11,17 @@ Most pipes have no dependence on Angular other than the `@Pipe` metadata and an
 Consider a `TitleCasePipe` that capitalizes the first letter of each word.
 Here's an implementation with a regular expression.
 
-<docs-code header="app/shared/title-case.pipe.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts"/>
+<docs-code header="title-case.pipe.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts"/>
 
-Anything that uses a regular expression is worth testing thoroughly.
-Use simple Jasmine to explore the expected cases and the edge cases.
+Anything that uses a regular expression is worth testing thoroughly. You can use standard unit testing techniques to explore the expected cases and the edge cases.
 
-<docs-code header="app/shared/title-case.pipe.spec.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts" visibleRegion="excerpt"/>
+<docs-code header="title-case.pipe.spec.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts" visibleRegion="excerpt"/>
 
 ## Writing DOM tests to support a pipe test
 
-These are tests of the pipe *in isolation*.
+These are tests of the pipe _in isolation_.
 They can't tell if the `TitleCasePipe` is working properly as applied in the application components.
 
 Consider adding component tests such as this one:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
+<docs-code header="hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
diff --git a/adev-es/src/content/guide/testing/pipes.md b/adev-es/src/content/guide/testing/pipes.md
index 24081d4..ae824ed 100644
--- a/adev-es/src/content/guide/testing/pipes.md
+++ b/adev-es/src/content/guide/testing/pipes.md
@@ -11,18 +11,17 @@ La mayoría de pipes no tienen dependencia de Angular aparte de los metadata `@P
 Considera un `TitleCasePipe` que capitaliza la primera letra de cada palabra.
 Aquí hay una implementación con una expresión regular.
 
-<docs-code header="app/shared/title-case.pipe.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts"/>
+<docs-code header="title-case.pipe.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.ts"/>
 
-Cualquier cosa que use una expresión regular vale la pena probar exhaustivamente.
-Usa Jasmine simple para explorar los casos esperados y los casos extremos.
+Cualquier cosa que use una expresión regular vale la pena probar exhaustivamente. Puedes usar técnicas estándar de pruebas unitarias para explorar los casos esperados y los casos extremos.
 
-<docs-code header="app/shared/title-case.pipe.spec.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts" visibleRegion="excerpt"/>
+<docs-code header="title-case.pipe.spec.ts" path="adev/src/content/examples/testing/src/app/shared/title-case.pipe.spec.ts" visibleRegion="excerpt"/>
 
 ## Escribir pruebas DOM para soportar una prueba de pipe
 
-Estas son pruebas del pipe *de forma aislada*.
+Estas son pruebas del pipe _de forma aislada_.
 No pueden decir si el `TitleCasePipe` está funcionando correctamente como se aplica en los componentes de la aplicación.
 
 Considera agregar pruebas de componente como esta:
 
-<docs-code header="app/hero/hero-detail.component.spec.ts (pipe test)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
+<docs-code header="hero-detail.component.spec.ts (prueba de pipe)" path="adev/src/content/examples/testing/src/app/hero/hero-detail.component.spec.ts" visibleRegion="title-case-pipe"/>
diff --git a/adev-es/src/content/guide/testing/services.en.md b/adev-es/src/content/guide/testing/services.en.md
index 4a7ed5f..dac0eac 100644
--- a/adev-es/src/content/guide/testing/services.en.md
+++ b/adev-es/src/content/guide/testing/services.en.md
@@ -1,39 +1,13 @@
 # Testing services
 
+NOTE: While this guide is being updated for Vitest, some code examples currently use Karma/Jasmine syntax and APIs. We are actively working to provide Vitest equivalents where applicable.
+
 To check that your services are working as you intend, you can write tests specifically for them.
 
 Services are often the smoothest files to unit test.
 Here are some synchronous and asynchronous unit tests of the `ValueService` written without assistance from Angular testing utilities.
 
-<docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="ValueService"/>
-
-## Services with dependencies
-
-Services often depend on other services that Angular injects into the constructor.
-In many cases, you can create and *inject* these dependencies by hand while calling the service's constructor.
-
-The `MasterService` is a simple example:
-
-<docs-code header="app/demo/demo.ts" path="adev/src/content/examples/testing/src/app/demo/demo.ts" visibleRegion="MasterService"/>
-
-`MasterService` delegates its only method, `getValue`, to the injected `ValueService`.
-
-Here are several ways to test it.
-
-<docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="MasterService"/>
-
-The first test creates a `ValueService` with `new` and passes it to the `MasterService` constructor.
-
-However, injecting the real service rarely works well as most dependent services are difficult to create and control.
-
-Instead, mock the dependency, use a dummy value, or create a [spy](https://jasmine.github.io/tutorials/your_first_suite#section-Spies) on the pertinent service method.
-
-HELPFUL: Prefer spies as they are usually the best way to mock services.
-
-These standard testing techniques are great for unit testing services in isolation.
-
-However, you almost always inject services into application classes using Angular dependency injection and you should have tests that reflect that usage pattern.
-Angular testing utilities make it straightforward to investigate how injected services behave.
+<docs-code header="demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="ValueService"/>
 
 ## Testing services with the `TestBed`
 
@@ -41,21 +15,21 @@ Your application relies on Angular [dependency injection (DI)](guide/di) to crea
 When a service has a dependent service, DI finds or creates that dependent service.
 And if that dependent service has its own dependencies, DI finds-or-creates them as well.
 
-As a service *consumer*, you don't worry about any of this.
+As a service _consumer_, you don't worry about any of this.
 You don't worry about the order of constructor arguments or how they're created.
 
-As a service *tester*, you must at least think about the first level of service dependencies but you *can* let Angular DI do the service creation and deal with constructor argument order when you use the `TestBed` testing utility to provide and create services.
+As a service _tester_, you must at least think about the first level of service dependencies but you _can_ let Angular DI do the service creation and deal with constructor argument order when you use the `TestBed` testing utility to provide and create services.
 
 ## Angular `TestBed`
 
 The `TestBed` is the most important of the Angular testing utilities.
-The `TestBed` creates a dynamically-constructed Angular *test* module that emulates an Angular [@NgModule](guide/ngmodules).
+The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates an Angular [@NgModule](guide/ngmodules).
 
 The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules).
 
 To test a service, you set the `providers` metadata property with an array of the services that you'll test or mock.
 
-<docs-code header="app/demo/demo.testbed.spec.ts (provide ValueService in beforeEach)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
+<docs-code header="demo.testbed.spec.ts (provide ValueService in beforeEach)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
 
 Then inject it inside a test by calling `TestBed.inject()` with the service class as the argument.
 
@@ -86,24 +60,24 @@ There's another school of testing that never calls `beforeEach()` and prefers to
 
 Here's how you might rewrite one of the `MasterService` tests in that style.
 
-Begin by putting re-usable, preparatory code in a *setup* function instead of `beforeEach()`.
+Begin by putting re-usable, preparatory code in a _setup_ function instead of `beforeEach()`.
 
-<docs-code header="app/demo/demo.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup"/>
+<docs-code header="demo.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup"/>
 
 The `setup()` function returns an object literal with the variables, such as `masterService`, that a test might reference.
-You don't define *semi-global* variables \(for example, `let masterService: MasterService`\) in the body of the `describe()`.
+You don't define _semi-global_ variables \(for example, `let masterService: MasterService`\) in the body of the `describe()`.
 
 Then each test invokes `setup()` in its first line, before continuing with steps that manipulate the test subject and assert expectations.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-test"/>
 
-Notice how the test uses [*destructuring assignment*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the setup variables that it needs.
+Notice how the test uses [_destructuring assignment_](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the setup variables that it needs.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup-call"/>
 
 Many developers feel this approach is cleaner and more explicit than the traditional `beforeEach()` style.
 
-Although this testing guide follows the traditional style and the default [CLI schematics](https://github.com/angular/angular-cli) generate test files with `beforeEach()` and `TestBed`, feel free to adopt *this alternative approach* in your own projects.
+Although this testing guide follows the traditional style and the default [CLI schematics](https://github.com/angular/angular-cli) generate test files with `beforeEach()` and `TestBed`, feel free to adopt _this alternative approach_ in your own projects.
 
 ## Testing HTTP services
 
@@ -111,13 +85,13 @@ Data services that make HTTP calls to remote servers typically inject and delega
 
 You can test a data service with an injected `HttpClient` spy as you would test any service with a dependency.
 
-<docs-code header="app/model/hero.service.spec.ts (tests with spies)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
+<docs-code header="hero.service.spec.ts (tests with spies)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
 
 IMPORTANT: The `HeroService` methods return `Observables`.
-You must *subscribe* to an observable to \(a\) cause it to execute and \(b\) assert that the method succeeds or fails.
+You must _subscribe_ to an observable to \(a\) cause it to execute and \(b\) assert that the method succeeds or fails.
 
 The `subscribe()` method takes a success \(`next`\) and fail \(`error`\) callback.
-Make sure you provide *both* callbacks so that you capture errors.
+Make sure you provide _both_ callbacks so that you capture errors.
 Neglecting to do so produces an asynchronous uncaught observable error that the test runner will likely attribute to a completely different test.
 
 ## `HttpClientTestingModule`
@@ -126,4 +100,4 @@ Extended interactions between a data service and the `HttpClient` can be complex
 
 The `HttpClientTestingModule` can make these testing scenarios more manageable.
 
-While the *code sample* accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http/testing), which covers testing with the `HttpClientTestingModule` in detail.
+While the _code sample_ accompanying this guide demonstrates `HttpClientTestingModule`, this page defers to the [Http guide](guide/http/testing), which covers testing with the `HttpClientTestingModule` in detail.
diff --git a/adev-es/src/content/guide/testing/services.md b/adev-es/src/content/guide/testing/services.md
index a901a4c..ea5e79b 100644
--- a/adev-es/src/content/guide/testing/services.md
+++ b/adev-es/src/content/guide/testing/services.md
@@ -1,39 +1,13 @@
 # Probar servicios
 
+NOTA: Aunque esta guía se está actualizando para Vitest, algunos ejemplos de código actualmente usan sintaxis y APIs de Karma/Jasmine. Estamos trabajando activamente para proporcionar equivalentes de Vitest donde sea aplicable.
+
 Para verificar que tus servicios están funcionando como pretendes, puedes escribir pruebas específicamente para ellos.
 
 Los servicios son a menudo los archivos más sencillos de probar unitariamente.
 Aquí hay algunas pruebas unitarias síncronas y asíncronas del `ValueService` escritas sin ayuda de las utilidades de pruebas de Angular.
 
-<docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="ValueService"/>
-
-## Servicios con dependencias
-
-Los servicios a menudo dependen de otros servicios que Angular inyecta en el constructor.
-En muchos casos, puedes crear e *inyectar* estas dependencias manualmente mientras llamas al constructor del servicio.
-
-El `MasterService` es un ejemplo simple:
-
-<docs-code header="app/demo/demo.ts" path="adev/src/content/examples/testing/src/app/demo/demo.ts" visibleRegion="MasterService"/>
-
-`MasterService` delega su único método, `getValue`, al `ValueService` inyectado.
-
-Aquí hay varias formas de probarlo.
-
-<docs-code header="app/demo/demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="MasterService"/>
-
-La primera prueba crea un `ValueService` con `new` y lo pasa al constructor de `MasterService`.
-
-Sin embargo, inyectar el servicio real rara vez funciona bien ya que la mayoría de los servicios dependientes son difíciles de crear y controlar.
-
-En su lugar, simula la dependencia, usa un valor dummy, o crea un [spy](https://jasmine.github.io/tutorials/your_first_suite#section-Spies) en el método pertinente del servicio.
-
-ÚTIL: Prefiere los spies ya que usualmente son la mejor forma de simular servicios.
-
-Estas técnicas estándar de pruebas son geniales para probar servicios de forma aislada unitariamente.
-
-Sin embargo, casi siempre inyectas servicios en clases de aplicación usando inyección de dependencias de Angular y deberías tener pruebas que reflejen ese patrón de uso.
-Las utilidades de pruebas de Angular hacen que sea sencillo investigar cómo se comportan los servicios inyectados.
+<docs-code header="demo.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="ValueService"/>
 
 ## Probar servicios con el `TestBed`
 
@@ -41,25 +15,25 @@ Tu aplicación depende de la [inyección de dependencias (DI)](guide/di) de Angu
 Cuando un servicio tiene un servicio dependiente, DI encuentra o crea ese servicio dependiente.
 Y si ese servicio dependiente tiene sus propias dependencias, DI las encuentra-o-crea también.
 
-Como *consumidor* del servicio, no te preocupas por nada de esto.
+Como _consumidor_ del servicio, no te preocupas por nada de esto.
 No te preocupas por el orden de los argumentos del constructor o cómo se crean.
 
-Como *probador* del servicio, debes al menos pensar sobre el primer nivel de dependencias del servicio pero *puedes* dejar que Angular DI haga la creación del servicio y se ocupe del orden de los argumentos del constructor cuando usas la utilidad de pruebas `TestBed` para proporcionar y crear servicios.
+Como _probador_ del servicio, debes al menos pensar sobre el primer nivel de dependencias del servicio pero _puedes_ dejar que Angular DI haga la creación del servicio y se ocupe del orden de los argumentos del constructor cuando usas la utilidad de pruebas `TestBed` para proporcionar y crear servicios.
 
 ## Angular `TestBed`
 
 El `TestBed` es la más importante de las utilidades de pruebas de Angular.
-El `TestBed` crea un módulo *test* de Angular construido dinámicamente que emula un [@NgModule](guide/ngmodules) de Angular.
+El `TestBed` crea un módulo _test_ de Angular construido dinámicamente que emula un [@NgModule](guide/ngmodules) de Angular.
 
 El método `TestBed.configureTestingModule()` toma un objeto de metadata que puede tener la mayoría de las propiedades de un [@NgModule](guide/ngmodules).
 
 Para probar un servicio, estableces la propiedad de metadata `providers` con un array de los servicios que probarás o simularás.
 
-<docs-code header="app/demo/demo.testbed.spec.ts (provide ValueService in beforeEach)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
+<docs-code header="demo.testbed.spec.ts (proporcionar ValueService en beforeEach)" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-before-each"/>
 
 Luego inyéctalo dentro de una prueba llamando a `TestBed.inject()` con la clase del servicio como argumento.
 
-ÚTIL: `TestBed.get()` fue deprecado a partir de la versión 9 de Angular.
+CONSEJO: `TestBed.get()` fue deprecado a partir de la versión 9 de Angular.
 Para ayudar a minimizar cambios disruptivos, Angular introduce una nueva función llamada `TestBed.inject()`, que deberías usar en su lugar.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="value-service-inject-it"/>
@@ -88,22 +62,22 @@ Aquí está cómo podrías reescribir una de las pruebas de `MasterService` en e
 
 Comienza poniendo código preparatorio reutilizable en una función *setup* en lugar de `beforeEach()`.
 
-<docs-code header="app/demo/demo.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup"/>
+<docs-code header="demo.spec.ts (setup)" path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup"/>
 
 La función `setup()` retorna un objeto literal con las variables, como `masterService`, que una prueba podría referenciar.
-No defines variables *semi-globales* \(por ejemplo, `let masterService: MasterService`\) en el cuerpo del `describe()`.
+No defines variables _semi-globales_ \(por ejemplo, `let masterService: MasterService`\) en el cuerpo del `describe()`.
 
 Luego cada prueba invoca `setup()` en su primera línea, antes de continuar con pasos que manipulan el sujeto de prueba y afirman expectativas.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-test"/>
 
-Nota cómo la prueba usa [*asignación por desestructuración*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) para extraer las variables de setup que necesita.
+Nota cómo la prueba usa [_asignación por desestructuración_](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) para extraer las variables de setup que necesita.
 
 <docs-code path="adev/src/content/examples/testing/src/app/demo/demo.spec.ts" visibleRegion="no-before-each-setup-call"/>
 
 Muchos desarrolladores sienten que este enfoque es más limpio y más explícito que el estilo tradicional de `beforeEach()`.
 
-Aunque esta guía de pruebas sigue el estilo tradicional y los [schematics por defecto del CLI](https://github.com/angular/angular-cli) generan archivos de prueba con `beforeEach()` y `TestBed`, siéntete libre de adoptar *este enfoque alternativo* en tus propios proyectos.
+Aunque esta guía de pruebas sigue el estilo tradicional y los [schematics por defecto del CLI](https://github.com/angular/angular-cli) generan archivos de prueba con `beforeEach()` y `TestBed`, siéntete libre de adoptar _este enfoque alternativo_ en tus propios proyectos.
 
 ## Probar servicios HTTP
 
@@ -111,13 +85,13 @@ Los servicios de datos que hacen llamadas HTTP a servidores remotos típicamente
 
 Puedes probar un servicio de datos con un spy de `HttpClient` inyectado como probarías cualquier servicio con una dependencia.
 
-<docs-code header="app/model/hero.service.spec.ts (tests with spies)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
+<docs-code header="hero.service.spec.ts (pruebas con spies)" path="adev/src/content/examples/testing/src/app/model/hero.service.spec.ts" visibleRegion="test-with-spies"/>
 
 IMPORTANTE: Los métodos de `HeroService` retornan `Observables`.
-Debes *suscribirte* a un observable para \(a\) hacer que se ejecute y \(b\) afirmar que el método tiene éxito o falla.
+Debes _suscribirte_ a un observable para \(a\) hacer que se ejecute y \(b\) afirmar que el método tiene éxito o falla.
 
 El método `subscribe()` toma un callback de éxito \(`next`\) y uno de fallo \(`error`\).
-Asegúrate de proporcionar *ambos* callbacks para que captures errores.
+Asegúrate de proporcionar _ambos_ callbacks para que captures errores.
 Descuidar hacerlo produce un error asíncrono no capturado de observable que el test runner probablemente atribuirá a una prueba completamente diferente.
 
 ## `HttpClientTestingModule`
@@ -126,4 +100,4 @@ Las interacciones extendidas entre un servicio de datos y el `HttpClient` pueden
 
 El `HttpClientTestingModule` puede hacer que estos escenarios de pruebas sean más manejables.
 
-Mientras que la *muestra de código* que acompaña esta guía demuestra `HttpClientTestingModule`, esta página difiere a la [guía de Http](guide/http/testing), que cubre pruebas con el `HttpClientTestingModule` en detalle.
+Mientras que la _muestra de código_ que acompaña esta guía demuestra `HttpClientTestingModule`, esta página difiere a la [guía de Http](guide/http/testing), que cubre pruebas con el `HttpClientTestingModule` en detalle.
diff --git a/adev-es/src/content/guide/testing/using-component-harnesses.en.md b/adev-es/src/content/guide/testing/using-component-harnesses.en.md
index 03cbe63..8bdd279 100644
--- a/adev-es/src/content/guide/testing/using-component-harnesses.en.md
+++ b/adev-es/src/content/guide/testing/using-component-harnesses.en.md
@@ -8,9 +8,9 @@ TIP: This guide assumes you've already read the [component harnesses overview gu
 
 The [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) is a set of behavior primitives for building components. To use the component harnesses, first install `@angular/cdk` from npm. You can do this from your terminal using the Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Test harness environments and loaders
 
@@ -91,27 +91,27 @@ let loader: HarnessLoader;
 let rootLoader: HarnessLoader;
 
 beforeEach(() => {
-  fixture = TestBed.createComponent(MyDialogButton);
-  loader = TestbedHarnessEnvironment.loader(fixture);
-  rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+fixture = TestBed.createComponent(MyDialogButton);
+loader = TestbedHarnessEnvironment.loader(fixture);
+rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
 });
 
 it('loads harnesses', async () => {
-  // Load a harness for the bootstrapped component with `harnessForFixture`
-  dialogButtonHarness =
-    await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);
+// Load a harness for the bootstrapped component with `harnessForFixture`
+dialogButtonHarness =
+await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);
 
-  // The button element is inside the fixture's root element, so we use `loader`.
-  const buttonHarness = await loader.getHarness(MyButtonHarness);
+// The button element is inside the fixture's root element, so we use `loader`.
+const buttonHarness = await loader.getHarness(MyButtonHarness);
 
-  // Click the button to open the dialog
-  await buttonHarness.click();
+// Click the button to open the dialog
+await buttonHarness.click();
 
-  // The dialog is appended to `document.body`, outside of the fixture's root element,
-  // so we use `rootLoader` in this case.
-  const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
+// The dialog is appended to `document.body`, outside of the fixture's root element,
+// so we use `rootLoader` in this case.
+const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
 
-  // ... make some assertions
+// ... make some assertions
 });
 </docs-code>
 
diff --git a/adev-es/src/content/guide/testing/using-component-harnesses.md b/adev-es/src/content/guide/testing/using-component-harnesses.md
index 6272684..401cf8f 100644
--- a/adev-es/src/content/guide/testing/using-component-harnesses.md
+++ b/adev-es/src/content/guide/testing/using-component-harnesses.md
@@ -8,9 +8,9 @@ CONSEJO: Esta guía asume que ya leíste la [guía de visión general de compone
 
 El [Component Dev Kit (CDK)](https://material.angular.dev/cdk/categories) es un conjunto de primitivas de comportamiento para construir componentes. Para usar los component harnesses, primero instala `@angular/cdk` desde npm. Puedes hacer esto desde tu terminal usando Angular CLI:
 
-<docs-code language="shell">
-  ng add @angular/cdk
-</docs-code>
+```shell
+ng add @angular/cdk
+```
 
 ## Entornos de test harness y loaders
 
@@ -91,27 +91,27 @@ let loader: HarnessLoader;
 let rootLoader: HarnessLoader;
 
 beforeEach(() => {
-  fixture = TestBed.createComponent(MyDialogButton);
-  loader = TestbedHarnessEnvironment.loader(fixture);
-  rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+fixture = TestBed.createComponent(MyDialogButton);
+loader = TestbedHarnessEnvironment.loader(fixture);
+rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
 });
 
 it('loads harnesses', async () => {
-  // Cargar un harness para el componente bootstrap con `harnessForFixture`
-  dialogButtonHarness =
-    await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);
+// Cargar un harness para el componente bootstrap con `harnessForFixture`
+dialogButtonHarness =
+  await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);
 
-  // El elemento button está dentro del elemento raíz del fixture, así que usamos `loader`.
-  const buttonHarness = await loader.getHarness(MyButtonHarness);
+// El elemento button está dentro del elemento raíz del fixture, así que usamos `loader`.
+const buttonHarness = await loader.getHarness(MyButtonHarness);
 
-  // Hacer clic en el botón para abrir el diálogo
-  await buttonHarness.click();
+// Hacer clic en el botón para abrir el diálogo
+await buttonHarness.click();
 
-  // El diálogo se adjunta a `document.body`, fuera del elemento raíz del fixture,
-  // así que usamos `rootLoader` en este caso.
-  const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
+// El diálogo se adjunta a `document.body`, fuera del elemento raíz del fixture,
+// así que usamos `rootLoader` en este caso.
+const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
 
-  // ... hacer algunas afirmaciones
+// ... hacer algunas afirmaciones
 });
 </docs-code>
 
diff --git a/adev-es/src/content/guide/testing/utility-apis.en.md b/adev-es/src/content/guide/testing/utility-apis.en.md
index dd218d7..38a72b3 100644
--- a/adev-es/src/content/guide/testing/utility-apis.en.md
+++ b/adev-es/src/content/guide/testing/utility-apis.en.md
@@ -1,22 +1,21 @@
 # Testing Utility APIs
 
+NOTE: While this guide is being updated for Vitest, some descriptions and examples of utility APIs are currently presented within the context of Karma/Jasmine. We are actively working to provide Vitest equivalents and updated guidance where applicable.
+
 This page describes the most useful Angular testing features.
 
 The Angular testing utilities include the `TestBed`, the `ComponentFixture`, and a handful of functions that control the test environment.
-The [`TestBed`](#testbed-api-summary) and [`ComponentFixture`](#component-fixture-api-summary) classes are covered separately.
+The [`TestBed`](#testbed-class-summary) and [`ComponentFixture`](#the-componentfixture) classes are covered separately.
 
 Here's a summary of the stand-alone functions, in order of likely utility:
 
-| Function                     | Details |
-|:---                          |:---     |
-| `waitForAsync`               | Runs the body of a test \(`it`\) or setup \(`beforeEach`\) function within a special *async test zone*. See [waitForAsync](guide/testing/components-scenarios#waitForAsync).                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `fakeAsync`                  | Runs the body of a test \(`it`\) within a special *fakeAsync test zone*, enabling a linear control flow coding style. See [fakeAsync](guide/testing/components-scenarios#fake-async).                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `tick`                       | Simulates the passage of time and the completion of pending asynchronous activities by flushing both *timer* and *micro-task* queues within the *fakeAsync test zone*.  The curious, dedicated reader might enjoy this lengthy blog post, ["*Tasks, microtasks, queues and schedules*"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules).  Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. See [tick](guide/testing/components-scenarios#tick). |
-| `inject`                     | Injects one or more services from the current `TestBed` injector into a test function. It cannot inject a service provided by the component itself. See discussion of the [debugElement.injector](guide/testing/components-scenarios#get-injected-services).                                                                                                                                                                                                                                                                                                                                                                          |
-| `discardPeriodicTasks`       | When a `fakeAsync()` test ends with pending timer event *tasks* \(queued `setTimeOut` and `setInterval` callbacks\), the test fails with a clear error message. <br /> In general, a test should end with no queued tasks. When pending timer tasks are expected, call `discardPeriodicTasks` to flush the *task* queue and avoid the error.                                                                                                                                                                                                                                                                                          |
-| `flushMicrotasks`            | When a `fakeAsync()` test ends with pending *micro-tasks* such as unresolved promises, the test fails with a clear error message. <br /> In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the  *micro-task* queue and avoid the error.                                                                                                                                                                                                                                                                                                                 |
-| `ComponentFixtureAutoDetect` | A provider token for a service that turns on [automatic change detection](guide/testing/components-scenarios#automatic-change-detection).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `getTestBed`                 | Gets the current instance of the `TestBed`. Usually unnecessary because the static class methods of the `TestBed` class are typically sufficient. The `TestBed` instance exposes a few rarely used members that are not available as static methods.                                                                                                                                                                                                                                                                                                                                                                                  |
+| Function                     | Details                                                                                                                                                                                                                                                      |
+| :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `inject`                     | Injects one or more services from the current `TestBed` injector into a test function. It cannot inject a service provided by the component itself. See discussion of the [debugElement.injector](guide/testing/components-scenarios#get-injected-services). |
+| `ComponentFixtureAutoDetect` | A provider token for a service that turns on [automatic change detection](guide/testing/components-scenarios#automatic-change-detection).                                                                                                                    |
+| `getTestBed`                 | Gets the current instance of the `TestBed`. Usually unnecessary because the static class methods of the `TestBed` class are typically sufficient. The `TestBed` instance exposes a few rarely used members that are not available as static methods.         |
+
+For handling complex asynchronous scenarios or testing legacy Zone.js-based applications, see the [Zone.js Testing Utilities](guide/testing/zone-js-testing-utilities) guide.
 
 ## `TestBed` class summary
 
@@ -29,10 +28,10 @@ The module definition passed to `configureTestingModule` is a subset of the `@Ng
 <docs-code language="javascript">
 
 type TestModuleMetadata = {
-  providers?: any[];
-  declarations?: any[];
-  imports?: any[];
-  schemas?: Array<SchemaMetadata | any[]>;
+providers?: any[];
+declarations?: any[];
+imports?: any[];
+schemas?: Array<SchemaMetadata | any[]>;
 };
 
 </docs-code>
@@ -42,37 +41,38 @@ Each override method takes a `MetadataOverride<T>` where `T` is the kind of meta
 <docs-code language="javascript">
 
 type MetadataOverride<T> = {
-  add?: Partial<T>;
-  remove?: Partial<T>;
-  set?: Partial<T>;
+add?: Partial<T>;
+remove?: Partial<T>;
+set?: Partial<T>;
 };
 
 </docs-code>
 
-The `TestBed` API consists of static class methods that either update or reference a *global* instance of the `TestBed`.
+The `TestBed` API consists of static class methods that either update or reference a _global_ instance of the `TestBed`.
 
 Internally, all static methods cover methods of the current runtime `TestBed` instance, which is also returned by the `getTestBed()` function.
 
-Call `TestBed` methods *within* a `beforeEach()` to ensure a fresh start before each individual test.
+Call `TestBed` methods _within_ a `beforeEach()` to ensure a fresh start before each individual test.
 
 Here are the most important static methods, in order of likely utility.
 
-| Methods                                                        | Details |
-|:---                                                            |:---     |
-| `configureTestingModule`                                       | The testing shims \(`karma-test-shim`, `browser-test-shim`\) 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 a `templateUrl` or `styleUrls` because fetching component template and style files is necessarily asynchronous. See [compileComponents](guide/testing/components-scenarios#calling-compilecomponents). <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.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| 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 a `templateUrl` or `styleUrls` because fetching component template and style files is necessarily asynchronous. See [compileComponents](guide/testing/components-scenarios#calling-compilecomponents). <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.                                                                                                                                                                                                                                                                                  |
+| `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.                                                                                                                                                                                                                                                                               |
+| `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.                                                                                                                                                                                                                                                                                                                                                                                           |
+
 |
- `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\): <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> After calling `TestBed.inject`, the `TestBed` configuration is frozen for the duration of the current spec. |
+`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\): <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> 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 \(`karma-test-shim`, `browser-test-shim`\) 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+`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.
+A few of the `TestBed` instance methods are not covered by static `TestBed` _class_ methods.
 These are rarely needed.
 
 ## The `ComponentFixture`
@@ -85,27 +85,27 @@ The `ComponentFixture` properties and methods provide access to the component, i
 
 Here are the most important properties for testers, in order of likely utility.
 
-| Properties          | Details |
-|:---                 |:---     |
-| `componentInstance` | The instance of the component class created by `TestBed.createComponent`.                                                                                                                                                                                                                          |
-| `debugElement`      | The `DebugElement` associated with the root element of the component. <br /> The `debugElement` provides insight into the component and its DOM element during test and debugging. It's a critical property for testers. The most interesting members are covered [below](#debug-element-details). |
-| `nativeElement`     | The native DOM element at the root of the component.                                                                                                                                                                                                                                               |
-| `changeDetectorRef` | The `ChangeDetectorRef` for the component. <br /> The `ChangeDetectorRef` is most valuable when testing a component that has the `ChangeDetectionStrategy.OnPush` method or the component's change detection is under your programmatic control.                                                   |
+| Properties          | Details                                                                                                                                                                                                                                                                                   |
+| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `componentInstance` | The instance of the component class created by `TestBed.createComponent`.                                                                                                                                                                                                                 |
+| `debugElement`      | The `DebugElement` associated with the root element of the component. <br /> The `debugElement` provides insight into the component and its DOM element during test and debugging. It's a critical property for testers. The most interesting members are covered [below](#debugelement). |
+| `nativeElement`     | The native DOM element at the root of the component.                                                                                                                                                                                                                                      |
+| `changeDetectorRef` | The `ChangeDetectorRef` for the component. <br /> The `ChangeDetectorRef` is most valuable when testing a component that has the `ChangeDetectionStrategy.OnPush` method or the component's change detection is under your programmatic control.                                          |
 
 ### `ComponentFixture` methods
 
-The *fixture* methods cause Angular to perform certain tasks on the component tree.
+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.
 
 Here are the most useful methods for testers.
 
-| Methods             | Details |
-|:---                 |:---     |
+| Methods             | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `detectChanges`     | Trigger a change detection cycle for the component. <br /> Call it to initialize the component \(it calls `ngOnInit`\) and after your test code, change the component's data bound property values. Angular can't see that you've changed `personComponent.name` and won't update the `name` binding until you call `detectChanges`. <br /> Runs `checkNoChanges` afterwards to confirm that there are no circular updates unless called as `detectChanges(false)`;                                                                                    |
 | `autoDetectChanges` | Set this to `true` when you want the fixture to detect changes automatically. <br /> When autodetect is `true`, the test fixture calls `detectChanges` immediately after creating the component. Then it listens for pertinent zone events and calls `detectChanges` accordingly. When your test code modifies component property values directly, you probably still have to call `fixture.detectChanges` to trigger data binding updates. <br /> The default is `false`. Testers who prefer fine control over test behavior tend to keep it `false`. |
 | `checkNoChanges`    | Do a change detection run to make sure there are no pending changes. Throws an exceptions if there are.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `isStable`          | If the fixture is currently *stable*, returns `true`. If there are async tasks that have not completed, returns `false`.                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `whenStable`        | Returns a promise that resolves when the fixture is stable. <br /> To resume testing after completion of asynchronous activity or asynchronous change detection, hook that promise. See [whenStable](guide/testing/components-scenarios#whenstable).                                                                                                                                                                                                                                                                                                  |
+| `isStable`          | If the fixture is currently _stable_, returns `true`. If there are async tasks that have not completed, returns `false`.                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `whenStable`        | Returns a promise that resolves when the fixture is stable. <br /> To resume testing after completion of asynchronous activity or asynchronous change detection, hook that promise. See [whenStable](guide/testing/components-scenarios#whenstable).                                                                                                                                                                                                                                                                                                   |
 | `destroy`           | Trigger component destruction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
 #### `DebugElement`
@@ -116,36 +116,36 @@ From the test root component's `DebugElement` returned by `fixture.debugElement`
 
 Here are the most useful `DebugElement` members for testers, in approximate order of utility:
 
-| Members               | Details |
-|:---                   |:---     |
-| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                        |
-| `query`               | Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement` that matches the [predicate](#query-predicate) at any depth in the subtree.                                                                                                                                                                                                                                        |
-| `queryAll`            | Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements` that matches the [predicate](#query-predicate) at any depth in subtree.                                                                                                                                                                                                                                              |
-| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                                                                              |
-| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                                                                                    |
-| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. <br /> When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`.                                                                   |
-| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`.  `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                                                  |
-| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                                                                            |
-| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                                                                              |
-| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the *event object* expected by the handler. See [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`. |
-| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                                                                                   |
-| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                                                                            |
-| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                                                                            |
-| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                                                                                        |
+| Members               | Details                                                                                                                                                                                                                                                                                                                                                                                                |
+| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                                                                                                           |
+| `query`               | Calling `query(predicate: Predicate<DebugElement>)` returns the first `DebugElement` that matches the predicate at any depth in the subtree.                                                                                                                                                                                                                                                           |
+| `queryAll`            | Calling `queryAll(predicate: Predicate<DebugElement>)` returns all `DebugElements` that matches the predicate at any depth in subtree.                                                                                                                                                                                                                                                                 |
+| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                                                                             |
+| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                                                                                   |
+| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. <br /> When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`.                                                        |
+| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`. `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                                                                                      |
+| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                                                                           |
+| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                                                                             |
+| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the _event object_ expected by the handler. See [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`. |
+| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                                                                                  |
+| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                                                                           |
+| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                                                                           |
+| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                                                                              |
 
 The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a predicate that filters the source element's subtree for matching `DebugElement`.
 
-The predicate is any method that takes a `DebugElement` and returns a *truthy* value.
+The predicate is any method that takes a `DebugElement` and returns a _truthy_ value.
 The following example finds all `DebugElements` with a reference to a template local variable named "content":
 
-<docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="custom-predicate"/>
+<docs-code header="demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="custom-predicate"/>
 
 The Angular `By` class has three static methods for common predicates:
 
-| Static method             | Details |
-|:---                       |:---     |
+| Static method             | Details                                                                    |
+| :------------------------ | :------------------------------------------------------------------------- |
 | `By.all`                  | Return all elements                                                        |
 | `By.css(selector)`        | Return elements with matching CSS selectors                                |
 | `By.directive(directive)` | Return elements that Angular matched to an instance of the directive class |
 
-<docs-code header="app/hero/hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
+<docs-code header="hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
diff --git a/adev-es/src/content/guide/testing/utility-apis.md b/adev-es/src/content/guide/testing/utility-apis.md
index fcdc31d..f483b95 100644
--- a/adev-es/src/content/guide/testing/utility-apis.md
+++ b/adev-es/src/content/guide/testing/utility-apis.md
@@ -1,22 +1,21 @@
 # APIs utilitarias de pruebas
 
+NOTA: Aunque esta guía se está actualizando para Vitest, algunas descripciones y ejemplos de APIs utilitarias se presentan actualmente en el contexto de Karma/Jasmine. Estamos trabajando activamente para proporcionar equivalentes de Vitest y orientación actualizada donde sea aplicable.
+
 Esta página describe las características de pruebas de Angular más útiles.
 
 Las utilidades de pruebas de Angular incluyen el `TestBed`, el `ComponentFixture` y un puñado de funciones que controlan el entorno de prueba.
-Las clases [`TestBed`](#testbed-api-summary) y [`ComponentFixture`](#component-fixture-api-summary) se cubren por separado.
+Las clases [`TestBed`](#resumen-de-la-clase-testbed) y [`ComponentFixture`](#el-componentfixture) se cubren por separado.
 
 Aquí hay un resumen de las funciones independientes, en orden de utilidad probable:
 
-| Función                     | Detalles |
-|:---                          |:---     |
-| `waitForAsync`               | Ejecuta el cuerpo de una prueba \(`it`\) o función de configuración \(`beforeEach`\) dentro de una *zona de prueba async* especial. Ver [waitForAsync](guide/testing/components-scenarios#waitForAsync).                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `fakeAsync`                  | Ejecuta el cuerpo de una prueba \(`it`\) dentro de una *zona de prueba fakeAsync* especial, habilitando un estilo de codificación de flujo de control lineal. Ver [fakeAsync](guide/testing/components-scenarios#fake-async).                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `tick`                       | Simula el paso del tiempo y la finalización de actividades asíncronas pendientes vaciando tanto las colas de *timer* como de *micro-task* dentro de la *zona de prueba fakeAsync*.  El lector curioso y dedicado podría disfrutar esta larga publicación de blog, ["*Tasks, microtasks, queues and schedules*"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules).  Acepta un argumento opcional que mueve el reloj virtual hacia adelante por el número especificado de milisegundos, limpiando actividades asíncronas programadas dentro de ese marco de tiempo. Ver [tick](guide/testing/components-scenarios#tick). |
-| `inject`                     | Inyecta uno o más servicios del inyector `TestBed` actual en una función de prueba. No puede inyectar un servicio proporcionado por el componente mismo. Ver discusión de [debugElement.injector](guide/testing/components-scenarios#get-injected-services).                                                                                                                                                                                                                                                                                                                                                                          |
-| `discardPeriodicTasks`       | Cuando una prueba `fakeAsync()` termina con *tasks* de evento de timer pendientes \(callbacks `setTimeOut` y `setInterval` en cola\), la prueba falla con un mensaje de error claro. <br /> En general, una prueba debería terminar sin tareas en cola. Cuando se esperan tareas de timer pendientes, llama a `discardPeriodicTasks` para vaciar la cola de *task* y evitar el error.                                                                                                                                                                                                                                                                                          |
-| `flushMicrotasks`            | Cuando una prueba `fakeAsync()` termina con *micro-tasks* pendientes como promesas no resueltas, la prueba falla con un mensaje de error claro. <br /> En general, una prueba debería esperar a que las micro-tasks finalicen. Cuando se esperan microtasks pendientes, llama a `flushMicrotasks` para vaciar la cola de *micro-task* y evitar el error.                                                                                                                                                                                                                                                                                                 |
-| `ComponentFixtureAutoDetect` | Un token de provider para un servicio que activa la [detección automática de cambios](guide/testing/components-scenarios#automatic-change-detection).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `getTestBed`                 | Obtiene la instancia actual del `TestBed`. Usualmente innecesario porque los métodos de clase estáticos de la clase `TestBed` son típicamente suficientes. La instancia `TestBed` expone algunos miembros raramente usados que no están disponibles como métodos estáticos.                                                                                                                                                                                                                                                                                                                                                                                  |
+| Función                      | Detalles                                                                                                                                                                                                                                                                   |
+| :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `inject`                     | Inyecta uno o más servicios del inyector `TestBed` actual en una función de prueba. No puede inyectar un servicio proporcionado por el componente mismo. Ver discusión de [debugElement.injector](guide/testing/components-scenarios#get-injected-services).               |
+| `ComponentFixtureAutoDetect` | Un token de provider para un servicio que activa la [detección automática de cambios](guide/testing/components-scenarios#automatic-change-detection).                                                                                                                      |
+| `getTestBed`                 | Obtiene la instancia actual del `TestBed`. Usualmente innecesario porque los métodos de clase estáticos de la clase `TestBed` son típicamente suficientes. La instancia `TestBed` expone algunos miembros raramente usados que no están disponibles como métodos estáticos. |
+
+Para manejar escenarios asíncronos complejos o probar aplicaciones basadas en Zone.js heredadas, consulta la guía de [Utilidades de pruebas de Zone.js](guide/testing/zone-js-testing-utilities).
 
 ## Resumen de la clase `TestBed`
 
@@ -29,10 +28,10 @@ La definición de módulo pasada a `configureTestingModule` es un subconjunto de
 <docs-code language="javascript">
 
 type TestModuleMetadata = {
-  providers?: any[];
-  declarations?: any[];
-  imports?: any[];
-  schemas?: Array<SchemaMetadata | any[]>;
+providers?: any[];
+declarations?: any[];
+imports?: any[];
+schemas?: Array<SchemaMetadata | any[]>;
 };
 
 </docs-code>
@@ -42,37 +41,38 @@ Cada método override toma un `MetadataOverride<T>` donde `T` es el tipo de meta
 <docs-code language="javascript">
 
 type MetadataOverride<T> = {
-  add?: Partial<T>;
-  remove?: Partial<T>;
-  set?: Partial<T>;
+add?: Partial<T>;
+remove?: Partial<T>;
+set?: Partial<T>;
 };
 
 </docs-code>
 
-La API del `TestBed` consiste en métodos de clase estáticos que actualizan o referencian una instancia *global* del `TestBed`.
+La API del `TestBed` consiste en métodos de clase estáticos que actualizan o referencian una instancia _global_ del `TestBed`.
 
 Internamente, todos los métodos estáticos cubren métodos de la instancia `TestBed` de runtime actual, que también es retornada por la función `getTestBed()`.
 
-Llama a los métodos `TestBed` *dentro* de un `beforeEach()` para asegurar un comienzo fresco antes de cada prueba individual.
+Llama a los métodos `TestBed` _dentro_ de un `beforeEach()` para asegurar un comienzo fresco antes de cada prueba individual.
 
 Aquí están los métodos estáticos más importantes, en orden de utilidad probable.
 
-| Métodos                                                        | Detalles |
-|:---                                                            |:---     |
-| `configureTestingModule`                                       | Los shims de testing \(`karma-test-shim`, `browser-test-shim`\) establecen el [entorno de prueba inicial](guide/testing) y un módulo de testing predeterminado. El módulo de testing predeterminado está configurado con declarativas básicas y algunos sustitutos de servicio de Angular que cada probador necesita. <br /> Llama a `configureTestingModule` para refinar la configuración del módulo de testing para un conjunto particular de pruebas agregando y eliminando imports, declarations \(de componentes, directivas y pipes\), y providers.                                                                                                                                              |
-| `compileComponents`                                            | Compila el módulo de testing de forma asíncrona después de que hayas terminado de configurarlo. **Debes** llamar a este método si *alguno* de los componentes del módulo de testing tiene un `templateUrl` o `styleUrls` porque obtener archivos de plantilla y estilo del componente es necesariamente asíncrono. Ver [compileComponents](guide/testing/components-scenarios#calling-compilecomponents). <br /> Después de llamar a `compileComponents`, la configuración del `TestBed` se congela durante la duración del spec actual.                                                                                                                                                                 |
-| `createComponent<T>`                                     | Crea una instancia de un componente de tipo `T` basado en la configuración actual del `TestBed`. Después de llamar a `createComponent`, la configuración del `TestBed` se congela durante la duración del spec actual.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `overrideModule`                                               | Reemplaza metadata para el `NgModule` dado. Recuerda que los módulos pueden importar otros módulos. El método `overrideModule` puede llegar profundamente al módulo de testing actual para modificar uno de estos módulos internos.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `overrideComponent`                                            | Reemplaza metadata para la clase de componente dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `overrideDirective`                                            | Reemplaza metadata para la clase de directiva dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `overridePipe`                                                 | Reemplaza metadata para la clase de pipe dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| Métodos                 | Detalles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+|:------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `configureTestingModule` | Los shims de testing \(`karma-test-shim`, `browser-test-shim`\) establecen el [entorno de prueba inicial](guide/testing) y un módulo de testing predeterminado. El módulo de testing predeterminado está configurado con declarativas básicas y algunos sustitutos de servicio de Angular que cada probador necesita. <br /> Llama a `configureTestingModule` para refinar la configuración del módulo de testing para un conjunto particular de pruebas agregando y eliminando imports, declarations \(de componentes, directivas y pipes\), y providers.                                                                                                                            |
+| `compileComponents`     | Compila el módulo de testing de forma asíncrona después de que hayas terminado de configurarlo. **Debes** llamar a este método si _alguno_ de los componentes del módulo de testing tiene un `templateUrl` o `styleUrls` porque obtener archivos de plantilla y estilo del componente es necesariamente asíncrono. Ver [compileComponents](guide/testing/components-scenarios#calling-compilecomponents). <br /> Después de llamar a `compileComponents`, la configuración del `TestBed` se congela durante la duración del spec actual.                                |                              |
+| `createComponent<T>`    | Crea una instancia de un componente de tipo `T` basado en la configuración actual del `TestBed`. Después de llamar a `createComponent`, la configuración del `TestBed` se congela durante la duración del spec actual.                                                                                                                                                                                                                                                                                  |
+| `overrideModule`        | Reemplaza metadata para el `NgModule` dado. Recuerda que los módulos pueden importar otros módulos. El método `overrideModule` puede llegar profundamente al módulo de testing actual para modificar uno de estos módulos internos.                                                                                                                                                                                                                                                                               |
+| `overrideComponent`     | Reemplaza metadata para la clase de componente dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `overrideDirective`     | Reemplaza metadata para la clase de directiva dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                      |
+| `overridePipe`          | Reemplaza metadata para la clase de pipe dada, que podría estar anidada profundamente dentro de un módulo interno.                                                                                                                                                                                                                                                                                                                                                                                           |
+
 |
-| `inject`                           | Recupera un servicio del inyector `TestBed` actual. La función `inject` es a menudo adecuada para este propósito. Pero `inject` lanza un error si no puede proporcionar el servicio. <br /> ¿Qué pasa si el servicio es opcional? <br /> El método `TestBed.inject()` toma un segundo parámetro opcional, el objeto a retornar si Angular no puede encontrar el provider \(`null` en este ejemplo\): <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> Después de llamar a `TestBed.inject`, la configuración del `TestBed` se congela durante la duración del spec actual. |
+| `inject` | Recupera un servicio del inyector `TestBed` actual. La función `inject` es a menudo adecuada para este propósito. Pero `inject` lanza un error si no puede proporcionar el servicio. <br /> ¿Qué pasa si el servicio es opcional? <br /> El método `TestBed.inject()` toma un segundo parámetro opcional, el objeto a retornar si Angular no puede encontrar el provider \(`null` en este ejemplo\): <docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="testbed-get-w-null"/> Después de llamar a `TestBed.inject`, la configuración del `TestBed` se congela durante la duración del spec actual. |
 |
-| `initTestEnvironment` | Inicializa el entorno de testing para toda la ejecución de pruebas. <br /> Los shims de testing \(`karma-test-shim`, `browser-test-shim`\) lo llaman por ti así que raramente hay una razón para que lo llames tú mismo. <br /> Llama a este método *exactamente una vez*. Para cambiar este predeterminado en medio de una ejecución de pruebas, llama primero a `resetTestEnvironment`. <br /> Especifica la factory del compilador de Angular, un `PlatformRef`, y un módulo de testing de Angular predeterminado. Alternativas para plataformas no-navegador están disponibles en la forma general `@angular/platform-<platform_name>/testing/<platform_name>`.                                                                  |
-| `resetTestEnvironment`                                         | Reinicia el entorno de prueba inicial, incluyendo el módulo de testing predeterminado.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `initTestEnvironment` | Inicializa el entorno de testing para toda la ejecución de pruebas. <br /> Los shims de testing \(`karma-test-shim`, `browser-test-shim`\) lo llaman por ti así que raramente hay una razón para que lo llames tú mismo. <br /> Llama a este método _exactamente una vez_. Para cambiar este predeterminado en medio de una ejecución de pruebas, llama primero a `resetTestEnvironment`. <br /> Especifica la factory del compilador de Angular, un `PlatformRef`, y un módulo de testing de Angular predeterminado. Alternativas para plataformas no-navegador están disponibles en la forma general `@angular/platform-<platform_name>/testing/<platform_name>`. |
+| `resetTestEnvironment` | Reinicia el entorno de prueba inicial, incluyendo el módulo de testing predeterminado. |
 
-Algunos de los métodos de instancia del `TestBed` no están cubiertos por métodos de *clase* `TestBed` estáticos.
+Algunos de los métodos de instancia del `TestBed` no están cubiertos por métodos de _clase_ `TestBed` estáticos.
 Estos rara vez se necesitan.
 
 ## El `ComponentFixture`
@@ -85,28 +85,28 @@ Las propiedades y métodos del `ComponentFixture` proporcionan acceso al compone
 
 Aquí están las propiedades más importantes para los probadores, en orden de utilidad probable.
 
-| Propiedades          | Detalles |
-|:---                 |:---     |
-| `componentInstance` | La instancia de la clase del componente creada por `TestBed.createComponent`.                                                                                                                                                                                                                          |
-| `debugElement`      | El `DebugElement` asociado con el elemento raíz del componente. <br /> El `debugElement` proporciona información sobre el componente y su elemento DOM durante la prueba y depuración. Es una propiedad crítica para los probadores. Los miembros más interesantes se cubren [abajo](#debug-element-details). |
-| `nativeElement`     | El elemento DOM nativo en la raíz del componente.                                                                                                                                                                                                                                                               |
-| `changeDetectorRef` | El `ChangeDetectorRef` para el componente. <br /> El `ChangeDetectorRef` es más valioso cuando se prueba un componente que tiene el método `ChangeDetectionStrategy.OnPush` o la detección de cambios del componente está bajo tu control programático.                                                   |
+| Propiedades         | Detalles                                                                                                                                                                                                                                                                                                      |
+|:------------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `componentInstance` | La instancia de la clase del componente creada por `TestBed.createComponent`.                                                                                                                                                                                                                                 |
+| `debugElement`      | El `DebugElement` asociado con el elemento raíz del componente. <br /> El `debugElement` proporciona información sobre el componente y su elemento DOM durante la prueba y depuración. Es una propiedad crítica para los probadores. Los miembros más interesantes se cubren [abajo](#debugelement). |
+| `nativeElement`     | El elemento DOM nativo en la raíz del componente.                                                                                                                                                                                                                                                             |
+| `changeDetectorRef` | El `ChangeDetectorRef` para el componente. <br /> El `ChangeDetectorRef` es más valioso cuando se prueba un componente que tiene el método `ChangeDetectionStrategy.OnPush` o la detección de cambios del componente está bajo tu control programático.                                                       |
 
 ### Métodos de `ComponentFixture`
 
-Los métodos *fixture* hacen que Angular realice ciertas tareas en el árbol de componentes.
+Los métodos _fixture_ hacen que Angular realice ciertas tareas en el árbol de componentes.
 Llama a estos métodos para desencadenar comportamiento de Angular en respuesta a una acción de usuario simulada.
 
 Aquí están los métodos más útiles para los probadores.
 
-| Métodos             | Detalles |
-|:---                 |:---     |
-| `detectChanges`     | Desencadena un ciclo de detección de cambios para el componente. <br /> Llámalo para inicializar el componente \(llama a `ngOnInit`\) y después de que tu código de prueba cambie los valores de propiedad vinculados a datos del componente. Angular no puede ver que has cambiado `personComponent.name` y no actualizará el binding `name` hasta que llames a `detectChanges`. <br /> Ejecuta `checkNoChanges` después para confirmar que no hay actualizaciones circulares a menos que se llame como `detectChanges(false)`;                                                                                    |
+| Métodos             | Detalles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+|:------------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `detectChanges`     | Desencadena un ciclo de detección de cambios para el componente. <br /> Llámalo para inicializar el componente \(llama a `ngOnInit`\) y después de que tu código de prueba cambie los valores de propiedad vinculados a datos del componente. Angular no puede ver que has cambiado `personComponent.name` y no actualizará el binding `name` hasta que llames a `detectChanges`. <br /> Ejecuta `checkNoChanges` después para confirmar que no hay actualizaciones circulares a menos que se llame como `detectChanges(false)`;                                                                                                                               |
 | `autoDetectChanges` | Establece esto a `true` cuando quieras que el fixture detecte cambios automáticamente. <br /> Cuando autodetect es `true`, el test fixture llama a `detectChanges` inmediatamente después de crear el componente. Luego escucha eventos de zona pertinentes y llama a `detectChanges` en consecuencia. Cuando tu código de prueba modifica valores de propiedad del componente directamente, probablemente aún tengas que llamar a `fixture.detectChanges` para desencadenar actualizaciones de binding de datos. <br /> El predeterminado es `false`. Los probadores que prefieren control fino sobre el comportamiento de prueba tienden a mantenerlo en `false`. |
-| `checkNoChanges`    | Ejecuta una ejecución de detección de cambios para asegurarse de que no hay cambios pendientes. Lanza excepciones si los hay.                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `isStable`          | Si el fixture es actualmente *estable*, retorna `true`. Si hay tareas async que no se han completado, retorna `false`.                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `whenStable`        | Retorna una promesa que se resuelve cuando el fixture es estable. <br /> Para reanudar las pruebas después de la finalización de actividad asíncrona o detección de cambios asíncrona, engancha esa promesa. Ver [whenStable](guide/testing/components-scenarios#whenstable).                                                                                                                                                                                                                                                                                                  |
-| `destroy`           | Desencadena la destrucción del componente.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `checkNoChanges`    | Ejecuta una ejecución de detección de cambios para asegurarse de que no hay cambios pendientes. Lanza excepciones si los hay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `isStable`          | Si el fixture es actualmente _estable_, retorna `true`. Si hay tareas async que no se han completado, retorna `false`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `whenStable`        | Retorna una promesa que se resuelve cuando el fixture es estable. <br /> Para reanudar las pruebas después de la finalización de actividad asíncrona o detección de cambios asíncrona, engancha esa promesa. Ver [whenStable](guide/testing/components-scenarios#whenstable).                                                                                                                                                                                                                                                                                                                                                                                   |
+| `destroy`           | Desencadena la destrucción del componente.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
 #### `DebugElement`
 
@@ -116,36 +116,36 @@ Desde el `DebugElement` del componente raíz de prueba retornado por `fixture.de
 
 Aquí están los miembros más útiles de `DebugElement` para los probadores, en orden aproximado de utilidad:
 
-| Miembros               | Detalles |
-|:---                   |:---     |
-| `nativeElement`       | El elemento DOM correspondiente en el navegador                                                                                                                                                                                                                                                                        |
-| `query`               | Llamar a `query(predicate: Predicate<DebugElement>)` retorna el primer `DebugElement` que coincide con el [predicate](#query-predicate) a cualquier profundidad en el subárbol.                                                                                                                                                                                                                                        |
-| `queryAll`            | Llamar a `queryAll(predicate: Predicate<DebugElement>)` retorna todos los `DebugElements` que coinciden con el [predicate](#query-predicate) a cualquier profundidad en el subárbol.                                                                                                                                                                                                                              |
-| `injector`            | El inyector de dependencias del host. Por ejemplo, el inyector de instancia del componente del elemento raíz.                                                                                                                                                                                                                                                                                                              |
-| `componentInstance`   | La propia instancia del componente del elemento, si tiene una.                                                                                                                                                                                                                                                                                                                                                    |
-| `context`             | Un objeto que proporciona contexto padre para este elemento. A menudo una instancia de componente ancestro que gobierna este elemento. <br /> Cuando un elemento se repite dentro de un bloque `@for`, el contexto es un `RepeaterContext` cuya propiedad `$implicit` es el valor de la instancia de la fila. Por ejemplo, el `hero` en `@for(hero of heroes; ...)`.                                                                   |
-| `children`            | Los hijos `DebugElement` inmediatos. Camina el árbol descendiendo a través de `children`.  `DebugElement` también tiene `childNodes`, una lista de objetos `DebugNode`. `DebugElement` deriva de objetos `DebugNode` y a menudo hay más nodos que elementos. Los probadores usualmente pueden ignorar nodos planos.                                                                  |
-| `parent`              | El padre `DebugElement`. Null si este es el elemento raíz.                                                                                                                                                                                                                                                                                                                                            |
-| `name`                | El nombre de tag del elemento, si es un elemento.                                                                                                                                                                                                                                                                                                                                                              |
-| `triggerEventHandler` | Desencadena el evento por su nombre si hay un listener correspondiente en la colección `listeners` del elemento. El segundo parámetro es el *objeto evento* esperado por el handler. Ver [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> Si el evento carece de un listener o hay algún otro problema, considera llamar a `nativeElement.dispatchEvent(eventObject)`. |
-| `listeners`           | Los callbacks adjuntos a las propiedades `@Output` del componente y/o las propiedades de evento del elemento.                                                                                                                                                                                                                                                                                                   |
-| `providerTokens`      | Los tokens de lookup del inyector de este componente. Incluye el componente mismo más los tokens que el componente lista en su metadata `providers`.                                                                                                                                                                                                                                                            |
-| `source`              | Dónde encontrar este elemento en la plantilla del componente fuente.                                                                                                                                                                                                                                                                                                                                            |
-| `references`          | Diccionario de objetos asociados con variables locales de plantilla \(por ejemplo, `#foo`\), con clave del nombre de la variable local.                                                                                                                                                                                                                                                                                        |
+| Miembros              | Detalles                                                                                                                                                                                                                                                                                                                                                                                                      |
+|:--------------------- |:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nativeElement`       | El elemento DOM correspondiente en el navegador                                                                                                                                                                                                                                                                                                                                                               |
+| `query`               | Llamar a `query(predicate: Predicate<DebugElement>)` retorna el primer `DebugElement` que coincide con el predicate a cualquier profundidad en el subárbol.                                                                                                                                                                                                                                                           |
+| `queryAll`            | Llamar a `queryAll(predicate: Predicate<DebugElement>)` retorna todos los `DebugElements` que coinciden con el predicate a cualquier profundidad en el subárbol.                                                                                                                                                                                                                                                           |
+| `injector`            | El inyector de dependencias del host. Por ejemplo, el inyector de instancia del componente del elemento raíz.                                                                                                                                                                                                                                                                                                 |
+| `componentInstance`   | La propia instancia del componente del elemento, si tiene una.                                                                                                                                                                                                                                                                                                                                                |
+| `context`             | Un objeto que proporciona contexto padre para este elemento. A menudo una instancia de componente ancestro que gobierna este elemento. <br /> Cuando un elemento se repite dentro de un bloque `@for`, el contexto es un `RepeaterContext` cuya propiedad `$implicit` es el valor de la instancia de la fila. Por ejemplo, el `hero` en `@for(hero of heroes; ...)`.                                           |
+| `children`            | Los hijos `DebugElement` inmediatos. Camina el árbol descendiendo a través de `children`.  `DebugElement` también tiene `childNodes`, una lista de objetos `DebugNode`. `DebugElement` deriva de objetos `DebugNode` y a menudo hay más nodos que elementos. Los probadores usualmente pueden ignorar nodos planos.                                                                                           |
+| `parent`              | El padre `DebugElement`. Null si este es el elemento raíz.                                                                                                                                                                                                                                                                                                                                                    |
+| `name`                | El nombre de tag del elemento, si es un elemento.                                                                                                                                                                                                                                                                                                                                                             |
+| `triggerEventHandler` | Desencadena el evento por su nombre si hay un listener correspondiente en la colección `listeners` del elemento. El segundo parámetro es el _objeto evento_ esperado por el handler. Ver [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). <br /> Si el evento carece de un listener o hay algún otro problema, considera llamar a `nativeElement.dispatchEvent(eventObject)`. |
+| `listeners`           | Los callbacks adjuntos a las propiedades `@Output` del componente y/o las propiedades de evento del elemento.                                                                                                                                                                                                                                                                                                 |
+| `providerTokens`      | Los tokens de lookup del inyector de este componente. Incluye el componente mismo más los tokens que el componente lista en su metadata `providers`.                                                                                                                                                                                                                                                          |
+| `source`              | Dónde encontrar este elemento en la plantilla del componente fuente.                                                                                                                                                                                                                                                                                                                                          |
+| `references`          | Diccionario de objetos asociados con variables locales de plantilla \(por ejemplo, `#foo`\), con clave del nombre de la variable local.                                                                                                                                                                                                                                                                       |
 
 Los métodos `DebugElement.query(predicate)` y `DebugElement.queryAll(predicate)` toman un predicate que filtra el subárbol del elemento fuente para coincidencias `DebugElement`.
 
-El predicate es cualquier método que toma un `DebugElement` y retorna un valor *truthy*.
+El predicate es cualquier método que toma un `DebugElement` y retorna un valor _truthy_.
 El siguiente ejemplo encuentra todos los `DebugElements` con una referencia a una variable local de plantilla llamada "content":
 
-<docs-code header="app/demo/demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="custom-predicate"/>
+<docs-code header="demo.testbed.spec.ts" path="adev/src/content/examples/testing/src/app/demo/demo.testbed.spec.ts" visibleRegion="custom-predicate"/>
 
 La clase `By` de Angular tiene tres métodos estáticos para predicates comunes:
 
-| Método estático             | Detalles |
-|:---                       |:---     |
+| Método estático           | Detalles                                                                           |
+|:------------------------- |:---------------------------------------------------------------------------------- |
 | `By.all`                  | Retorna todos los elementos                                                        |
-| `By.css(selector)`        | Retorna elementos con selectores CSS coincidentes                                |
+| `By.css(selector)`        | Retorna elementos con selectores CSS coincidentes                                  |
 | `By.directive(directive)` | Retorna elementos que Angular coincidió con una instancia de la clase de directiva |
 
-<docs-code header="app/hero/hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
+<docs-code header="hero-list.component.spec.ts" path="adev/src/content/examples/testing/src/app/hero/hero-list.component.spec.ts" visibleRegion="by"/>
diff --git a/adev-es/src/content/guide/testing/zone-js-testing-utilities.md b/adev-es/src/content/guide/testing/zone-js-testing-utilities.md
new file mode 100644
index 0000000..a90cddf
--- /dev/null
+++ b/adev-es/src/content/guide/testing/zone-js-testing-utilities.md
@@ -0,0 +1,15 @@
+# Zone.js Testing Utilities
+
+This guide describes testing utilities primarily used for managing and controlling async tasks in unit tests. These utilities are essentially the Zone.js-specific mock clock utilities, particularly relevant for controlling the flow of asynchronous operations within tests.
+
+For general Angular testing utilities, including `TestBed` and `ComponentFixture`, see the [Testing Utility APIs](guide/testing/utility-apis) guide.
+
+Here's a summary of Zone.js-specific functions:
+
+| Function               | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `waitForAsync`         | Tracks async tasks and completes the tests only once there are no longer any micro or macrotasks remaining in the test zone. See [waitForAsync](guide/testing/components-scenarios#prueba-async-sin-fakeasync).                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fakeAsync`            | Runs the body of a test \(`it`\) within a special _fakeAsync test zone_, enabling a linear control flow coding style. See [fakeAsync](guide/testing/components-scenarios#prueba-async-con-fakeasync).                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `tick`                 | Simulates the passage of time and the completion of pending asynchronous activities by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_. The curious, dedicated reader might enjoy this lengthy blog post, ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules). Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. See [tick](guide/testing/components-scenarios#la-función-tick). |
+| `discardPeriodicTasks` | Discards any periodic tasks (e.g. `setInterval`) that were created inside the `fakeAsync` Zone.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| `flushMicrotasks`      | When a `fakeAsync()` test ends with pending _micro-tasks_ such as unresolved promises, the test fails with a clear error message. <br /> In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the _micro-task_ queue and avoid the error.                                                                                                                                                                                                                                                                            |
diff --git a/adev-es/src/content/guide/zoneless.md b/adev-es/src/content/guide/zoneless.md
index 0d5877a..4eafe65 100644
--- a/adev-es/src/content/guide/zoneless.md
+++ b/adev-es/src/content/guide/zoneless.md
@@ -11,8 +11,6 @@ The main advantages to removing ZoneJS as a dependency are:
 
 ## Enabling Zoneless in an application
 
-
-
 ```typescript
 // standalone bootstrap
 bootstrapApplication(MyApp, {providers: [
@@ -88,7 +86,6 @@ is "stable" and can be serialized. If there are asynchronous tasks that should p
 not using ZoneJS must make Angular aware of these with the [PendingTasks](/api/core/PendingTasks) service. Serialization
 will wait for the first moment that all pending tasks have been removed.
 
-
 The two most straightforward uses of pending tasks are the `run` method:
 
 ```typescript
diff --git a/adev-es/src/content/introduction/essentials/components.en.md b/adev-es/src/content/introduction/essentials/components.en.md
index 47ec800..4e3e181 100644
--- a/adev-es/src/content/introduction/essentials/components.en.md
+++ b/adev-es/src/content/introduction/essentials/components.en.md
@@ -87,6 +87,7 @@ flowchart TD
 Here, the `UserProfile` component uses several other components to produce the final page.
 
 To import and use a component, you need to:
+
 1. In your component's TypeScript file, add an `import` statement for the component you want to use.
 2. In your `@Component` decorator, add an entry to the `imports` array for the component you want to use.
 3. In your component's template, add an element that matches the selector of the component you want to use.
diff --git a/adev-es/src/content/introduction/essentials/components.md b/adev-es/src/content/introduction/essentials/components.md
index 9ff9b22..48e55a6 100644
--- a/adev-es/src/content/introduction/essentials/components.md
+++ b/adev-es/src/content/introduction/essentials/components.md
@@ -87,6 +87,7 @@ flowchart TD
 Aquí, el componente `UserProfile` utiliza varios otros componentes para generar la página final.
 
 Para importar y usar un componente, debes:
+
 1. En el archivo TypeScript de tu componente, agregar una declaración `import` para el componente que deseas usar.
 2. En el decorador `@Component`, agregar el componente que deseas usar al arreglo `imports`.
 3. En la plantilla de tu componente, agregar un elemento que coincida con el selector del componente que deseas usar.
@@ -97,10 +98,6 @@ Aquí tienes un ejemplo del componente `UserProfile` que importa y utiliza el co
 // user-profile.ts
 import {ProfilePhoto} from 'profile-photo.ts';
 
-```angular-ts
-// user-profile.ts
-import {ProfilePhoto} from 'profile-photo.ts';
-
 @Component({
   selector: 'user-profile',
   imports: [ProfilePhoto],
diff --git a/adev-es/src/content/introduction/essentials/signal-forms.md b/adev-es/src/content/introduction/essentials/signal-forms.md
new file mode 100644
index 0000000..1ad8123
--- /dev/null
+++ b/adev-es/src/content/introduction/essentials/signal-forms.md
@@ -0,0 +1,271 @@
+<docs-decorative-header title="Forms with signals" imgSrc="adev/src/assets/images/signals.svg"> </docs-decorative-header>
+
+IMPORTANT: Signal Forms are [experimental](/reference/releases#experimental). The API may change in future releases. Avoid using experimental APIs in production applications without understanding the risks.
+
+Signal Forms manage form state using Angular signals to provide automatic synchronization between your data model and the UI with Angular Signals.
+
+This guide walks you through the core concepts to create forms with Signal Forms. Here's how it works:
+
+## Creating your first form
+
+### 1. Create a form model with `signal()`
+
+Every form starts by creating a signal that holds your form's data model:
+
+```ts
+interface LoginData {
+  email: string;
+  password: string;
+}
+
+const loginModel = signal<LoginData>({
+  email: '',
+  password: '',
+});
+```
+
+### 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:
+
+```ts
+const loginForm = form(loginModel);
+
+// Access fields directly by property name
+loginForm.email
+loginForm.password
+```
+
+### 3. Bind HTML inputs with `[field]` directive
+
+Next, you bind your HTML inputs to the form using the `[field]` directive, which creates two-way binding between them:
+
+```html
+<input type="email" [field]="loginForm.email" />
+<input type="password" [field]="loginForm.password" />
+```
+
+As a result, user changes (such as typing in the field) automatically updates the form.
+
+NOTE: The `[field]` directive also syncs field state for attributes like `required`, `disabled`, and `readonly` when appropriate.
+
+### 4. Read field values with `value()`
+
+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:
+
+```ts
+loginForm.email() // Returns FieldState with value(), valid(), touched(), etc.
+```
+
+To read the field's current value, access the `value()` signal:
+
+```html
+<!-- Render form value that updates automatically as user types -->
+<p>Email: {{ loginForm.email().value() }}</p>
+```
+
+```ts
+// Get the current value
+const currentEmail = loginForm.email().value();
+```
+
+### 5. Update field 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:
+
+```ts
+// Update the value programmatically
+loginForm.email().value.set('alice@wonderland.com');
+```
+
+As a result, both the field value and the model signal are updated automatically:
+
+```ts
+// The model signal is also updated
+console.log(loginModel().email); // 'alice@wonderland.com'
+```
+
+Here's a 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"/>
+  <docs-code header="app.html" path="adev/src/content/examples/signal-forms/src/login-simple/app/app.html"/>
+  <docs-code header="app.css" path="adev/src/content/examples/signal-forms/src/login-simple/app/app.css"/>
+</docs-code-multifile>
+
+## Basic usage
+
+The `[field]` directive works with all standard HTML input types. Here are the most common patterns:
+
+### Text inputs
+
+Text inputs work with various `type` attributes and textareas:
+
+```html
+<!-- Text and email -->
+<input type="text" [field]="form.name" />
+<input type="email" [field]="form.email" />
+```
+
+#### Numbers
+
+Number inputs automatically convert between strings and numbers:
+
+```html
+<!-- Number - automatically converts to number type -->
+<input type="number" [field]="form.age" />
+```
+
+#### Date and time
+
+Date inputs store values as `YYYY-MM-DD` strings, and time inputs use `HH:mm` format:
+
+```html
+<!-- Date and time - stores as ISO format strings -->
+<input type="date" [field]="form.eventDate" />
+<input type="time" [field]="form.eventTime" />
+```
+
+If you need to convert date strings to Date objects, you can do so by passing the field value into `Date()`:
+
+```ts
+const dateObject = new Date(form.eventDate().value());
+```
+
+#### Multiline text
+
+Textareas work the same way as text inputs:
+
+```html
+<!-- Textarea -->
+<textarea [field]="form.message" rows="4"></textarea>
+```
+
+### Checkboxes
+
+Checkboxes bind to boolean values:
+
+```html
+<!-- Single checkbox -->
+<label>
+  <input type="checkbox" [field]="form.agreeToTerms" />
+  I agree to the terms
+</label>
+```
+
+#### Multiple checkboxes
+
+For multiple options, create a separate boolean `field` for each:
+
+```html
+<label>
+  <input type="checkbox" [field]="form.emailNotifications" />
+  Email notifications
+</label>
+<label>
+  <input type="checkbox" [field]="form.smsNotifications" />
+  SMS notifications
+</label>
+```
+
+### Radio buttons
+
+Radio buttons work similarly to checkboxes. As long as the radio buttons use the same `[field]` value, Signal Forms will automatically bind the same `name` attribute to all of them:
+
+```html
+<label>
+  <input type="radio" value="free" [field]="form.plan" />
+  Free
+</label>
+<label>
+  <input type="radio" value="premium" [field]="form.plan" />
+  Premium
+</label>
+```
+
+When a user selects a radio button, the form `field` stores the value from that radio button's `value` attribute. For example, selecting "Premium" sets `form.plan().value()` to `"premium"`.
+
+### Select dropdowns
+
+Select elements work with both static and dynamic options:
+
+```html
+<!-- Static options -->
+<select [field]="form.country">
+  <option value="">Select a country</option>
+  <option value="us">United States</option>
+  <option value="ca">Canada</option>
+</select>
+
+<!-- Dynamic options with @for -->
+<select [field]="form.productId">
+  <option value="">Select a product</option>
+  @for (product of products; track product.id) {
+    <option [value]="product.id">{{ product.name }}</option>
+  }
+</select>
+```
+
+NOTE: Multiple select (`<select multiple>`) is not supported by the `[field]` directive at this time.
+
+## Validation and state
+
+Signal Forms provides built-in validators that you can apply to your form fields. To add validation, pass a schema function as the second argument to `form()`:
+
+```ts
+const loginForm = form(loginModel, (schemaPath) => {
+  debounce(schemaPath.email, 500);
+  required(schemaPath.email);
+  email(schemaPath.email);
+});
+```
+
+The schema function receives a **schema path** parameter that provides paths to your fields for configuring validation rules.
+
+Common validators include:
+
+- **`required()`** - Ensures the field has a value
+- **`email()`** - Validates email format
+- **`min()`** / **`max()`** - Validates number ranges
+- **`minLength()`** / **`maxLength()`** - Validates string or collection length
+- **`pattern()`** - Validates against a regex pattern
+
+You can also customize error messages by passing an options object as the second argument to the validator:
+
+```ts
+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.
+
+Here's a 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"/>
+  <docs-code header="app.html" path="adev/src/content/examples/signal-forms/src/login-validation/app/app.html"/>
+  <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:
+
+- [Overview](guide/forms/signals/overview) - Introduction to Signal Forms and when to use them
+- [Form models](guide/forms/signals/models) - Creating and managing form data with signals
+- [Field state management](guide/forms/signals/field-state-management) - Working with validation state, interaction tracking, and field visibility
+- [Validation](guide/forms/signals/validation) - Built-in validators, custom validation rules, and async validation
diff --git a/adev-es/src/content/introduction/essentials/signals.en.md b/adev-es/src/content/introduction/essentials/signals.en.md
index f397649..cfbba8f 100644
--- a/adev-es/src/content/introduction/essentials/signals.en.md
+++ b/adev-es/src/content/introduction/essentials/signals.en.md
@@ -2,7 +2,7 @@
 Create and manage dynamic data.
 </docs-decorative-header>
 
-In Angular, you use *signals* to create and manage state. A signal is a lightweight wrapper around a value.
+In Angular, you use _signals_ to create and manage state. A signal is a lightweight wrapper around a value.
 
 Use the `signal` function to create a signal for holding local state:
 
@@ -20,10 +20,10 @@ firstName.set('Jaime');
 
 // You can also use the `update` method to change the value
 // based on the previous value.
-firstName.update(name => name.toUpperCase()); 
+firstName.update(name => name.toUpperCase());
 ```
 
-Angular tracks where signals are read and when they're updated. The framework uses this information to do additional work, such as updating the DOM with new state. This ability to respond to changing signal values over time is known as *reactivity*.
+Angular tracks where signals are read and when they're updated. The framework uses this information to do additional work, such as updating the DOM with new state. This ability to respond to changing signal values over time is known as _reactivity_.
 
 ## Computed expressions
 
@@ -36,7 +36,7 @@ const firstName = signal('Morgan');
 const firstNameCapitalized = computed(() => firstName().toUpperCase());
 
 console.log(firstNameCapitalized()); // MORGAN
-``` 
+```
 
 A `computed` signal is read-only; it does not have a `set` or an `update` method. Instead, the value of the `computed` signal automatically changes when any of the signals it reads change:
 
diff --git a/adev-es/src/content/introduction/essentials/signals.md b/adev-es/src/content/introduction/essentials/signals.md
index 476875a..e54f50c 100644
--- a/adev-es/src/content/introduction/essentials/signals.md
+++ b/adev-es/src/content/introduction/essentials/signals.md
@@ -2,7 +2,7 @@
 Crear y manejar datos dinámicos.
 </docs-decorative-header>
 
-In Angular, you use *signals* to create and manage state. A signal is a lightweight wrapper around a value.
+In Angular, you use _signals_ to create and manage state. A signal is a lightweight wrapper around a value.
 
 Usa la función `signal` para crear una signal que mantenga el estado local:
 
@@ -36,7 +36,7 @@ const firstName = signal('Morgan');
 const firstNameCapitalized = computed(() => firstName().toUpperCase());
 
 console.log(firstNameCapitalized()); // MORGAN
-``` 
+```
 
 Una signal `computed` es de solo lectura; no tiene un método `set` o `update`. En su lugar, el valor de la signal `computed` cambia automáticamente cuando cualquiera de las signals que lee cambia:
 
diff --git a/adev-es/src/content/introduction/essentials/templates.en.md b/adev-es/src/content/introduction/essentials/templates.en.md
index 2fba376..f5828be 100644
--- a/adev-es/src/content/introduction/essentials/templates.en.md
+++ b/adev-es/src/content/introduction/essentials/templates.en.md
@@ -6,7 +6,7 @@ Component templates aren't just static HTML— they can use data from your compo
 
 ## Showing dynamic text
 
-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.
+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.
 
 You can create a binding to show some dynamic text in a template by using double curly-braces:
 
@@ -15,7 +15,7 @@ You can create a binding to show some dynamic text in a template by using double
   selector: 'user-profile',
   template: `<h1>Profile for {{userName()}}</h1>`,
 })
-export class TodoListItem {
+export class UserProfile {
   userName = signal('pro_programmer_123');
 }
 ```
@@ -47,7 +47,7 @@ Angular supports binding dynamic values into DOM properties with square brackets
 @Component({
   /*...*/
   // Set the `disabled` property of the button based on the value of `isValidUserId`.
-  template: `<button [disabled]="isValidUserId()">Save changes</button>`,
+  template: `<button [disabled]="!isValidUserId()">Save changes</button>`,
 })
 export class UserProfile {
   isValidUserId = signal(false);
@@ -70,12 +70,12 @@ Angular lets you add event listeners to an element in your template with parenth
 ```angular-ts
 @Component({
   /*...*/
-  // Add an 'click' event handler that calls the `cancelSubscription` method. 
+  // Add an 'click' event handler that calls the `cancelSubscription` method.
   template: `<button (click)="cancelSubscription()">Cancel subscription</button>`,
 })
 export class UserProfile {
   /* ... */
-  
+
   cancelSubscription() { /* Your event handling code goes here. */  }
 }
 ```
@@ -85,12 +85,12 @@ If you need to pass the [event](https://developer.mozilla.org/docs/Web/API/Event
 ```angular-ts
 @Component({
   /*...*/
-  // Add an 'click' event handler that calls the `cancelSubscription` method. 
+  // Add an 'click' event handler that calls the `cancelSubscription` method.
   template: `<button (click)="cancelSubscription($event)">Cancel subscription</button>`,
 })
 export class UserProfile {
   /* ... */
-  
+
   cancelSubscription(event: Event) { /* Your event handling code goes here. */  }
 }
 ```
@@ -118,7 +118,7 @@ The `@if` block also supports an optional `@else` block:
   <!-- ... -->
 } @else {
   <h2>User settings</h2>
-  <!-- ... -->  
+  <!-- ... -->
 }
 ```
 
diff --git a/adev-es/src/content/introduction/essentials/templates.md b/adev-es/src/content/introduction/essentials/templates.md
index 9e76560..798e090 100644
--- a/adev-es/src/content/introduction/essentials/templates.md
+++ b/adev-es/src/content/introduction/essentials/templates.md
@@ -6,7 +6,7 @@ Las plantillas de componentes no son solo HTML estático pueden usar datos de tu
 
 ## Mostrar texto dinámico
 
-En Angular, un *binding* crea una conexión dinámica entre la plantilla de un componente y sus datos. Esta conexión asegura que los cambios en los datos del componente actualicen automáticamente la plantilla renderizada.
+En Angular, un _binding_ crea una conexión dinámica entre la plantilla de un componente y sus datos. Esta conexión asegura que los cambios en los datos del componente actualicen automáticamente la plantilla renderizada.
 
 Puedes crear un binding para mostrar texto dinámico en una plantilla usando llaves dobles:
 
@@ -15,7 +15,7 @@ Puedes crear un binding para mostrar texto dinámico en una plantilla usando lla
   selector: 'user-profile',
   template: `<h1>Perfil {{userName()}}</h1>`,
 })
-export class TodoListItem {
+export class UserProfile {
   userName = signal('pro_programmer_123');
 }
 ```
diff --git a/adev-es/src/content/introduction/installation.en.md b/adev-es/src/content/introduction/installation.en.md
index 4201488..b0d72c1 100644
--- a/adev-es/src/content/introduction/installation.en.md
+++ b/adev-es/src/content/introduction/installation.en.md
@@ -35,21 +35,25 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
 <docs-code-multifile>
   <docs-code
     header="npm"
+    language="shell"
     >
     npm install -g @angular/cli
     </docs-code>
   <docs-code
     header="pnpm"
+    language="shell"
     >
     pnpm install -g @angular/cli
     </docs-code>
   <docs-code
     header="yarn"
+    language="shell"
     >
     yarn global add @angular/cli
     </docs-code>
   <docs-code
     header="bun"
+    language="shell"
     >
     bun install -g @angular/cli
     </docs-code>
@@ -62,11 +66,9 @@ If you are having issues running this command in Windows or Unix, check out the
 
 In your terminal, run the CLI command `ng new` with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
 
-<docs-code language="shell">
-
+```shell
 ng new <project-name>
-
-</docs-code>
+```
 
 You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.
 
@@ -74,7 +76,7 @@ If you don't have any preferences, just hit the enter key to take the default op
 
 After you select the configuration options and the CLI runs through the setup, you should see the following message:
 
-```shell
+```text
 ✔ Packages installed successfully.
     Successfully initialized git.
 ```
@@ -85,23 +87,19 @@ At this point, you're now ready to run your project locally!
 
 In your terminal, switch to your new Angular project.
 
-<docs-code language="shell">
-
+```shell
 cd my-first-angular-app
-
-</docs-code>
+```
 
 All of your dependencies should be installed at this point (which you can verify by checking for the existence of a `node_modules` folder in your project), so you can start your project by running the command:
 
-<docs-code language="shell">
-
+```shell
 npm start
-
-</docs-code>
+```
 
 If everything is successful, you should see a similar confirmation message in your terminal:
 
-```shell
+```text
 Watch mode enabled. Watching for file changes...
 NOTE: Raw file sizes do not reflect development server per-request transformations.
   ➜  Local:   http://localhost:4200/
diff --git a/adev-es/src/content/introduction/installation.md b/adev-es/src/content/introduction/installation.md
index 88866c5..8a4d72d 100644
--- a/adev-es/src/content/introduction/installation.md
+++ b/adev-es/src/content/introduction/installation.md
@@ -35,38 +35,40 @@ Abre una terminal (si estás usando [Visual Studio Code](https://code.visualstud
 <docs-code-multifile>
   <docs-code
     header="npm"
+    language="shell"
     >
     npm install -g @angular/cli
     </docs-code>
   <docs-code
     header="pnpm"
+    language="shell"
     >
     pnpm install -g @angular/cli
     </docs-code>
   <docs-code
     header="yarn"
+    language="shell"
     >
     yarn global add @angular/cli
     </docs-code>
   <docs-code
     header="bun"
+    language="shell"
     >
     bun install -g @angular/cli
     </docs-code>
 
 </docs-code-multifile>
 
-Si tienes problemas ejecutando este comando en Windows o Unix, consulta la [Documentación del CLI](/tools/cli/setup-local#install-the-angular-cli) para más información.
+Si tienes problemas ejecutando este comando en Windows o Unix, consulta la [Documentación del CLI](/tools/cli/setup-local#instalar-el-angular-cli) para más información.
 
 #### Crear un nuevo proyecto
 
 En tu terminal, ejecuta el comando de la CLI `ng new` con el nombre del proyecto deseado. En los siguientes ejemplos, usaremos el nombre de proyecto de ejemplo `my-first-angular-app`.
 
-<docs-code language="shell">
-
+```shell
 ng new <project-name>
-
-</docs-code>
+```
 
 Se te presentarán algunas opciones de configuración para tu proyecto. Usa las teclas de flecha y enter para navegar y seleccionar las opciones que desees.
 
@@ -74,7 +76,7 @@ Si no tienes ninguna preferencia, simplemente presiona enter para aceptar las op
 
 Después de seleccionar las opciones de configuración y que la CLI la ejecute, deberias ver el siguiente mensaje:
 
-```shell
+```text
 ✔ Packages installed successfully.
     Successfully initialized git.
 ```
@@ -85,23 +87,19 @@ En este punto, ¡ya estás listo para ejecutar tu proyecto localmente!
 
 En tu termina, cambia a tu nuevo proyecto en Angular.
 
-<docs-code language="shell">
-
+```shell
 cd my-first-angular-app
-
-</docs-code>
+```
 
 Todas tus dependencias deberían estar instaladas en este punto (lo cual puedes verificar revisando la existencia de una carpeta `node_modules` en tu proyecto), así que puedes iniciar tu proyecto ejecutando el comando:
 
-<docs-code language="shell">
-
+```shell
 npm start
-
-</docs-code>
+```
 
 Si todo es exitoso, deberías ver un mensaje de confirmación similar en tu terminal:
 
-```shell
+```text
 Watch mode enabled. Watching for file changes...
 NOTE: Raw file sizes do not reflect development server per-request transformations.
   ➜  Local:   http://localhost:4200/
@@ -110,12 +108,10 @@ NOTE: Raw file sizes do not reflect development server per-request transformatio
 
 Y ahora puedes visitar la ruta en `Local` (por ejemplo, `http://localhost:4200`) para ver tu aplicación. ¡Disfruta programando! 🎉
 
-
 ### Usar IA para el desarrollo
 
 Para comenzar a construir en tu IDE preferido con IA, [consulta las reglas de prompts de Angular y las mejores prácticas](/ai/develop-with-ai).
 
-
 ## Próximos pasos
 
-Ahora que has creado tu proyecto Angular, puedes aprender más sobre Angular en nuestra [Guía de Fundamentos](/essentials) o elegir un tema en nuestras guías detalladas!
\ No newline at end of file
+Ahora que has creado tu proyecto Angular, puedes aprender más sobre Angular en nuestra [Guía de Fundamentos](/essentials) o elegir un tema en nuestras guías detalladas!
diff --git a/adev-es/src/content/introduction/what-is-angular.en.md b/adev-es/src/content/introduction/what-is-angular.en.md
index 42b0540..8fa5ebe 100644
--- a/adev-es/src/content/introduction/what-is-angular.en.md
+++ b/adev-es/src/content/introduction/what-is-angular.en.md
@@ -1,143 +1,114 @@
-<docs-decorative-header title="What is Angular?" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="What is Angular?" imgSrc="adev/src/assets/images/globe.svg" gradientBackground="true">
+  Angular is a web framework that empowers<br/>
+  developers to build fast, reliable applications that users love.
 </docs-decorative-header>
 
-<p style="margin-top: 2em; font-size: larger;">
-Angular is a web framework that empowers developers to build fast, reliable applications.
-</p>
+<div style="margin: 2em">
+  Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and
+  libraries to simplify and streamline your development workflow. Angular gives you
+  a solid platform on which to build fast, reliable applications that scale with both the size of
+  your team and the size of your codebase.
+</div>
 
-Maintained by a dedicated team at Google, Angular provides a broad suite of tools, APIs, and
-libraries to simplify and streamline your development workflow. Angular gives you
-a solid platform on which to build fast, reliable applications that scale with both the size of
-your team and the size of your codebase.
+<docs-nav-card title="Want to see some code?" iconImgSrc="adev/src/assets/icons/star.svg">
+  <docs-nav-link title="Essentials" iconName="docs" href="essentials" iconImgSrc="adev/src/assets/icons/docs.svg">
+    An overview of what it's like to use Angular
+  </docs-nav-link>
+  <docs-nav-link title="Tutorials" iconName="code"  href="tutorials" iconImgSrc="adev/src/assets/icons/tutorials.svg">
+    Step-by-step instructions in your browser
+  </docs-nav-link>
+</docs-nav-card>
 
-**Want to see some code?** Jump over to our [Essentials](essentials) for a quick overview of
-what it's like to use Angular, or get started in the [Tutorial](tutorials/learn-angular) if you
-prefer following step-by-step instructions.
-
-## Features that power your development
-
-<docs-card-container>
-  <docs-card title="Keep your codebase organized with an opinionated component model and flexible dependency injection
-system" href="guide/components" link="Get started with Components">
-  Angular components make it easy to split your code into well-encapsulated parts.
-
-  The versatile dependency injection helps you keep your code modular, loosely-coupled, and
-  testable.
+<docs-card-container headerTitle="Features that power your development" headerImgSrc="adev/src/assets/images/learn-angular-browser-bw.svg">
+  <docs-card title="Components" href="essentials/components" link="Get started with Components" iconImgSrc="adev/src/assets/icons/components.svg">
+    Angular components make it easy to split your code into well-encapsulated parts.
   </docs-card>
-  <docs-card title="Get fast state updates with fine-grained reactivity based on Signals" href="guide/signals" link="Explore Angular Signals">
-  Our fine-grained reactivity model, combined with compile-time optimizations, simplifies development and helps build faster apps by default.
-
-  Granularly track how and where state is used throughout an application, giving the framework the power to render fast updates via highly optimized instructions.
+  <docs-card title="Angular Signals" href="essentials/signals" link="Explore Angular Signals" titleIconName="sensors" iconImgSrc="adev/src/assets/icons/signals.svg">
+    Our fine-grained reactivity model, combined with compile-time optimizations, simplifies development and helps build faster apps by default.
   </docs-card>
-  <docs-card title="Meet your performance targets with SSR, SSG, hydration, and next-generation deferred loading" href="guide/ssr" link="Read about SSR">
-    Angular supports both server-side rendering (SSR) and static site generation (SSG) along
-    with full DOM hydration. `@defer` blocks in templates make it simple to declaratively divide
-    your templates into lazy-loadable parts.
+  <docs-card title="Server-side rendering" href="guide/ssr" link="Read about SSR" iconImgSrc="adev/src/assets/icons/ssr.svg">
+    Angular supports both server-side rendering (SSR) and static site generation (SSG) along with full DOM hydration.
   </docs-card>
-  <docs-card title="Guarantee everything works together with Angular's first-party modules for forms, routing, and
-more">
-  [Angular's router](guide/routing) provides a feature-rich navigation toolkit, including support
-  for route guards, data resolution, lazy-loading, and much more.
-
-  [Angular's forms module](guide/forms) provides a standardized system for form participation and validation.
+  <docs-card title="Dependency injection" href="essentials/dependency-injection" link="Explore Dependency Injection" iconImgSrc="adev/src/assets/icons/di.svg">
+    Easily share code across components throughout your entire application.
+  </docs-card>
+  <docs-card title="Angular Routing" href="guide/routing" link="Explore Angular Routing" iconImgSrc="adev/src/assets/icons/routing.svg">
+    Provides a feature-rich navigation toolkit, including support for route guards, data resolution, lazy-loading, and much more.
+  </docs-card>
+  <docs-card title="Forms in Angular" href="guide/forms" link="Explore Forms" iconImgSrc="adev/src/assets/icons/forms.svg">
+    Provides a standardized system for form participation and validation.
   </docs-card>
 </docs-card-container>
 
-## Develop applications faster than ever
-
-<docs-card-container>
-  <docs-card title="Effortlessly build, serve, test, deploy with Angular CLI" href="tools/cli" link="Angular CLI">
-  Angular CLI gets your project running in under a minute with the commands you need to
-  grow into a deployed production application.
+<docs-card-container headerTitle="Develop applications faster than ever" headerImgSrc="adev/src/assets/images/browser-bolt.svg">
+  <docs-card title="CLI" href="tools/cli" link="Angular CLI" iconImgSrc="adev/src/assets/icons/cli.svg">
+    Angular CLI gets your project running in under a minute with the commands you need to grow into a deployed production application.
   </docs-card>
-  <docs-card title="Visually debug, analyze, and optimize your code with the Angular DevTools browser extension" href="tools/devtools" link="Angular DevTools">
-  Angular DevTools sits alongside your browser's developer tools. It helps debug and analyze your
-  app, including a component tree inspector, dependency injection tree view,
-  and custom performance profiling flame chart.
+  <docs-card title="DevTools" href="tools/devtools" link="Angular DevTools" iconImgSrc="adev/src/assets/icons/dev-tools.svg">
+    Angular DevTools sits alongside your browser's developer tools. It helps debug and analyze your app, including a component tree inspector, dependency injection tree view, and custom performance profiling flame chart.
   </docs-card>
-  <docs-card title="Never miss a version with ng update" href="cli/update" link="ng update">
-  Angular CLI's `ng update` runs automated code transformations that automatically handle routine
-  breaking changes, dramatically simplifying major version updates. Keeping up with the latest
-  version keeps your app as fast and secure as possible.
+  <docs-card title="ng update" href="update" link="ng update" iconImgSrc="adev/src/assets/icons/ng-update.svg">
+    Angular CLI's `ng update` runs automated code transformations that automatically handle routine breaking changes, dramatically simplifying major version updates. Keeping up with the latest version keeps your app as fast and secure as possible.
   </docs-card>
-  <docs-card title="Stay productive with IDE integration in your favorite editor" href="tools/language-service" link="Language service">
-  Angular's IDE language services powers code completion, navigation, refactoring, and real-time
-  diagnostics in your favorite editor.
+  <docs-card title="Language Service" href="tools/language-service" link="Language Service" iconImgSrc="adev/src/assets/icons/language-service.svg">
+    Angular's IDE language services powers code completion, navigation, refactoring, and real-time diagnostics in your favorite editor.
   </docs-card>
 </docs-card-container>
 
-## Ship with confidence
-
-<docs-card-container>
-  <docs-card title="Verified commit-by-commit against Google's colossal monorepo" href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" link="Learn about Google's monorepo">
-  Every Angular commit is checked against _hundreds of thousands_ of tests in Google's internal code
-  repository, representing countless real-world scenarios.
-
-  Angular is committed to stability for some of Google’s largest products, including Google Cloud.
-  This commitment ensures changes are well-tested, backwards compatible, and include migration tools
-  whenever possible.
+<docs-card-container headerTitle="Ship with confidence" headerImgSrc="adev/src/assets/images/rocket.svg">
+  <docs-card title="Verified commit-by-commit against Google's colossal monorepo" href="https://cacm.acm.org/research/why-google-stores-billions-of-lines-of-code-in-a-single-repository/" link="Learn about Google's monorepo" titleIconName="sensors">
+    <p>Every Angular commit is checked against hundreds of thousands of tests in Google's internal code repository, representing countless real-world scenarios.</p>
+    <p>Angular is committed to stability for some of Google’s largest products, including Google Cloud. This commitment ensures changes are well-tested, backwards compatible, and include migration tools whenever possible.</p>
   </docs-card>
-  <docs-card title="Clear support policies and predictable release schedule" href="reference/releases" link="Versioning & releasing">
-  Angular's predictable, time-based release schedule gives your organization confidence in the
-  stability and backwards compatibility of the framework. Long Term Support (LTS) windows make sure
-  you get critical security fixes when you need them. First-party update tools, guides and automated
-  migration schematics help keep your apps up-to-date with the latest advancements to the framework
-  and the web platform.
+  <docs-card title="Clear support policies and predictable release schedule" href="reference/releases" link="Versioning & releasing" titleIconName="sensors">
+    Angular's predictable, time-based release schedule gives your organization confidence in the stability and backwards compatibility of the framework. Long Term Support (LTS) windows make sure you get critical security fixes when you need them. First-party update tools, guides and automated migration schematics help keep your apps up-to-date with the latest advancements to the framework and the web platform.
   </docs-card>
 </docs-card-container>
 
-## Works at any scale
-
-<docs-card-container>
-  <docs-card title="Reach users everywhere with internationalization support" href="guide/i18n" link="Internationalization">
-  Angular's internationalization features handle message translations and formatting, including
-  support for unicode standard ICU syntax.
+<docs-card-container headerTitle="Works at any scale" headerImgSrc="adev/src/assets/images/servers.svg">
+  <docs-card title="Reach users everywhere with internationalization support" href="guide/i18n" link="Internationalization" titleIconName="sensors">
+    Angular's internationalization features handle message translations and formatting, including
+    support for unicode standard ICU syntax.
   </docs-card>
-  <docs-card title="Protect your users with security by default" href="best-practices/security" link="Security">
-  In collaboration with Google's world-class security engineers, Angular aims to make development
-  safe by default. Built-in security features, including HTML sanitization and
-  trusted type support, help protect your users from common vulnerabilities like
-  cross-site scripting and cross-site request forgery.
+  <docs-card title="Protect your users with security by default" href="best-practices/security" link="Security" titleIconName="sensors">
+    In collaboration with Google's world-class security engineers, Angular aims to make development
+    safe by default. Built-in security features, including HTML sanitization and
+    trusted type support, help protect your users from common vulnerabilities like
+    cross-site scripting and cross-site request forgery.
   </docs-card>
-  <docs-card title="Keep large teams productive with Vite and esbuild" href="tools/cli/build-system-migration" link="ESBuild and Vite">
-  Angular CLI includes a fast, modern build pipeline using Vite and ESBuild. Developers report
-  building projects with hundreds of thousands of lines of code in less than a minute.
+  <docs-card title="Keep large teams productive with Vite and esbuild" href="tools/cli/build-system-migration" link="ESBuild and Vite" titleIconName="sensors">
+    Angular CLI includes a fast, modern build pipeline using Vite and ESBuild. Developers report
+    building projects with hundreds of thousands of lines of code in less than a minute.
   </docs-card>
-  <docs-card title="Proven in some of Google's largest web apps">
-  Large Google products build on top of Angular's architecture and help develop new features that
-  further improve Angular's scalability, from [Google Fonts](https://fonts.google.com/) to [Google Cloud](https://console.cloud.google.com).
+  <docs-card title="Proven in some of Google's largest web apps" titleIconName="sensors">
+    Large Google products build on top of Angular's architecture and help develop new features that
+    further improve Angular's scalability, from [Google Fonts](https://fonts.google.com/) to [Google Cloud](https://console.cloud.google.com).
   </docs-card>
 </docs-card-container>
 
-## Open-source first
-
-<docs-card-container>
-  <docs-card title="Made in the open on GitHub" href="https://github.com/angular/angular" link="Star our GitHub">
-  Curious what we’re working on? Every PR and commit is available on our GitHub. Run into an issue or bug? We triage GitHub issues regularly to ensure we’re responsive and engaged with our community, and solving the real world problems you’re facing.
+<docs-card-container headerTitle="Open-source first" headerImgSrc="adev/src/assets/images/open-source.svg">
+  <docs-card title="Made in the open on GitHub" href="https://github.com/angular/angular" link="Star our GitHub" titleIconName="sensors">
+    Curious what we’re working on? Every PR and commit is available on our GitHub. Run into an issue or bug? We triage GitHub issues regularly to ensure we’re responsive and engaged with our community, and solving the real world problems you’re facing.
   </docs-card>
-  <docs-card title="Built with transparency" href="roadmap" link="Read our public roadmap">
-  Our team publishes a public roadmap of our current and future work and values your feedback. We publish Request for Comments (RFCs) to collect feedback on larger feature changes and ensure the community voice is heard while shaping the future direction of Angular.
+  <docs-card title="Built with transparency" href="roadmap" link="Read our public roadmap" titleIconName="sensors">
+    Our team publishes a public roadmap of our current and future work and values your feedback. We publish Request for Comments (RFCs) to collect feedback on larger feature changes and ensure the community voice is heard while shaping the future direction of Angular.
   </docs-card>
 </docs-card-container>
 
-## A thriving community
-
-<docs-card-container>
-  <docs-card title="Courses, blogs and resources" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Check out DevLibrary">
-  Our community is composed of talented developers, writers, instructors, podcasters, and more. The Google for Developers library is just a sample of the high quality resources available for new and experienced developers to continue developing.
+<docs-card-container headerTitle="A thriving community" headerImgSrc="adev/src/assets/images/community.svg">
+  <docs-card title="Courses, blogs and resources" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Check out DevLibrary" titleIconName="sensors">
+    Our community is composed of talented developers, writers, instructors, podcasters, and more. The Google for Developers library is just a sample of the high quality resources available for new and experienced developers to continue developing.
   </docs-card>
-  <docs-card title="Open Source" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribute to Angular">
-  We are thankful for the open source contributors who make Angular a better framework for everyone. From fixing a typo in the docs, to adding major features, we encourage anyone interested to get started on our GitHub.
+  <docs-card title="Open Source" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribute to Angular" titleIconName="sensors">
+    We are thankful for the open source contributors who make Angular a better framework for everyone. From fixing a typo in the docs, to adding major features, we encourage anyone interested to get started on our GitHub.
   </docs-card>
-  <docs-card title="Community partnerships" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Meet the Angular GDEs">
-  Our team partners with individuals, educators, and enterprises to ensure we consistently are supporting developers. Angular Google Developer Experts (GDEs) represent community leaders around the world educating, organizing, and developing with Angular. Enterprise partnerships help ensure that Angular scales well for technology industry leaders.
+  <docs-card title="Community partnerships" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Meet the Angular GDEs" titleIconName="sensors">
+    Our team partners with individuals, educators, and enterprises to ensure we consistently are supporting developers. Angular Google Developer Experts (GDEs) represent community leaders around the world educating, organizing, and developing with Angular. Enterprise partnerships help ensure that Angular scales well for technology industry leaders.
   </docs-card>
-  <docs-card title="Partnering with other Google technologies">
-  Angular partners closely with other Google technologies and teams to improve the web.
-
-  Our ongoing partnership with Chrome’s Aurora actively explores improvements to user experience across the web, developing built-in performance optimizations like NgOptimizedImage and improvements to Angular’s Core Web Vitals.
-
-  We are also working with [Firebase](https://firebase.google.com/), [Tensorflow](https://www.tensorflow.org/), [Flutter](https://flutter.dev/), [Material Design](https://m3.material.io/), and [Google Cloud](https://cloud.google.com/) to ensure we provide meaningful integrations across the developer workflow.
+  <docs-card title="Partnering with other Google technologies" titleIconName="sensors">
+    <p>Angular partners closely with other Google technologies and teams to improve the web.</p>
+    <p>Our ongoing partnership with Chrome’s Aurora actively explores improvements to user experience across the web, developing built-in performance optimizations like <code>NgOptimizedImage</code> and improvements to Angular’s Core Web Vitals.</p>
+    <p>We are also working with <a href="https://firebase.google.com/">Firebase</a>, <a href="https://www.tensorflow.org/">Tensorflow</a>, <a href="https://flutter.dev/">Flutter</a>, <a href="https://m3.material.io/">Material Design</a>, and <a href="https://cloud.google.com/">Google Cloud</a> to ensure we provide meaningful integrations across the developer workflow.</p>
   </docs-card>
 </docs-card-container>
 
diff --git a/adev-es/src/content/introduction/what-is-angular.md b/adev-es/src/content/introduction/what-is-angular.md
index 2c38520..c774882 100644
--- a/adev-es/src/content/introduction/what-is-angular.md
+++ b/adev-es/src/content/introduction/what-is-angular.md
@@ -1,143 +1,114 @@
-<docs-decorative-header title="¿Qué es Angular?" imgSrc="adev/src/assets/images/what_is_angular.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="¿Qué es Angular?" imgSrc="adev/src/assets/images/globe.svg" gradientBackground="true">
+  Angular es un framework web que empodera<br/>
+  a los desarrolladores para crear aplicaciones rápidas y fiables que los usuarios adoran.
 </docs-decorative-header>
 
-<p style="margin-top: 2em; font-size: larger;">
-Angular es un framework que permite a los desarrolladores crear aplicaciones rápidas y fiables.
-</p>
+<div style="margin: 2em">
+  Mantenido por un equipo dedicado en Google, Angular ofrece un amplio conjunto de herramientas, APIs y
+  librerías para simplificar y optimizar tu flujo de trabajo de desarrollo. Angular te da
+  una plataforma sólida en la que construir aplicaciones rápidas y fiables que escalan con el tamaño de
+  tu equipo y el tamaño de tu base de código.
+</div>
 
-Mantenido por un equipo dedicado en Google, Angular ofrece un amplio conjunto de herramientas, API y
-librerias para simplificar y optimizar su flujo de trabajo de desarrollo. Angular te da
-una plataforma sólida en la que construir aplicaciones rápidas y fiables que escalan con el tamaño de
-su equipo y el tamaño de tu base de código.
+<docs-nav-card title="¿Quieres ver algún código?" iconImgSrc="adev/src/assets/icons/star.svg">
+  <docs-nav-link title="Esenciales" iconName="docs" href="essentials" iconImgSrc="adev/src/assets/icons/docs.svg">
+    Una visión general de cómo es usar Angular
+  </docs-nav-link>
+  <docs-nav-link title="Tutoriales" iconName="code"  href="tutorials" iconImgSrc="adev/src/assets/icons/tutorials.svg">
+    Instrucciones paso a paso en tu navegador
+  </docs-nav-link>
+</docs-nav-card>
 
-**¿Quieres ver algún código?** Revisa nuestros [Esenciales](essentials) para una rápida visión general 
-de lo que es usar Angular, o inicia con el [Tutorial](tutorials/learn-angular) si prefieres seguir 
-instrucciones paso a paso.
-
-## Características que impulsan tu desarrollo
-
-<docs-card-container>
-  <docs-card title="Mantenga su base de código organizada con un modelo de componente dogmático y un sistema de inyección de dependencia flexible" 
-  href="guide/components" link="Comienza con los componentes">
-  Los componentes de Angular facilitan la división del código en partes bien encapsuladas.
-
-  La inyección de dependencia versátil te ayuda a mantener tu código modular, débilmente acoplado y
-  comprobable.
+<docs-card-container headerTitle="Características que impulsan tu desarrollo" headerImgSrc="adev/src/assets/images/learn-angular-browser-bw.svg">
+  <docs-card title="Componentes" href="essentials/components" link="Comienza con los componentes" iconImgSrc="adev/src/assets/icons/components.svg">
+    Los componentes de Angular facilitan la división del código en partes bien encapsuladas.
   </docs-card>
-  <docs-card title="Obtenga actualizaciones de estado rápidas con reactividad granular basada en Signals" href="guide/signals" link="Explora Angular Signals">
-  Nuestro modelo de reactividad granular, combinado con optimizaciones en tiempo de compilación, simplifica el desarrollo y ayuda a crear aplicaciones más rápidas por defecto.
-
-  Rastrea de forma granular cómo y dónde se usa el estado en toda la aplicación, lo que le da al framework el poder de renderizar actualizaciones rápidas a través de instrucciones altamente optimizadas.
+  <docs-card title="Angular Signals" href="essentials/signals" link="Explora Angular Signals" titleIconName="sensors" iconImgSrc="adev/src/assets/icons/signals.svg">
+    Nuestro modelo de reactividad granular, combinado con optimizaciones en tiempo de compilación, simplifica el desarrollo y ayuda a crear aplicaciones más rápidas por defecto.
   </docs-card>
-  <docs-card title="Compla sus objetivos de rendimiento con SSR, SSG, hidratación y carga diferida de próxima generación" href="guide/ssr" link="Lee sobre SSR">
-    Angular soporta renderizado del lado del servidor (SSR) y generación de sitio estático (SSG) junto
-    con hidratación de DOM completa. Los bloques `@defer` en plantillas hacen que sea fácil de dividir declarativamente
-    sus plantillas en partes perezosas.
+  <docs-card title="Renderizado del lado del servidor" href="guide/ssr" link="Lee sobre SSR" iconImgSrc="adev/src/assets/icons/ssr.svg">
+    Angular soporta renderizado del lado del servidor (SSR) y generación de sitio estático (SSG) junto con hidratación de DOM completa.
   </docs-card>
-  <docs-card title="Garantiza que todo funcione en conjunto con los módulos propios de Angular para 
-  formularios, rutas y más">
-  [Router de Angular](guide/routing) proporciona un kit de herramientas de navegación rico en características, incluyendo soporte
-  para guardias de ruta, resolución de datos, carga lenta y mucho más.
-
-  [Forms module de Angular](guide/forms) proporciona un sistema estandarizado para la participación y validación de formularios.
+  <docs-card title="Inyección de dependencias" href="essentials/dependency-injection" link="Explora la inyección de dependencias" iconImgSrc="adev/src/assets/icons/di.svg">
+    Comparte código fácilmente entre componentes en toda tu aplicación.
+  </docs-card>
+  <docs-card title="Enrutamiento de Angular" href="guide/routing" link="Explora el enrutamiento de Angular" iconImgSrc="adev/src/assets/icons/routing.svg">
+    Proporciona un kit de herramientas de navegación rico en características, incluyendo soporte para guardias de ruta, resolución de datos, carga diferida y mucho más.
+  </docs-card>
+  <docs-card title="Formularios en Angular" href="guide/forms" link="Explora los formularios" iconImgSrc="adev/src/assets/icons/forms.svg">
+    Proporciona un sistema estandarizado para la participación y validación de formularios.
   </docs-card>
 </docs-card-container>
 
-## Desarrolla aplicaciones más rápido que nunca
-
-<docs-card-container>
-  <docs-card title="Construye, sirve, prueba e implementa sin esfuerzo con Angular CLI" href="tools/cli" link="Angular CLI">
-  Angular CLI hace que tu proyecto se ejecute en menos de un minuto con los comandos que necesitas
-  para convertirla en una aplicación desplegada en producción.
+<docs-card-container headerTitle="Desarrolla aplicaciones más rápido que nunca" headerImgSrc="adev/src/assets/images/browser-bolt.svg">
+  <docs-card title="CLI" href="tools/cli" link="Angular CLI" iconImgSrc="adev/src/assets/icons/cli.svg">
+    Angular CLI hace que tu proyecto se ejecute en menos de un minuto con los comandos que necesitas para crecer hasta convertirse en una aplicación desplegada en producción.
   </docs-card>
-  <docs-card title="Depura, analiza y optimiza visualmente tu código con la extensión del navegador Angular DevTools" href="tools/devtools" link="Angular DevTools">
-  Angular DevTools se integra con las herramientas para desarrolladores de tu navegador. 
-  Te ayuda a depurar y analizar tu aplicación, incluyendo un inspector del árbol de componentes,
-  una vista del árbol de inyección de dependencias y un gráfico de llamas perfilado de rendimiento personalizado.
+  <docs-card title="DevTools" href="tools/devtools" link="Angular DevTools" iconImgSrc="adev/src/assets/icons/dev-tools.svg">
+    Angular DevTools se sitúa junto a las herramientas para desarrolladores de tu navegador. Te ayuda a depurar y analizar tu aplicación, incluyendo un inspector del árbol de componentes, una vista del árbol de inyección de dependencias y un gráfico de llamas perfilado de rendimiento personalizado.
   </docs-card>
-  <docs-card title="No te pierdas nunca una versión con ng update" href="cli/update" link="ng update">
-  `ng update` de Angular CLI ejecuta transformaciones automatizadas de código que manejan automáticamente los cambios
-  disruptivos habituales, simplificando drásticamente las actualizaciones de versiones principales. Mantenerse actualizado
-  con la última versión garantiza que tu aplicación sea lo más rápida y segura posible.
+  <docs-card title="ng update" href="update" link="ng update" iconImgSrc="adev/src/assets/icons/ng-update.svg">
+    `ng update` de Angular CLI ejecuta transformaciones automatizadas de código que manejan automáticamente los cambios disruptivos habituales, simplificando drásticamente las actualizaciones de versiones principales. Mantenerse actualizado con la última versión mantiene tu aplicación lo más rápida y segura posible.
   </docs-card>
-  <docs-card title="Mantente productivo con la integración de IDE en tu editor favorito" href="tools/language-service" link="Language service">
-  Los servicios de lenguaje IDE de Angular potencian el autocompletado de código, la navegación, 
-  la refactorización y el diagnóstico en tiempo real en su editor favorito.
+  <docs-card title="Servicio de lenguaje" href="tools/language-service" link="Servicio de lenguaje" iconImgSrc="adev/src/assets/icons/language-service.svg">
+    Los servicios de lenguaje IDE de Angular potencian el autocompletado de código, la navegación, la refactorización y el diagnóstico en tiempo real en tu editor favorito.
   </docs-card>
 </docs-card-container>
 
-## Desplega con confianza
-
-<docs-card-container>
-  <docs-card title="Verificado commit por commit contra el colosal monorepo de Google" href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext" link="Aprenda acerca del monorepo de Google">
-  Cada commit de Angular se verifica contra cientos de miles de pruebas en el repositorio de código interno de Google, 
-  que representan innumerables escenarios del mundo real.
-
-  Angular está comprometido con la estabilidad para algunos de los productos más grandes de Google, incluido Google Cloud.
-  Este compromiso garantiza que los cambios estén bien probados, sean compatibles con versiones anteriores e incluyan
-  herramientas de migración siempre que sea posible.
+<docs-card-container headerTitle="Desplega con confianza" headerImgSrc="adev/src/assets/images/rocket.svg">
+  <docs-card title="Verificado commit por commit contra el colosal monorepo de Google" href="https://cacm.acm.org/research/why-google-stores-billions-of-lines-of-code-in-a-single-repository/" link="Aprende acerca del monorepo de Google" titleIconName="sensors">
+    <p>Cada commit de Angular se verifica contra cientos de miles de pruebas en el repositorio de código interno de Google, representando innumerables escenarios del mundo real.</p>
+    <p>Angular está comprometido con la estabilidad para algunos de los productos más grandes de Google, incluido Google Cloud. Este compromiso garantiza que los cambios estén bien probados, sean compatibles con versiones anteriores e incluyan herramientas de migración siempre que sea posible.</p>
   </docs-card>
-  <docs-card title="Políticas de soporte claras y calendario de lanzamientos predecible" href="reference/releases" link="Versiones de Angular & Lanzamientos">
-  El calendario de lanzamientos predecible y basado en el tiempo de Angular le brinda a tu organización confianza
-  en la estabilidad y compatibilidad con versiones anteriores del framework. Las ventanas de soporte a largo plazo (LTS)
-  garantizan que obtengas correcciones de seguridad críticas cuando las necesitas. Las herramientas de actualización 
-  propias de Angular, las guías y los esquemas de migración automatizados ayudan a mantener tus aplicaciones actualizadas
-  con los últimos avances del framework y la plataforma web.
+  <docs-card title="Políticas de soporte claras y calendario de lanzamientos predecible" href="reference/releases" link="Versionado y lanzamientos" titleIconName="sensors">
+    El calendario de lanzamientos predecible y basado en el tiempo de Angular le brinda a tu organización confianza en la estabilidad y compatibilidad con versiones anteriores del framework. Las ventanas de soporte a largo plazo (LTS) garantizan que obtengas correcciones de seguridad críticas cuando las necesitas. Las herramientas de actualización propias de Angular, las guías y los esquemas de migración automatizados ayudan a mantener tus aplicaciones actualizadas con los últimos avances del framework y la plataforma web.
   </docs-card>
 </docs-card-container>
 
-## Trabaja a cualquier escala
-
-<docs-card-container>
-  <docs-card title="Llega a usuarios de todo el mundo con soporte para internacionalización" href="guide/i18n" link="Internacionalización">
-  Las funciones de internacionalización de Angular gestionan las traducciones y el formato de mensajes,
-  incluido el soporte para la sintaxis ICU estándar Unicode.
+<docs-card-container headerTitle="Trabaja a cualquier escala" headerImgSrc="adev/src/assets/images/servers.svg">
+  <docs-card title="Llega a usuarios de todo el mundo con soporte para internacionalización" href="guide/i18n" link="Internacionalización" titleIconName="sensors">
+    Las funciones de internacionalización de Angular gestionan las traducciones y el formato de mensajes, incluido el soporte para la sintaxis 
+    ICU estándar Unicode.
   </docs-card>
-  <docs-card title="Protege a tus usuarios con seguridad por defecto" href="best-practices/security" link="Seguridad">
-  En colaboración con los ingenieros de seguridad de primer nivel de Google, Angular tiene como objetivo
-  hacer que el desarrollo sea seguro por defecto. Las funciones de seguridad integradas, como la sanitización de HTML
-  y la compatibilidad con tipos de confianza, ayudan a proteger a tus usuarios de vulnerabilidades comunes
-  como el scripting entre sitios (XSS) y la falsificación de solicitudes entre sitios (CSRF).
+  <docs-card title="Protege a tus usuarios con seguridad por defecto" href="best-practices/security" link="Seguridad" titleIconName="sensors">
+    En colaboración con los ingenieros de seguridad de primer nivel de Google, Angular tiene como objetivo hacer que el desarrollo sea seguro 
+    por defecto. Las funciones de seguridad integradas, incluyendo la sanitización de HTML
+    y el soporte para tipos de confianza, ayudan a proteger a tus usuarios de vulnerabilidades
+    comunes como el scripting entre sitios y la falsificación de solicitudes entre sitios.
   </docs-card>
-  <docs-card title="Mantenga equipos grandes productivos con Vite y esbuild" href="tools/cli/esbuild" link="ESBuild y Vite">
-  Angular CLI incorpora una tubería de compilación rápida y moderna utilizando Vite y ESBuild. Los desarrolladores reportan
-  tiempos de compilación de menos de un minuto para proyectos con cientos de miles de líneas de código.
+  <docs-card title="Mantén equipos grandes productivos con Vite y esbuild" href="tools/cli/build-system-migration" link="ESBuild y Vite" titleIconName="sensors">
+    Angular CLI incorpora una tubería de compilación rápida y moderna utilizando Vite y ESBuild. Los desarrolladores reportan compilar proyectos 
+    con cientos de miles de líneas de código en menos de un minuto.
   </docs-card>
-  <docs-card title="Probado en algunas de las aplicaciones web más grandes de Google">
-  Grandes productos de Google se basan en la arquitectura de Angular y contribuyen al desarrollo de nuevas
-  funciones que mejoran aún más la escalabilidad de Angular, desde [Google Fonts](https://fonts.google.com/) hasta [Google Cloud](https://console.cloud.google.com).
+  <docs-card title="Probado en algunas de las aplicaciones web más grandes de Google" titleIconName="sensors">
+    Grandes productos de Google se basan en la arquitectura de Angular y contribuyen al desarrollo de nuevas funciones que mejoran aún más la 
+    escalabilidad de Angular, desde [Google Fonts](https://fonts.google.com/) hasta [Google Cloud](https://console.cloud.google.com).
   </docs-card>
 </docs-card-container>
 
-## Código abierto primero
-
-<docs-card-container>
-  <docs-card title="Creado de forma abierta en GitHub" href="https://github.com/angular/angular" link="Estrella de nuestro GitHub">
-  Tienes curiosidad por saber en qué estamos trabajando? Todos los PR (Solicitudes de fusión) y commits (Confirmaciones)  están disponibles en nuestro GitHub ¿Te encuentras con un problema o error? Clasificamos los problemas de GitHub con regularidad para asegurarnos de ser receptivos y comprometidos con nuestra comunidad, y resolver los problemas del mundo real a los que te enfrentas.
+<docs-card-container headerTitle="Código abierto primero" headerImgSrc="adev/src/assets/images/open-source.svg">
+  <docs-card title="Creado de forma abierta en GitHub" href="https://github.com/angular/angular" link="Estrella de nuestro GitHub" titleIconName="sensors">
+    ¿Tienes curiosidad por saber en qué estamos trabajando? Cada PR y commit está disponible en nuestro GitHub. ¿Te encuentras con un problema o error? Clasificamos los problemas de GitHub con regularidad para asegurarnos de ser receptivos y comprometidos con nuestra comunidad, y resolver los problemas del mundo real a los que te enfrentas.
   </docs-card>
-  <docs-card title="Construido con transparencia" href="roadmap" link="Lea nuestro hoja de ruta">
-  Nuestro equipo publica una hoja de ruta de nuestro trabajo actual y futuro, y valora tus comentarios. Publicamos Solicitudes de Comentarios (RFCs, por sus siglas en inglés) para recopilar opiniones sobre cambios de características más importantes y garantizar que la voz de la comunidad sea escuchada mientras se define la dirección futura de Angular.
+  <docs-card title="Construido con transparencia" href="roadmap" link="Lee nuestra hoja de ruta pública" titleIconName="sensors">
+    Nuestro equipo publica una hoja de ruta pública de nuestro trabajo actual y futuro, y valora tus comentarios. Publicamos Solicitudes de Comentarios (RFCs, por sus siglas en inglés) para recopilar opiniones sobre cambios de características más importantes y garantizar que la voz de la comunidad sea escuchada mientras se define la dirección futura de Angular.
   </docs-card>
 </docs-card-container>
 
-## Una comunidad próspera
-
-<docs-card-container>
-  <docs-card title="Cursos, blogs and recursos" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Echa un vistazo a DevLibrary">
-  Nuestra comunidad está compuesta por talentosos desarrolladores, escritores, instructores, podcasters y más. La librería de Google para desarrolladores es solo una muestra de los recursos de alta calidad disponibles para desarrolladores nuevos y experimentados para seguir desarrollando.
+<docs-card-container headerTitle="Una comunidad próspera" headerImgSrc="adev/src/assets/images/community.svg">
+  <docs-card title="Cursos, blogs y recursos" href="https://devlibrary.withgoogle.com/products/angular?sort=added" link="Echa un vistazo a DevLibrary" titleIconName="sensors">
+    Nuestra comunidad está compuesta por talentosos desarrolladores, escritores, instructores, podcasters y más. La librería de Google para desarrolladores es solo una muestra de los recursos de alta calidad disponibles para desarrolladores nuevos y experimentados para seguir desarrollando.
   </docs-card>
-  <docs-card title="Código abierto" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribuir a Angular">
-  Estamos agradecidos por los colaboradores de código abierto que hacen de Angular un mejor framework para todos. Desde la corrección de un error en los documentos, a la adición de características importantes, animamos a cualquier persona interesada a empezar en nuestro GitHub.
+  <docs-card title="Código abierto" href="https://github.com/angular/angular/blob/main/CONTRIBUTING.md" link="Contribuir a Angular" titleIconName="sensors">
+    Estamos agradecidos por los colaboradores de código abierto que hacen de Angular un mejor framework para todos. Desde la corrección de un error en los documentos, a la adición de características importantes, animamos a cualquier persona interesada a empezar en nuestro GitHub.
   </docs-card>
-  <docs-card title="Alianzas comunitarias" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Conozca a los GDE de Angular">
-  Nuestro equipo se asocia con individuos, educadores y empresas para garantizar que estamos apoyando a los desarrolladores de manera consistente. Angular Google Developer Experts (GDE) representa a los líderes de la comunidad en todo el mundo educando, organizando y desarrollando con Angular. Las asociaciones empresariales ayudan a garantizar que Angular se adapte bien a los líderes de la industria tecnológica.
+  <docs-card title="Alianzas comunitarias" href="https://developers.google.com/community/experts/directory?specialization=angular" link="Conoce a los Angular GDEs" titleIconName="sensors">
+    Nuestro equipo se asocia con individuos, educadores y empresas para garantizar que estamos apoyando a los desarrolladores de manera consistente. Angular Google Developer Experts (GDEs) representa a los líderes de la comunidad en todo el mundo educando, organizando y desarrollando con Angular. Las asociaciones empresariales ayudan a garantizar que Angular se adapte bien a los líderes de la industria tecnológica.
   </docs-card>
-  <docs-card title="Alianzas con otras tecnologías de Google">
-  Angular se asocia estrechamente con otras tecnologías y equipos de Google para mejorar la web.
-
-  Nuestra asociación continua con Aurora de Chrome explora activamente las mejoras en la experiencia del usuario a través de la web, el desarrollo de optimizaciones de rendimiento integradas como NgOptimizedImage y mejoras en Angular Core Web Vitals.
-
-  También estamos trabajando con [Firebase](https://firebase.google.com/), [Tensorflow](https://www.tensorflow.org/), [Flutter](https://flutter.dev/), [Material Design](https://m3.material.io/), y [Google Cloud](https://cloud.google.com/) para asegurar que proporcionamos integraciones significativas a través del flujo de trabajo del desarrollador.
+  <docs-card title="Alianzas con otras tecnologías de Google" titleIconName="sensors">
+    <p>Angular se asocia estrechamente con otras tecnologías y equipos de Google para mejorar la web.</p>
+    <p>Nuestra asociación continua con Aurora de Chrome explora activamente las mejoras en la experiencia del usuario a través de la web, desarrollando optimizaciones de rendimiento integradas como <code>NgOptimizedImage</code> y mejoras en Angular Core Web Vitals.</p>
+    <p>También estamos trabajando con <a href="https://firebase.google.com/">Firebase</a>, <a href="https://www.tensorflow.org/">Tensorflow</a>, <a href="https://flutter.dev/">Flutter</a>, <a href="https://m3.material.io/">Material Design</a>, y <a href="https://cloud.google.com/">Google Cloud</a> para asegurar que proporcionamos integraciones significativas a través del flujo de trabajo del desarrollador.</p>
   </docs-card>
 </docs-card-container>
 
@@ -150,4 +121,3 @@ instrucciones paso a paso.
     <docs-pill href="api" title="Referencia a nuestras API"/>
   </docs-pill-row>
 </docs-callout>
-
diff --git a/adev-es/src/content/kitchen-sink.md b/adev-es/src/content/kitchen-sink.md
index fb2f194..c4d66f9 100644
--- a/adev-es/src/content/kitchen-sink.md
+++ b/adev-es/src/content/kitchen-sink.md
@@ -4,11 +4,11 @@ This is a visual list of all custom components and styles for Angular.dev.
 
 As a design system, this page contains visual and Markdown authoring guidance for:
 
-* Custom Angular docs elements: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), and [`docs-steps`](#workflow)
-* Custom text elements: [alerts](#alerts)
-* Code examples: [`docs-code`](#code)
-* Built-in Markdown styled elements: links, lists, [headers](#headers), [horizontal lines](#horizontal-line-divider), [tables](#tables)
-* and more!
+- Custom Angular docs elements: [`docs-card`](#cards), [`docs-callout`](#callouts), [`docs-pill`](#pills), and [`docs-steps`](#workflow)
+- Custom text elements: [alerts](#alerts)
+- Code examples: [`docs-code`](#code)
+- Built-in Markdown styled elements: links, lists, [headers](#headers-h2), [horizontal lines](#horizontal-line-divider)
+- and more!
 
 Get ready to:
 
@@ -42,13 +42,13 @@ Get ready to:
 
 ### `<docs-card>` Attributes
 
-| Attributes               | Details                                           |
-|:---                      |:---                                               |
-| `<docs-card-container>`  | All cards must be nested inside a container       |
-| `title`                  | Card title                                        |
-| card body contents       | Anything between `<docs-card>` and `</docs-card>` |
-| `link`                   | (Optional) Call to Action link text               |
-| `href`                   | (Optional) Call to Action link href               |
+| Attributes              | Details                                           |
+| :---------------------- | :------------------------------------------------ |
+| `<docs-card-container>` | All cards must be nested inside a container       |
+| `title`                 | Card title                                        |
+| card body contents      | Anything between `<docs-card>` and `</docs-card>` |
+| `link`                  | (Optional) Call to Action link text               |
+| `href`                  | (Optional) Call to Action link href               |
 
 ## Callouts
 
@@ -67,7 +67,7 @@ Get ready to:
 ### `<docs-callout>` Attributes
 
 | Attributes                                       | Details                                                   |
-|:---                                              |:---                                                       |
+| :----------------------------------------------- | :-------------------------------------------------------- |
 | `title`                                          | Callout title                                             |
 | card body contents                               | Anything between `<docs-callout>` and `</docs-callout>`   |
 | `helpful` (default) \| `critical` \| `important` | (Optional) Adds styling and icons based on severity level |
@@ -76,7 +76,7 @@ Get ready to:
 
 Pill rows are helpful as a sort of navigation with links to helpful resources.
 
-<docs-pill-row>
+<docs-pill-row id=pill-row>
   <docs-pill href="#pill-row" title="Link"/>
   <docs-pill href="#pill-row" title="Link"/>
   <docs-pill href="#pill-row" title="Link"/>
@@ -87,11 +87,11 @@ Pill rows are helpful as a sort of navigation with links to helpful resources.
 
 ### `<docs-pill>` Attributes
 
-| Attributes               | Details                                      |
-|:---                      |:---                                          |
-| `<docs-pill-row`         | All pills must be nested inside a pill row   |
-| `title`                  | Pill text                                    |
-| `href`                   | Pill href                                    |
+| Attributes       | Details                                    |
+| :--------------- | :----------------------------------------- |
+| `<docs-pill-row` | All pills must be nested inside a pill row |
+| `title`          | Pill text                                  |
+| `href`           | Pill href                                  |
 
 Pills may also be used inline by themselves, but we haven't built that out yet.
 
@@ -135,8 +135,8 @@ Or using the `<docs-code>` element.
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'example-code',
-  template: '<h1>Hello World!</h1>',
+selector: 'example-code',
+template: '<h1>Hello World!</h1>',
 })
 export class ComponentOverviewComponent {}
 </docs-code>
@@ -157,25 +157,25 @@ Here's a code example fully styled:
 
 We also have styling for the terminal, just set the language as `shell`:
 
-<docs-code language="shell">
-  npm install @angular/material --save
-</docs-code>
+```shell
+npm install @angular/material --save
+```
 
 #### `<docs-code>` Attributes
 
-| Attributes               | Type        | Details                                              |
-|:---                      |:---         |:---                                                  |
-| code                     | `string`    | Anything between tags is treated as code             |
-| `path`                   | `string`    | Path to code example (root: `content/examples/`)     |
-| `header`                 | `string`    | Title of the example (default: `file-name`)          |
-| `language`               | `string`    | code language                                        |
-| `linenums`               | `boolean`   | (False) displays line numbers                        |
-| `highlight`              | `string of number[]` | lines highlighted                           |
-| `diff`                   | `string`    | path to changed code                                 |
-| `visibleLines`           | `string of number[]` | range of lines for collapse mode            |
-| `visibleRegion`          | `string`    | **DEPRECATED** FOR `visibleLines`                    |
-| `preview`                | `boolean`   | (False) display preview                              |
-| `hideCode`               | `boolean`   | (False) Whether to collapse code example by default. |
+| Attributes      | Type                 | Details                                              |
+| :-------------- | :------------------- | :--------------------------------------------------- |
+| code            | `string`             | Anything between tags is treated as code             |
+| `path`          | `string`             | Path to code example (root: `content/examples/`)     |
+| `header`        | `string`             | Title of the example (default: `file-name`)          |
+| `language`      | `string`             | code language                                        |
+| `linenums`      | `boolean`            | (False) displays line numbers                        |
+| `highlight`     | `string of number[]` | lines highlighted                                    |
+| `diff`          | `string`             | path to changed code                                 |
+| `visibleLines`  | `string of number[]` | range of lines for collapse mode                     |
+| `visibleRegion` | `string`             | **DEPRECATED** FOR `visibleLines`                    |
+| `preview`       | `boolean`            | (False) display preview                              |
+| `hideCode`      | `boolean`            | (False) Whether to collapse code example by default. |
 
 ### Multifile examples
 
@@ -184,27 +184,22 @@ You can create multifile examples by wrapping the examples inside a `<docs-code-
 <docs-code-multifile
   path="adev/src/content/examples/hello-world/src/app/app.component.ts"
   preview>
-  <docs-code
-    path="adev/src/content/examples/hello-world/src/app/app.component.ts"
-    diff="adev/src/content/examples/hello-world/src/app/app.component-old.ts"
-    linenums
-    visibleLines="[3, 11]"/>
-  <docs-code
+<docs-code
     path="adev/src/content/examples/hello-world/src/app/app.component.html"
     highlight="[1]"
     linenums/>
-  <docs-code
+<docs-code
     path="adev/src/content/examples/hello-world/src/app/app.component.css" />
 </docs-code-multifile>
 
 #### `<docs-code-multifile>` Attributes
 
-| Attributes               | Type        | Details                                              |
-|:---                      |:---         |:---                                                  |
-| body contents            | `string`    | nested tabs of `docs-code` examples                  |
-| `path`                   | `string`    | Path to code example for preview and external link   |
-| `preview`                | `boolean`   | (False) display preview                              |
-| `hideCode`               | `boolean`   | (False) Whether to collapse code example by default. |
+| Attributes    | Type      | Details                                              |
+| :------------ | :-------- | :--------------------------------------------------- |
+| body contents | `string`  | nested tabs of `docs-code` examples                  |
+| `path`        | `string`  | Path to code example for preview and external link   |
+| `preview`     | `boolean` | (False) display preview                              |
+| `hideCode`    | `boolean` | (False) Whether to collapse code example by default. |
 
 ### Adding `preview` to your code example
 
@@ -212,17 +207,45 @@ Adding the `preview` flag builds a running example of the code below the code sn
 
 NOTE: `preview` only works with standalone.
 
+### Styling example previews with Tailwind CSS
+
+Tailwind utility classes can be used within code examples.
+
+<docs-code-multifile
+  path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.ts"
+  preview>
+<docs-code path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.html" />
+<docs-code path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.ts" />
+</docs-code-multifile>
+
+## Tabs
+
+<docs-tab-group>
+  <docs-tab label="Code Example">
+    <docs-code-multifile
+      path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.ts"
+      hideCode="true"
+      preview>
+    <docs-code path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.html" />
+    <docs-code path="adev/src/content/examples/hello-world/src/app/tailwind-app.component.ts" />
+    </docs-code-multifile>
+  </docs-tab>
+  <docs-tab label="Some Text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus metus blandit semper faucibus. Sed blandit diam quis tellus maximus, ac scelerisque ex egestas. Ut euismod lobortis mauris pretium iaculis. Quisque ullamcorper, elit ut lacinia blandit, magna sem finibus urna, vel suscipit tortor dolor id risus.
+  </docs-tab>
+</docs-tab-group>
+
 ## Workflow
 
 Style numbered steps using `<docs-step>`. Numbering is created using CSS (handy!).
 
 ### `<docs-workflow>` and `<docs-step>` Attributes
 
-| Attributes               | Details                                           |
-|:---                      |:---                                               |
-| `<docs-workflow>`        | All steps must be nested inside a workflow        |
-| `title`                  | Step title                                        |
-| step body contents       | Anything between `<docs-step>` and `</docs-step>` |
+| Attributes         | Details                                           |
+| :----------------- | :------------------------------------------------ |
+| `<docs-workflow>`  | All steps must be nested inside a workflow        |
+| `title`            | Step title                                        |
+| step body contents | Anything between `<docs-step>` and `</docs-step>` |
 
 Steps must start on a new line, and can contain `docs-code`s and other nested elements and styles.
 
@@ -231,44 +254,47 @@ Steps must start on a new line, and can contain `docs-code`s and other nested el
 <docs-step title="Install the Angular CLI">
   You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
 
-  To install the Angular CLI, open a terminal window and run the following command:
+To install the Angular CLI, open a terminal window and run the following command:
+
+```shell
+npm install -g @angular/cli
+```
 
-  <docs-code language="shell">
-    npm install -g @angular/cli
-  </docs-code>
 </docs-step>
 
 <docs-step title="Create a workspace and initial application">
   You develop apps in the context of an Angular workspace.
 
-  To create a new workspace and initial starter app:
+To create a new workspace and initial starter app:
+
+- Run the CLI command `ng new` and provide the name `my-app`, as shown here:
 
-* Run the CLI command `ng new` and provide the name `my-app`, as shown here:
-    <docs-code language="shell">
-      ng new my-app
-    </docs-code>
+  ```shell
+  ng new my-app
+  ```
 
-* The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
+- The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
 
   The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
 
   The CLI creates a new workspace and a simple Welcome app, ready to run.
-</docs-step>
+  </docs-step>
 
 <docs-step title="Run the application">
   The Angular CLI includes a server, for you to build and serve your app locally.
 
-  1. Navigate to the workspace folder, such as `my-app`.
-  2. Run the following command:
-    <docs-code language="shell">
-      cd my-app
-      ng serve --open
-    </docs-code>
+1. Navigate to the workspace folder, such as `my-app`.
+2. Run the following command:
+
+   ```shell
+   cd my-app
+   ng serve --open
+   ```
 
-  The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files.
+The `ng serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files.
 
-  The `--open` (or just `-o`) option automatically opens your browser to <http://localhost:4200/>.
-  If your installation and setup was successful, you should see a page similar to the following.
+The `--open` (or just `-o`) option automatically opens your browser to <http://localhost:4200/>.
+If your installation and setup was successful, you should see a page similar to the following.
 </docs-step>
 
 <docs-step title="Final step">
@@ -288,13 +314,18 @@ Steps must start on a new line, and can contain `docs-code`s and other nested el
 
 You can add images using the semantic Markdown image:
 
-![Rhubarb the cat](assets/images/kitchen-sink/rhubarb.jpg "Optional title")
+![Rhubarb the cat](assets/images/kitchen-sink/rhubarb.jpg 'Optional title')
 
 ### Add `#small` and `#medium` to change the image size
 
 ![Rhubarb the small cat](assets/images/kitchen-sink/rhubarb.jpg#small)
 ![Rhubarb the medium cat](assets/images/kitchen-sink/rhubarb.jpg#medium)
 
+## Add attributes using curly braces syntax
+
+![Lazy loaded image](assets/images/kitchen-sink/rhubarb.jpg {loading: 'lazy'})
+![Combined attributes](assets/images/kitchen-sink/rhubarb.jpg#small {loading: 'lazy', decoding: 'async', fetchpriority: 'low'})
+
 Embedded videos are created with `docs-video` and just need a `src` and `alt`:
 
 <docs-video src="https://www.youtube.com/embed/O47uUnJjbJc" alt=""/>
@@ -328,7 +359,7 @@ Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the
 
 ## Horizontal Line Divider
 
-This can be used to separate page sections, like we're about to do below.  These styles will be added by default, nothing custom needed.
+This can be used to separate page sections, like we're about to do below. These styles will be added by default, nothing custom needed.
 
 <hr/>
 
diff --git a/adev-es/src/content/reference/cli.md b/adev-es/src/content/reference/cli.md
index 59fcc1a..16b419b 100644
--- a/adev-es/src/content/reference/cli.md
+++ b/adev-es/src/content/reference/cli.md
@@ -1,21 +1,21 @@
 # CLI Reference
 
-| Command                           | Alias  | Description                                                       |
-|:---                               |:---    |:---                                                               |
-| [`add`](cli/add)                  |        | Adds support for an external library to your project.             |
-| [`analytics`](cli/analytics)      |        | Configures the gathering of Angular CLI usage metrics.            |
-| [`build`](cli/build)              | `b`      | Compiles an Angular application or library into an output directory named dist/ at the given output path. |
-| [`cache`](cli/cache)              |        | Configure persistent disk cache and retrieve cache statistics.    |
-| [`completion`](cli/completion)    |        | Set up Angular CLI autocompletion for your terminal.              |
-| [`config`](cli/config)            |        | Retrieves or sets Angular configuration values in the angular.json file for the workspace. |
-| [`deploy`](cli/deploy)            |        | Invokes the deploy builder for a specified project or for the default project in the workspace. |
-| [`e2e`](cli/e2e)                  | `e`      | Builds and serves an Angular application, then runs end-to-end tests. |
-| [`extract-i18n`](cli/extract-i18n)|        | Extracts i18n messages from source code.                          |
-| [`generate`](cli/generate)        | `g`      | Generates and/or modifies files based on a schematic.             |
-| [`lint`](cli/lint)                |        | Runs linting tools on Angular application code in a given project folder. |
-| [`new`](cli/new)                  | `n`      | Creates a new Angular workspace. |
-| [`run`](cli/run)                  |        | Runs an Architect target with an optional custom builder configuration defined in your project. |
-| [`serve`](cli/serve)              | `s`, `dev`      | Builds and serves your application, rebuilding on file changes. |
-| [`test`](cli/test)                | `t`      | Runs unit tests in a project. |
-| [`update`](cli/update)            |        | Updates your workspace and its dependencies. See https://angular.dev/update-guide/.             |
-| [`version`](cli/version)          | `v`      | Outputs Angular CLI version. |
+| Command                            | Alias      | Description                                                                                               |
+| :--------------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------- |
+| [`add`](cli/add)                   |            | Adds support for an external library to your project.                                                     |
+| [`analytics`](cli/analytics)       |            | Configures the gathering of Angular CLI usage metrics.                                                    |
+| [`build`](cli/build)               | `b`        | Compiles an Angular application or library into an output directory named dist/ at the given output path. |
+| [`cache`](cli/cache)               |            | Configure persistent disk cache and retrieve cache statistics.                                            |
+| [`completion`](cli/completion)     |            | Set up Angular CLI autocompletion for your terminal.                                                      |
+| [`config`](cli/config)             |            | Retrieves or sets Angular configuration values in the angular.json file for the workspace.                |
+| [`deploy`](cli/deploy)             |            | Invokes the deploy builder for a specified project or for the default project in the workspace.           |
+| [`e2e`](cli/e2e)                   | `e`        | Builds and serves an Angular application, then runs end-to-end tests.                                     |
+| [`extract-i18n`](cli/extract-i18n) |            | Extracts i18n messages from source code.                                                                  |
+| [`generate`](cli/generate)         | `g`        | Generates and/or modifies files based on a schematic.                                                     |
+| [`lint`](cli/lint)                 |            | Runs linting tools on Angular application code in a given project folder.                                 |
+| [`new`](cli/new)                   | `n`        | Creates a new Angular workspace.                                                                          |
+| [`run`](cli/run)                   |            | Runs an Architect target with an optional custom builder configuration defined in your project.           |
+| [`serve`](cli/serve)               | `s`, `dev` | Builds and serves your application, rebuilding on file changes.                                           |
+| [`test`](cli/test)                 | `t`        | Runs unit tests in a project.                                                                             |
+| [`update`](cli/update)             |            | Updates your workspace and its dependencies. See https://angular.dev/update-guide/.                       |
+| [`version`](cli/version)           | `v`        | Outputs Angular CLI version.                                                                              |
diff --git a/adev-es/src/content/reference/configs/angular-compiler-options.md b/adev-es/src/content/reference/configs/angular-compiler-options.md
index 0973115..d036086 100644
--- a/adev-es/src/content/reference/configs/angular-compiler-options.md
+++ b/adev-es/src/content/reference/configs/angular-compiler-options.md
@@ -30,12 +30,12 @@ Modifies how Angular-specific annotations are emitted to improve tree-shaking.
 Non-Angular annotations are not affected.
 One of `static fields` or `decorators`. The default value is `static fields`.
 
-* By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes
-* The `decorators` value leaves the decorators in place, which makes compilation faster.
-    TypeScript emits calls to the `__decorate` helper.
-    Use `--emitDecoratorMetadata` for runtime reflection.
+- By default, the compiler replaces decorators with a static field in the class, which allows advanced tree-shakers like [Closure compiler](https://github.com/google/closure-compiler) to remove unused classes
+- The `decorators` value leaves the decorators in place, which makes compilation faster.
+  TypeScript emits calls to the `__decorate` helper.
+  Use `--emitDecoratorMetadata` for runtime reflection.
 
-    HELPFUL: That the resulting code cannot tree-shake properly.
+  HELPFUL: That the resulting code cannot tree-shake properly.
 
 ### `annotateForClosureCompiler`
 
@@ -51,8 +51,8 @@ Default is `false`.
 Specifies the compilation mode to use.
 The following modes are available:
 
-| Modes       | Details |
-|:---         |:---     |
+| Modes       | Details                                                                                             |
+| :---------- | :-------------------------------------------------------------------------------------------------- |
 | `'full'`    | Generates fully AOT-compiled code according to the version of Angular that is currently being used. |
 | `'partial'` | Generates code in a stable, but intermediate form suitable for a published library.                 |
 
@@ -231,4 +231,4 @@ The `ngc` command is a wrapper around TypeScript's `tsc` compiler command. The A
 
 Besides the configuration file, you can also use [`tsc` command line options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) to configure `ngc`.
 
-[GuideI18nCommonPrepareMarkTextInComponentTemplate]: guide/i18n/prepare#mark-text-in-component-template "Mark text in component template - Prepare component for translation | Angular"
+[GuideI18nCommonPrepareMarkTextInComponentTemplate]: guide/i18n/prepare#mark-text-in-component-template 'Mark text in component template - Prepare component for translation | Angular'
diff --git a/adev-es/src/content/reference/configs/file-structure.md b/adev-es/src/content/reference/configs/file-structure.md
index 947e75d..458ce27 100644
--- a/adev-es/src/content/reference/configs/file-structure.md
+++ b/adev-es/src/content/reference/configs/file-structure.md
@@ -6,13 +6,11 @@ A project is the set of files that comprise an application or a shareable librar
 
 The Angular CLI `ng new` command creates a workspace.
 
-<docs-code language="shell">
-
+```shell
 ng new my-project
+```
 
-</docs-code>
-
-When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named *my-project*.
+When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named _my-project_.
 
 By default, `ng new` creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests.
 The skeleton is for a simple welcome application that is ready to run and easy to modify.
@@ -34,7 +32,7 @@ All projects within a workspace share a [configuration](reference/configs/worksp
 The top level of the workspace contains workspace-wide configuration files, configuration files for the root-level application, and subfolders for the root-level application source and test files.
 
 | Workspace configuration files | Purpose                                                                                                                                                                                                                                                                                                          |
-|:---                           |:---                                                                                                                                                                                                                                                                                                              |
+| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `.editorconfig`               | Configuration for code editors. See [EditorConfig](https://editorconfig.org).                                                                                                                                                                                                                                    |
 | `.gitignore`                  | Specifies intentionally untracked files that [Git](https://git-scm.com) should ignore.                                                                                                                                                                                                                           |
 | `README.md`                   | Documentation for the workspace.                                                                                                                                                                                                                                                                                 |
@@ -42,7 +40,7 @@ The top level of the workspace contains workspace-wide configuration files, conf
 | `package.json`                | Configures [npm package dependencies](reference/configs/npm-packages) that are available to all projects in the workspace. See [npm documentation](https://docs.npmjs.com/files/package.json) for the specific format and contents of this file.                                                                 |
 | `package-lock.json`           | Provides version information for all packages installed into `node_modules` by the npm client. See [npm documentation](https://docs.npmjs.com/files/package-lock.json) for details.                                                                                                                              |
 | `src/`                        | Source files for the root-level application project.                                                                                                                                                                                                                                                             |
-| `public/`                     | Contains image and other asset files to be served as static files by the dev server and copied as-is when you build your application.                                                                                             |
+| `public/`                     | Contains image and other asset files to be served as static files by the dev server and copied as-is when you build your application.                                                                                                                                                                            |
 | `node_modules/`               | Installed [npm packages](reference/configs/npm-packages) for the entire workspace. Workspace-wide `node_modules` dependencies are visible to all projects.                                                                                                                                                       |
 | `tsconfig.json`               | The base [TypeScript](https://www.typescriptlang.org) configuration for projects in the workspace. All other configuration files inherit from this base file. For more information, see the [relevant TypeScript documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#tsconfig-bases). |
 
@@ -52,7 +50,7 @@ By default, the CLI command `ng new my-app` creates a workspace folder named "my
 A newly generated application contains source files for a root module, with a root component and template.
 
 When the workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the application.
-This initial root-level application is the *default app* for CLI commands (unless you change the default after creating [additional apps](#multiple-projects)).
+This initial root-level application is the _default app_ for CLI commands (unless you change the default after creating [additional apps](#multiple-projects)).
 
 For a single-application workspace, the `src` subfolder of the workspace contains the source files (application logic, data, and assets) for the root application.
 For a multi-project workspace, additional projects in the `projects` folder contain a `project-name/src/` subfolder with the same structure.
@@ -63,8 +61,8 @@ Files at the top level of `src/` support running your application.
 Subfolders contain the application source and application-specific configuration.
 
 | Application support files | Purpose                                                                                                                                                                                                                           |
-|:---                       |:---                                                                                                                                                                                                                               |
-| `app/`                    | Contains the component files in which your application logic and data are defined. See details [below](#app-src).                                                                                                                 |
+| :------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app/`                    | Contains the component files in which your application logic and data are defined. See details below.                                                                                                                             |
 | `favicon.ico`             | An icon to use for this application in the bookmark bar.                                                                                                                                                                          |
 | `index.html`              | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or`<link>` tags here manually. |
 | `main.ts`                 | The main entry point for your application.                                                                                                                                                                                        |
@@ -74,13 +72,13 @@ Inside the `src` folder, the `app` folder contains your project's logic and data
 Angular components, templates, and styles go here.
 
 | `src/app/` files        | Purpose                                                                                                                                                                                                                                                                            |
-|:---                     |:---                                                                                                                                                                                                                                                                                |
-| `app.config.ts`         | Defines the application configuration that tells Angular how to assemble the application. As you add more providers to the app, they should be declared here.<br><br>*Only generated when using the `--standalone` option.*                                                        |
+| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app.config.ts`         | Defines the application configuration that tells Angular how to assemble the application. As you add more providers to the app, they should be declared here.<br><br>_Only generated when using the `--standalone` option._                                                        |
 | `app.component.ts`      | Defines the application's root component, named `AppComponent`. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.                                                                        |
 | `app.component.html`    | Defines the HTML template associated with `AppComponent`.                                                                                                                                                                                                                          |
 | `app.component.css`     | Defines the CSS stylesheet for `AppComponent`.                                                                                                                                                                                                                                     |
 | `app.component.spec.ts` | Defines a unit test for `AppComponent`.                                                                                                                                                                                                                                            |
-| `app.module.ts`         | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.<br><br>*Only generated when using the `--standalone false` option.* |
+| `app.module.ts`         | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here.<br><br>_Only generated when using the `--standalone false` option._ |
 | `app.routes.ts`         | Defines the application's routing configuration.                                                                                                                                                                                                                                   |
 
 ### Application configuration files
@@ -91,7 +89,7 @@ For a multi-project workspace, project-specific configuration files are in the p
 Project-specific [TypeScript](https://www.typescriptlang.org) configuration files inherit from the workspace-wide `tsconfig.json`.
 
 | Application-specific configuration files | Purpose                                                                                                                                                                                             |
-|:---                                      |:---                                                                                                                                                                                                 |
+| :--------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `tsconfig.app.json`                      | Application-specific [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), including [Angular compiler options](reference/configs/angular-compiler-options). |
 | `tsconfig.spec.json`                     | [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for application tests.                                                                                  |
 
@@ -105,21 +103,17 @@ A multi-project workspace also supports library development.
 If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name.
 The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.
 
-<docs-code language="shell">
-
+```shell
 ng new my-workspace --no-create-application
-
-</docs-code>
+```
 
 You can then generate applications and libraries with names that are unique within the workspace.
 
-<docs-code language="shell">
-
+```shell
 cd my-workspace
 ng generate application my-app
 ng generate library my-lib
-
-</docs-code>
+```
 
 ### Multiple project file structure
 
@@ -140,14 +134,14 @@ my-workspace/
 ## Library project files
 
 When you generate a library using the CLI (with a command such as `ng generate library my-lib`), the generated files go into the `projects/` folder of the workspace.
-For more information about creating your own libraries, see  [Creating Libraries](tools/libraries/creating-libraries).
+For more information about creating your own libraries, see [Creating Libraries](tools/libraries/creating-libraries).
 
 Unlike an application, a library has its own `package.json` configuration file.
 
 Under the `projects/` folder, the `my-lib` folder contains your library code.
 
 | Library source files     | Purpose                                                                                                                                                                                         |
-|:---                      |:---                                                                                                                                                                                             |
+| :----------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `src/lib`                | Contains your library project's logic and data. Like an application project, a library project can contain components, services, modules, directives, and pipes.                                |
 | `src/public-api.ts`      | Specifies all files that are exported from your library.                                                                                                                                        |
 | `ng-package.json`        | Configuration file used by [ng-packagr](https://github.com/ng-packagr/ng-packagr) for building your library.                                                                                    |
diff --git a/adev-es/src/content/reference/configs/npm-packages.md b/adev-es/src/content/reference/configs/npm-packages.md
index 8e40d95..a6abb9f 100644
--- a/adev-es/src/content/reference/configs/npm-packages.md
+++ b/adev-es/src/content/reference/configs/npm-packages.md
@@ -1,11 +1,11 @@
 # Workspace npm dependencies
 
-The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?") and distributed using the [npm registry](https://docs.npmjs.com).
+The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm 'What is npm?') and distributed using the [npm registry](https://docs.npmjs.com).
 
 You can download and install these npm packages by using the [npm CLI client](https://docs.npmjs.com/cli/install).
 By default, Angular CLI uses the npm client.
 
-HELPFUL: See [Local Environment Setup](tools/cli/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`.
+HELPFUL: See [Local Environment Setup](tools/cli/setup-local 'Setting up for Local Development') for information about the required versions and installation of `Node.js` and `npm`.
 
 If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm.
 
@@ -17,7 +17,7 @@ The CLI command `ng new` creates a `package.json` file when it creates the new w
 This `package.json` is used by all projects in the workspace, including the initial application project that is created by the CLI when it creates the workspace.
 Libraries created with `ng generate library` will include their own `package.json` file.
 
-Initially, this `package.json` includes *a starter set of packages*, some of which are required by Angular and others that support common application scenarios.
+Initially, this `package.json` includes _a starter set of packages_, some of which are required by Angular and others that support common application scenarios.
 You add packages to `package.json` as your application evolves.
 
 ## Default Dependencies
@@ -25,19 +25,19 @@ You add packages to `package.json` as your application evolves.
 The following Angular packages are included as dependencies in the default `package.json` file for a new Angular workspace.
 For a complete list of Angular packages, see the [API reference](api).
 
-| Package name                                                              | Details                                                                                                                                                                                        |
-|:---                                                                       |:---                                                                                                                                                                                            |
-| [`@angular/animations`](api#animations)                                   | Angular's legacy animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Legacy Animations guide](guide/legacy-animations).        |
-| [`@angular/common`](api#common)                                           | The commonly-needed services, pipes, and directives provided by the Angular team.                                                                                                              |
-| `@angular/compiler`                                                       | Angular's template compiler. It understands Angular templates and can convert them to code that makes the application run.                                                                     |
-| `@angular/compiler-cli`                                                   | Angular's compiler which is invoked by the Angular CLI's `ng build` and `ng serve` commands. It processes Angular templates with `@angular/compiler` inside a standard TypeScript compilation. |
-| [`@angular/core`](api#core)                                               | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators such as `@Component`, dependency injection, and component lifecycle hooks.      |
-| [`@angular/forms`](api#forms)                                             | Support for both [template-driven](guide/forms) and [reactive forms](guide/forms/reactive-forms). See [Introduction to forms](guide/forms).                                                    |
-| [`@angular/platform-browser`](api#platform-browser)                       | Everything DOM and browser related, especially the pieces that help render into the DOM.                                                                                                       |
-| [`@angular/platform-browser-dynamic`](api#platform-browser-dynamic)       | Includes [providers](api/core/Provider) and methods to compile and run the application on the client using the [JIT compiler](tools/cli/aot-compiler#choosing-a-compiler).                     |
-| [`@angular/router`](api#router)                                           | The router module navigates among your application pages when the browser URL changes. For more information, see [Routing and Navigation](guide/routing).                                       |
-| [`@angular/cli`](https://github.com/angular/angular-cli)                  | Contains the Angular CLI binary for running `ng` commands.                                                                                                                                     |
-| [`@angular-devkit/build-angular`](https://www.npmjs.com/package/@angular-devkit/build-angular) | Contains default CLI builders for bundling, testing, and serving Angular applications and libraries.                                                                                           |
-| [`rxjs`](https://www.npmjs.com/package/rxjs)                                                                    | A library for reactive programming using `Observables`.                                                                                                                                        |
-| [`zone.js`](https://github.com/angular/zone.js)                           | Angular relies on `zone.js`` to run Angular's change detection processes when native JavaScript operations raise events.                                                                       |
-| [`typescript`](https://www.npmjs.com/package/typescript)                  | The TypeScript compiler, language server, and built-in type definitions.                                                                                                                       |
+| Package name                                                                                   | Details                                                                                                                                                                                                      |
+| :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@angular/animations`](api#animations)                                                        | Angular's legacy animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Legacy Animations guide](guide/legacy-animations). |
+| [`@angular/common`](api#common)                                                                | The commonly-needed services, pipes, and directives provided by the Angular team.                                                                                                                            |
+| `@angular/compiler`                                                                            | Angular's template compiler. It understands Angular templates and can convert them to code that makes the application run.                                                                                   |
+| `@angular/compiler-cli`                                                                        | Angular's compiler which is invoked by the Angular CLI's `ng build` and `ng serve` commands. It processes Angular templates with `@angular/compiler` inside a standard TypeScript compilation.               |
+| [`@angular/core`](api#core)                                                                    | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators such as `@Component`, dependency injection, and component lifecycle hooks.                    |
+| [`@angular/forms`](api#forms)                                                                  | Support for both [template-driven](guide/forms) and [reactive forms](guide/forms/reactive-forms). See [Introduction to forms](guide/forms).                                                                  |
+| [`@angular/platform-browser`](api#platform-browser)                                            | Everything DOM and browser related, especially the pieces that help render into the DOM.                                                                                                                     |
+| [`@angular/platform-browser-dynamic`](api#platform-browser-dynamic)                            | Includes [providers](api/core/Provider) and methods to compile and run the application on the client using the [JIT compiler](tools/cli/aot-compiler#choosing-a-compiler).                                   |
+| [`@angular/router`](api#router)                                                                | The router module navigates among your application pages when the browser URL changes. For more information, see [Routing and Navigation](guide/routing).                                                    |
+| [`@angular/cli`](https://github.com/angular/angular-cli)                                       | Contains the Angular CLI binary for running `ng` commands.                                                                                                                                                   |
+| [`@angular-devkit/build-angular`](https://www.npmjs.com/package/@angular-devkit/build-angular) | Contains default CLI builders for bundling, testing, and serving Angular applications and libraries.                                                                                                         |
+| [`rxjs`](https://www.npmjs.com/package/rxjs)                                                   | A library for reactive programming using `Observables`.                                                                                                                                                      |
+| [`zone.js`](https://github.com/angular/zone.js)                                                | Angular relies on `zone.js`` to run Angular's change detection processes when native JavaScript operations raise events.                                                                                     |
+| [`typescript`](https://www.npmjs.com/package/typescript)                                       | The TypeScript compiler, language server, and built-in type definitions.                                                                                                                                     |
diff --git a/adev-es/src/content/reference/configs/workspace-config.md b/adev-es/src/content/reference/configs/workspace-config.md
index 4160d33..a122c85 100644
--- a/adev-es/src/content/reference/configs/workspace-config.md
+++ b/adev-es/src/content/reference/configs/workspace-config.md
@@ -83,21 +83,19 @@ For example, the schematic for generating a component with `ng generate componen
 The fields given in the schematic's schema correspond to the allowed command-line argument values and defaults for the Angular CLI sub-command options.
 You can update your workspace schema file to set a different default for a sub-command option. For example, to disable `standalone` in `ng generate component` by default:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"schematics": {
-"@schematics/angular:component": {
-"standalone": false
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "schematics": {
+        "@schematics/angular:component": {
+          "standalone": false
+        }
+      }
+    }
+  }
+}
+```
 
 ## Configuring CLI builders
 
@@ -145,24 +143,22 @@ Each target under `architect` has the following properties:
 
 For example, to configure a build with optimizations disabled:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"optimization": false
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "optimization": false
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 ### Alternate build configurations
 
@@ -179,29 +175,27 @@ You can select an alternate configuration by passing its name to the `--configur
 
 For example, to configure a build where optimization is enabled only for production builds (`ng build --configuration production`):
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"optimization": false
-},
-"configurations": {
-"production": {
-"optimization": true
-}
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "optimization": false
+          },
+          "configurations": {
+            "production": {
+              "optimization": true
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 You can also pass in more than one configuration name as a comma-separated list.
 For example, to apply both `staging` and `french` build configurations, use the command `ng build --configuration staging,french`.
@@ -223,6 +217,7 @@ For details of those options and their possible values, see the [Angular CLI Ref
 | `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#configure-size-budgets). |
 | `fileReplacements`         | An object containing files and their compile-time replacements. See more in [Configure target-specific file replacements](tools/cli/build#configure-target-specific-file-replacements).                                                                                |
 | `index`                    | A base HTML document which loads the application. See more in [Index configuration](#index-configuration).                                                                                                                                                             |
+| `security`                 | An object containing the key `autoCsp` that can be set to `true` or `false`                                                                                                                                                                                            |
 
 ### Extra serve options
 
@@ -259,63 +254,59 @@ An asset specification object can have the following fields.
 
 For example, the default asset paths can be represented in more detail using the following objects.
 
-<docs-code language="json">
-
-{
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"assets": [
+```json
 {
-"glob": "**/*",
-"input": "src/assets/",
-"output": "/assets/"
-},
-{
-"glob": "favicon.ico",
-"input": "src/",
-"output": "/"
-}
-]
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets/",
+                "output": "/assets/"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "src/",
+                "output": "/"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 The following example uses the `ignore` field to exclude certain files in the assets directory from being copied into the build:
 
-<docs-code language="json">
-
-{
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"assets": [
+```json
 {
-"glob": "**/\*",
-"input": "src/assets/",
-"ignore": ["**/\*.svg"],
-"output": "/assets/"
-}
-]
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets/",
+                "ignore": ["**/*.svg"],
+                "output": "/assets/"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 ### Styles and scripts configuration
 
@@ -326,37 +317,35 @@ With a configuration object, you have the option of naming the bundle for the en
 The bundle is injected by default, but you can set `inject` to `false` to exclude the bundle from injection.
 For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"styles": [
-{
-"input": "src/external-module/styles.scss",
-"inject": false,
-"bundleName": "external-module"
-}
-],
-"scripts": [
-{
-"input": "src/external-module/main.js",
-"inject": false,
-"bundleName": "external-module"
-}
-]
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "styles": [
+              {
+                "input": "src/external-module/styles.scss",
+                "inject": false,
+                "bundleName": "external-module"
+              }
+            ],
+            "scripts": [
+              {
+                "input": "src/external-module/main.js",
+                "inject": false,
+                "bundleName": "external-module"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 #### Style preprocessor options
 
@@ -364,41 +353,37 @@ In Sass, you can make use of the `includePaths` feature for both component and g
 
 To add paths, use the `stylePreprocessorOptions` option:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"stylePreprocessorOptions": {
-"includePaths": [
-"src/style-paths"
-]
-}
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/style-paths"
+              ]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 Files in that directory, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
 
-<docs-code language="scss">
-
+```scss
 // src/app/app.component.scss
 // A relative path works
 @import '../style-paths/variables';
 
 // But now this works as well
 @import 'variables';
-
-</docs-code>
+```
 
 HELPFUL: You also need to add any styles or scripts to the `test` builder if you need them for unit tests.
 See also [Using runtime-global libraries inside your application](tools/libraries/using-libraries#using-runtime-global-libraries-inside-your-app).
@@ -411,7 +396,7 @@ This option enables various optimizations of the build output, including:
 - Minification of scripts and styles
 - Tree-shaking
 - Dead-code elimination
-- Inlining of critical CSS
+- [Inlining of critical CSS](/tools/cli/build#critical-css-inlining)
 - Fonts inlining
 
 Several options can be used to fine-tune the optimization of an application.
@@ -438,73 +423,95 @@ Several options can be used to fine-tune the optimization of an application.
 
 You can supply a value such as the following to apply optimization to one or the other:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"optimization": {
-"scripts": true,
-"styles": {
-"minify": true,
-"inlineCritical": true
-},
-"fonts": true
-}
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/style-paths"
+              ]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 ### Source map configuration
 
 The `sourceMap` builder option can be either a boolean or an object for more fine-tune configuration to control the source maps of an application.
 
-| Options   | Details                                             | Value type | Default value |
-| :-------- | :-------------------------------------------------- | :--------- | :------------ |
-| `scripts` | Output source maps for all scripts.                 | `boolean`  | `true`        |
-| `styles`  | Output source maps for all styles.                  | `boolean`  | `true`        |
-| `vendor`  | Resolve vendor packages source maps.                | `boolean`  | `false`       |
-| `hidden`  | Omit link to sourcemaps from the output JavaScript. | `boolean`  | `false`       |
+| Options          | Details                                                      | Value type | Default value |
+| :--------------- | :----------------------------------------------------------- | :--------- | :------------ |
+| `scripts`        | Output source maps for all scripts.                          | `boolean`  | `true`        |
+| `styles`         | Output source maps for all styles.                           | `boolean`  | `true`        |
+| `vendor`         | Resolve vendor packages source maps.                         | `boolean`  | `false`       |
+| `hidden`         | Omit link to sourcemaps from the output JavaScript.          | `boolean`  | `false`       |
+| `sourcesContent` | Output original source content for files within source maps. | `boolean`  | `true`        |
 
 The example below shows how to toggle one or more values to configure the source map outputs:
 
-<docs-code language="json">
-
+```json
 {
-"projects": {
-"my-app": {
-"architect": {
-"build": {
-"builder": "@angular-devkit/build-angular:application",
-"options": {
-"sourceMap": {
-"scripts": true,
-"styles": false,
-"hidden": true,
-"vendor": true
-}
-}
-}
-}
-}
-}
-}
-
-</docs-code>
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "sourceMap": {
+              "scripts": true,
+              "styles": false,
+              "hidden": true,
+              "vendor": true
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
 
 HELPFUL: When using hidden source maps, source maps are not referenced in the bundle.
 These are useful if you only want source maps to map stack traces in error reporting tools without showing up in browser developer tools.
 Note that even though `hidden` prevents the source map from being linked in the output bundle, your deployment process must take care not to serve the generated sourcemaps in production, or else the information is still leaked.
 
+#### Source maps without sources content
+
+You can generate source maps without the `sourcesContent` field, which contains the original source code.
+This allows you to deploy source maps to production for better error reporting with original source names while protecting your source code from exposure.
+
+To exclude sources content from source maps, set the `sourcesContent` option to `false`:
+
+```json
+{
+  "projects": {
+    "my-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "sourceMap": {
+              "scripts": true,
+              "styles": true,
+              "sourcesContent": false
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
 ### Index configuration
 
 Configures generation of the application's HTML index.
diff --git a/adev-es/src/content/reference/errors/NG01101.md b/adev-es/src/content/reference/errors/NG01101.md
index cfef212..dcb6911 100644
--- a/adev-es/src/content/reference/errors/NG01101.md
+++ b/adev-es/src/content/reference/errors/NG01101.md
@@ -3,7 +3,7 @@
 Async validators must return a promise or an observable, and emit/resolve them whether the validation fails or succeeds. In particular, they must implement the [AsyncValidatorFn API](api/forms/AsyncValidator)
 
 ```typescript
-export function isTenAsync(control: AbstractControl): 
+export function isTenAsync(control: AbstractControl):
   Observable<ValidationErrors | null> {
     const v: number = control.value;
     if (v !== 10) {
diff --git a/adev-es/src/content/reference/errors/NG0201.md b/adev-es/src/content/reference/errors/NG0201.md
index 0369bfc..cf7fa57 100644
--- a/adev-es/src/content/reference/errors/NG0201.md
+++ b/adev-es/src/content/reference/errors/NG0201.md
@@ -14,6 +14,6 @@ To fix the error ensure that your service is registered in the list of providers
 
 The most common solution is to add a provider in `@Injectable` using `providedIn`:
 
-<docs-code language="typescript">
+```ts
 @Injectable({ providedIn: 'app' })
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/errors/NG02800.md b/adev-es/src/content/reference/errors/NG02800.md
index 292eccb..d364d6f 100644
--- a/adev-es/src/content/reference/errors/NG02800.md
+++ b/adev-es/src/content/reference/errors/NG02800.md
@@ -7,4 +7,5 @@ To enable `JSONP` support, you can do one of the following:
 - import the `HttpClientJsonpModule` in your root AppModule, when NgModule-based bootstrap is used.
 
 ## Debugging the error
+
 Make sure that the JSONP support is added into your application either by calling the `withJsonpSupport` function (when `provideHttpClient` is used) or importing the `HttpClientJsonpModule` module as described above.
diff --git a/adev-es/src/content/reference/errors/NG02802.md b/adev-es/src/content/reference/errors/NG02802.md
index c679620..fefbab6 100644
--- a/adev-es/src/content/reference/errors/NG02802.md
+++ b/adev-es/src/content/reference/errors/NG02802.md
@@ -38,4 +38,4 @@ Only include headers that are necessary for your application logic. Be cautious
 
 The warning message includes the header name and the request URL. Check your code for where this header is being accessed and determine if it needs to be included in the transfer cache.
 
-If the header is not needed on the client, consider refactoring your code to avoid accessing it.
\ No newline at end of file
+If the header is not needed on the client, consider refactoring your code to avoid accessing it.
diff --git a/adev-es/src/content/reference/errors/NG0300.md b/adev-es/src/content/reference/errors/NG0300.md
index 86ed0d2..0c802ac 100644
--- a/adev-es/src/content/reference/errors/NG0300.md
+++ b/adev-es/src/content/reference/errors/NG0300.md
@@ -6,9 +6,8 @@ Two or more [components](guide/components) use the same element selector. Becaus
 
 This error occurs at runtime when you apply two selectors to a single node, each of which matches a different component, or when you apply a single selector to a node and it matches more than one component.
 
-<docs-code language="typescript">
-
-import { Component } from '@angular/core';
+```ts
+import {Component} from '@angular/core';
 
 @Component({
   selector: '[stroked-button]',
@@ -22,30 +21,30 @@ export class StrokedBtnComponent {}
 })
 export class RaisedBtnComponent {}
 
-
 @Component({
   selector: 'app-root',
   template: `
+
   <!-- This node has 2 selectors: stroked-button and raised-button, and both match a different component: StrokedBtnComponent, and RaisedBtnComponent , so NG0300 will be raised  -->
-  <button stroked-button  raised-button></button>
-  `,
+
+<button stroked-button  raised-button></button>
+`,
 })
 export class AppComponent {}
-
-</docs-code>
+```
 
 ## Debugging the error
 
 Use the element name from the error message to search for places where you're using the same selector declaration in your codebase:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'YOUR_STRING',
-  …
+…
 })
 
-</docs-code>
+```
 
 Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
 
diff --git a/adev-es/src/content/reference/errors/NG0301.md b/adev-es/src/content/reference/errors/NG0301.md
index a08b31f..6b4048e 100644
--- a/adev-es/src/content/reference/errors/NG0301.md
+++ b/adev-es/src/content/reference/errors/NG0301.md
@@ -12,16 +12,16 @@ Use the export name to trace the templates or modules using this export.
 
 Ensure that all dependencies are properly imported and declared in your NgModules. For example, if the export not found is `ngForm`, we need to import `FormsModule` and declare it in the list of imports in `*.module.ts` to resolve the error.
 
-<docs-code language="typescript">
+```ts
 
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  …
-  imports: [
-    FormsModule,
-    …
+…
+imports: [
+FormsModule,
+…
 
-</docs-code>
+```
 
 If you recently added an import, you may need to restart your server to see these changes.
diff --git a/adev-es/src/content/reference/errors/NG0602.md b/adev-es/src/content/reference/errors/NG0602.md
index 09e5bf1..e20cea5 100644
--- a/adev-es/src/content/reference/errors/NG0602.md
+++ b/adev-es/src/content/reference/errors/NG0602.md
@@ -19,17 +19,20 @@ This error guide is non-exhaustive.
 It captures a few common scenarios and how to address the error.
 
 #### `afterNextRender`/`afterEveryRender`
+
 Move the call for `afterNextRender`/`afterEveryRender` outside of the reactive context.
 
 A good place to schedule the after render hook is in the component's class constructor.
 Alternatively, use `untracked` to leave the reactive context and explicitly opt-out of this error.
 
 #### `effect`
+
 Move the call for `effect` outside of the reactive context.
 
 A good place to schedule an effect is in a `@Component`'s class constructor.
 
 #### `toSignal`
+
 Move the call for `toSignal` outside of the reactive context.
 
 ```typescript
diff --git a/adev-es/src/content/reference/errors/NG0750.md b/adev-es/src/content/reference/errors/NG0750.md
index 0fff345..a398929 100644
--- a/adev-es/src/content/reference/errors/NG0750.md
+++ b/adev-es/src/content/reference/errors/NG0750.md
@@ -3,4 +3,5 @@
 This error occurs when loading dependencies for a `@defer` block fails (typically due to poor network conditions) and no `@error` block has been configured to handle the failure state. Having no `@error` block in this scenario may create a poor user experience.
 
 ## Debugging the error
-Verify that you added `@error` blocks to your `@defer` blocks to handle failure states.
\ No newline at end of file
+
+Verify that you added `@error` blocks to your `@defer` blocks to handle failure states.
diff --git a/adev-es/src/content/reference/errors/NG0910.md b/adev-es/src/content/reference/errors/NG0910.md
index 393a4fd..8345f7c 100644
--- a/adev-es/src/content/reference/errors/NG0910.md
+++ b/adev-es/src/content/reference/errors/NG0910.md
@@ -2,12 +2,12 @@
 
 You see this error when Angular detects an attribute binding or a property binding on an `<iframe>` element using the following property names:
 
-* sandbox
-* allow
-* allowFullscreen
-* referrerPolicy
-* csp
-* fetchPriority
+- sandbox
+- allow
+- allowFullscreen
+- referrerPolicy
+- csp
+- fetchPriority
 
 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-es/src/content/reference/errors/NG0912.md b/adev-es/src/content/reference/errors/NG0912.md
index 91ecb4f..24ca46a 100644
--- a/adev-es/src/content/reference/errors/NG0912.md
+++ b/adev-es/src/content/reference/errors/NG0912.md
@@ -1,6 +1,6 @@
 # Component ID generation collision
 
-When creating components, Angular generates a unique component ID for each component. This is generated using the Angular component metadata, including but not limited:  selectors, the number of host bindings, class property names, view and content queries. When two components metadata are identical (often times sharing the same selector), an ID generation collision will occur.
+When creating components, Angular generates a unique component ID for each component. This is generated using the Angular component metadata, including but not limited: selectors, the number of host bindings, class property names, view and content queries. When two components metadata are identical (often times sharing the same selector), an ID generation collision will occur.
 
 Component IDs are used in Angular internally:
 
diff --git a/adev-es/src/content/reference/errors/NG0913.md b/adev-es/src/content/reference/errors/NG0913.md
index 00bd587..b118de4 100644
--- a/adev-es/src/content/reference/errors/NG0913.md
+++ b/adev-es/src/content/reference/errors/NG0913.md
@@ -1,23 +1,29 @@
 # Runtime Performance Warnings
 
 ### Oversized images
+
 When images are loaded, the **intrinsic size** of the downloaded file is checked against the actual size of the image on the page. The actual size is calculated using the **rendered size** of the image with CSS applied, multiplied by the [pixel device ratio](https://web.dev/codelab-density-descriptors/#pixel-density). If the downloaded image is much larger (more than 1200px too large in either dimension), this warning is triggered. Downloading oversized images can slow down page loading and have a negative effect on [Core Web Vitals](https://web.dev/vitals/).
 
 ### Lazy-loaded LCP element
+
 The largest contentful element on a page during load is considered the "LCP Element", which relates to [Largest Contentful Paint](https://web.dev/lcp/), one of the Core Web Vitals. Lazy loading an LCP element will have a strong negative effect on page performance. With this strategy, the browser has to complete layout calculations to determine whether the element is in the viewport before starting the image download. As a result, a warning is triggered when Angular detects that the LCP element has been given the `loading="lazy"` attribute.
 
 @debugging
-Use the image URL provided in the console warning to find the `<img>` element in question. 
+Use the image URL provided in the console warning to find the `<img>` element in question.
+
 ### Ways to fix oversized images
-* Use a smaller source image
-* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts. 
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.dev/guide/image-optimization#request-images-at-the-correct-size-with-automatic-srcset).
+
+- Use a smaller source image
+- Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts.
+- Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.dev/guide/image-optimization#request-images-at-the-correct-size-with-automatic-srcset).
+
 ### Ways to fix lazy-loaded LCP element
- 
-* Change the `loading` attribute to a different value such as `"eager"`.
-* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.dev/guide/image-optimization#mark-images-as-priority).
+
+- Change the `loading` attribute to a different value such as `"eager"`.
+- Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.dev/guide/image-optimization#mark-images-as-priority).
 
 ### Disabling Image Performance Warnings
+
 Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
 
 ```typescript
@@ -25,9 +31,9 @@ providers: [
   {
     provide: IMAGE_CONFIG,
     useValue: {
-      disableImageSizeWarning: true, 
+      disableImageSizeWarning: true,
       disableImageLazyLoadWarning: true
     }
   },
 ],
-```
\ No newline at end of file
+```
diff --git a/adev-es/src/content/reference/errors/NG0951.md b/adev-es/src/content/reference/errors/NG0951.md
index 3e088a8..88fa09b 100644
--- a/adev-es/src/content/reference/errors/NG0951.md
+++ b/adev-es/src/content/reference/errors/NG0951.md
@@ -3,12 +3,14 @@
 Required child query (`contentChild.required` or `viewChild.required`) result was accessed before query results were calculated or query has no matches.
 
 This can happen in two distinct situations:
-* query results were accessed before a given query could collect results;
-* a query was executed but didn't match any nodes and has no results as a consequence.
+
+- query results were accessed before a given query could collect results;
+- a query was executed but didn't match any nodes and has no results as a consequence.
 
 Content queries and view queries each calculate their results at different points in time:
-* `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
-* `viewChild` results are available after a template of a component declaring a query is created.
+
+- `contentChild` results are available after a _host_ view (template where a directive declaring a query is used) is created;
+- `viewChild` results are available after a template of a component declaring a query is created.
 
 Accessing query results before they're available results in the error described on this page. Most notably, query results are _never_ available in a constructor of the component or directive declaring a query.
 
diff --git a/adev-es/src/content/reference/errors/NG0955.md b/adev-es/src/content/reference/errors/NG0955.md
index 936c24c..c74dae0 100644
--- a/adev-es/src/content/reference/errors/NG0955.md
+++ b/adev-es/src/content/reference/errors/NG0955.md
@@ -11,7 +11,7 @@ class TestComponent {
 }
 ```
 
-In the provided example the `item.key` tracking expression will find two duplicate keys `a` (at index 0 and 2). 
+In the provided example the `item.key` tracking expression will find two duplicate keys `a` (at index 0 and 2).
 
 Duplicate keys are problematic from the correctness point of view: since the `@for` loop can't uniquely identify items it might choose DOM nodes corresponding to _another_ item (with the same key) when performing DOM moves or destroy.
 
diff --git a/adev-es/src/content/reference/errors/NG0956.md b/adev-es/src/content/reference/errors/NG0956.md
index d57179d..3d1faad 100644
--- a/adev-es/src/content/reference/errors/NG0956.md
+++ b/adev-es/src/content/reference/errors/NG0956.md
@@ -25,7 +25,7 @@ export class App {
 }
 ```
 
-In the provided example, the entire list with all the views (DOM nodes, Angular directives, components, queries, etc.) are re-created (!) after toggling the "done" status of items. Here, a relatively inexpensive binding update to the `done` property would suffice. 
+In the provided example, the entire list with all the views (DOM nodes, Angular directives, components, queries, etc.) are re-created (!) after toggling the "done" status of items. Here, a relatively inexpensive binding update to the `done` property would suffice.
 
 Apart from having a high performance penalty, re-creating the DOM tree results in loss of state in the DOM elements (ex.: focus, text selection, sites loaded in an iframe, etc.).
 
diff --git a/adev-es/src/content/reference/errors/NG1001.md b/adev-es/src/content/reference/errors/NG1001.md
index 000138c..8ef38d6 100644
--- a/adev-es/src/content/reference/errors/NG1001.md
+++ b/adev-es/src/content/reference/errors/NG1001.md
@@ -9,24 +9,23 @@ Ivy requires this approach because it compiles decorators by moving the expressi
 
 Move all declarations:
 
-<docs-code language="typescript">
-
+```ts
 const moduleDefinition = {…}
 
 @NgModule(moduleDefinition)
 export class AppModule {
-    constructor() {}
+  constructor() {}
 }
 
-</docs-code>
+```
 
 into the decorator:
 
-<docs-code language="typescript">
+```ts
 
 @NgModule({…})
 export class AppModule {
-    constructor() {}
+  constructor() {}
 }
 
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/errors/NG2009.md b/adev-es/src/content/reference/errors/NG2009.md
index 85f7545..68ff806 100644
--- a/adev-es/src/content/reference/errors/NG2009.md
+++ b/adev-es/src/content/reference/errors/NG2009.md
@@ -4,9 +4,9 @@ The selector of a component using `ViewEncapsulation.ShadowDom` doesn't match th
 
 In order for a tag name to be considered a valid custom element name, it has to:
 
-* Be in lower case.
-* Contain a hyphen.
-* Start with a letter \(a-z\).
+- Be in lower case.
+- Contain a hyphen.
+- Start with a letter \(a-z\).
 
 ## Debugging the error
 
@@ -14,24 +14,21 @@ Rename your component's selector so that it matches the requirements.
 
 **Before:**
 
-<docs-code language="typescript">
-
+```ts
 @Component({
   selector: 'comp',
   encapsulation: ViewEncapsulation.ShadowDom
-  …
+…
 })
 
-</docs-code>
+```
 
 **After:**
 
-<docs-code language="typescript">
-
+```ts
 @Component({
   selector: 'app-comp',
   encapsulation: ViewEncapsulation.ShadowDom
-  …
+…
 })
-
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/errors/NG3003.md b/adev-es/src/content/reference/errors/NG3003.md
index 5914c57..3a1593c 100644
--- a/adev-es/src/content/reference/errors/NG3003.md
+++ b/adev-es/src/content/reference/errors/NG3003.md
@@ -8,9 +8,9 @@ import {Component} from '@angular/core';
 import {ChildComponent} from './child.component';
 
 @Component({
-  selector: 'app-parent',
-  imports: [ChildComponent],
-  template: '<app-child/>',
+selector: 'app-parent',
+imports: [ChildComponent],
+template: '<app-child/>',
 })
 export class ParentComponent {}
 </docs-code>
@@ -20,11 +20,11 @@ import {Component, inject} from '@angular/core';
 import {ParentComponent} from './parent.component';
 
 @Component({
-  selector: 'app-child',
-  template: 'The child!',
+selector: 'app-child',
+template: 'The child!',
 })
 export class ChildComponent {
-  private parent = inject(ParentComponent);
+private parent = inject(ParentComponent);
 }
 </docs-code>
 
@@ -66,7 +66,7 @@ The component ChildComponent is used in the template but importing it would crea
 Use this to identify how the referenced component, pipe, or directive has a dependency back to the component being compiled.
 Here are some ideas for fixing the problem:
 
-* Try to rearrange your dependencies to avoid the cycle.
+- Try to rearrange your dependencies to avoid the cycle.
   For example, using an intermediate interface that is stored in an independent file that can be imported to both dependent files without causing an import cycle.
-* Move the classes that reference each other into the same file, to avoid any imports between them.
-* Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
+- Move the classes that reference each other into the same file, to avoid any imports between them.
+- Convert import statements to type-only imports \(using `import type` syntax\) if the imported declarations are only used as types, as type-only imports do not contribute to cycles.
diff --git a/adev-es/src/content/reference/errors/NG8002.md b/adev-es/src/content/reference/errors/NG8002.md
index 5d083c8..8ca21a4 100644
--- a/adev-es/src/content/reference/errors/NG8002.md
+++ b/adev-es/src/content/reference/errors/NG8002.md
@@ -7,8 +7,8 @@ An attribute or property cannot be resolved during compilation.
 This error arises when attempting to bind to a property that does not exist.
 Any property binding must correspond to either:
 
-* A native property on the HTML element, or
-* An `input()`/`@Input()` property of a component or directive applied to the element.
+- A native property on the HTML element, or
+- An `input()`/`@Input()` property of a component or directive applied to the element.
 
 The runtime error for this is `NG0304: '${tagName}' is not a known element: …'`.
 
diff --git a/adev-es/src/content/reference/errors/NG8003.md b/adev-es/src/content/reference/errors/NG8003.md
index 5cf79cf..f753b62 100644
--- a/adev-es/src/content/reference/errors/NG8003.md
+++ b/adev-es/src/content/reference/errors/NG8003.md
@@ -14,16 +14,16 @@ Use the string name of the export not found to trace the templates or modules us
 Ensure that all dependencies are properly imported and declared in our Modules.
 For example, if the export not found is `ngForm`, we will need to import `FormsModule` and declare it in our list of imports in `*.module.ts` to resolve the missing export error.
 
-<docs-code language="typescript">
+```ts
 
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  …
-  imports: [
-    FormsModule,
-    …
+…
+imports: [
+FormsModule,
+…
 
-</docs-code>
+```
 
 If you recently added an import, you will need to restart your server to see these changes.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8021.md b/adev-es/src/content/reference/extended-diagnostics/NG8021.md
new file mode 100644
index 0000000..6a41db2
--- /dev/null
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8021.md
@@ -0,0 +1,179 @@
+# Defer Trigger Misconfiguration
+
+This diagnostic detects unreachable or redundant triggers in `@defer` blocks.
+
+```typescript
+
+import {Component} from '@angular/core';
+
+@Component({
+  template: `
+    @defer (on immediate; on timer(500ms)) {
+      <large-component />
+    }
+  `
+})
+class MyComponent {}
+```
+
+## What's wrong with that?
+
+The diagnostic identifies several problematic patterns in defer trigger configuration that lead to:
+
+- **Unnecessary code** that never affects behavior
+- **Missed optimization opportunities** for better performance
+- **Unreachable prefetch triggers** that will never execute
+
+## Diagnostic warning cases
+
+This diagnostic flags the following problematic patterns:
+
+### `immediate` with prefetch triggers
+
+**Bad — prefetch never runs**
+
+```typescript
+@Component({
+  template: `
+    @defer (on immediate; prefetch on idle) {
+      <my-cmp />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Good — remove redundant prefetch**
+
+```typescript
+@Component({
+  template: `
+    @defer (on immediate) {
+      <my-cmp />
+    }
+  `
+})
+class MyComponent {}
+```
+
+### Prefetch timer not earlier than main timer
+
+**Bad — prefetch is later than main**
+
+```typescript
+@Component({
+  template: `
+    @defer (on timer(100ms); prefetch on timer(3000ms)) {
+      <my-cmp />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Bad — equal timing provides no benefit**
+
+```typescript
+@Component({
+  template: `
+    @defer (on timer(500ms); prefetch on timer(500ms)) {
+      <my-cmp />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Good — prefetch fires earlier**
+
+```typescript
+@Component({
+  template: `
+    @defer (on timer(1000ms); prefetch on timer(500ms)) {
+      <large-component />
+    }
+  `
+})
+class MyComponent {}
+```
+
+### Identical prefetch and main triggers
+
+**Bad — identical viewport trigger**
+
+```typescript
+@Component({
+  template: `
+    @defer (on viewport; prefetch on viewport) {
+      <my-cmp />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Bad — identical interaction target**
+
+```typescript
+@Component({
+  template: `
+    <button #loadBtn>Load</button>
+    @defer (on interaction(loadBtn); prefetch on interaction(loadBtn)) {
+      <large-component />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Good — remove redundant prefetch**
+
+```typescript
+@Component({
+  template: `
+    <button #loadBtn>Load</button>
+    @defer (on interaction(loadBtn)) {
+      <large-component />
+    }
+  `
+})
+class MyComponent {}
+```
+
+**Good — use different targets for prefetch and main**
+
+```typescript
+@Component({
+  template: `
+    <div #hoverArea>Hover to prefetch</div>
+    <button #clickBtn>Click to load</button>
+    @defer (on interaction(clickBtn); prefetch on hover(hoverArea)) {
+      <large-component />
+    }
+  `
+})
+class MyComponent {}
+```
+
+## Configuration requirements
+
+[`strictTemplates`](tools/cli/template-typecheck#strict-mode) must be enabled for any extended diagnostic to emit.
+`deferTriggerMisconfiguration` has no additional requirements beyond `strictTemplates`.
+
+## What if I can't avoid this?
+
+This diagnostic can be disabled by editing the project's `tsconfig.json` file:
+
+```json
+{
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "deferTriggerMisconfiguration": "suppress"
+      }
+    }
+  }
+}
+```
+
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8101.md b/adev-es/src/content/reference/extended-diagnostics/NG8101.md
index fdeb062..af36e4e 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8101.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8101.md
@@ -2,11 +2,10 @@
 
 This diagnostic detects a backwards "banana-in-box" syntax for [two-way bindings](guide/templates/two-way-binding).
 
-<docs-code language="html">
+```
 
 <user-viewer ([user])="loggedInUser" />
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -19,11 +18,10 @@ Fix the typo.
 As the name suggests, the banana `(` should go _inside_ the box `[]`.
 In this case:
 
-<docs-code language="html">
+```
 
 <user-viewer [(user)]="loggedInUser" />
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -34,7 +32,8 @@ In this case:
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -44,6 +43,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8102.md b/adev-es/src/content/reference/extended-diagnostics/NG8102.md
index 8b6e34e..3a774ad 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8102.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8102.md
@@ -4,8 +4,7 @@ This diagnostic detects a useless nullish coalescing operator \(`??`\) character
 Specifically, it looks for operations where the input is not "nullable", meaning its type does not include `null` or `undefined`.
 For such values, the right side of the `??` will never be used.
 
-<docs-code language="typescript">
-
+```angular-ts
 import {Component} from '@angular/core';
 
 @Component({
@@ -14,12 +13,11 @@ import {Component} from '@angular/core';
   template: `<div>{{ username ?? 'root' }}</div>`,
 })
 class MyComponent {
-  // `username` is declared as a `string` which *cannot* be `null` or
+  // `username` is declared as a `string` which _cannot_ be `null` or
   // `undefined`.
   username: string = 'Angelino';
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -34,37 +32,37 @@ Double-check the type of the input and confirm whether it is actually expected t
 
 If the input should be nullable, add `null` or `undefined` to its type to indicate this.
 
-<docs-code language="typescript">
+```ts
 
 import {Component} from '@angular/core';
 
 @Component({
-  template: `<div>{{ username ?? 'root' }}</div>`,
+template: `<div>{{ username ?? 'root' }}</div>`,
 })
 class MyComponent {
-  // `username` is now nullable. If it is ever set to `null`, 'root' will be
-  // displayed.
-  username: string | null = 'Angelino';
+// `username` is now nullable. If it is ever set to `null`, 'root' will be
+// displayed.
+username: string | null = 'Angelino';
 }
 
-</docs-code>
+```
 
-If the input should *not* be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable.
+If the input should _not_ be nullable, delete the `??` operator and its right operand, since the value is guaranteed by TypeScript to always be non-nullable.
 
-<docs-code language="typescript">
+```ts
 
 import {Component} from '@angular/core';
 
 @Component({
-  // Template always displays `username`, which is guaranteed to never be `null`
-  // or `undefined`.
-  template: `<div>{{ username }}</div>`,
+// Template always displays `username`, which is guaranteed to never be `null`
+// or `undefined`.
+template: `<div>{{ username }}</div>`,
 })
 class MyComponent {
-  username: string = 'Angelino';
+username: string = 'Angelino';
 }
 
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -75,7 +73,8 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -85,6 +84,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8103.md b/adev-es/src/content/reference/extended-diagnostics/NG8103.md
index 0d2a96b..f03fdda 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8103.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8103.md
@@ -4,8 +4,7 @@ This diagnostics ensures that a standalone component which uses known control fl
 (such as `*ngIf`, `*ngFor`, or `*ngSwitch`) in a template, also imports those directives either
 individually or by importing the `CommonModule`.
 
-<docs-code language="typescript">
-
+```angular-ts
 import {Component} from '@angular/core';
 
 @Component({
@@ -14,8 +13,7 @@ import {Component} from '@angular/core';
   template: `<div *ngIf="visible">Hi</div>`,
 })
 class MyComponent {}
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -27,8 +25,7 @@ Make sure that a corresponding control flow directive is imported.
 
 A directive can be imported individually:
 
-<docs-code language="typescript">
-
+```angular-ts
 import {Component} from '@angular/core';
 import {NgIf} from '@angular/common';
 
@@ -37,13 +34,11 @@ import {NgIf} from '@angular/common';
   template: `<div *ngIf="visible">Hi</div>`,
 })
 class MyComponent {}
-
-</docs-code>
+```
 
 or you could import the entire `CommonModule`, which contains all control flow directives:
 
-<docs-code language="typescript">
-
+```angular-ts
 import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
@@ -52,8 +47,7 @@ import {CommonModule} from '@angular/common';
   template: `<div *ngIf="visible">Hi</div>`,
 })
 class MyComponent {}
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -64,7 +58,8 @@ class MyComponent {}
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -74,6 +69,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8104.md b/adev-es/src/content/reference/extended-diagnostics/NG8104.md
index f06c21d..e527949 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8104.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8104.md
@@ -3,11 +3,10 @@
 This diagnostic ensures that attributes which have the "special" Angular binding prefix (`attr.`, `style.`, and
 `class.`) are interpreted as bindings.
 
-<docs-code language="html">
+```html
 
 <div attr.id="my-id"></div>
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -19,13 +18,11 @@ Instead, the intent is likely to set the `id` attribute (`<div id="my-id"></div>
 
 When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular template binding syntax (`[]`).
 
-<docs-code language="html">
-
+```html
 <div [attr.id]="my-id"></div>
 <div [style.color]="red"></div>
 <div [class.large]="true"></div>
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -36,7 +33,7 @@ When binding to `attr.`, `class.`, or `style.`, ensure you use the Angular templ
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
 
 {
   "angularCompilerOptions": {
@@ -47,7 +44,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8105.md b/adev-es/src/content/reference/extended-diagnostics/NG8105.md
index 9635ba6..b5c26e8 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8105.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8105.md
@@ -2,9 +2,8 @@
 
 This diagnostic is emitted when an expression used in `*ngFor` is missing the `let` keyword.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // The `let` keyword is missing in the `*ngFor` expression.
@@ -13,8 +12,7 @@ import {Component} from '@angular/core';
 class MyComponent {
   items = [1, 2, 3];
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -24,9 +22,8 @@ A missing `let` is indicative of a syntax error in the `*ngFor` string. It also
 
 Add the missing `let` keyword.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // The `let` keyword is now present in the `*ngFor` expression,
@@ -36,8 +33,7 @@ import {Component} from '@angular/core';
 class MyComponent {
   items = [1, 2, 3];
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -48,7 +44,8 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -58,6 +55,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8106.md b/adev-es/src/content/reference/extended-diagnostics/NG8106.md
index f8f3ec2..b2deac2 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8106.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8106.md
@@ -3,11 +3,9 @@
 This diagnostic detects when the `.px`, `.%`, and `.em` suffixes are used with an attribute
 binding.
 
-<docs-code language="html">
-
+```html
 <img [attr.width.px]="5">
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -18,11 +16,9 @@ These suffixes are only available for style bindings. They do not have any meani
 Rather than using the `.px`, `.%`, or `.em` suffixes that are only supported in style bindings,
 move this to the value assignment of the binding.
 
-<docs-code language="html">
-
+```html
 <img [attr.width]="'5px'">
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -33,7 +29,8 @@ move this to the value assignment of the binding.
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -43,6 +40,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8107.md b/adev-es/src/content/reference/extended-diagnostics/NG8107.md
index 26f49da..00c34bb 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8107.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8107.md
@@ -2,20 +2,18 @@
 
 This diagnostic detects when the left side of an optional chain operation (`.?`) does not include `null` or `undefined` in its type in Angular templates.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // Print the user's name safely, even if `user` is `null` or `undefined`.
   template: `<div>User name: {{ user?.name }}</div>`,
 })
 class MyComponent {
-  // `user` is declared as an object which *cannot* be `null` or `undefined`.
+  // `user` is declared as an object which _cannot_ be `null` or `undefined`.
   user: { name: string } = { name: 'Angelino' };
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -30,9 +28,8 @@ Double-check the type of the input and confirm whether it is actually expected t
 
 If the input should be nullable, add `null` or `undefined` to its type to indicate this.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // If `user` is nullish, `name` won't be evaluated and the expression will
@@ -42,14 +39,12 @@ import {Component} from '@angular/core';
 class MyComponent {
   user: { name: string } | null = { name: 'Angelino' };
 }
-
-</docs-code>
+```
 
 If the input should not be nullable, delete the `?` operator.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // Template always displays `name` as `user` is guaranteed to never be `null`
@@ -59,8 +54,7 @@ import {Component} from '@angular/core';
 class MyComponent {
   user: { name: string } = { name: 'Angelino' };
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -71,7 +65,8 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -81,6 +76,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8108.md b/adev-es/src/content/reference/extended-diagnostics/NG8108.md
index 1fa11e1..1302d1e 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8108.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8108.md
@@ -3,9 +3,8 @@
 `ngSkipHydration` is a special attribute which indicates to Angular that a particular component should be opted-out of [hydration](guide/hydration).
 This diagnostic ensures that this attribute `ngSkipHydration` is set statically and the value is either set to `"true"` or an empty value.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `<user-viewer ngSkipHydration="hasUser" />`,
@@ -13,8 +12,7 @@ import {Component} from '@angular/core';
 class MyComponent {
   hasUser = true;
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -24,9 +22,8 @@ As a special attribute implemented by Angular, `ngSkipHydration` needs to be sta
 
 When using the `ngSkipHydration`, ensure that it's set as a static attribute (i.e. you do not use the Angular template binding syntax).
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `
@@ -35,29 +32,30 @@ import {Component} from '@angular/core';
   `,
 })
 class MyComponent {}
-
-</docs-code>
+```
 
 If a conditional is necessary, you can wrap the component in an `*ngIf`.
 
-<docs-code language="html">
+```html
 
 import {Component} from '@angular/core';
 
 @Component({
-  template: `
-    <div *ngIf="hasUser; else noUser">
-      <user-viewer ngSkipHydration />
-    </div>
+template: `
+
+<div \*ngIf="hasUser; else noUser">
+<user-viewer ngSkipHydration />
+</div>
 
     <ng-template #noUser>
       <user-viewer />
     </ng-template>
-  `,
+
+`,
 })
 class MyComponent {}
 
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -68,7 +66,8 @@ class MyComponent {}
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -78,6 +77,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8109.md b/adev-es/src/content/reference/extended-diagnostics/NG8109.md
index 2f7cd12..6ed6701 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8109.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8109.md
@@ -1,19 +1,17 @@
-# Signals must be invoked in template interpolations. 
+# Signals must be invoked in template interpolations.
 
 This diagnostic detects uninvoked signals in template interpolations.
 
-<docs-code language="typescript">
-
-import {Component, signal, Signal} from '@angular/core';
+```typescript
+import { Component, signal, Signal } from '@angular/core';
 
 @Component({
-  template: `<div>{{ mySignal }}/div>`,
+  template: `<div>{{ mySignal }}</div>`,
 })
 class MyComponent {
-    mySignal: Signal<number> = signal(0);
+  mySignal: Signal<number> = signal(0);
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -24,18 +22,16 @@ This means they are meant to be invoked when used in template interpolations to
 
 Ensure to invoke the signal when you use it within a template interpolation to render its value.
 
-<docs-code language="typescript">
-
-import {Component, signal, Signal} from '@angular/core';
+```typescript
+import { Component, signal, Signal } from '@angular/core';
 
 @Component({
-  template: `<div>{{ mySignal() }}/div>`,
+  template: `<div>{{ mySignal() }}</div>`,
 })
 class MyComponent {
-  mySignal: Signal<number> = signal(0)
+  mySignal: Signal<number> = signal(0);
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -46,7 +42,8 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -56,6 +53,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8111.md b/adev-es/src/content/reference/extended-diagnostics/NG8111.md
index 16abd97..c1f58ec 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8111.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8111.md
@@ -1,34 +1,31 @@
-# Functions should be invoked in event bindings. 
+# Functions should be invoked in event bindings.
 
 This diagnostic detects uninvoked functions in event bindings.
 
-<docs-code language="typescript">
-
-import {Component, signal, Signal} from '@angular/core';
+```typescript
+import { Component, signal, Signal } from '@angular/core';
 
 @Component({
-  template: `<button (click)="onClick">Click me</button>`,
+  template: `<button (click)="(onClick)">Click me</button>`,
 })
 class MyComponent {
   onClick() {
     console.log('clicked');
   }
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
-Functions in event bindings should be invoked when the event is triggered. 
+Functions in event bindings should be invoked when the event is triggered.
 If the function is not invoked, it will not execute when the event is triggered.
 
 ## What should I do instead?
 
 Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `<button (click)="onClick()">Click me</button>`,
@@ -38,8 +35,7 @@ class MyComponent {
     console.log('clicked');
   }
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -50,7 +46,8 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -60,6 +57,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8113.md b/adev-es/src/content/reference/extended-diagnostics/NG8113.md
index 92a50a2..0084db5 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8113.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8113.md
@@ -3,14 +3,13 @@
 This diagnostic detects cases where the `imports` array of a `@Component` contains symbols that
 aren't used within the template.
 
-<docs-code language="typescript">
-
+```typescript
 @Component({
-  imports: [UsedDirective, UnusedPipe]
+  imports: [UsedDirective, UnusedPipe],
 })
 class AwesomeCheckbox {}
 
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -20,20 +19,19 @@ The unused imports add unnecessary noise to your code and can increase your comp
 
 Delete the unused import.
 
-<docs-code language="typescript">
-
+```typescript
 @Component({
   imports: [UsedDirective]
 })
 class AwesomeCheckbox {}
-
-</docs-code>
+```
 
 ## What if I can't avoid this?
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -43,6 +41,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8114.md b/adev-es/src/content/reference/extended-diagnostics/NG8114.md
index 2afb78c..7e1bd1c 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8114.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8114.md
@@ -3,23 +3,21 @@
 This diagnostic detects cases where the nullish coalescing operator (`??`) is mixed with the logical
 or (`||`) or logical and (`&&`) operators without parentheses to disambiguate precedence.
 
-<docs-code language="typescript">
-
-import {Component, signal, Signal} from '@angular/core';
+```typescript
+import { Component, signal, Signal } from '@angular/core';
 
 @Component({
   template: `
-    <button [disabled]="hasPermission() && task()?.disabled ?? true">
+    <button [disabled]="hasPermission() && (task()?.disabled ?? true)">
       Run
     </button>
   `,
 })
 class MyComponent {
   hasPermission = input(false);
-  task = input<Task|undefined>(undefined);
+  task = input<Task | undefined>(undefined);
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -33,9 +31,8 @@ Always use parentheses to disambiguate in theses situations. If you're unsure wh
 intent of the code was but want to keep the behavior the same, place the parentheses around the `??`
 operator.
 
-<docs-code language="typescript">
-
-import {Component, signal, Signal} from '@angular/core';
+```typescript
+import { Component, signal, Signal } from '@angular/core';
 
 @Component({
   template: `
@@ -46,7 +43,6 @@ import {Component, signal, Signal} from '@angular/core';
 })
 class MyComponent {
   hasPermission = input(false);
-  task = input<Task|undefined>(undefined);
+  task = input<Task | undefined>(undefined);
 }
-
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8115.md b/adev-es/src/content/reference/extended-diagnostics/NG8115.md
index f36732e..75144b7 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8115.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8115.md
@@ -2,40 +2,40 @@
 
 This diagnostic detects when a track function is not invoked in `@for` blocks.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `@for (item of items; track trackByName) {}`,
 })
 class Items {
-  protected trackByName(item) { return item.name; }
+  protected trackByName(item) {
+    return item.name;
+  }
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
 `@for` blocks need to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed.
-When you don't invoke the function, the reconcialiation algorithm will use the function reference instead of returned value to compare items. 
+When you don't invoke the function, the reconcialiation algorithm will use the function reference instead of returned value to compare items.
 
 ## What should I do instead?
 
 Ensure to invoke the track function when you use it in a `@for` block to execute the function so the loop can uniquely identify items.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `@for (item of items; track trackByName(item)) {}`,
 })
 class Items {
-  protected trackByName(item) { return item.name; }
+  protected trackByName(item) {
+    return item.name;
+  }
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -46,7 +46,8 @@ class Items {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -56,6 +57,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8116.md b/adev-es/src/content/reference/extended-diagnostics/NG8116.md
index a95210a..4c9231f 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8116.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8116.md
@@ -2,18 +2,16 @@
 
 This diagnostic ensures that a standalone component using custom structural directives (e.g., `*select` or `*featureFlag`) in a template has the necessary imports for those directives.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   // Template uses `*select`, but no corresponding directive imported.
   imports: [],
-  template: `<p *select="let data from source">{{data}}</p>`,
+  template: `<p *select="let data from source">{{ data }}</p>`,
 })
 class MyComponent {}
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
@@ -23,19 +21,18 @@ Using a structural directive without importing it will fail at runtime, as Angul
 
 Make sure that the corresponding structural directive is imported into the component:
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
-import {SelectDirective} from 'my-directives';
+```typescript
+import { Component } from '@angular/core';
+import { SelectDirective } from 'my-directives';
 
 @Component({
   // Add `SelectDirective` to the `imports` array to make it available in the template.
   imports: [SelectDirective],
-  template: `<p *select="let data from source">{{data}}</p>`,
+  template: `<p *select="let data from source">{{ data }}</p>`,
 })
 class MyComponent {}
 
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -46,7 +43,7 @@ class MyComponent {}
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -56,6 +53,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
-See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
\ No newline at end of file
+See [extended diagnostic configuration](extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/NG8117.md b/adev-es/src/content/reference/extended-diagnostics/NG8117.md
index 72a0145..0ecf62d 100644
--- a/adev-es/src/content/reference/extended-diagnostics/NG8117.md
+++ b/adev-es/src/content/reference/extended-diagnostics/NG8117.md
@@ -1,10 +1,9 @@
-# Functions should be invoked in text interpolation. 
+# Functions should be invoked in text interpolation.
 
 This diagnostic detects uninvoked functions in text interpolation.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `{{ getValue }}`,
@@ -14,21 +13,19 @@ class MyComponent {
     return 'value';
   }
 }
-
-</docs-code>
+```
 
 ## What's wrong with that?
 
-Functions in text interpolation should be invoked to return a value. 
+Functions in text interpolation should be invoked to return a value.
 If the function is not invoked, it will not return any value and the interpolation will not work as expected.
 
 ## What should I do instead?
 
 Ensure to invoke the function when you use it in text interpolation to return the value.
 
-<docs-code language="typescript">
-
-import {Component} from '@angular/core';
+```typescript
+import { Component } from '@angular/core';
 
 @Component({
   template: `{{ getValue() }}`,
@@ -38,8 +35,7 @@ class MyComponent {
     return 'value';
   }
 }
-
-</docs-code>
+```
 
 ## Configuration requirements
 
@@ -50,7 +46,7 @@ class MyComponent {
 
 This diagnostic can be disabled by editing the project's `tsconfig.json` file:
 
-<docs-code language="json">
+```json
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
@@ -60,6 +56,6 @@ This diagnostic can be disabled by editing the project's `tsconfig.json` file:
     }
   }
 }
-</docs-code>
+```
 
 See [extended diagnostic configuration](/extended-diagnostics#configuration) for more info.
diff --git a/adev-es/src/content/reference/extended-diagnostics/overview.md b/adev-es/src/content/reference/extended-diagnostics/overview.md
index b53c73e..e966bdf 100644
--- a/adev-es/src/content/reference/extended-diagnostics/overview.md
+++ b/adev-es/src/content/reference/extended-diagnostics/overview.md
@@ -9,7 +9,7 @@ The Angular compiler includes "extended diagnostics" which identify many of thes
 Currently, Angular supports the following extended diagnostics:
 
 | Code     | Name                                                                  |
-| :------- |:----------------------------------------------------------------------|
+| :------- | :-------------------------------------------------------------------- |
 | `NG8101` | [`invalidBananaInBox`](extended-diagnostics/NG8101)                   |
 | `NG8102` | [`nullishCoalescingNotNullable`](extended-diagnostics/NG8102)         |
 | `NG8103` | [`missingControlFlowDirective`](extended-diagnostics/NG8103)          |
@@ -25,6 +25,7 @@ Currently, Angular supports the following extended diagnostics:
 | `NG8115` | [`uninvokedTrackFunction`](extended-diagnostics/NG8115)               |
 | `NG8116` | [`missingStructuralDirective`](extended-diagnostics/NG8116)           |
 | `NG8117` | [`uninvokedFunctionInTextInterpolation`](extended-diagnostics/NG8117) |
+| `NG8021` | [`deferTriggerMisconfiguration`](extended-diagnostics/NG8021)         |
 
 ## Configuration
 
@@ -39,22 +40,19 @@ Each diagnostic can be configured as either:
 
 Check severity can be configured as an [Angular compiler option](reference/configs/angular-compiler-options):
 
-<docs-code language="json">
+```json
+
 {
   "angularCompilerOptions": {
     "extendedDiagnostics": {
-      // The categories to use for specific diagnostics.
       "checks": {
-        // Maps check name to its category.
         "invalidBananaInBox": "suppress"
       },
-
-      // The category to use for any diagnostics not listed in `checks` above.
       "defaultCategory": "error"
     }
   }
 }
-</docs-code>
+```
 
 The `checks` field maps the name of individual diagnostics to their associated category.
 See [Diagnostics](#diagnostics) for a complete list of extended diagnostics and the name to use for configuring them.
diff --git a/adev-es/src/content/reference/migrations/cleanup-unused-imports.md b/adev-es/src/content/reference/migrations/cleanup-unused-imports.md
index 3191aca..1f710af 100644
--- a/adev-es/src/content/reference/migrations/cleanup-unused-imports.md
+++ b/adev-es/src/content/reference/migrations/cleanup-unused-imports.md
@@ -6,33 +6,31 @@ Running this schematic will clean up all unused imports within the project.
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:cleanup-unused-imports
-
-</docs-code>
+```
 
 #### Before
 
-<docs-code language="typescript">
-import { Component } from '@angular/core';
-import { UnusedDirective } from './unused';
+```angular-ts
+import {Component} from '@angular/core';
+import {UnusedDirective} from './unused';
 
 @Component({
   template: 'Hello',
   imports: [UnusedDirective],
 })
 export class MyComp {}
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
-import { Component } from '@angular/core';
+```angular-ts
+import {Component} from '@angular/core';
 
 @Component({
   template: 'Hello',
   imports: [],
 })
 export class MyComp {}
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/migrations/common-to-standalone.md b/adev-es/src/content/reference/migrations/common-to-standalone.md
new file mode 100644
index 0000000..f0f59b0
--- /dev/null
+++ b/adev-es/src/content/reference/migrations/common-to-standalone.md
@@ -0,0 +1,59 @@
+# Convert CommonModule usage to standalone imports
+
+This migration helps projects remove imports of the `CommonModule` inside components by adding the minimal set of directive and pipe imports each template requires (for example, `NgIf`, `NgFor`, `AsyncPipe`, etc.).
+
+Run the schematic using the following command:
+
+```shell
+ng generate @angular/core:common-to-standalone
+```
+
+## Options
+
+| Option | Details                                                                                                                       |
+| :----- | :---------------------------------------------------------------------------------------------------------------------------- |
+| `path` | The path (relative to project root) to migrate. Defaults to `./`. Use this to incrementally migrate a subset of your project. |
+
+## Example
+
+Before:
+
+```angular-ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-example',
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="show">
+      {{ data | async | json }}
+    </div>
+  `
+})
+export class ExampleComponent {
+  show = true;
+  data = Promise.resolve({ message: 'Hello' });
+}
+```
+
+After running the migration (component imports added, CommonModule removed):
+
+```angular-ts
+import { Component } from '@angular/core';
+import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
+
+@Component({
+  selector: 'app-example',
+  imports: [AsyncPipe, JsonPipe, NgIf],
+  template: `
+    <div *ngIf="show">
+      {{ data | async | json }}
+    </div>
+  `
+})
+export class ExampleComponent {
+  show = true;
+  data = Promise.resolve({ message: 'Hello' });
+}
+```
diff --git a/adev-es/src/content/reference/migrations/control-flow.md b/adev-es/src/content/reference/migrations/control-flow.md
index d1622fb..58ef83b 100644
--- a/adev-es/src/content/reference/migrations/control-flow.md
+++ b/adev-es/src/content/reference/migrations/control-flow.md
@@ -6,8 +6,6 @@ This schematic migrates all existing code in your application to use new Control
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:control-flow
-
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/migrations/inject-function.md b/adev-es/src/content/reference/migrations/inject-function.md
index ba00a34..357b2a9 100644
--- a/adev-es/src/content/reference/migrations/inject-function.md
+++ b/adev-es/src/content/reference/migrations/inject-function.md
@@ -6,15 +6,13 @@ This schematic converts constructor-based injection in your classes to use the `
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:inject
-
-</docs-code>
+```
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component, Inject, Optional } from '@angular/core';
 import { MyService } from './service';
 import { DI_TOKEN } from './token';
@@ -23,13 +21,14 @@ import { DI_TOKEN } from './token';
 export class MyComp {
   constructor(
     private service: MyService,
-    @Inject(DI_TOKEN) @Optional() readonly token: string) {}
+    @Inject(DI_TOKEN) @Optional() readonly token: string
+  ) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component, inject } from '@angular/core';
 import { MyService } from './service';
 import { DI_TOKEN } from './token';
@@ -39,7 +38,7 @@ export class MyComp {
   private service = inject(MyService);
   readonly token = inject(DI_TOKEN, { optional: true });
 }
-</docs-code>
+```
 
 ## Migration options
 
@@ -67,7 +66,7 @@ additional constructor signature to keep it backwards compatible, at the expense
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component } from '@angular/core';
 import { MyService } from './service';
 
@@ -75,24 +74,24 @@ import { MyService } from './service';
 export class MyComp {
   constructor(private service: MyService) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component } from '@angular/core';
 import { MyService } from './service';
 
 @Component()
 export class MyComp {
-  private service = inject(MyService);
+private service = inject(MyService);
 
-  /** Inserted by Angular inject() migration for backwards compatibility */
-  constructor(...args: unknown[]);
+/\*_ Inserted by Angular inject() migration for backwards compatibility _/
+constructor(...args: unknown[]);
 
-  constructor() {}
+constructor() {}
 }
-</docs-code>
+```
 
 ### `nonNullableOptional`
 
@@ -108,7 +107,7 @@ because the code that depends on them likely already accounts for their nullabil
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component, Inject, Optional } from '@angular/core';
 import { TOKEN_ONE, TOKEN_TWO } from './token';
 
@@ -116,13 +115,14 @@ import { TOKEN_ONE, TOKEN_TWO } from './token';
 export class MyComp {
   constructor(
     @Inject(TOKEN_ONE) @Optional() private tokenOne: number,
-    @Inject(TOKEN_TWO) @Optional() private tokenTwo: string | null) {}
+    @Inject(TOKEN_TWO) @Optional() private tokenTwo: string | null
+  ) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component, inject } from '@angular/core';
 import { TOKEN_ONE, TOKEN_TWO } from './token';
 
@@ -134,4 +134,4 @@ export class MyComp {
   // Does not have `!` at the end, because the type was already nullable.
   private tokenTwo = inject(TOKEN_TWO, { optional: true });
 }
-</docs-code>
+```
diff --git a/adev-es/src/content/reference/migrations/ngclass-to-class.md b/adev-es/src/content/reference/migrations/ngclass-to-class.md
new file mode 100644
index 0000000..df282a8
--- /dev/null
+++ b/adev-es/src/content/reference/migrations/ngclass-to-class.md
@@ -0,0 +1,41 @@
+# Migration from NgClass to class bindings
+
+This schematic migrates NgClass directive usages to class bindings in your application.
+It will only migrate usages that are considered safe to migrate.
+
+Run the schematic using the following command:
+
+```bash
+ng generate @angular/core:ngclass-to-class
+```
+
+#### Before
+
+```html
+<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">
+```
+
+#### After
+
+```html
+<div [class]="{admin: isAdmin, dense: density === 'high'}">
+```
+
+## Configuration options
+
+The migration supports a few options for fine tuning the migration to your specific needs.
+
+### `--migrate-space-separated-key`
+
+By default, the migration avoids migrating usages of `NgClass` in which object literal keys contain space-separated class names.
+When the --migrate-space-separated-key flag is enabled, a binding is created for each individual key.
+
+```html
+<div [ngClass]="{'class1 class2': condition}"></div>
+```
+
+to
+
+```html
+<div [class.class1]="condition" [class.class2]="condition"></div>
+```
diff --git a/adev-es/src/content/reference/migrations/ngstyle-to-style.md b/adev-es/src/content/reference/migrations/ngstyle-to-style.md
new file mode 100644
index 0000000..223055a
--- /dev/null
+++ b/adev-es/src/content/reference/migrations/ngstyle-to-style.md
@@ -0,0 +1,42 @@
+# Migration from NgStyle to style bindings
+
+This schematic migrates NgStyle directive usages to style bindings in your application.
+It will only migrate usages that are considered safe to migrate.
+
+Run the schematic using the following command:
+
+```bash
+ng generate @angular/core:ngstyle-to-style
+```
+
+#### Before
+
+```html
+<div [ngStyle]="{'background-color': 'red'}">
+```
+
+#### After
+
+```html
+<div [style]="{'background-color': 'red'}">
+```
+
+## Configuration options
+
+The migration supports a few options for fine tuning the migration to your specific needs.
+
+### `--best-effort-mode`
+
+By default, the migration avoids migrating object references usages of `NgStyle`
+When the `--best-effort-mode` flag is enabled, `ngStyle` instances binded to object references are also migrated.
+This can be unsafe to migrate, for example if the binded object is mutated.
+
+```html
+<div [ngStyle]="styleObject"></div>
+```
+
+to
+
+```html
+<div [style]="styleObject"></div>
+```
diff --git a/adev-es/src/content/reference/migrations/overview.md b/adev-es/src/content/reference/migrations/overview.md
index 847cc99..026e27d 100644
--- a/adev-es/src/content/reference/migrations/overview.md
+++ b/adev-es/src/content/reference/migrations/overview.md
@@ -30,4 +30,16 @@ Learn about how you can migrate your existing angular project to the latest feat
   <docs-card title="Self-closing tags" link="Migrate now" href="reference/migrations/self-closing-tags">
     Convert component templates to use self-closing tags where possible.
   </docs-card>
+  <docs-card title="NgClass to Class Bindings" link="Migrate now" href="reference/migrations/ngclass-to-class">
+      Convert component templates to prefer class bindings over the `NgClass` directives when possible.
+  </docs-card>
+  <docs-card title="NgStyle to Style Bindings" link="Migrate now" href="reference/migrations/ngstyle-to-style">
+      Convert component templates to prefer style bindings over the `NgStyle` directives when possible.
+  </docs-card>
+  <docs-card title="RouterTestingModule migration" link="Migrate now" href="reference/migrations/router-testing-module-migration">
+    Convert `RouterTestingModule` usages to `RouterModule` in TestBed configurations and add `provideLocationMocks()` when appropriate.
+  </docs-card>
+  <docs-card title="CommonModule to standalone imports" link="Migrate now" href="reference/migrations/common-to-standalone">
+    Replace imports of the `CommonModule` with imports of the individual directives and pipes used in the templates when possible.
+  </docs-card>
 </docs-card-container>
diff --git a/adev-es/src/content/reference/migrations/route-lazy-loading.md b/adev-es/src/content/reference/migrations/route-lazy-loading.md
index 0aecc0f..66db020 100644
--- a/adev-es/src/content/reference/migrations/route-lazy-loading.md
+++ b/adev-es/src/content/reference/migrations/route-lazy-loading.md
@@ -4,21 +4,17 @@ This schematic helps developers to convert eagerly loaded component routes to la
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:route-lazy-loading
-
-</docs-code>
+```
 
 ### `path` config option
 
 By default, migration will go over the entire application. If you want to apply this migration to a subset of the files, you can pass the path argument as shown below:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:route-lazy-loading --path src/app/sub-component
-
-</docs-code>
+```
 
 The value of the path parameter is a relative path within the project.
 
@@ -36,9 +32,9 @@ The migration will check all the components in the routes, check if they are sta
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 // app.module.ts
-import { HomeComponent } from './home/home.component';
+import {HomeComponent} from './home/home.component';
 
 @NgModule({
   imports: [
@@ -52,11 +48,11 @@ import { HomeComponent } from './home/home.component';
   ],
 })
 export class AppModule {}
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 // app.module.ts
 @NgModule({
   imports: [
@@ -70,6 +66,6 @@ export class AppModule {}
   ],
 })
 export class AppModule {}
-</docs-code>
+```
 
 This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone and run this migration again. You can use an existing migration ([see](reference/migrations/standalone)) to convert those components to standalone.
diff --git a/adev-es/src/content/reference/migrations/router-testing-module-migration.md b/adev-es/src/content/reference/migrations/router-testing-module-migration.md
new file mode 100644
index 0000000..4cf969e
--- /dev/null
+++ b/adev-es/src/content/reference/migrations/router-testing-module-migration.md
@@ -0,0 +1,103 @@
+# RouterTestingModule migration
+
+This schematic migrates usages of `RouterTestingModule` inside tests to `RouterModule`.
+
+When a test imports `SpyLocation` from `@angular/common/testing` and uses `urlChanges` property , the schematic will also add `provideLocationMocks()` to preserve the original behavior.
+
+Run the schematic with:
+
+```shell
+ng generate @angular/core:router-testing-module-migration
+```
+
+## Options
+
+| Option | Details                                                                                                                       |
+| :----- | :---------------------------------------------------------------------------------------------------------------------------- |
+| `path` | The path (relative to project root) to migrate. Defaults to `./`. Use this to incrementally migrate a subset of your project. |
+
+## Examples
+
+### Preserve router options
+
+Before:
+
+```ts
+import { RouterTestingModule } from '@angular/router/testing';
+import { SpyLocation } from '@angular/common/testing';
+
+describe('test', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+       imports: [RouterTestingModule.withRoutes(routes, { initialNavigation: 'enabledBlocking' })]
+    });
+  });
+
+});
+```
+
+After:
+
+```ts
+import { RouterModule } from '@angular/router';
+import { SpyLocation } from '@angular/common/testing';
+
+describe('test', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+       imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' })]
+    });
+  });
+
+});
+```
+
+### Add provideLocationMocks when `SpyLocation` is imported and `urlChanges` is used
+
+Before:
+
+```ts
+import { RouterTestingModule } from '@angular/router/testing';
+import { SpyLocation } from '@angular/common/testing';
+
+describe('test', () => {
+  let spy : SpyLocation;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule]
+    });
+    spy = TestBed.inject(SpyLocation);
+  });
+
+  it('Awesome test', () => {
+    expect(spy.urlChanges).toBeDefined()
+  })
+});
+```
+
+After:
+
+```ts
+import { RouterModule } from '@angular/router';
+import { provideLocationMocks } from '@angular/common/testing';
+import { SpyLocation } from '@angular/common/testing';
+
+describe('test', () => {
+  let spy : SpyLocation;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterModule],
+      providers: [provideLocationMocks()]
+    });
+    spy = TestBed.inject(SpyLocation);
+  });
+
+  it('Awesome test', () => {
+    expect(spy.urlChanges).toBeDefined()
+  })
+});
+```
diff --git a/adev-es/src/content/reference/migrations/self-closing-tags.md b/adev-es/src/content/reference/migrations/self-closing-tags.md
index d8a1030..255a5d3 100644
--- a/adev-es/src/content/reference/migrations/self-closing-tags.md
+++ b/adev-es/src/content/reference/migrations/self-closing-tags.md
@@ -6,21 +6,22 @@ This schematic migrates the templates in your application to use self-closing ta
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:self-closing-tag
-
-</docs-code>
-
+```
 
 #### Before
 
 <docs-code language="angular-html">
 
-<!-- Before -->
 <hello-world></hello-world>
 
-<!-- After -->
+</docs-code>
+
+#### After
+
+<docs-code language="angular-html">
+
 <hello-world />
 
 </docs-code>
diff --git a/adev-es/src/content/reference/migrations/signal-inputs.md b/adev-es/src/content/reference/migrations/signal-inputs.md
index f94d24a..c92d329 100644
--- a/adev-es/src/content/reference/migrations/signal-inputs.md
+++ b/adev-es/src/content/reference/migrations/signal-inputs.md
@@ -49,18 +49,18 @@ export class MyComponent {
 import {Component, input} from '@angular/core';
 
 @Component({
-  template: `Name: {{name() ?? ''}}`
+template: `Name: {{name() ?? ''}}`
 })
 export class MyComponent {
-  readonly name = input<string>();
+readonly name = input<string>();
 
-  someMethod(): number {
-    const name = this.name();
-    if (name) {
-      return name.length;
-    }
-    return -1;
-  }
+someMethod(): number {
+const name = this.name();
+if (name) {
+return name.length;
+}
+return -1;
+}
 }
 </docs-code>
 
@@ -103,7 +103,7 @@ references outside this directory are silently skipped, potentially breaking you
 
 ## VSCode extension
 
-![Screenshot of the VSCode extension and clicking on an `@Input` field](assets/images/migrations/signal-inputs-vscode.png "Screenshot of the VSCode extension and clicking on an `@Input` field.")
+![Screenshot of the VSCode extension and clicking on an `@Input` field](assets/images/migrations/signal-inputs-vscode.png 'Screenshot of the VSCode extension and clicking on an `@Input` field.')
 
 The migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
 
diff --git a/adev-es/src/content/reference/migrations/signal-queries.md b/adev-es/src/content/reference/migrations/signal-queries.md
index d6e3d9b..df500eb 100644
--- a/adev-es/src/content/reference/migrations/signal-queries.md
+++ b/adev-es/src/content/reference/migrations/signal-queries.md
@@ -102,7 +102,7 @@ references outside this directory are silently skipped, potentially breaking you
 
 ## VSCode extension
 
-![Screenshot of the VSCode extension and clicking on an `@ViewChild` field](assets/images/migrations/signal-queries-vscode.png "Screenshot of the VSCode extension and clicking on an `@ViewChild` field.")
+![Screenshot of the VSCode extension and clicking on an `@ViewChild` field](assets/images/migrations/signal-queries-vscode.png 'Screenshot of the VSCode extension and clicking on an `@ViewChild` field.')
 
 The migration is available as a [code refactor action](https://code.visualstudio.com/docs/typescript/typescript-refactoring#_refactoring) in VSCode.
 
diff --git a/adev-es/src/content/reference/migrations/standalone.md b/adev-es/src/content/reference/migrations/standalone.md
index 4f24ef8..31d65bf 100644
--- a/adev-es/src/content/reference/migrations/standalone.md
+++ b/adev-es/src/content/reference/migrations/standalone.md
@@ -8,11 +8,9 @@ This schematic helps to transform components, directive and pipes in existing pr
 
 Run the schematic using the following command:
 
-<docs-code language="shell">
-
+```shell
 ng generate @angular/core:standalone
-
-</docs-code>
+```
 
 ## Before updating
 
@@ -24,10 +22,10 @@ Before using the schematic, please ensure that the project:
 
 ## Schematic options
 
-| Option              | Details                                                    |
-|:---                 |:---                                                        |
-| `mode`              | The transformation to perform. See [Migration modes](#migration-modes) below for details on the available options. |
-| `path`              | The path to migrate, relative to the project root. You can use this option to migrate sections of your project incrementally. |
+| Option | Details                                                                                                                       |
+| :----- | :---------------------------------------------------------------------------------------------------------------------------- |
+| `mode` | The transformation to perform. See [Migration modes](#migration-modes) below for details on the available options.            |
+| `path` | The path to migrate, relative to the project root. You can use this option to migrate sections of your project incrementally. |
 
 ## Migrations steps
 
@@ -47,10 +45,10 @@ Run the migration in the order listed below, verifying that your code builds and
 
 Congratulations, your application has been converted to standalone 🎉. These are some optional follow-up steps you may want to take now:
 
-* Find and remove any remaining `NgModule` declarations: since the ["Remove unnecessary NgModules" step](#remove-unnecessary-ngmodules) cannot remove all modules automatically, you may have to remove the remaining declarations manually.
-* Run the project's unit tests and fix any failures.
-* Run any code formatters, if the project uses automatic formatting.
-* Run any linters in your project and fix new warnings. Some linters support a `--fix` flag that may resolve some of your warnings automatically.
+- Find and remove any remaining `NgModule` declarations: since the ["Remove unnecessary NgModules" step](#remove-unnecessary-ngmodules) cannot remove all modules automatically, you may have to remove the remaining declarations manually.
+- Run the project's unit tests and fix any failures.
+- Run any code formatters, if the project uses automatic formatting.
+- Run any linters in your project and fix new warnings. Some linters support a `--fix` flag that may resolve some of your warnings automatically.
 
 ## Migration modes
 
@@ -59,7 +57,7 @@ The migration has the following modes:
 1. Convert declarations to standalone.
 2. Remove unnecessary NgModules.
 3. Switch to standalone bootstrapping API.
-You should run these migrations in the order given.
+   You should run these migrations in the order given.
 
 ### Convert declarations to standalone
 
@@ -124,11 +122,11 @@ After converting all declarations to standalone, many NgModules can be safely re
 
 The migration considers a module safe to remove if that module:
 
-* Has no `declarations`.
-* Has no `providers`.
-* Has no `bootstrap` components.
-* Has no `imports` that reference a `ModuleWithProviders` symbol or a module that can't be removed.
-* Has no class members. Empty constructors are ignored.
+- Has no `declarations`.
+- Has no `providers`.
+- Has no `bootstrap` components.
+- Has no `imports` that reference a `ModuleWithProviders` symbol or a module that can't be removed.
+- Has no class members. Empty constructors are ignored.
 
 **Before:**
 
@@ -150,7 +148,7 @@ export class ImporterModule {}
 
 ### Switch to standalone bootstrapping API
 
-This step converts any usages of  `bootstrapModule` to the new, standalone-based `bootstrapApplication`. It also removes `standalone: false` from the root component and deletes the root NgModule. If the root module has any `providers` or `imports`, the migration attempts to copy as much of this configuration as possible into the new bootstrap call.
+This step converts any usages of `bootstrapModule` to the new, standalone-based `bootstrapApplication`. It also removes `standalone: false` from the root component and deletes the root NgModule. If the root module has any `providers` or `imports`, the migration attempts to copy as much of this configuration as possible into the new bootstrap call.
 
 **Before:**
 
@@ -212,13 +210,13 @@ bootstrapApplication(AppComponent).catch(e => console.error(e));
 
 Some common problems that may prevent the schematic from working correctly include:
 
-* Compilation errors - if the project has compilation errors, Angular cannot analyze and migrate it correctly.
-* Files not included in a tsconfig - the schematic determines which files to migrate by analyzing your project's `tsconfig.json` files. The schematic excludes any files not captured by a tsconfig.
-* Code that cannot be statically analyzed - the schematic uses static analysis to understand your code and determine where to make changes. The migration may skip any classes with metadata that cannot be statically analyzed at build time.
+- Compilation errors - if the project has compilation errors, Angular cannot analyze and migrate it correctly.
+- Files not included in a tsconfig - the schematic determines which files to migrate by analyzing your project's `tsconfig.json` files. The schematic excludes any files not captured by a tsconfig.
+- Code that cannot be statically analyzed - the schematic uses static analysis to understand your code and determine where to make changes. The migration may skip any classes with metadata that cannot be statically analyzed at build time.
 
 ## Limitations
 
 Due to the size and complexity of the migration, there are some cases that the schematic cannot handle:
 
-* Because unit tests are not ahead-of-time (AoT) compiled, `imports` added to components in unit tests might not be entirely correct.
-* The schematic relies on direct calls to Angular APIs. The schematic cannot recognize custom wrappers around Angular APIs. For example, if there you define a custom `customConfigureTestModule` function that wraps `TestBed.configureTestingModule`, components it declares may not be recognized.
+- Because unit tests are not ahead-of-time (AoT) compiled, `imports` added to components in unit tests might not be entirely correct.
+- The schematic relies on direct calls to Angular APIs. The schematic cannot recognize custom wrappers around Angular APIs. For example, if there you define a custom `customConfigureTestModule` function that wraps `TestBed.configureTestingModule`, components it declares may not be recognized.
diff --git a/adev-es/src/content/reference/press-kit.md b/adev-es/src/content/reference/press-kit.md
index 17107f9..da70fcc 100644
--- a/adev-es/src/content/reference/press-kit.md
+++ b/adev-es/src/content/reference/press-kit.md
@@ -36,14 +36,14 @@ If you have any questions on adapting the new logo, or updating your own, please
 Lean into the shape of Angular’s new logo by changing the logo colors to match your brand colors, flag, cause, etc.
 
 In this example, we’ve adapted the colors to create an Angular Pride logo variation:
-![Angular pride logo](assets/images/press-kit/angular_pride.png#small "Angular pride logo")
+![Angular pride logo](assets/images/press-kit/angular_pride.png#small 'Angular pride logo')
 </docs-step>
 
 <docs-step title="Adapt the logo shape as your own">
 Lean into the shape of Angular’s new logo by adapting the shield to match your own brand.
 
 In this example, we’ve adapted the shield to create an Angular Signals logo variation:
-![Angular Signals logo](assets/images/press-kit/angular_signals.png#medium "Angular Signals logo")
+![Angular Signals logo](assets/images/press-kit/angular_signals.png#medium 'Angular Signals logo')
 </docs-step>
 
 <docs-step title="Do’s and don’ts of using Angular's brand">
diff --git a/adev-es/src/content/reference/releases.md b/adev-es/src/content/reference/releases.md
index 1b704f7..e8eef84 100644
--- a/adev-es/src/content/reference/releases.md
+++ b/adev-es/src/content/reference/releases.md
@@ -11,29 +11,29 @@ This document contains the practices that we follow to provide you with a leadin
 We strive to ensure that future changes are always introduced in a predictable way.
 We want everyone who depends on Angular to know when and how new features are added, and to be well-prepared when obsolete ones are removed.
 
-Sometimes *breaking changes*, such as the removal of APIs or features, are necessary to innovate and stay current with evolving best practices, changing dependencies, or shifts in the web platform. These breaking changes go through a deprecation process explained in our [deprecation policy](#deprecation-policy).
+Sometimes _breaking changes_, such as the removal of APIs or features, are necessary to innovate and stay current with evolving best practices, changing dependencies, or shifts in the web platform. These breaking changes go through a deprecation process explained in our [deprecation policy](#deprecation-policy).
 
 To make these transitions as straightforward as possible, the Angular team makes these commitments:
 
-* We work hard to minimize the number of breaking changes and to provide migration tools when possible
-* We follow the deprecation policy described here, so you have time to update your applications to the latest APIs and best practices
+- We work hard to minimize the number of breaking changes and to provide migration tools when possible
+- We follow the deprecation policy described here, so you have time to update your applications to the latest APIs and best practices
 
 HELPFUL: The practices described in this document apply to Angular 2.0 and later.
-If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade "Upgrading from Angular JS").
-*AngularJS* is the name for all v1.x versions of Angular.
+If you are currently using AngularJS, see [Upgrading from AngularJS](https://angular.io/guide/upgrade 'Upgrading from Angular JS').
+_AngularJS_ is the name for all v1.x versions of Angular.
 
 ## Angular versioning
 
 Angular version numbers indicate the level of changes that are introduced by the release.
-This use of [semantic versioning](https://semver.org/ "Semantic Versioning Specification") helps you understand the potential impact of updating to a new version.
+This use of [semantic versioning](https://semver.org/ 'Semantic Versioning Specification') helps you understand the potential impact of updating to a new version.
 
 Angular version numbers have three parts: `major.minor.patch`.
 For example, version 7.2.11 indicates major version 7, minor version 2, and patch level 11.
 
 The version number is incremented based on the level of change included in the release.
 
-| Level of change | Details |
-|:---             |:---     |
+| Level of change | Details                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Major release   | Contains significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you might need to run update scripts, refactor code, run additional tests, and learn new APIs.                                                                                                                                                                                      |
 | Minor release   | Contains new smaller features. Minor releases are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your applications and libraries to begin using new APIs, features, and capabilities that were added in the release. We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies. |
 | Patch release   | Low risk, bug fix release. No developer assistance is expected during update.                                                                                                                                                                                                                                                                                                                                                     |
@@ -45,9 +45,9 @@ This means that in order to use the CLI as you develop an Angular app, the versi
 
 We let you preview what's coming by providing "Next" and Release Candidates \(`rc`\) pre-releases for each major and minor release:
 
-| Pre-release type  | Details |
-|:---               |:---     |
-| Next              | The release that is under active development and testing. The next release is indicated by a release tag appended with the `-next` identifier, such as  `8.1.0-next.0`.      |
+| Pre-release type  | Details                                                                                                                                                                      |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Next              | The release that is under active development and testing. The next release is indicated by a release tag appended with the `-next` identifier, such as `8.1.0-next.0`.       |
 | Release candidate | A release that is feature complete and in final testing. A release candidate is indicated by a release tag appended with the `-rc` identifier, such as version `8.1.0-rc.0`. |
 
 The latest `next` or `rc` pre-release version of the documentation is available at [next.angular.dev](https://next.angular.dev).
@@ -60,9 +60,9 @@ 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 patch release and pre-release \(`next` or `rc`\) build almost every week
+- A major release every 6 months
+- 1-3 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.
 
@@ -72,18 +72,22 @@ HELPFUL: Approximate dates are offered as general guidance and are subject to ch
 
 ### Release schedule
 
+Release schedule for upcoming versions is TBA.
+
+<!--
 | Version | Date               |
-|:--------|:-------------------|
-| v20.1   | Week of 2025-07-07 |
-| v20.2   | Week of 2025-08-18 |
-| v21.0   | Week of 2025-11-17 |
+| :------ | :----------------- |
+| v21.1   | Week of TBD |
+| v21.2   | Week of TBD |
+| v22.0   | Week of TBD |
+-->
 
 ### Support window
 
 All major releases are typically supported for 18 months.
 
-| Support stage     | Support Timing | Details |
-|:---               |:---            |:---     |
+| Support stage     | Support Timing | Details                                                             |
+| :---------------- | :------------- | :------------------------------------------------------------------ |
 | Active            | 6 months       | Regularly-scheduled updates and patches are released                |
 | Long-term \(LTS\) | 12 months      | Only [critical fixes and security patches](#lts-fixes) are released |
 
@@ -92,43 +96,43 @@ All major releases are typically supported for 18 months.
 The following table provides the status for Angular versions under support.
 
 | Version | Status | Released   | Active ends | LTS ends   |
-|:--------|:-------|:-----------|:------------|:-----------|
-| ^20.0.0 | Active | 2025-05-28 | 2025-11-21  | 2026-11-21 |
+| :------ | :----- | :--------- | :---------- | :--------- |
+| ^21.0.0 | Active | 2025-11-19 | 2026-05-19  | 2027-05-19 |
+| ^20.0.0 | LTS    | 2025-05-28 | 2025-11-19  | 2026-11-28 |
 | ^19.0.0 | LTS    | 2024-11-19 | 2025-05-28  | 2026-05-19 |
-| ^18.0.0 | LTS    | 2024-05-22 | 2024-11-19  | 2025-11-21 |
 
-Angular versions v2 to v17 are no longer supported.
+Angular versions v2 to v18 are no longer supported.
 
 ### LTS fixes
 
 As a general rule, a fix is considered for an LTS version if it resolves one of:
 
-* A newly identified security vulnerability,
-* A regression, since the start of LTS, caused by a 3rd party change, such as a new browser version.
+- A newly identified security vulnerability,
+- A regression, since the start of LTS, caused by a 3rd party change, such as a new browser version.
 
 ## 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 two major versions (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=deprecated) 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. |
-| 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.                                               |
+| 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.        |
+| 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
 
 Angular is a collection of many packages, subprojects, and tools.
 To prevent accidental use of private APIs and so that you can clearly understand what is covered by the practices described here — we document what is and is not considered our public API surface.
-For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/main/contributing-docs/public-api-surface.md "Supported Public API Surface of Angular").
+For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/main/contributing-docs/public-api-surface.md 'Supported Public API Surface of Angular').
 
 To guarantee backward compatibility of Angular we run a series of checks before we merge any change:
 
-* Unit tests and integration tests
-* Comparing the type definitions of the public API surface before and after the change
-* Running the tests of all the applications at Google that depend on Angular
+- Unit tests and integration tests
+- Comparing the type definitions of the public API surface before and after the change
+- Running the tests of all the applications at Google that depend on Angular
 
 Any changes to the public API surface are made in accordance with the versioning, support, and depreciation policies previously described. In exceptional cases, such as critical security patches, fixes may introduce backwards incompatible changes. Such exceptional cases are accompanied by explicit notice on the framework's official communication channels.
 
@@ -138,15 +142,15 @@ Breaking change requires you to do work because the state after it is not backwa
 
 To support you in case of breaking changes in Angular:
 
-* We follow our [deprecation policy](#deprecation-policy) before we remove a public API
-* Support update automation via the `ng update` command. It provides code transformations which we often have tested ahead of time over hundreds of thousands of projects at Google
-* Step by step instructions how to update from one major version to another at the ["Angular Update Guide"](update-guide)
+- We follow our [deprecation policy](#deprecation-policy) before we remove a public API
+- Support update automation via the `ng update` command. It provides code transformations which we often have tested ahead of time over hundreds of thousands of projects at Google
+- Step by step instructions how to update from one major version to another at the ["Angular Update Guide"](update-guide)
 
 You can `ng update` to any version of Angular, provided that the following criteria are met:
 
-* The version you want to update *to* is supported.
-* The version you want to update *from* is within one major version of the version you want to
-    upgrade to.
+- The version you want to update _to_ is supported.
+- The version you want to update _from_ is within one major version of the version you want to
+  upgrade to.
 
 For example, you can update from version 11 to version 12, provided that version 12 is still supported.
 If you want to update across multiple major versions, perform each update one major version at a time.
@@ -163,8 +167,6 @@ This may be because we want to gather feedback from real applications before sta
 
 The policies and practices that are described in this document do not apply to APIs marked as Developer Preview. Such APIs can change at any time, even in new patch versions of the framework. Teams should decide for themselves whether the benefits of using Developer Preview APIs are worth the risk of breaking changes outside of our normal use of semantic versioning.
 
-
-
 ## Experimental
 
 These APIs might not become stable at all or have significant changes before becoming stable.
diff --git a/adev-es/src/content/reference/roadmap.md b/adev-es/src/content/reference/roadmap.md
index a863f25..35a61fc 100644
--- a/adev-es/src/content/reference/roadmap.md
+++ b/adev-es/src/content/reference/roadmap.md
@@ -9,7 +9,7 @@ The following projects are not associated with a particular Angular version. We
 Currently, Angular has two goals for the framework:
 
 1. Improve the [Angular developer experience](#improving-the-angular-developer-experience) and
-2. Improve the [framework’s performance](#fast-by-default).
+2. Improve the framework’s performance.
 
 Continue reading to learn how we plan to deliver these objectives with specific project work.
 
@@ -19,17 +19,17 @@ Start developing with the latest Angular features from our roadmap. This list re
 
 ### Available to experiment with
 
-* [Resource API](/guide/signals/resource)
-* [httpResource](/api/common/http/httpResource)
+- [Resource API](/guide/signals/resource)
+- [httpResource](/api/common/http/httpResource)
 
 ### Production ready
 
-* [Zoneless change detection](/guide/zoneless)
-* [Linked Signal API](/guide/signals/linked-signal)
-* [Incremental hydration](/guide/incremental-hydration)
-* [Effect API](/api/core/effect)
-* [Event replay with SSR](/api/platform-browser/withEventReplay)
-* [Route-level render mode](/guide/ssr)
+- [Zoneless change detection](/guide/zoneless)
+- [Linked Signal API](/guide/signals/linked-signal)
+- [Incremental hydration](/guide/incremental-hydration)
+- [Effect API](/api/core/effect)
+- [Event replay with SSR](/api/platform-browser/withEventReplay)
+- [Route-level render mode](/guide/ssr)
 
 ## Improving the Angular developer experience
 
@@ -39,31 +39,31 @@ Start developing with the latest Angular features from our roadmap. This list re
   <docs-card title="Selectorless" href="">
   To reduce boilerplate and improve the ergonomics of standalone components we are now designing a solution that will make selectors optional. To use a component or directive you'll be able to import it and directly use it in a component's template.
 
-  We kicked off early prototyping of selectorless and we're still in early stages of planning. We'll share a request for comments when we have a design and we're ready for next steps.
-  </docs-card>
-  <docs-card title="Signal Forms" href="">
-  We plan to analyze existing feedback about Angular forms and design a solution which addresses developers' requirements and uses Signals for management of reactive state.
-  </docs-card>
-  <docs-card title="Asynchronous reactivity" href="https://github.com/angular/angular/discussions/60121">
-  To enable developers to handle asynchronous data flow with signals we developed the `resource` async primitive. Building on top of it, we introduced `httpResource` which allows you to send HTTP requests and receive your response as a signal.
-
-  We're still actively collecting feedback for these new experimental APIs. Please give them a try and share your feedback with us on GitHub!
-  </docs-card>
-  <docs-card title="Zoneless Angular" href="">
-  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.
-
-  In v19 we introduced zoneless support in server-side rendering, addressed some edge cases, and created a schematic to scaffold zoneless projects. We transitioned <a href="https://fonts.google.com/">Google Fonts</a> to zoneless which improved performance, developer experience, and allowed us to identify gaps that we need to address before moving this feature to developer preview.
-
-  As of Angular v20.2, Zoneless Angular is now stable and includes improvements in error handling and server-side rendering.
-  </docs-card>
-  <docs-card title="Signal integrations" href="">
-  We're working towards improving the integration of fundamental Angular packages, such as forms, HTTP, and router, with Signals. As part of this project, we'll seek opportunities to introduce convenient signal-based APIs or wrappers to improve the holistic developer experience.
-  </docs-card>
-  <docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306">
-  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>
+We kicked off early prototyping of selectorless and we're still in early stages of planning. We'll share a request for comments when we have a design and we're ready for next steps.
+</docs-card>
+<docs-card title="Signal Forms" href="">
+We plan to analyze existing feedback about Angular forms and design a solution which addresses developers' requirements and uses Signals for management of reactive state.
+</docs-card>
+<docs-card title="Asynchronous reactivity" href="https://github.com/angular/angular/discussions/60121">
+To enable developers to handle asynchronous data flow with signals we developed the `resource` async primitive. Building on top of it, we introduced `httpResource` which allows you to send HTTP requests and receive your response as a signal.
+
+We're still actively collecting feedback for these new experimental APIs. Please give them a try and share your feedback with us on GitHub!
+</docs-card>
+<docs-card title="Zoneless Angular" href="">
+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.
+
+In v19 we introduced zoneless support in server-side rendering, addressed some edge cases, and created a schematic to scaffold zoneless projects. We transitioned <a href="https://fonts.google.com/">Google Fonts</a> to zoneless which improved performance, developer experience, and allowed us to identify gaps that we need to address before moving this feature to developer preview.
+
+As of Angular v20.2, Zoneless Angular is now stable and includes improvements in error handling and server-side rendering.
+</docs-card>
+<docs-card title="Signal integrations" href="">
+We're working towards improving the integration of fundamental Angular packages, such as forms, HTTP, and router, with Signals. As part of this project, we'll seek opportunities to introduce convenient signal-based APIs or wrappers to improve the holistic developer experience.
+</docs-card>
+<docs-card title="Improve HMR (Hot Module Reload)" href="https://github.com/angular/angular/issues/39367#issuecomment-1439537306">
+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-container>
 
 ### Improve Angular Material and the CDK
@@ -83,16 +83,16 @@ Start developing with the latest Angular features from our roadmap. This list re
   <docs-card title="Modernize unit testing tooling with ng test" href="">
   In v12, we revisited the Angular end-to-end testing experience by replacing Protractor with modern alternatives such as Cypress, Nightwatch, Puppeteer, Playwright, and Webdriver.io. Next, we'd like to tackle `ng test` to modernize Angular's unit testing experience.
 
-  In Angular v20 we introduced experimental support for vitest. Make sure you give it a try and share your feedback with us!
-  </docs-card>
-  <docs-card title="Evaluating Nitro support in the Angular CLI" href="https://nitro.unjs.io/">
-  We're excited about the set of features that Nitro offers such as more deployment options, improved compatibility of server-side rendering with different runtimes and file-based routing. In 2025 we'll evaluate how it fits in the Angular server-side rendering model.
+In Angular v20 we introduced experimental support for vitest. Make sure you give it a try and share your feedback with us!
+</docs-card>
+<docs-card title="Evaluating Nitro support in the Angular CLI" href="https://nitro.unjs.io/">
+We're excited about the set of features that Nitro offers such as more deployment options, improved compatibility of server-side rendering with different runtimes and file-based routing. In 2025 we'll evaluate how it fits in the Angular server-side rendering model.
 
-  We'll share updates as we make progress in this investigation.
-  </docs-card>
-  <docs-card title="Signal debugging in Angular DevTools" href="">
-  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>
+We'll share updates as we make progress in this investigation.
+</docs-card>
+<docs-card title="Signal debugging in Angular DevTools" href="">
+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>
 </docs-card-container>
 
 ## Future work, explorations, and prototyping
@@ -112,8 +112,8 @@ This section represents explorations and prototyping of potential future project
   <docs-card title="Incremental adoption" href="">
   Angular has been lacking the tools and the flexibility to add interactivity to a multi-page app or embed an Angular component inside of an existing app built with a different framework.
 
-  As part of this project, we'll explore the requirement space of cross framework interop and our build tooling offering to make this use case possible.
-  </docs-card>
+As part of this project, we'll explore the requirement space of cross framework interop and our build tooling offering to make this use case possible.
+</docs-card>
 </docs-card-container>
 
 ## Completed projects
@@ -122,175 +122,175 @@ This section represents explorations and prototyping of potential future project
   <docs-card title="Server route configuration" link="Completed in Q2 2025" href="">
   We're working towards enabling a more ergonomic route configuration on the server. We want to make it trivial to declare which routes should be server-side rendered, prerendered or client-side rendered.
 
-  In Angular v19 we shipped developer preview of route-level render mode which allows you to granularly configure which routes you want Angular to prerender, server-side render or client-side render. In Angular v20 we graduated it to stable.
-  </docs-card>
-  <docs-card title="Enable incremental hydration" link="Completed in Q2 2025" href="">
-  In v17 we graduated hydration from developer preview and we've been consistently observing 40-50% improvements in LCP. Since then we started prototyping incremental hydration and shared a demo on stage at ng-conf.
-
-  In v19 we shipped the incremental hydration in developer preview mode, powered by `@defer` blocks. In Angular v20 we graduated it to stable!
-  </docs-card>
-  <docs-card title="Deliver Angular Signals" link="Completed in Q2 2025" href="https://github.com/angular/angular/discussions/49685">
-  This project rethinks the Angular reactivity model by introducing Signals as a reactivity primitive. The initial planning resulted in hundreds of discussions, conversations with developers, feedback sessions, user experience studies, and a series of RFCs, which received over 1,000 comments.
-
-  In Angular v20 we graduated all the fundamental reactivity primitives to stable including signal, effect, linkedSignal, signal-based queries, and inputs.
-  </docs-card>
-  <docs-card title="Support two-dimensional drag-and-drop" link="Completed in Q2 2024" href="https://github.com/angular/components/issues/13372">
-  As part of this project, we implemented mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features.
-  </docs-card>
-  <docs-card title="Event replay with SSR and prerendering" link="Completed in Q4 2024" href="https://angular.dev/api/platform-browser/withEventReplay">
-  In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com.
-
-  In Angular v19 we graduated event replay to stable and enabled it by default for all new projects.
-  </docs-card>
-  <docs-card title="Integrate Angular Language Service with Schematics" link="Completed in Q4 2024" href="">
-  To make it easier for developers to use modern Angular APIs, we enabled integration between the Angular language service and schematics which allows you to refactor your app with a single click.
-  </docs-card>
-  <docs-card title="Streamline standalone imports with Language Service" link="Completed in Q4 2024" href="">
-  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](https://angular.dev/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/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" href="">
-  We enabled debugging and profiling of Angular apps embedded within an iframe on the page.
-  </docs-card>
-  <docs-card title="Automation for transition of existing hybrid rendering projects to esbuild and vite" link="Completed in Q2 2024" href="tools/cli/build-system-migration">
-  In v17 we shipped a vite and esbuild-based application builder and enabled it for new projects by default. It improves build time for projects using hybrid rendering with up to 87%. As part of v18 we shipped schematics and a guide that migrate existing projects using hybrid rendering to the new build pipeline.
-  </docs-card>
-  <docs-card title="Make Angular.dev the official home for Angular developers" link="Completed in Q2 2024" href="https://goo.gle/angular-dot-dev">
-  Angular.dev is the new site, domain and home for Angular development. The new site contains updated documentation, tutorials and guidance that will help developers build with Angular’s latest features.
-  </docs-card>
-  <docs-card title="Introduce built-in control flow" link="Completed in Q2 2024" href="https://next.angular.dev/essentials/conditionals-and-loops">
-  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" href="">
-  Over the past two quarters, we developed a new [video](https://www.youtube.com/watch?v=xAT0lHYhHMY&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF) and [textual](https://angular.dev/tutorials/learn-angular) tutorial based on standalone components.
-  </docs-card>
-  <docs-card title="Investigate modern bundlers" link="Completed 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">
-  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="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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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/">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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="reference/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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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">
-  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="reference/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">
-  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">
-  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">
-  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">
-  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">
-  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>
+In Angular v19 we shipped developer preview of route-level render mode which allows you to granularly configure which routes you want Angular to prerender, server-side render or client-side render. In Angular v20 we graduated it to stable.
+</docs-card>
+<docs-card title="Enable incremental hydration" link="Completed in Q2 2025" href="">
+In v17 we graduated hydration from developer preview and we've been consistently observing 40-50% improvements in LCP. Since then we started prototyping incremental hydration and shared a demo on stage at ng-conf.
+
+In v19 we shipped the incremental hydration in developer preview mode, powered by `@defer` blocks. In Angular v20 we graduated it to stable!
+</docs-card>
+<docs-card title="Deliver Angular Signals" link="Completed in Q2 2025" href="https://github.com/angular/angular/discussions/49685">
+This project rethinks the Angular reactivity model by introducing Signals as a reactivity primitive. The initial planning resulted in hundreds of discussions, conversations with developers, feedback sessions, user experience studies, and a series of RFCs, which received over 1,000 comments.
+
+In Angular v20 we graduated all the fundamental reactivity primitives to stable including signal, effect, linkedSignal, signal-based queries, and inputs.
+</docs-card>
+<docs-card title="Support two-dimensional drag-and-drop" link="Completed in Q2 2024" href="https://github.com/angular/components/issues/13372">
+As part of this project, we implemented mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features.
+</docs-card>
+<docs-card title="Event replay with SSR and prerendering" link="Completed in Q4 2024" href="https://angular.dev/api/platform-browser/withEventReplay">
+In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com.
+
+In Angular v19 we graduated event replay to stable and enabled it by default for all new projects.
+</docs-card>
+<docs-card title="Integrate Angular Language Service with Schematics" link="Completed in Q4 2024" href="">
+To make it easier for developers to use modern Angular APIs, we enabled integration between the Angular language service and schematics which allows you to refactor your app with a single click.
+</docs-card>
+<docs-card title="Streamline standalone imports with Language Service" link="Completed in Q4 2024" href="">
+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](https://angular.dev/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/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" href="">
+We enabled debugging and profiling of Angular apps embedded within an iframe on the page.
+</docs-card>
+<docs-card title="Automation for transition of existing hybrid rendering projects to esbuild and vite" link="Completed in Q2 2024" href="tools/cli/build-system-migration">
+In v17 we shipped a vite and esbuild-based application builder and enabled it for new projects by default. It improves build time for projects using hybrid rendering with up to 87%. As part of v18 we shipped schematics and a guide that migrate existing projects using hybrid rendering to the new build pipeline.
+</docs-card>
+<docs-card title="Make Angular.dev the official home for Angular developers" link="Completed in Q2 2024" href="https://goo.gle/angular-dot-dev">
+Angular.dev is the new site, domain and home for Angular development. The new site contains updated documentation, tutorials and guidance that will help developers build with Angular’s latest features.
+</docs-card>
+<docs-card title="Introduce built-in control flow" link="Completed in Q2 2024" href="https://next.angular.dev/essentials/conditionals-and-loops">
+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" href="">
+Over the past two quarters, we developed a new [video](https://www.youtube.com/watch?v=xAT0lHYhHMY&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF) and [textual](https://angular.dev/tutorials/learn-angular) tutorial based on standalone components.
+</docs-card>
+<docs-card title="Investigate modern bundlers" link="Completed 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">
+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="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">
+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">
+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">
+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">
+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">
+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">
+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">
+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/">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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="reference/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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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">
+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="reference/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">
+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">
+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">
+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">
+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">
+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-es/src/content/reference/versions.md b/adev-es/src/content/reference/versions.md
index e80d890..ddfa52c 100644
--- a/adev-es/src/content/reference/versions.md
+++ b/adev-es/src/content/reference/versions.md
@@ -9,13 +9,12 @@ This table covers [Angular versions under active support](reference/releases#act
 
 | Angular            | Node.js                             | TypeScript     | RxJS               |
 | ------------------ | ----------------------------------- | -------------- | ------------------ |
-| 20.2.x \|\| 20.3.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 |
+| 21.0.x             | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.9.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 |
+| 20.2.x \|\| 20.3.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.8.0 <6.0.0 | ^6.5.3 \|\| ^7.4.0 |
 | 20.0.x \|\| 20.1.x | ^20.19.0 \|\| ^22.12.0 \|\| ^24.0.0 | >=5.8.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 |
 | 19.2.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.9.0 | ^6.5.3 \|\| ^7.4.0 |
 | 19.1.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.8.0 | ^6.5.3 \|\| ^7.4.0 |
 | 19.0.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.5.0 <5.7.0 | ^6.5.3 \|\| ^7.4.0 |
-| 18.1.x \|\| 18.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.4.0 <5.6.0 | ^6.5.3 \|\| ^7.4.0 |
-| 18.0.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0 | >=5.4.0 <5.5.0 | ^6.5.3 \|\| ^7.4.0 |
 
 ## Unsupported Angular versions
 
@@ -25,6 +24,8 @@ guarantees. It is listed here for historical reference.
 
 | Angular            | Node.js                              | TypeScript     | RxJS               |
 | ------------------ | ------------------------------------ | -------------- | ------------------ |
+| 18.1.x \|\| 18.2.x | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0  | >=5.4.0 <5.6.0 | ^6.5.3 \|\| ^7.4.0 |
+| 18.0.x             | ^18.19.1 \|\| ^20.11.1 \|\| ^22.0.0  | >=5.4.0 <5.5.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.3.x             | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.5.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.1.x \|\| 17.2.x | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.4.0 | ^6.5.3 \|\| ^7.4.0 |
 | 17.0.x             | ^18.13.0 \|\| ^20.9.0                | >=5.2.0 <5.3.0 | ^6.5.3 \|\| ^7.4.0 |
@@ -80,8 +81,10 @@ targets supporting approximately 95% of web users.
 
 | Angular | Baseline Date | Browser Set                 |
 | ------- | ------------- | --------------------------- |
+| v21     | 2025-10-20    | [Browser Set][browsers-v21] |
 | v20     | 2025-04-30    | [Browser Set][browsers-v20] |
 
+[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
 
 Angular versions prior to v20 support the following specific browser versions:
@@ -117,7 +120,8 @@ relative to the current workspace or module specifier \(Example: `zone.js`\).
 
 If you create a TypeScript file, make sure to include it in the `files` property of your `tsconfig` file.
 
-<docs-code language="json">
+```json
+
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -129,7 +133,7 @@ If you create a TypeScript file, make sure to include it in the `files` property
   ]
   ...
 }
-</docs-code>
+```
 
 ## Polyfills for non-CLI users
 
@@ -146,14 +150,14 @@ For example:
    * asynchronous activities to improve startup performance - use these options only
    * if you know what you are doing as it could result in hard to trace down bugs.
    */
-  // &lowbar;&lowbar;Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-  // &lowbar;&lowbar;Zone_disable_on_property = true; // disable patch onProperty such as onclick
-  // &lowbar;&lowbar;zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+  // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+  // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
+  // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
   /*
    * in Edge developer tools, the addEventListener will also be wrapped by zone.js
    * with the following flag, it will bypass `zone.js` patch for Edge.
    */
-  // &lowbar;&lowbar;Zone_enable_cross_context_check = true;
+  // __Zone_enable_cross_context_check = true;
 </script>
 <!-- zone.js required by Angular -->
 <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
diff --git a/adev-es/src/content/tools/cli/aot-compiler.en.md b/adev-es/src/content/tools/cli/aot-compiler.en.md
index c331bd1..ef6aa6f 100644
--- a/adev-es/src/content/tools/cli/aot-compiler.en.md
+++ b/adev-es/src/content/tools/cli/aot-compiler.en.md
@@ -3,7 +3,7 @@
 An Angular application consists mainly of components and their HTML templates.
 Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
 
-The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase *before* the browser downloads and runs that code.
+The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code.
 Compiling your application during the build process provides a faster rendering in the browser.
 
 This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.
@@ -12,10 +12,10 @@ HELPFUL: [Watch Alex Rickabaugh explain the Angular compiler](https://www.youtub
 
 Here are some reasons you might want to use AOT.
 
-| Reasons                                 | Details |
-|:---                                     |:---     |
+| Reasons                                 | Details                                                                                                                                                                                                                                            |
+| :-------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Faster rendering                        | With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the application first.                                       |
-| Fewer asynchronous requests             | The compiler *inlines* external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.                                                                                  |
+| Fewer asynchronous requests             | The compiler _inlines_ external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.                                                                                  |
 | Smaller Angular framework download size | There's no need to download the Angular compiler if the application is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.                                              |
 | Detect template errors earlier          | The AOT compiler detects and reports template binding errors during the build step before users can see them.                                                                                                                                      |
 | Better security                         | AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks. |
@@ -24,8 +24,8 @@ Here are some reasons you might want to use AOT.
 
 Angular offers two ways to compile your application:
 
-| Angular compile       | Details |
-|:---                   |:---     |
+| Angular compile       | Details                                                                                           |
+| :-------------------- | :------------------------------------------------------------------------------------------------ |
 | Just-in-Time \(JIT\)  | Compiles your application in the browser at runtime. This was the default until Angular 8.        |
 | Ahead-of-Time \(AOT\) | Compiles your application and libraries at build time. This is the default starting in Angular 9. |
 
@@ -42,7 +42,7 @@ The metadata tells Angular how to construct instances of your application classe
 
 In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`.
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-typical',
@@ -53,9 +53,9 @@ export class TypicalComponent {
   private someService = inject(SomeService);
 }
 
-</docs-code>
+```
 
-The Angular compiler extracts the metadata *once* and generates a *factory* for `TypicalComponent`.
+The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`.
 When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.
 
 ### Compilation phases
@@ -63,19 +63,19 @@ When it needs to create a `TypicalComponent` instance, Angular calls the factory
 There are three phases of AOT compilation.
 
 |     | Phase                  | Details                                                                                                                                                                                                                                                                                                        |
-|:--- |:---                    |:---                                                                                                                                                                                                                                                                                                            |
-| 1   | code analysis          | In this phase, the TypeScript compiler and *AOT collector* create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.                              |
+| :-- | :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1   | code analysis          | In this phase, the TypeScript compiler and _AOT collector_ create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.                              |
 | 2   | code generation        | In this phase, the compiler's `StaticReflector` interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.                                                                                              |
-| 3   | template type checking | In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `strictTemplates` configuration option; see [Angular compiler options](reference/configs/angular-compiler-options). |
+| 3   | template type checking | In this optional phase, the Angular _template compiler_ uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `strictTemplates` configuration option; see [Angular compiler options](reference/configs/angular-compiler-options). |
 
 ### Metadata restrictions
 
-You write metadata in a *subset* of TypeScript that must conform to the following general constraints:
+You write metadata in a _subset_ of TypeScript that must conform to the following general constraints:
 
-* Limit [expression syntax](#expression-syntax-limitations) to the supported subset of JavaScript
-* Only reference exported symbols after [code folding](#code-folding)
-* Only call [functions supported](#supported-classes-and-functions) by the compiler
-* Input/Outputs and data-bound class members must be public or protected.For additional guidelines and instructions on preparing an application for AOT compilation, see [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
+- Limit [expression syntax](#expression-syntax-limitations) to the supported subset of JavaScript
+- Only reference exported symbols after [code folding](#code-folding)
+- Only call [functions supported](#supported-classes-and-functions) by the compiler
+- Input/Outputs and data-bound class members must be public or protected.For additional guidelines and instructions on preparing an application for AOT compilation, see [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
 
 HELPFUL: Errors in AOT compilation commonly occur because of metadata that does not conform to the compiler's requirements \(as described more fully below\).
 For help in understanding and resolving these problems, see [AOT Metadata Errors](tools/cli/aot-metadata-errors).
@@ -88,7 +88,7 @@ See [Angular compiler options](reference/configs/angular-compiler-options) for a
 ## Phase 1: Code analysis
 
 The TypeScript compiler does some of the analytic work of the first phase.
-It emits the `.d.ts` *type definition files* with type information that the AOT compiler needs to generate application code.
+It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code.
 At the same time, the AOT **collector** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file.
 
 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).
@@ -100,65 +100,65 @@ HELPFUL: Angular's [schema.ts](https://github.com/angular/angular/blob/main/pack
 The AOT collector only understands a subset of JavaScript.
 Define metadata objects with the following limited syntax:
 
-| Syntax                    | Example |
-|:---                       |:---     |
-| Literal object            | `{cherry: true, apple: true, mincemeat: false}`                        |
-| Literal array             | `['cherries', 'flour', 'sugar']`                                       |
-| Spread in literal array   | `['apples', 'flour', …]`                                               |
-| Calls                     | `bake(ingredients)`                                                    |
-| New                       | `new Oven()`                                                           |
-| Property access           | `pie.slice`                                                            |
-| Array index               | `ingredients[0]`                                                       |
-| Identity reference        | `Component`                                                            |
+| Syntax                    | Example                                                    |
+| :------------------------ | :--------------------------------------------------------- |
+| Literal object            | `{cherry: true, apple: true, mincemeat: false}`            |
+| Literal array             | `['cherries', 'flour', 'sugar']`                           |
+| Spread in literal array   | `['apples', 'flour', …]`                                   |
+| Calls                     | `bake(ingredients)`                                        |
+| New                       | `new Oven()`                                               |
+| Property access           | `pie.slice`                                                |
+| Array index               | `ingredients[0]`                                           |
+| Identity reference        | `Component`                                                |
 | A template string         | <code>`pie is ${multiplier} times better than cake`</code> |
-| Literal string            | `'pi'`                                                                 |
-| Literal number            | `3.14153265`                                                           |
-| Literal boolean           | `true`                                                                 |
-| Literal null              | `null`                                                                 |
-| Supported prefix operator | `!cake`                                                                |
-| Supported binary operator | `a+b`                                                                  |
-| Conditional operator      | `a ? b : c`                                                            |
-| Parentheses               | `(a+b)`                                                                |
+| Literal string            | `'pi'`                                                     |
+| Literal number            | `3.14153265`                                               |
+| Literal boolean           | `true`                                                     |
+| Literal null              | `null`                                                     |
+| Supported prefix operator | `!cake`                                                    |
+| Supported binary operator | `a+b`                                                      |
+| Conditional operator      | `a ? b : c`                                                |
+| Parentheses               | `(a+b)`                                                    |
 
 If an expression uses unsupported syntax, the collector writes an error node to the `.metadata.json` file.
 The compiler later reports the error if it needs that piece of metadata to generate the application code.
 
 HELPFUL: If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in the TypeScript configuration file.
 
-<docs-code language="json">
+```json
 
 "angularCompilerOptions": {
   …
   "strictMetadataEmit" : true
 }
 
-</docs-code>
+```
 
 Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries.
 
 ### No arrow functions
 
 The AOT compiler does not support [function expressions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/function)
-and [arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called *lambda* functions.
+and [arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions.
 
 Consider the following component decorator:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   …
   providers: [{provide: server, useFactory: () => new Server()}]
 })
 
-</docs-code>
+```
 
 The AOT collector does not support the arrow function, `() => new Server()`, in a metadata expression.
 It generates an error node in place of the function.
-When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an *exported function*.
+When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_.
 
 You can fix the error by converting to this:
 
-<docs-code language="typescript">
+```ts
 
 export function serverFactory() {
   return new Server();
@@ -169,25 +169,25 @@ export function serverFactory() {
   providers: [{provide: server, useFactory: serverFactory}]
 })
 
-</docs-code>
+```
 
 In version 5 and later, the compiler automatically performs this rewriting while emitting the `.js` file.
 
 ### Code folding
 
-The compiler can only resolve references to ***exported*** symbols.
+The compiler can only resolve references to **_exported_** symbols.
 The collector, however, can evaluate an expression during collection and record the result in the `.metadata.json`, rather than the original expression.
 This allows you to make limited use of non-exported symbols within expressions.
 
 For example, the collector can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`.
-This process is called *folding*.
-An expression that can be reduced in this manner is *foldable*.
+This process is called _folding_.
+An expression that can be reduced in this manner is _foldable_.
 
 The collector can evaluate references to module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file.
 
 Consider the following component definition:
 
-<docs-code language="typescript">
+```angular-ts
 
 const template = '<div>{{hero().name}}</div>';
 
@@ -199,13 +199,13 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
 The compiler could not refer to the `template` constant because it isn't exported.
 The collector, however, can fold the `template` constant into the metadata definition by in-lining its contents.
 The effect is the same as if you had written:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-hero',
@@ -215,13 +215,13 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
-There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the *collector's* output in `.metadata.json`.
+There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`.
 
 You can take this example a step further by including the `template` constant in another expression:
 
-<docs-code language="typescript">
+```angular-ts
 
 const template = '<div>{{hero().name}}</div>';
 
@@ -233,22 +233,22 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
-The collector reduces this expression to its equivalent *folded* string:
+The collector reduces this expression to its equivalent _folded_ string:
 
-<docs-code language="typescript">
+```angular-ts
 
 '<div>{{hero().name}}</div><div>{{hero().title}}</div>'
 
-</docs-code>
+```
 
 #### Foldable syntax
 
 The following table describes which expressions the collector can and cannot fold:
 
-| Syntax                           | Foldable |
-|:---                              |:---      |
+| Syntax                           | Foldable                                 |
+| :------------------------------- | :--------------------------------------- |
 | Literal object                   | yes                                      |
 | Literal array                    | yes                                      |
 | Spread in literal array          | no                                       |
@@ -276,26 +276,26 @@ The collector makes no attempt to understand the metadata that it collects and o
 It represents the metadata as best it can and records errors when it detects a metadata syntax violation.
 It's the compiler's job to interpret the `.metadata.json` in the code generation phase.
 
-The compiler understands all syntax forms that the collector supports, but it may reject *syntactically* correct metadata if the *semantics* violate compiler rules.
+The compiler understands all syntax forms that the collector supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules.
 
 ### Public or protected symbols
 
-The compiler can only reference *exported symbols*.
+The compiler can only reference _exported symbols_.
 
-* Decorated component class members must be public or protected.
-    You cannot make an `input()` property private.
+- Decorated component class members must be public or protected.
+  You cannot make an `input()` property private.
 
-* Data bound properties must also be public or protected
+- Data bound properties must also be public or protected
 
 ### Supported classes and functions
 
 The collector can represent a function call or object creation with `new` as long as the syntax is valid.
-The compiler, however, can later refuse to generate a call to a *particular* function or creation of a *particular* object.
+The compiler, however, can later refuse to generate a call to a _particular_ function or creation of a _particular_ object.
 
 The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros \(functions or static methods\) that return expressions.
 
-| Compiler action      | Details |
-|:---                  |:---     |
+| Compiler action      | Details                                                                                                                                                |
+| :------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | New instances        | The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.                                            |
 | Supported decorators | The compiler only supports metadata for the [Angular decorators in the `@angular/core` module](api/core#decorators).                                   |
 | Function calls       | Factory functions must be exported, named functions. The AOT compiler does not support lambda expressions \("arrow functions"\) for factory functions. |
@@ -303,44 +303,44 @@ The compiler can only create instances of certain classes, supports only core de
 ### Functions and static method calls
 
 The collector accepts any function or static method that contains a single `return` statement.
-The compiler, however, only supports macros in the form of functions or static methods that return an *expression*.
+The compiler, however, only supports macros in the form of functions or static methods that return an _expression_.
 
 For example, consider the following function:
 
-<docs-code language="typescript">
+```ts
 
 export function wrapInArray<T>(value: T): T[] {
   return [value];
 }
 
-</docs-code>
+```
 
 You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset.
 
-You might use  `wrapInArray()` like this:
+You might use `wrapInArray()` like this:
 
-<docs-code language="typescript">
+```ts
 
 @NgModule({
   declarations: wrapInArray(TypicalComponent)
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 The compiler treats this usage as if you had written:
 
-<docs-code language="typescript">
+```ts
 
 @NgModule({
   declarations: [TypicalComponent]
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
-Review the [source code](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
+Review the [source code](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 'RouterModule.forRoot source code')
 for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules).
 
 ### Metadata rewriting
@@ -351,7 +351,7 @@ the compiler doesn't need to know the expression's value — it just needs to be
 
 You might write something like:
 
-<docs-code language="typescript">
+```ts
 
 class TypicalServer {
 
@@ -362,12 +362,12 @@ class TypicalServer {
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 Without rewriting, this would be invalid because lambdas are not supported and `TypicalServer` is not exported.
 To allow this, the compiler automatically rewrites this to something like:
 
-<docs-code language="typescript">
+```ts
 
 class TypicalServer {
 
@@ -380,7 +380,7 @@ export const θ0 = () => new TypicalServer();
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 This allows the compiler to generate a reference to `θ0` in the factory without having to know what the value of `θ0` contains.
 
@@ -402,7 +402,7 @@ file.
 
 For example, consider the following component:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -412,7 +412,7 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
 
 This produces the following error:
 
@@ -449,7 +449,7 @@ The expression used in an `ngIf` directive is used to narrow type unions in the
 template compiler, the same way the `if` expression does in TypeScript.
 For example, to avoid `Object is possibly 'undefined'` error in the template above, modify it to only emit the interpolation if the value of `person` is initialized as shown below:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -459,7 +459,7 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
 
 Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the binding expression will never be `undefined`.
 
@@ -472,7 +472,7 @@ Use the non-null type assertion operator to suppress the `Object is possibly 'un
 In the following example, the `person` and `address` properties are always set together, implying that `address` is always non-null if `person` is non-null.
 There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`.
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'my-component',
@@ -488,17 +488,17 @@ class MyComponent {
   }
 }
 
-</docs-code>
+```
 
 The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.
 
 In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'my-component',
-  template: '<span *ngIf="person &amp;&amp; address"> {{person.name}} lives on {{address.street}} </span>'
+  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
 })
 class MyComponent {
   person?: Person;
@@ -510,4 +510,4 @@ class MyComponent {
   }
 }
 
-</docs-code>
+```
diff --git a/adev-es/src/content/tools/cli/aot-compiler.md b/adev-es/src/content/tools/cli/aot-compiler.md
index 27651b1..131cc1e 100644
--- a/adev-es/src/content/tools/cli/aot-compiler.md
+++ b/adev-es/src/content/tools/cli/aot-compiler.md
@@ -3,7 +3,7 @@
 Una aplicación Angular consiste principalmente de componentes y sus plantillas HTML.
 Debido a que los componentes y plantillas proporcionados por Angular no pueden ser entendidos directamente por el navegador, las aplicaciones Angular requieren un proceso de compilación antes de que puedan ejecutarse en un navegador.
 
-El compilador ahead-of-time (AOT) de Angular convierte tu código HTML y TypeScript de Angular en código JavaScript eficiente durante la fase de construcción *antes* de que el navegador descargue y ejecute ese código.
+El compilador ahead-of-time (AOT) de Angular convierte tu código HTML y TypeScript de Angular en código JavaScript eficiente durante la fase de construcción _antes_ de que el navegador descargue y ejecute ese código.
 Compilar tu aplicación durante el proceso de construcción proporciona un renderizado más rápido en el navegador.
 
 Esta guía explica cómo especificar metadata y aplicar las opciones de compilador disponibles para compilar tus aplicaciones eficientemente usando el compilador AOT.
@@ -15,7 +15,7 @@ Aquí hay algunas razones por las que podrías querer usar AOT.
 | Razones                                 | Detalles |
 |:---                                     |:---     |
 | Renderizado más rápido                        | Con AOT, el navegador descarga una versión precompilada de la aplicación. El navegador carga código ejecutable para que pueda renderizar la aplicación inmediatamente, sin esperar a compilar la aplicación primero.                                       |
-| Menos peticiones asíncronas             | El compilador *inlinea* las plantillas HTML externas y hojas de estilo CSS dentro del JavaScript de la aplicación, eliminando peticiones ajax separadas para esos archivos fuente.                                                                                  |
+| Menos peticiones asíncronas             | El compilador _incrusta_ las plantillas HTML externas y hojas de estilo CSS dentro del JavaScript de la aplicación, eliminando peticiones ajax separadas para esos archivos fuente.                                                                                  |
 | Tamaño de descarga del framework Angular más pequeño | No hay necesidad de descargar el compilador de Angular si la aplicación ya está compilada. El compilador es aproximadamente la mitad de Angular mismo, por lo que omitirlo reduce dramáticamente la carga útil de la aplicación.                                              |
 | Detectar errores de plantilla más temprano          | El compilador AOT detecta y reporta errores de enlace de plantilla durante el paso de construcción antes de que los usuarios puedan verlos.                                                                                                                                      |
 | Mejor seguridad                         | AOT compila plantillas HTML y componentes en archivos JavaScript mucho antes de que se sirvan al cliente. Sin plantillas para leer y sin evaluación riesgosa de HTML o JavaScript del lado del cliente, hay menos oportunidades para ataques de inyección. |
@@ -42,7 +42,7 @@ La metadata le dice a Angular cómo construir instancias de las clases de tu apl
 
 En el siguiente ejemplo, el objeto metadata `@Component()` y el constructor de la clase le dicen a Angular cómo crear y mostrar una instancia de `TypicalComponent`.
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-typical',
@@ -53,9 +53,9 @@ export class TypicalComponent {
   private someService = inject(SomeService);
 }
 
-</docs-code>
+```
 
-El compilador de Angular extrae la metadata *una vez* y genera una *factory* para `TypicalComponent`.
+El compilador de Angular extrae la metadata _una vez_ y genera una _factory_ para `TypicalComponent`.
 Cuando necesita crear una instancia de `TypicalComponent`, Angular llama a la factory, que produce un nuevo elemento visual, vinculado a una nueva instancia de la clase del componente con su dependencia inyectada.
 
 ### Fases de compilación
@@ -64,18 +64,18 @@ Hay tres fases de compilación AOT.
 
 |     | Fase                  | Detalles                                                                                                                                                                                                                                                                                                        |
 |:--- |:---                    |:---                                                                                                                                                                                                                                                                                                            |
-| 1   | análisis de código          | En esta fase, el compilador TypeScript y el *recolector AOT* crean una representación del código fuente. El recolector no intenta interpretar la metadata que recolecta. Representa la metadata lo mejor que puede y registra errores cuando detecta una violación de sintaxis de metadata.                              |
+| 1   | análisis de código          | En esta fase, el compilador TypeScript y el _recolector AOT_ crean una representación del código fuente. El recolector no intenta interpretar la metadata que recolecta. Representa la metadata lo mejor que puede y registra errores cuando detecta una violación de sintaxis de metadata.                              |
 | 2   | generación de código        | En esta fase, el `StaticReflector` del compilador interpreta la metadata recolectada en la fase 1, realiza validación adicional de la metadata y lanza un error si detecta una violación de restricción de metadata.                                                                                              |
-| 3   | verificación de tipos de plantilla | En esta fase opcional, el *compilador de plantillas* de Angular usa el compilador TypeScript para validar las expresiones de enlace en plantillas. Puedes habilitar esta fase explícitamente estableciendo la opción de configuración `strictTemplates`; consulta [opciones del compilador de Angular](reference/configs/angular-compiler-options). |
+| 3   | verificación de tipos de plantilla | En esta fase opcional, el _compilador de plantillas_ de Angular usa el compilador TypeScript para validar las expresiones de enlace en plantillas. Puedes habilitar esta fase explícitamente estableciendo la opción de configuración `strictTemplates`; consulta [opciones del compilador de Angular](reference/configs/angular-compiler-options). |
 
 ### Restricciones de metadata
 
-Escribes metadata en un *subconjunto* de TypeScript que debe cumplir con las siguientes restricciones generales:
+Escribes metadata en un _subconjunto_ de TypeScript que debe cumplir con las siguientes restricciones generales:
 
-* Limita [sintaxis de expresiones](#expression-syntax-limitations) al subconjunto soportado de JavaScript
-* Solo referencia símbolos exportados después de [code folding](#code-folding)
-* Solo llama [funciones soportadas](#supported-classes-and-functions) por el compilador
-* Input/Outputs y miembros de clase enlazados a datos deben ser public o protected.Para pautas e instrucciones adicionales sobre preparar una aplicación para compilación AOT, consulta [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
+- Limita [sintaxis de expresiones](#limitaciones-de-sintaxis-de-expresiones) al subconjunto soportado de JavaScript
+- Solo referencia símbolos exportados después de [code folding](#code-folding)
+- Solo llama [funciones soportadas](#clases-y-funciones-soportadas) por el compilador
+- Input/Outputs y miembros de clase enlazados a datos deben ser public o protected.Para pautas e instrucciones adicionales sobre preparar una aplicación para compilación AOT, consulta [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).
 
 ÚTIL: Los errores en la compilación AOT ocurren comúnmente debido a metadata que no cumple con los requisitos del compilador \(como se describe más completamente a continuación\).
 Para ayuda en entender y resolver estos problemas, consulta [Errores de Metadata AOT](tools/cli/aot-metadata-errors).
@@ -88,7 +88,7 @@ Consulta [opciones del compilador de Angular](reference/configs/angular-compiler
 ## Fase 1: Análisis de código
 
 El compilador TypeScript hace parte del trabajo analítico de la primera fase.
-Emite los *archivos de definición de tipos* `.d.ts` con información de tipos que el compilador AOT necesita para generar código de aplicación.
+Emite los _archivos de definición de tipos_ `.d.ts` con información de tipos que el compilador AOT necesita para generar código de aplicación.
 Al mismo tiempo, el **recolector** AOT analiza la metadata registrada en los decorators de Angular y genera información de metadata en archivos **`.metadata.json`**, uno por archivo `.d.ts`.
 
 Puedes pensar en `.metadata.json` como un diagrama de la estructura general de la metadata de un decorator, representada como un [árbol de sintaxis abstracta (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).
@@ -125,40 +125,40 @@ El compilador luego reporta el error si necesita esa pieza de metadata para gene
 
 ÚTIL: Si quieres que `ngc` reporte errores de sintaxis inmediatamente en lugar de producir un archivo `.metadata.json` con errores, establece la opción `strictMetadataEmit` en el archivo de configuración TypeScript.
 
-<docs-code language="json">
+```json
 
 "angularCompilerOptions": {
   …
   "strictMetadataEmit" : true
 }
 
-</docs-code>
+```
 
 Las librerías de Angular tienen esta opción para asegurar que todos los archivos `.metadata.json` de Angular estén limpios y es una mejor práctica hacer lo mismo al construir tus propias librerías.
 
 ### Sin funciones flecha
 
 El compilador AOT no soporta [expresiones de función](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/function)
-y [funciones flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), también llamadas funciones *lambda*.
+y [funciones flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), también llamadas funciones _lambda_.
 
 Considera el siguiente decorator de componente:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   …
   providers: [{provide: server, useFactory: () => new Server()}]
 })
 
-</docs-code>
+```
 
 El recolector AOT no soporta la función flecha, `() => new Server()`, en una expresión de metadata.
 Genera un nodo de error en lugar de la función.
-Cuando el compilador luego interpreta este nodo, reporta un error que te invita a convertir la función flecha en una *función exportada*.
+Cuando el compilador luego interpreta este nodo, reporta un error que te invita a convertir la función flecha en una _función exportada_.
 
 Puedes corregir el error convirtiéndolo a esto:
 
-<docs-code language="typescript">
+```ts
 
 export function serverFactory() {
   return new Server();
@@ -169,25 +169,25 @@ export function serverFactory() {
   providers: [{provide: server, useFactory: serverFactory}]
 })
 
-</docs-code>
+```
 
 En la versión 5 y posteriores, el compilador realiza automáticamente esta reescritura mientras emite el archivo `.js`.
 
 ### Code folding
 
-El compilador solo puede resolver referencias a símbolos ***exportados***.
+El compilador solo puede resolver referencias a símbolos **_exportados_**.
 El recolector, sin embargo, puede evaluar una expresión durante la recolección y registrar el resultado en el `.metadata.json`, en lugar de la expresión original.
 Esto te permite hacer un uso limitado de símbolos no exportados dentro de expresiones.
 
 Por ejemplo, el recolector puede evaluar la expresión `1 + 2 + 3 + 4` y reemplazarla con el resultado, `10`.
-Este proceso se llama *folding*.
-Una expresión que puede reducirse de esta manera es *plegable*.
+Este proceso se llama _folding_.
+Una expresión que puede reducirse de esta manera es _plegable_.
 
 El recolector puede evaluar referencias a declaraciones `const` locales del módulo y declaraciones `var` y `let` inicializadas, eliminándolas efectivamente del archivo `.metadata.json`.
 
 Considera la siguiente definición de componente:
 
-<docs-code language="typescript">
+```angular-ts
 
 const template = '<div>{{hero().name}}</div>';
 
@@ -199,13 +199,13 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
 El compilador no podría referirse a la constante `template` porque no está exportada.
 El recolector, sin embargo, puede plegar la constante `template` en la definición de metadata mediante la inlinización de su contenido.
 El efecto es el mismo que si hubieras escrito:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-hero',
@@ -215,13 +215,13 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
-Ya no hay una referencia a `template` y, por lo tanto, nada que moleste al compilador cuando luego interprete la salida del *recolector* en `.metadata.json`.
+Ya no hay una referencia a `template` y, por lo tanto, nada que moleste al compilador cuando luego interprete la salida del _recolector_ en `.metadata.json`.
 
 Puedes llevar este ejemplo un paso más allá incluyendo la constante `template` en otra expresión:
 
-<docs-code language="typescript">
+```angular-ts
 
 const template = '<div>{{hero().name}}</div>';
 
@@ -233,15 +233,15 @@ export class HeroComponent {
   hero = input.required<Hero>();
 }
 
-</docs-code>
+```
 
-El recolector reduce esta expresión a su cadena equivalente *plegada*:
+El recolector reduce esta expresión a su cadena equivalente _plegada_:
 
-<docs-code language="typescript">
+```angular-ts
 
 '<div>{{hero().name}}</div><div>{{hero().title}}</div>'
 
-</docs-code>
+```
 
 #### Sintaxis plegable
 
@@ -276,21 +276,21 @@ El recolector no intenta entender la metadata que recolecta y genera en `.metada
 Representa la metadata lo mejor que puede y registra errores cuando detecta una violación de sintaxis de metadata.
 Es el trabajo del compilador interpretar el `.metadata.json` en la fase de generación de código.
 
-El compilador entiende todas las formas de sintaxis que el recolector soporta, pero puede rechazar metadata *sintácticamente* correcta si la *semántica* viola las reglas del compilador.
+El compilador entiende todas las formas de sintaxis que el recolector soporta, pero puede rechazar metadata _sintácticamente_ correcta si la _semántica_ viola las reglas del compilador.
 
 ### Símbolos public o protected
 
-El compilador solo puede referenciar *símbolos exportados*.
+El compilador solo puede referenciar _símbolos exportados_.
 
-* Los miembros de clase de componente decorados deben ser public o protected.
+- Los miembros de clase de componente decorados deben ser public o protected.
     No puedes hacer una propiedad `input()` private.
 
-* Las propiedades enlazadas a datos también deben ser public o protected
+- Las propiedades enlazadas a datos también deben ser public o protected
 
 ### Clases y funciones soportadas
 
 El recolector puede representar una llamada de función o creación de objeto con `new` siempre que la sintaxis sea válida.
-El compilador, sin embargo, puede luego rechazar generar una llamada a una función *particular* o creación de un objeto *particular*.
+El compilador, sin embargo, puede luego rechazar generar una llamada a una función _particular_ o creación de un objeto _particular_.
 
 El compilador solo puede crear instancias de ciertas clases, soporta solo decorators principales, y solo soporta llamadas a macros \(funciones o métodos estáticos\) que devuelven expresiones.
 
@@ -303,41 +303,41 @@ El compilador solo puede crear instancias de ciertas clases, soporta solo decora
 ### Funciones y llamadas de métodos estáticos
 
 El recolector acepta cualquier función o método estático que contenga una sola declaración `return`.
-El compilador, sin embargo, solo soporta macros en forma de funciones o métodos estáticos que devuelven una *expresión*.
+El compilador, sin embargo, solo soporta macros en forma de funciones o métodos estáticos que devuelven una _expresión_.
 
 Por ejemplo, considera la siguiente función:
 
-<docs-code language="typescript">
+```ts
 
 export function wrapInArray<T>(value: T): T[] {
   return [value];
 }
 
-</docs-code>
+```
 
 Puedes llamar a `wrapInArray` en una definición de metadata porque devuelve el valor de una expresión que cumple con el subconjunto restrictivo de JavaScript del compilador.
 
 Podrías usar `wrapInArray()` así:
 
-<docs-code language="typescript">
+```ts
 
 @NgModule({
   declarations: wrapInArray(TypicalComponent)
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 El compilador trata este uso como si hubieras escrito:
 
-<docs-code language="typescript">
+```ts
 
 @NgModule({
   declarations: [TypicalComponent]
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 El [`RouterModule`](api/router/RouterModule) de Angular exporta dos métodos estáticos macro, `forRoot` y `forChild`, para ayudar a declarar rutas raíz e hijas.
 Revisa el [código fuente](https://github.com/angular/angular/blob/main/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
@@ -351,7 +351,7 @@ el compilador no necesita conocer el valor de la expresión — solo necesita se
 
 Podrías escribir algo como:
 
-<docs-code language="typescript">
+```ts
 
 class TypicalServer {
 
@@ -362,12 +362,12 @@ class TypicalServer {
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 Sin reescritura, esto sería inválido porque las lambdas no están soportadas y `TypicalServer` no está exportado.
 Para permitir esto, el compilador automáticamente reescribe esto a algo como:
 
-<docs-code language="typescript">
+```ts
 
 class TypicalServer {
 
@@ -380,7 +380,7 @@ export const θ0 = () => new TypicalServer();
 })
 export class TypicalModule {}
 
-</docs-code>
+```
 
 Esto permite al compilador generar una referencia a `θ0` en la factory sin tener que saber qué contiene el valor de `θ0`.
 
@@ -402,7 +402,7 @@ archivo `.ts`.
 
 Por ejemplo, considera el siguiente componente:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'my-component',
@@ -412,7 +412,7 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
 
 Esto produce el siguiente error:
 
@@ -449,7 +449,7 @@ La expresión usada en una directiva `ngIf` se usa para reducir uniones de tipos
 compilador de plantillas de Angular, de la misma manera que la expresión `if` lo hace en TypeScript.
 Por ejemplo, para evitar el error `Object is possibly 'undefined'` en la plantilla anterior, modifícala para solo emitir la interpolación si el valor de `person` está inicializado como se muestra a continuación:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -459,7 +459,7 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
 
 Usar `*ngIf` permite al compilador TypeScript inferir que el `person` usado en la expresión de enlace nunca será `undefined`.
 
@@ -472,7 +472,7 @@ Usa el operador de aserción de tipo no nulo para suprimir el error `Object is p
 En el siguiente ejemplo, las propiedades `person` y `address` siempre se establecen juntas, lo que implica que `address` siempre es no nulo si `person` es no nulo.
 No hay una manera conveniente de describir esta restricción a TypeScript y al compilador de plantillas, pero el error se suprime en el ejemplo usando `address!.street`.
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'my-component',
@@ -488,13 +488,13 @@ class MyComponent {
   }
 }
 
-</docs-code>
+```
 
 El operador de aserción no nulo debe usarse con moderación ya que la refactorización del componente podría romper esta restricción.
 
 En este ejemplo se recomienda incluir la verificación de `address` en el `*ngIf` como se muestra a continuación:
 
-<docs-code language="typescript">
+```ts
 
 @Component({
   selector: 'my-component',
@@ -510,4 +510,4 @@ class MyComponent {
   }
 }
 
-</docs-code>
+```
diff --git a/adev-es/src/content/tools/cli/aot-metadata-errors.en.md b/adev-es/src/content/tools/cli/aot-metadata-errors.en.md
index 3d9e31a..945640b 100644
--- a/adev-es/src/content/tools/cli/aot-metadata-errors.en.md
+++ b/adev-es/src/content/tools/cli/aot-metadata-errors.en.md
@@ -9,7 +9,7 @@ HELPFUL: The compiler encountered an expression it didn't understand while evalu
 Language features outside of the compiler's [restricted expression syntax](tools/cli/aot-compiler#expression-syntax)
 can produce this error, as seen in the following example:
 
-<docs-code language="typescript">
+```ts
 // ERROR
 export class Fooish { … }
 …
@@ -18,7 +18,7 @@ const prop = typeof Fooish; // typeof is not valid in metadata
   // bracket notation is not valid in metadata
   { provide: 'token', useValue: { [prop]: 'value' } };
   …
-</docs-code>
+```
 
 You can use `typeof` and bracket notation in normal application code.
 You just can't use those features within expressions that define Angular metadata.
@@ -35,7 +35,7 @@ The compiler encountered a reference to a locally defined symbol that either was
 
 Here's a `provider` example of the problem.
 
-<docs-code language="typescript">
+```ts
 
 // ERROR
 let foo: number; // neither exported nor initialized
@@ -49,27 +49,27 @@ let foo: number; // neither exported nor initialized
 })
 export class MyComponent {}
 
-</docs-code>
+```
 
-The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. *That* factory module can't reach back to *this* source module to access the local \(non-exported\) `foo` variable.
+The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local \(non-exported\) `foo` variable.
 
 You could fix the problem by initializing `foo`.
 
-<docs-code language="typescript">
+```ts
 let foo = 42; // initialized
-</docs-code>
+```
 
 The compiler will [fold](tools/cli/aot-compiler#code-folding) the expression into the provider as if you had written this.
 
-<docs-code language="typescript">
+```ts
 providers: [
   { provide: Foo, useValue: 42 }
 ]
-</docs-code>
+```
 
 Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value.
 
-<docs-code language="typescript">
+```ts
 // CORRECTED
 export let foo: number; // exported
 
@@ -81,16 +81,15 @@ export let foo: number; // exported
   ]
 })
 export class MyComponent {}
-</docs-code>
+```
 
-Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate *references* to the exported variables in these expressions. It doesn't need the *values* of those variables.
+Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables.
 
-Adding `export` doesn't work when the compiler needs the *actual value*
+Adding `export` doesn't work when the compiler needs the _actual value_
 in order to generate code.
 For example, it doesn't work for the `template` property.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 export let someTemplate: string; // exported but not initialized
 
@@ -99,24 +98,22 @@ export let someTemplate: string; // exported but not initialized
   template: someTemplate
 })
 export class MyComponent {}
+```
 
-</docs-code>
-
-The compiler needs the value of the `template` property *right now* to generate the component factory.
+The compiler needs the value of the `template` property _right now_ to generate the component factory.
 The variable reference alone is insufficient.
-Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)".
+Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables-and-constants)".
 
 ## Only initialized variables and constants
 
-HELPFUL: *Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler.*
+HELPFUL: _Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._
 
 The compiler found a reference to an exported variable or static field that wasn't initialized.
 It needs the value of that variable to generate code.
 
-The following example tries to set the component's `template` property to the value of the exported `someTemplate` variable which is declared but *unassigned*.
-
-<docs-code language="typescript">
+The following example tries to set the component's `template` property to the value of the exported `someTemplate` variable which is declared but _unassigned_.
 
+```ts
 // ERROR
 export let someTemplate: string;
 
@@ -125,13 +122,11 @@ export let someTemplate: string;
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR - not initialized there either
 import { someTemplate } from './config';
 
@@ -140,16 +135,14 @@ import { someTemplate } from './config';
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 The compiler cannot wait until runtime to get the template information.
 It must statically derive the value of the `someTemplate` variable from the source code so that it can generate the component factory, which includes instructions for building the element based on the template.
 
-To correct this error, provide the initial value of the variable in an initializer clause *on the same line*.
-
-<docs-code language="typescript">
+To correct this error, provide the initial value of the variable in an initializer clause _on the same line_.
 
+```ts
 // CORRECTED
 export let someTemplate = '<h1>Greetings from Angular</h1>';
 
@@ -158,20 +151,18 @@ export let someTemplate = '<h1>Greetings from Angular</h1>';
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 ## Reference to a non-exported class
 
-HELPFUL: *Reference to a non-exported class `<class name>`.*
-*Consider exporting the class.*
+HELPFUL: _Reference to a non-exported class `<class name>`._
+_Consider exporting the class._
 
 Metadata referenced a class that wasn't exported.
 
 For example, you may have defined a class and used it as an injection token in a providers array but neglected to export that class.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 abstract class MyStrategy { }
 
@@ -180,14 +171,12 @@ abstract class MyStrategy { }
     { provide: MyStrategy, useValue: … }
   ]
   …
-
-</docs-code>
+```
 
 Angular generates a class factory in a separate module and that factory [can only access exported classes](tools/cli/aot-compiler#exported-symbols).
 To correct this error, export the referenced class.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 export abstract class MyStrategy { }
 
@@ -196,17 +185,15 @@ export abstract class MyStrategy { }
     { provide: MyStrategy, useValue: … }
   ]
   …
-
-</docs-code>
+```
 
 ## Reference to a non-exported function
 
-HELPFUL: *Metadata referenced a function that wasn't exported.*
+HELPFUL: _Metadata referenced a function that wasn't exported._
 
 For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 function myStrategy() { … }
 
@@ -215,14 +202,12 @@ function myStrategy() { … }
     { provide: MyStrategy, useFactory: myStrategy }
   ]
   …
-
-</docs-code>
+```
 
 Angular generates a class factory in a separate module and that factory [can only access exported functions](tools/cli/aot-compiler#exported-symbols).
 To correct this error, export the function.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 export function myStrategy() { … }
 
@@ -231,18 +216,16 @@ export function myStrategy() { … }
     { provide: MyStrategy, useFactory: myStrategy }
   ]
   …
-
-</docs-code>
+```
 
 ## Function calls are not supported
 
-HELPFUL: *Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function.*
+HELPFUL: _Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._
 
 The compiler does not currently support [function expressions or lambda functions](tools/cli/aot-compiler#function-expression).
 For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
   …
   providers: [
@@ -250,13 +233,11 @@ For example, you cannot set a provider's `useFactory` to an anonymous function o
     { provide: OtherStrategy, useFactory: () => { … } }
   ]
   …
-
-</docs-code>
+```
 
 You also get this error if you call a function or method in a provider's `useValue`.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 import { calculateValue } from './utilities';
 
@@ -265,13 +246,11 @@ import { calculateValue } from './utilities';
     { provide: SomeValue, useValue: calculateValue() }
   ]
   …
-
-</docs-code>
+```
 
 To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 import { calculateValue } from './utilities';
 
@@ -287,19 +266,17 @@ export function someValueFactory() {
     { provide: SomeValue, useFactory: someValueFactory }
   ]
   …
-
-</docs-code>
+```
 
 ## Destructured variable or constant not supported
 
-HELPFUL: *Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring.*
+HELPFUL: _Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._
 
 The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
 
 For example, you cannot write something like this:
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 import { configuration } from './configuration';
 
@@ -311,13 +288,11 @@ const {foo, bar} = configuration;
     {provide: Bar, useValue: bar},
   ]
   …
-
-</docs-code>
+```
 
 To correct this error, refer to non-destructured values.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 import { configuration } from './configuration';
   …
@@ -326,27 +301,24 @@ import { configuration } from './configuration';
     {provide: Bar, useValue: configuration.bar},
   ]
   …
-
-</docs-code>
+```
 
 ## Could not resolve type
 
-HELPFUL: *The compiler encountered a type and can't determine which module exports that type.*
+HELPFUL: _The compiler encountered a type and can't determine which module exports that type._
 
 This can happen if you refer to an ambient type.
 For example, the `Window` type is an ambient type declared in the global `.d.ts` file.
 
 You'll get an error if you reference it in the component constructor, which the compiler must statically analyze.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 @Component({ })
 export class MyComponent {
   constructor (private win: Window) { … }
 }
-
-</docs-code>
+```
 
 TypeScript understands ambient types so you don't import them.
 The Angular compiler does not understand a type that you neglect to export or import.
@@ -365,8 +337,7 @@ you can finesse the problem in four steps:
 
 Here's an illustrative example.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 import { Inject } from '@angular/core';
 
@@ -382,16 +353,14 @@ export function _window() { return window; }
 export class MyComponent {
   constructor (@Inject(WINDOW) private win: Window) { … }
 }
-
-</docs-code>
+```
 
 The `Window` type in the constructor is no longer a problem for the compiler because it
 uses the `@Inject(WINDOW)` to generate the injection code.
 
 Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object \(or an abstraction of it, depending upon the platform in which the application runs\).
 
-<docs-code language="typescript">
-
+```ts
 import { Inject }   from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
@@ -399,39 +368,33 @@ import { DOCUMENT } from '@angular/common';
 export class MyComponent {
   constructor (@Inject(DOCUMENT) private doc: Document) { … }
 }
-
-</docs-code>
+```
 
 ## Name expected
 
-HELPFUL: *The compiler expected a name in an expression it was evaluating.*
+HELPFUL: _The compiler expected a name in an expression it was evaluating._
 
 This can happen if you use a number as a property name as in the following example.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 provider: [{ provide: Foo, useValue: { 0: 'test' } }]
-
-</docs-code>
+```
 
 Change the name of the property to something non-numeric.
 
-<docs-code language="typescript">
-
+```ts
 // CORRECTED
 provider: [{ provide: Foo, useValue: { '0': 'test' } }]
-
-</docs-code>
+```
 
 ## Unsupported enum member name
 
-HELPFUL: *Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata.*
+HELPFUL: _Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) that you referenced in metadata._
 
 The compiler can understand simple enum values but not complex values such as those derived from computed properties.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 enum Colors {
   Red = 1,
@@ -446,18 +409,17 @@ enum Colors {
     { provide: StrongColor, useValue: Colors.Blue }  // bad
   ]
   …
-
-</docs-code>
+```
 
 Avoid referring to enums with complicated initializers or computed properties.
 
 ## Tagged template expressions are not supported
 
-HELPFUL: *Tagged template expressions are not supported in metadata.*
+HELPFUL: _Tagged template expressions are not supported in metadata._
 
 The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as the following.
 
-<docs-code language="typescript">
+```ts
 
 // ERROR
 const expression = 'funky';
@@ -466,16 +428,16 @@ const raw = String.raw`A tagged template ${expression} string`;
  template: '<div>' + raw + '</div>'
  …
 
-</docs-code>
+```
 
-[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw) is a *tag function* native to JavaScript ES2015.
+[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw) is a _tag function_ native to JavaScript ES2015.
 
 The AOT compiler does not support tagged template expressions; avoid them in metadata expressions.
 
 ## Symbol reference expected
 
-HELPFUL: *The compiler expected a reference to a symbol at the location specified in the error message.*
+HELPFUL: _The compiler expected a reference to a symbol at the location specified in the error message._
 
 This error can occur if you use an expression in the `extends` clause of a class.
 
-<!--todo: Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495). -->
\ No newline at end of file
+<!--todo: Chuck: After reviewing your PR comment I'm still at a loss. See [comment there](https://github.com/angular/angular/pull/17712#discussion_r132025495). -->
diff --git a/adev-es/src/content/tools/cli/aot-metadata-errors.md b/adev-es/src/content/tools/cli/aot-metadata-errors.md
index 3f00355..a981bc0 100644
--- a/adev-es/src/content/tools/cli/aot-metadata-errors.md
+++ b/adev-es/src/content/tools/cli/aot-metadata-errors.md
@@ -6,10 +6,10 @@ Los siguientes son errores de metadata que puedes encontrar, con explicaciones y
 
 ÚTIL: El compilador encontró una expresión que no entendió mientras evaluaba metadata de Angular.
 
-Características del lenguaje fuera de la [sintaxis de expresión restringida](tools/cli/aot-compiler#expression-syntax) del compilador
+Características del lenguaje fuera de la [sintaxis de expresión restringida](tools/cli/aot-compiler#limitaciones-de-sintaxis-de-expresiones) del compilador
 pueden producir este error, como se ve en el siguiente ejemplo:
 
-<docs-code language="typescript">
+```ts
 // ERROR
 export class Fooish { … }
 …
@@ -18,12 +18,12 @@ const prop = typeof Fooish; // typeof no es válido en metadata
   // notación de corchetes no es válida en metadata
   { provide: 'token', useValue: { [prop]: 'value' } };
   …
-</docs-code>
+```
 
 Puedes usar `typeof` y notación de corchetes en código de aplicación normal.
 Simplemente no puedes usar esas características dentro de expresiones que definen metadata de Angular.
 
-Evita este error ciñéndote a la [sintaxis de expresión restringida](tools/cli/aot-compiler#expression-syntax) del compilador
+Evita este error ciñéndote a la [sintaxis de expresión restringida](tools/cli/aot-compiler#limitaciones-de-sintaxis-de-expresiones) del compilador
 al escribir metadata de Angular
 y ten cuidado con características de TypeScript nuevas o inusuales.
 
@@ -35,7 +35,7 @@ El compilador encontró una referencia a un símbolo definido localmente que no
 
 Aquí hay un ejemplo de `provider` del problema.
 
-<docs-code language="typescript">
+```ts
 
 // ERROR
 let foo: number; // ni exportado ni inicializado
@@ -49,27 +49,27 @@ let foo: number; // ni exportado ni inicializado
 })
 export class MyComponent {}
 
-</docs-code>
+```
 
 El compilador genera la factory del componente, que incluye el código del provider `useValue`, en un módulo separado. *Ese* módulo factory no puede regresar a *este* módulo fuente para acceder a la variable local \(no exportada\) `foo`.
 
 Podrías arreglar el problema inicializando `foo`.
 
-<docs-code language="typescript">
+```ts
 let foo = 42; // inicializado
-</docs-code>
+```
 
 El compilador [plegará](tools/cli/aot-compiler#code-folding) la expresión en el provider como si hubieras escrito esto.
 
-<docs-code language="typescript">
+```ts
 providers: [
   { provide: Foo, useValue: 42 }
 ]
-</docs-code>
+```
 
 Alternativamente, puedes arreglarlo exportando `foo` con la expectativa de que `foo` será asignado en tiempo de ejecución cuando realmente conozcas su valor.
 
-<docs-code language="typescript">
+```
 // CORREGIDO
 export let foo: number; // exportado
 
@@ -81,16 +81,15 @@ export let foo: number; // exportado
   ]
 })
 export class MyComponent {}
-</docs-code>
+```
 
-Agregar `export` a menudo funciona para variables referenciadas en metadata como `providers` y `animations` porque el compilador puede generar *referencias* a las variables exportadas en estas expresiones. No necesita los *valores* de esas variables.
+Agregar `export` a menudo funciona para variables referenciadas en metadata como `providers` y `animations` porque el compilador puede generar _referencias_ a las variables exportadas en estas expresiones. No necesita los _valores_ de esas variables.
 
-Agregar `export` no funciona cuando el compilador necesita el *valor real*
+Agregar `export` no funciona cuando el compilador necesita el _valor real_
 para generar código.
 Por ejemplo, no funciona para la propiedad `template`.
 
-<docs-code language="typescript">
-
+```
 // ERROR
 export let someTemplate: string; // exportado pero no inicializado
 
@@ -99,24 +98,22 @@ export let someTemplate: string; // exportado pero no inicializado
   template: someTemplate
 })
 export class MyComponent {}
+```
 
-</docs-code>
-
-El compilador necesita el valor de la propiedad `template` *ahora mismo* para generar la factory del componente.
+El compilador necesita el valor de la propiedad `template` _ahora mismo_ para generar la factory del componente.
 La referencia a la variable sola es insuficiente.
-Prefijar la declaración con `export` simplemente produce un nuevo error, "[`Solo variables y constantes inicializadas pueden ser referenciadas`](#only-initialized-variables)".
+Prefijar la declaración con `export` simplemente produce un nuevo error, "[`Solo variables y constantes inicializadas pueden ser referenciadas`](#solo-variables-y-constantes-inicializadas)".
 
 ## Solo variables y constantes inicializadas
 
-ÚTIL: *Solo variables y constantes inicializadas pueden ser referenciadas porque el valor de esta variable es necesario por el compilador de plantilla.*
+ÚTIL: _Solo variables y constantes inicializadas pueden ser referenciadas porque el valor de esta variable es necesario por el compilador de plantilla._
 
 El compilador encontró una referencia a una variable exportada o campo estático que no fue inicializado.
 Necesita el valor de esa variable para generar código.
 
-El siguiente ejemplo intenta establecer la propiedad `template` del componente al valor de la variable exportada `someTemplate` que está declarada pero *no asignada*.
-
-<docs-code language="typescript">
+El siguiente ejemplo intenta establecer la propiedad `template` del componente al valor de la variable exportada `someTemplate` que está declarada pero _no asignada_.
 
+```ts
 // ERROR
 export let someTemplate: string;
 
@@ -125,13 +122,11 @@ export let someTemplate: string;
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 También obtendrías este error si importaste `someTemplate` de algún otro módulo y descuidaste inicializarlo allí.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR - no inicializado allí tampoco
 import { someTemplate } from './config';
 
@@ -140,16 +135,14 @@ import { someTemplate } from './config';
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 El compilador no puede esperar hasta tiempo de ejecución para obtener la información de la plantilla.
 Debe derivar estáticamente el valor de la variable `someTemplate` del código fuente para que pueda generar la factory del componente, que incluye instrucciones para construir el elemento basado en la plantilla.
 
 Para corregir este error, proporciona el valor inicial de la variable en una cláusula inicializadora *en la misma línea*.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 export let someTemplate = '<h1>Greetings from Angular</h1>';
 
@@ -158,20 +151,18 @@ export let someTemplate = '<h1>Greetings from Angular</h1>';
   template: someTemplate
 })
 export class MyComponent {}
-
-</docs-code>
+```
 
 ## Referencia a una clase no exportada
 
-ÚTIL: *Referencia a una clase no exportada `<class name>`.*
-*Considera exportar la clase.*
+ÚTIL: _Referencia a una clase no exportada `<class name>`._
+_Considera exportar la clase._
 
 La metadata referenció una clase que no fue exportada.
 
 Por ejemplo, puedes haber definido una clase y usarla como un token de inyección en un array de providers pero descuidaste exportar esa clase.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 abstract class MyStrategy { }
 
@@ -180,14 +171,12 @@ abstract class MyStrategy { }
     { provide: MyStrategy, useValue: … }
   ]
   …
+```
 
-</docs-code>
-
-Angular genera una factory de clase en un módulo separado y esa factory [solo puede acceder a clases exportadas](tools/cli/aot-compiler#exported-symbols).
+Angular genera una factory de clase en un módulo separado y esa factory [solo puede acceder a clases exportadas](tools/cli/aot-compiler#símbolos-public-o-protected).
 Para corregir este error, exporta la clase referenciada.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 export abstract class MyStrategy { }
 
@@ -196,17 +185,15 @@ export abstract class MyStrategy { }
     { provide: MyStrategy, useValue: … }
   ]
   …
-
-</docs-code>
+```
 
 ## Referencia a una función no exportada
 
-ÚTIL: *La metadata referenció una función que no fue exportada.*
+ÚTIL: _La metadata referenció una función que no fue exportada._
 
 Por ejemplo, puedes haber establecido una propiedad `useFactory` de providers a una función definida localmente que descuidaste exportar.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 function myStrategy() { … }
 
@@ -215,14 +202,12 @@ function myStrategy() { … }
     { provide: MyStrategy, useFactory: myStrategy }
   ]
   …
+```
 
-</docs-code>
-
-Angular genera una factory de clase en un módulo separado y esa factory [solo puede acceder a funciones exportadas](tools/cli/aot-compiler#exported-symbols).
+Angular genera una factory de clase en un módulo separado y esa factory [solo puede acceder a funciones exportadas](tools/cli/aot-compiler#símbolos-public-o-protected).
 Para corregir este error, exporta la función.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 export function myStrategy() { … }
 
@@ -231,18 +216,16 @@ export function myStrategy() { … }
     { provide: MyStrategy, useFactory: myStrategy }
   ]
   …
-
-</docs-code>
+```
 
 ## Llamadas a funciones no son soportadas
 
-ÚTIL: *Las llamadas a funciones no son soportadas. Considera reemplazar la función o lambda con una referencia a una función exportada.*
+ÚTIL: _Las llamadas a funciones no son soportadas. Considera reemplazar la función o lambda con una referencia a una función exportada._
 
-El compilador actualmente no soporta [expresiones de función o funciones lambda](tools/cli/aot-compiler#function-expression).
+El compilador actualmente no soporta [expresiones de función o funciones lambda](tools/cli/aot-compiler#sin-funciones-flecha).
 Por ejemplo, no puedes establecer el `useFactory` de un provider a una función anónima o función flecha como esta.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
   …
   providers: [
@@ -250,13 +233,11 @@ Por ejemplo, no puedes establecer el `useFactory` de un provider a una función
     { provide: OtherStrategy, useFactory: () => { … } }
   ]
   …
-
-</docs-code>
+```
 
 También obtienes este error si llamas a una función o método en el `useValue` de un provider.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 import { calculateValue } from './utilities';
 
@@ -265,13 +246,11 @@ import { calculateValue } from './utilities';
     { provide: SomeValue, useValue: calculateValue() }
   ]
   …
-
-</docs-code>
+```
 
 Para corregir este error, exporta una función del módulo y refiere a la función en un provider `useFactory` en su lugar.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 import { calculateValue } from './utilities';
 
@@ -287,19 +266,17 @@ export function someValueFactory() {
     { provide: SomeValue, useFactory: someValueFactory }
   ]
   …
-
-</docs-code>
+```
 
 ## Variable o constante desestructurada no soportada
 
-ÚTIL: *Referenciar una variable o constante desestructurada exportada no es soportado por el compilador de plantilla. Considera simplificar esto para evitar desestructuración.*
+ÚTIL: _Referenciar una variable o constante desestructurada exportada no es soportado por el compilador de plantilla. Considera simplificar esto para evitar desestructuración._
 
 El compilador no soporta referencias a variables asignadas por [desestructuración](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring).
 
 Por ejemplo, no puedes escribir algo como esto:
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 import { configuration } from './configuration';
 
@@ -311,13 +288,11 @@ const {foo, bar} = configuration;
     {provide: Bar, useValue: bar},
   ]
   …
-
-</docs-code>
+```
 
 Para corregir este error, refiere a valores no desestructurados.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 import { configuration } from './configuration';
   …
@@ -326,27 +301,24 @@ import { configuration } from './configuration';
     {provide: Bar, useValue: configuration.bar},
   ]
   …
-
-</docs-code>
+```
 
 ## No se pudo resolver el tipo
 
-ÚTIL: *El compilador encontró un tipo y no puede determinar qué módulo exporta ese tipo.*
+ÚTIL: _El compilador encontró un tipo y no puede determinar qué módulo exporta ese tipo._
 
 Esto puede suceder si te refieres a un tipo ambiente.
 Por ejemplo, el tipo `Window` es un tipo ambiente declarado en el archivo global `.d.ts`.
 
 Obtendrás un error si lo refieres en el constructor del componente, que el compilador debe analizar estáticamente.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 @Component({ })
 export class MyComponent {
   constructor (private win: Window) { … }
 }
-
-</docs-code>
+```
 
 TypeScript entiende los tipos ambiente así que no los importas.
 El compilador de Angular no entiende un tipo que descuidas exportar o importar.
@@ -365,8 +337,7 @@ puedes solucionar el problema en cuatro pasos:
 
 Aquí hay un ejemplo ilustrativo.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 import { Inject } from '@angular/core';
 
@@ -382,16 +353,14 @@ export function _window() { return window; }
 export class MyComponent {
   constructor (@Inject(WINDOW) private win: Window) { … }
 }
-
-</docs-code>
+```
 
 El tipo `Window` en el constructor ya no es un problema para el compilador porque
 usa el `@Inject(WINDOW)` para generar el código de inyección.
 
 Angular hace algo similar con el token `DOCUMENT` así que puedes inyectar el objeto `document` del navegador \(o una abstracción de él, dependiendo de la plataforma en la que la aplicación se ejecuta\).
 
-<docs-code language="typescript">
-
+```ts
 import { Inject }   from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
@@ -399,39 +368,33 @@ import { DOCUMENT } from '@angular/common';
 export class MyComponent {
   constructor (@Inject(DOCUMENT) private doc: Document) { … }
 }
-
-</docs-code>
+```
 
 ## Se esperaba un nombre
 
-ÚTIL: *El compilador esperaba un nombre en una expresión que estaba evaluando.*
+ÚTIL: _El compilador esperaba un nombre en una expresión que estaba evaluando._
 
 Esto puede suceder si usas un número como nombre de propiedad como en el siguiente ejemplo.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 provider: [{ provide: Foo, useValue: { 0: 'test' } }]
-
-</docs-code>
+```
 
 Cambia el nombre de la propiedad a algo no numérico.
 
-<docs-code language="typescript">
-
+```ts
 // CORREGIDO
 provider: [{ provide: Foo, useValue: { '0': 'test' } }]
-
-</docs-code>
+```
 
 ## Nombre de miembro enum no soportado
 
-ÚTIL: *Angular no pudo determinar el valor del [miembro enum](https://www.typescriptlang.org/docs/handbook/enums.html) que referenciaste en metadata.*
+ÚTIL: _Angular no pudo determinar el valor del [miembro enum](https://www.typescriptlang.org/docs/handbook/enums.html) que referenciaste en metadata._
 
 El compilador puede entender valores enum simples pero no valores complejos como aquellos derivados de propiedades computadas.
 
-<docs-code language="typescript">
-
+```ts
 // ERROR
 enum Colors {
   Red = 1,
@@ -446,18 +409,17 @@ enum Colors {
     { provide: StrongColor, useValue: Colors.Blue }  // malo
   ]
   …
-
-</docs-code>
+```
 
 Evita referirte a enums con inicializadores complicados o propiedades computadas.
 
 ## Expresiones de plantilla etiquetada no son soportadas
 
-ÚTIL: *Las expresiones de plantilla etiquetada no son soportadas en metadata.*
+ÚTIL: _Las expresiones de plantilla etiquetada no son soportadas en metadata._
 
 El compilador encontró una [expresión de plantilla etiquetada](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) de JavaScript ES2015 como la siguiente.
 
-<docs-code language="typescript">
+```ts
 
 // ERROR
 const expression = 'funky';
@@ -466,15 +428,15 @@ const raw = String.raw`A tagged template ${expression} string`;
  template: '<div>' + raw + '</div>'
  …
 
-</docs-code>
+```
 
-[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw) es una *función tag* nativa de JavaScript ES2015.
+[`String.raw()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/raw) es una _función tag_ nativa de JavaScript ES2015.
 
 El compilador AOT no soporta expresiones de plantilla etiquetada; evítalas en expresiones de metadata.
 
 ## Se esperaba referencia a símbolo
 
-ÚTIL: *El compilador esperaba una referencia a un símbolo en la ubicación especificada en el mensaje de error.*
+ÚTIL: _El compilador esperaba una referencia a un símbolo en la ubicación especificada en el mensaje de error._
 
 Este error puede ocurrir si usas una expresión en la cláusula `extends` de una clase.
 
diff --git a/adev-es/src/content/tools/cli/build-system-migration.en.md b/adev-es/src/content/tools/cli/build-system-migration.en.md
index 0d9a64c..51eec62 100644
--- a/adev-es/src/content/tools/cli/build-system-migration.en.md
+++ b/adev-es/src/content/tools/cli/build-system-migration.en.md
@@ -36,21 +36,21 @@ The errors will attempt to provide solutions to the problem when possible and th
 When updating to Angular v18 via `ng update`, you will be asked to execute the migration.
 This migration is entirely optional for v18 and can also be run manually at anytime after an update via the following command:
 
-<docs-code language="shell">
+```shell
 
 ng update @angular/cli --name use-application-builder
 
-</docs-code>
+```
 
 The migration does the following:
 
-* Converts existing `browser` or `browser-esbuild` target to `application`
-* Removes any previous SSR builders (because `application` does that now).
-* Updates configuration accordingly.
-* Merges `tsconfig.server.json` with `tsconfig.app.json` and adds the TypeScript option `"esModuleInterop": true` to ensure `express` imports are [ESM compliant](#esm-default-imports-vs-namespace-imports).
-* Updates application server code to use new bootstrapping and output directory structure.
-* Removes any webpack-specific builder stylesheet usage such as the tilde or caret in `@import`/`url()` and updates the configuration to provide equivalent behavior
-* Converts to use the new lower dependency `@angular/build` Node.js package if no other `@angular-devkit/build-angular` usage is found.
+- Converts existing `browser` or `browser-esbuild` target to `application`
+- Removes any previous SSR builders (because `application` does that now).
+- Updates configuration accordingly.
+- Merges `tsconfig.server.json` with `tsconfig.app.json` and adds the TypeScript option `"esModuleInterop": true` to ensure `express` imports are [ESM compliant](#esm-default-imports-vs-namespace-imports).
+- Updates application server code to use new bootstrapping and output directory structure.
+- Removes any webpack-specific builder stylesheet usage such as the tilde or caret in `@import`/`url()` and updates the configuration to provide equivalent behavior
+- Converts to use the new lower dependency `@angular/build` Node.js package if no other `@angular-devkit/build-angular` usage is found.
 
 ### Manual migration
 
@@ -59,7 +59,7 @@ Both options are considered stable and fully supported by the Angular team.
 The choice of which option to use is a factor of how many changes you will need to make to migrate and what new features you would like to use in the project.
 
 - The `browser-esbuild` builder builds only the client-side bundle of an application designed to be compatible with the existing `browser` builder that provides the preexisting build system.
-This builder provides equivalent build options, and in many cases, it serves as a drop-in replacement for existing `browser` applications.
+  This builder provides equivalent build options, and in many cases, it serves as a drop-in replacement for existing `browser` applications.
 - The `application` builder covers an entire application, such as the client-side bundle, as well as optionally building a server for server-side rendering and performing build-time prerendering of static pages.
 
 The `application` builder is generally preferred as it improves server-side rendered (SSR) builds, and makes it easier for client-side rendered projects to adopt SSR in the future.
@@ -78,23 +78,23 @@ You can update the `build` target for any application target to migrate to the n
 
 The following is what you would typically find in `angular.json` for an application:
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser",
 ...
-</docs-code>
+```
 
 Changing the `builder` field is the only change you will need to make.
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser-esbuild",
 ...
-</docs-code>
+```
 
 #### Manual migration to the new `application` builder
 
@@ -103,23 +103,23 @@ This builder is the default for all new applications created via `ng new`.
 
 The following is what you would typically find in `angular.json` for an application:
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser",
 ...
-</docs-code>
+```
 
 Changing the `builder` field is the first change you will need to make.
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:application",
 ...
-</docs-code>
+```
 
 Once the builder name has been changed, options within the `build` target will need to be updated.
 The following list discusses all the `browser` builder options that will need to be adjusted.
@@ -160,22 +160,22 @@ Depending on the choice of builder migration, some of the command line options m
 If the build command is contained in any `npm` or other scripts, ensure they are reviewed and updated.
 For applications that have migrated to the `application` builder and that use SSR and/or prererending, you also may be able to remove extra `ng run` commands from scripts now that `ng build` has integrated SSR support.
 
-<docs-code language="shell">
+```shell
 
 ng build
 
-</docs-code>
+```
 
 ## Starting the development server
 
 The development server will automatically detect the new build system and use it to build the application.
 To start the development server no changes are necessary to the `dev-server` builder configuration or command line.
 
-<docs-code language="shell">
+```shell
 
 ng serve
 
-</docs-code>
+```
 
 You can continue to use the [command line options](/cli/serve) you have used in the past with the development server.
 
@@ -188,6 +188,7 @@ This will not occur in builds outside the development server.
 Hot Module Replacement (HMR) is a technique used by development servers to avoid reloading the entire page when only part of an application is changed.
 The changes in many cases can be immediately shown in the browser which allows for an improved edit/refresh cycle while developing an application.
 While general JavaScript-based hot module replacement (HMR) is currently not supported, several more specific forms of HMR are available:
+
 - **global stylesheet** (`styles` build option)
 - **component stylesheet** (inline and file-based)
 - **component template** (inline and file-based)
@@ -199,11 +200,11 @@ The build system will attempt to compile and process the minimal amount of appli
 If preferred, the HMR capabilities can be disabled by setting the `hmr` development server option to `false`.
 This can also be changed on the command line via:
 
-<docs-code language="shell">
+```shell
 
 ng serve --no-hmr
 
-</docs-code>
+```
 
 ### Vite as a development server
 
@@ -217,6 +218,7 @@ The prebundling process analyzes all the third-party project dependencies within
 This process removes the need to rebuild and bundle the project's dependencies each time a rebuild occurs or the development server is executed.
 
 In most cases, no additional customization is required. However, some situations where it may be needed include:
+
 - Customizing loader behavior for imports within the dependency such as the [`loader` option](#file-extension-loader-customization)
 - Symlinking a dependency to local code for development such as [`npm link`](https://docs.npmjs.com/cli/v10/commands/npm-link)
 - Working around an error encountered during prebundling of a dependency
@@ -225,7 +227,7 @@ The prebundling process can be fully disabled or individual dependencies can be
 The `dev-server` builder's `prebundle` option can be used for these customizations.
 To exclude specific dependencies, the `prebundle.exclude` option is available:
 
-<docs-code language="json">
+```json
     "serve": {
       "builder": "@angular/build:dev-server",
       "options": {
@@ -233,18 +235,18 @@ To exclude specific dependencies, the `prebundle.exclude` option is available:
           "exclude": ["some-dep"]
         }
       },
-</docs-code>
+```
 
 By default, `prebundle` is set to `true` but can be set to `false` to fully disable prebundling.
 However, excluding specific dependencies is recommended instead since rebuild times will increase with prebundling disabled.
 
-<docs-code language="json">
+```json
     "serve": {
       "builder": "@angular/build:dev-server",
       "options": {
         "prebundle": false
       },
-</docs-code>
+```
 
 ## New features
 
@@ -267,7 +269,7 @@ Within the configuration file, the option is in the form of an object.
 The keys of the object represent the identifier to replace and the values of the object represent the corresponding replacement value for the identifier.
 An example is as follows:
 
-<docs-code language="json">
+```json
   "build": {
     "builder": "@angular/build:application",
     "options": {
@@ -279,7 +281,7 @@ An example is as follows:
       }
     }
   }
-</docs-code>
+```
 
 HELPFUL: All replacement values are defined as strings within the configuration file.
 If the replacement is intended to be an actual string literal, it should be enclosed in single quote marks.
@@ -290,19 +292,19 @@ The CLI will merge `--define` values from the command line with `define` values
 Command line usage takes precedence if the same identifier is present for both.
 For command line usage, the `--define` option uses the format of `IDENTIFIER=VALUE`.
 
-<docs-code language="shell">
+```shell
 ng build --define SOME_NUMBER=5 --define "ANOTHER='these will overwrite existing'"
-</docs-code>
+```
 
 Environment variables can also be selectively included in a build.
 For non-Windows shells, the quotes around the hash literal can be escaped directly if preferred.
 This example assumes a bash-like shell but similar behavior is available for other shells as well.
 
-<docs-code language="shell">
+```shell
 export MY_APP_API_HOST="http://example.com"
 export API_RETRY=3
 ng build --define API_HOST=\'$MY_APP_API_HOST\' --define API_RETRY=$API_RETRY
-</docs-code>
+```
 
 For either usage, TypeScript needs to be aware of the types for the identifiers to prevent type-checking errors during the build.
 This can be accomplished with an additional type definition file within the application source code (`src/types.d.ts`, for example) with similar content:
@@ -329,10 +331,13 @@ When using the `application` builder, the `loader` option can be used to handle
 The option allows a project to define the type of loader to use with a specified file extension.
 A file with the defined extension can then be used within the application code via an import statement or dynamic import expression.
 The available loaders that can be used are:
-* `text` - inlines the content as a `string` available as the default export
-* `binary` - inlines the content as a `Uint8Array` available as the default export
-* `file` - emits the file at the application output path and provides the runtime location of the file as the default export
-* `empty` - considers the content to be empty and will not include it in bundles
+
+- `text` - inlines the content as a `string` available as the default export
+- `binary` - inlines the content as a `Uint8Array` available as the default export
+- `file` - emits the file at the application output path and provides the runtime location of the file as the default export
+- `dataurl` - inlines the content as a [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
+- `base64` - inlines the content as a Base64-encoded string.
+- `empty` - considers the content to be empty and will not include it in bundles
 
 The `empty` value, while less common, can be useful for compatibility of third-party libraries that may contain bundler-specific import usage that needs to be removed.
 One case for this is side-effect imports (`import 'my.css';`) of CSS files which has no effect in a browser.
@@ -342,7 +347,7 @@ The loader option is an object-based option with the keys used to define the fil
 
 An example of the build option usage to inline the content of SVG files into the bundled application would be as follows:
 
-<docs-code language="json">
+```json
   "build": {
     "builder": "@angular/build:application",
     "options": {
@@ -352,9 +357,10 @@ An example of the build option usage to inline the content of SVG files into the
       }
     }
   }
-</docs-code>
+```
 
 An SVG file can then be imported:
+
 ```ts
 import contents from './some-file.svg';
 
@@ -362,6 +368,7 @@ console.log(contents); // <svg>...</svg>
 ```
 
 Additionally, TypeScript needs to be aware of the module type for the import to prevent type-checking errors during the build. This can be accomplished with an additional type definition file within the application source code (`src/types.d.ts`, for example) with the following or similar content:
+
 ```ts
 declare module "*.svg" {
   const content: string;
@@ -379,9 +386,12 @@ The presence of the import attribute takes precedence over all other loading beh
 For general loading for all files of an otherwise unsupported file type, the [`loader`](#file-extension-loader-customization) build option is recommended.
 
 For the import attribute, the following loader values are supported:
-* `text` - inlines the content as a `string` available as the default export
-* `binary` - inlines the content as a `Uint8Array` available as the default export
-* `file` - emits the file at the application output path and provides the runtime location of the file as the default export
+
+- `text` - inlines the content as a `string` available as the default export
+- `binary` - inlines the content as a `Uint8Array` available as the default export
+- `file` - emits the file at the application output path and provides the runtime location of the file as the default export
+- `dataurl` - inlines the content as a [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
+- `base64` - inlines the content as a Base64-encoded string.
 
 An additional requirement to use import attributes is that the TypeScript `module` option must be set to `esnext` to allow TypeScript to successfully build the application code.
 Once `ES2025` is available within TypeScript, this change will no longer be needed.
@@ -389,28 +399,51 @@ Once `ES2025` is available within TypeScript, this change will no longer be need
 At this time, TypeScript does not support type definitions that are based on import attribute values.
 The use of `@ts-expect-error`/`@ts-ignore` or the use of individual type definition files (assuming the file is only imported with the same loader attribute) is currently required.
 As an example, an SVG file can be imported as text via:
+
 ```ts
 // @ts-expect-error TypeScript cannot provide types based on attributes yet
 import contents from './some-file.svg' with { loader: 'text' };
 ```
 
 The same can be accomplished with an import expression inside an async function.
+
 ```ts
 async function loadSvg(): Promise<string> {
   // @ts-expect-error TypeScript cannot provide types based on attributes yet
   return import('./some-file.svg', { with: { loader: 'text' } }).then((m) => m.default);
 }
 ```
+
 For the import expression, the `loader` value must be a string literal to be statically analyzed.
 A warning will be issued if the value is not a string literal.
 
 The `file` loader is useful when a file will be loaded at runtime through either a `fetch()`, setting to an image elements `src`, or other similar method.
+
 ```ts
 // @ts-expect-error TypeScript cannot provide types based on attributes yet
 import imagePath from './image.webp' with { loader: 'file' };
 
 console.log(imagePath); // media/image-ULK2SIIB.webp
 ```
+
+The `base64` loader is useful when a file needs to be embedded directly into the bundle as an encoded string that can later be used to construct a Data URL.
+
+```ts
+// @ts-expect-error TypeScript cannot provide types based on attributes yet
+import logo from './logo.png' with { loader: 'base64' };
+
+console.log(logo) // "iVBORw0KGgoAAAANSUhEUgAA..."
+```
+
+The `dataurl` loader to inline assets as complete Data URLs.
+
+```ts
+// @ts-expect-error TypeScript cannot provide types based on attributes yet
+import icon from './icon.svg' with { loader: 'dataurl' };
+
+console.log(icon);// "data:image/svg+xml;..."
+```
+
 For production builds as shown in the code comment above, hashing will be automatically added to the path for long-term caching.
 
 HELPFUL: When using the development server and using a `loader` attribute to import a file from a Node.js package, that package must be excluded from prebundling via the development server `prebundle` option.
@@ -420,9 +453,10 @@ HELPFUL: When using the development server and using a `loader` attribute to imp
 Projects may need to map certain import paths to different files based on the type of build.
 This can be particularly useful for cases such as `ng serve` needing to use debug/development specific code but `ng build` needing to use code without any development features/information.
 Several import/export [conditions](https://nodejs.org/api/packages.html#community-conditions-definitions) are automatically applied to support these project needs:
-* For optimized builds, the `production` condition is enabled.
-* For non-optimized builds, the `development` condition is enabled.
-* For browser output code, the `browser` condition is enabled.
+
+- For optimized builds, the `production` condition is enabled.
+- For non-optimized builds, the `development` condition is enabled.
+- For browser output code, the `browser` condition is enabled.
 
 An optimized build is determined by the value of the `optimization` option.
 When `optimization` is set to `true` or more specifically if `optimization.scripts` is set to `true`, then the build is considered optimized.
@@ -431,13 +465,14 @@ In a new project, `ng build` defaults to optimized and `ng serve` defaults to no
 
 A useful method to leverage these conditions within application code is to combine them with [subpath imports](https://nodejs.org/api/packages.html#subpath-imports).
 By using the following import statement:
+
 ```ts
 import {verboseLogging} from '#logger';
 ```
 
 The file can be switched in the `imports` field in `package.json`:
 
-<docs-code language="json">
+```json
 {
   ...
   "imports": {
@@ -447,11 +482,11 @@ The file can be switched in the `imports` field in `package.json`:
     }
   }
 }
-</docs-code>
+```
 
 For applications that are also using SSR, browser and server code can be switched by using the `browser` condition:
 
-<docs-code language="json">
+```json
 {
   ...
   "imports": {
@@ -461,7 +496,7 @@ For applications that are also using SSR, browser and server code can be switche
     }
   }
 }
-</docs-code>
+```
 
 These conditions also apply to Node.js packages and any defined [`exports`](https://nodejs.org/api/packages.html#conditional-exports) within the packages.
 
@@ -497,7 +532,7 @@ console.log(moment().format());
 
 The build will generate a warning to notify you that there is a potential problem. The warning will be similar to:
 
-<docs-code language="text">
+```text
 ▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]
 
     src/main.ts:2:12:
@@ -511,7 +546,7 @@ Consider changing "moment" to a default import instead:
         │        ~~~~~~~~~~~
         ╵        moment
 
-</docs-code>
+```
 
 However, you can avoid the runtime errors and the warning by enabling the `esModuleInterop` TypeScript option for the application and changing the import to the following:
 
@@ -529,7 +564,7 @@ This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the
 
 IMPORTANT: Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well.
 
-### Output location changes 
+### Output location changes
 
 By default, after a successful build by the application builder the bundle is located in a `dist/<project-name>/browser` directory (instead of `dist/<project-name>` for the browser builder).
 This might break some of the toolchains that rely the previous location. In this case, you can [configure the output path](reference/configs/workspace-config#output-path-configuration) to suit your needs.
@@ -538,4 +573,4 @@ This might break some of the toolchains that rely the previous location. In this
 
 Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues).
 
-Please provide a minimal reproduction where possible to aid the team in addressing issues.
\ No newline at end of file
+Please provide a minimal reproduction where possible to aid the team in addressing issues.
diff --git a/adev-es/src/content/tools/cli/build-system-migration.md b/adev-es/src/content/tools/cli/build-system-migration.md
index 65b1a6d..6e9bab9 100644
--- a/adev-es/src/content/tools/cli/build-system-migration.md
+++ b/adev-es/src/content/tools/cli/build-system-migration.md
@@ -23,9 +23,9 @@ Las aplicaciones nuevas usarán este nuevo sistema de construcción por defecto
 
 Tanto procedimientos automatizados como manuales están disponibles dependiendo de los requisitos del proyecto.
 Comenzando con v18, el proceso de actualización preguntará si te gustaría migrar aplicaciones existentes para usar el nuevo sistema de construcción a través de la migración automatizada.
-Antes de migrar, por favor considera revisar la sección [Problemas Conocidos](#known-issues) ya que puede contener información relevante para tu proyecto.
+Antes de migrar, por favor considera revisar la sección [Problemas Conocidos](#problemas-conocidos) ya que puede contener información relevante para tu proyecto.
 
-ÚTIL: Recuerda eliminar cualquier suposición CommonJS en el código del servidor de aplicación si usas SSR como `require`, `__filename`, `__dirname`, u otras construcciones del [ámbito de módulo CommonJS](https://nodejs.org/api/modules.html#the-module-scope). Todo el código de aplicación debería ser compatible con ESM. Esto no aplica a dependencias de terceros.
+CONSEJO: Recuerda eliminar cualquier suposición CommonJS en el código del servidor de aplicación si usas SSR como `require`, `__filename`, `__dirname`, u otras construcciones del [ámbito de módulo CommonJS](https://nodejs.org/api/modules.html#the-module-scope). Todo el código de aplicación debería ser compatible con ESM. Esto no aplica a dependencias de terceros.
 
 ### Migración automatizada (Recomendado)
 
@@ -36,21 +36,21 @@ Los errores intentarán proporcionar soluciones al problema cuando sea posible y
 Al actualizar a Angular v18 a través de `ng update`, se te pedirá ejecutar la migración.
 Esta migración es completamente opcional para v18 y también se puede ejecutar manualmente en cualquier momento después de una actualización a través del siguiente comando:
 
-<docs-code language="shell">
+```shell
 
 ng update @angular/cli --name use-application-builder
 
-</docs-code>
+```
 
 La migración hace lo siguiente:
 
-* Convierte el objetivo existente `browser` o `browser-esbuild` a `application`
-* Elimina cualquier builder SSR previo (porque `application` hace eso ahora).
-* Actualiza la configuración correspondientemente.
-* Fusiona `tsconfig.server.json` con `tsconfig.app.json` y agrega la opción TypeScript `"esModuleInterop": true` para asegurar que las importaciones `express` sean [conformes con ESM](#esm-default-imports-vs-namespace-imports).
-* Actualiza el código del servidor de aplicación para usar la nueva estructura de directorio de salida y bootstrapping.
-* Elimina cualquier uso de hoja de estilo del builder específico de webpack como la tilde o caret en `@import`/`url()` y actualiza la configuración para proporcionar comportamiento equivalente
-* Convierte para usar el nuevo paquete Node.js `@angular/build` de menor dependencia si no se encuentra otro uso de `@angular-devkit/build-angular`.
+- Convierte el objetivo existente `browser` o `browser-esbuild` a `application`
+- Elimina cualquier builder SSR previo (porque `application` hace eso ahora).
+- Actualiza la configuración correspondientemente.
+- Fusiona `tsconfig.server.json` con `tsconfig.app.json` y agrega la opción TypeScript `"esModuleInterop": true` para asegurar que las importaciones `express` sean [conformes con ESM](#importaciones-predeterminadas-esm-vs-importaciones-de-espacio-de-nombres).
+- Actualiza el código del servidor de aplicación para usar la nueva estructura de directorio de salida y bootstrapping.
+- Elimina cualquier uso de hoja de estilo del builder específico de webpack como la tilde o caret en `@import`/`url()` y actualiza la configuración para proporcionar comportamiento equivalente
+- Convierte para usar el nuevo paquete Node.js `@angular/build` de menor dependencia si no se encuentra otro uso de `@angular-devkit/build-angular`.
 
 ### Migración manual
 
@@ -78,23 +78,23 @@ Puedes actualizar el objetivo `build` para cualquier objetivo de aplicación par
 
 Lo siguiente es lo que típicamente encontrarías en `angular.json` para una aplicación:
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser",
 ...
-</docs-code>
+```
 
 Cambiar el campo `builder` es el único cambio que necesitarás hacer.
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser-esbuild",
 ...
-</docs-code>
+```
 
 #### Migración manual al nuevo builder `application`
 
@@ -103,23 +103,23 @@ Este builder es el predeterminado para todas las aplicaciones nuevas creadas a t
 
 Lo siguiente es lo que típicamente encontrarías en `angular.json` para una aplicación:
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:browser",
 ...
-</docs-code>
+```
 
 Cambiar el campo `builder` es el primer cambio que necesitarás hacer.
 
-<docs-code language="json">
+```json
 ...
 "architect": {
   "build": {
     "builder": "@angular-devkit/build-angular:application",
 ...
-</docs-code>
+```
 
 Una vez que el nombre del builder ha sido cambiado, las opciones dentro del objetivo `build` necesitarán ser actualizadas.
 La siguiente lista discute todas las opciones del builder `browser` que necesitarán ser ajustadas.
@@ -160,26 +160,26 @@ Dependiendo de la elección de migración de builder, algunas de las opciones de
 Si el comando de construcción está contenido en cualquier script `npm` u otro, asegúrate de que sean revisados y actualizados.
 Para aplicaciones que han migrado al builder `application` y que usan SSR y/o prerendering, también podrías ser capaz de eliminar comandos `ng run` extra de scripts ahora que `ng build` tiene soporte SSR integrado.
 
-<docs-code language="shell">
+```shell
 
 ng build
 
-</docs-code>
+```
 
 ## Iniciando el servidor de desarrollo
 
 El servidor de desarrollo detectará automáticamente el nuevo sistema de construcción y lo usará para construir la aplicación.
 Para iniciar el servidor de desarrollo no son necesarios cambios a la configuración del builder `dev-server` o línea de comandos.
 
-<docs-code language="shell">
+```shell
 
 ng serve
 
-</docs-code>
+```
 
 Puedes continuar usando las [opciones de línea de comandos](/cli/serve) que has usado en el pasado con el servidor de desarrollo.
 
-ÚTIL: Con el servidor de desarrollo, puedes ver un pequeño Flash of Unstyled Content (FOUC) al inicio mientras el servidor se inicializa.
+CONSEJO: Con el servidor de desarrollo, puedes ver un pequeño Flash of Unstyled Content (FOUC) al inicio mientras el servidor se inicializa.
 El servidor de desarrollo intenta aplazar el procesamiento de hojas de estilo hasta el primer uso para mejorar los tiempos de reconstrucción.
 Esto no ocurrirá en construcciones fuera del servidor de desarrollo.
 
@@ -188,6 +188,7 @@ Esto no ocurrirá en construcciones fuera del servidor de desarrollo.
 Hot Module Replacement (HMR) es una técnica usada por servidores de desarrollo para evitar recargar toda la página cuando solo parte de una aplicación es cambiada.
 Los cambios en muchos casos pueden ser mostrados inmediatamente en el navegador lo que permite un ciclo mejorado de editar/refrescar mientras se desarrolla una aplicación.
 Mientras el hot module replacement (HMR) basado en JavaScript general actualmente no es soportado, varias formas más específicas de HMR están disponibles:
+
 - **hoja de estilo global** (opción de construcción `styles`)
 - **hoja de estilo de componente** (inline y basada en archivo)
 - **plantilla de componente** (inline y basada en archivo)
@@ -199,11 +200,11 @@ El sistema de construcción intentará compilar y procesar la mínima cantidad d
 Si se prefiere, las capacidades HMR pueden ser deshabilitadas estableciendo la opción del servidor de desarrollo `hmr` a `false`.
 Esto también puede ser cambiado en la línea de comandos a través de:
 
-<docs-code language="shell">
+```shell
 
 ng serve --no-hmr
 
-</docs-code>
+```
 
 ### Vite como servidor de desarrollo
 
@@ -217,7 +218,8 @@ El proceso de prebundling analiza todas las dependencias de proyecto de terceros
 Este proceso elimina la necesidad de reconstruir y empaquetar las dependencias del proyecto cada vez que una reconstrucción ocurre o el servidor de desarrollo es ejecutado.
 
 En la mayoría de los casos, no se requiere personalización adicional. Sin embargo, algunas situaciones donde puede ser necesaria incluyen:
-- Personalizar el comportamiento del loader para importaciones dentro de la dependencia como la [opción `loader`](#file-extension-loader-customization)
+
+- Personalizar el comportamiento del loader para importaciones dentro de la dependencia como la [opción `loader`](#personalización-del-loader-de-extensión-de-archivo)
 - Enlazar simbólicamente una dependencia a código local para desarrollo como [`npm link`](https://docs.npmjs.com/cli/v10/commands/npm-link)
 - Resolver un error encontrado durante el prebundling de una dependencia
 
@@ -225,7 +227,7 @@ El proceso de prebundling puede ser completamente deshabilitado o dependencias i
 La opción `prebundle` del builder `dev-server` puede ser usada para estas personalizaciones.
 Para excluir dependencias específicas, la opción `prebundle.exclude` está disponible:
 
-<docs-code language="json">
+```json
     "serve": {
       "builder": "@angular/build:dev-server",
       "options": {
@@ -233,18 +235,18 @@ Para excluir dependencias específicas, la opción `prebundle.exclude` está dis
           "exclude": ["some-dep"]
         }
       },
-</docs-code>
+```
 
 Por defecto, `prebundle` está establecido a `true` pero puede ser establecido a `false` para deshabilitar completamente el prebundling.
 Sin embargo, excluir dependencias específicas es recomendado en su lugar ya que los tiempos de reconstrucción aumentarán con el prebundling deshabilitado.
 
-<docs-code language="json">
+```json
     "serve": {
       "builder": "@angular/build:dev-server",
       "options": {
         "prebundle": false
       },
-</docs-code>
+```
 
 ## Nuevas características
 
@@ -267,7 +269,7 @@ Dentro del archivo de configuración, la opción está en forma de objeto.
 Las claves del objeto representan el identificador a reemplazar y los valores del objeto representan el valor de reemplazo correspondiente para el identificador.
 Un ejemplo es el siguiente:
 
-<docs-code language="json">
+```json
   "build": {
     "builder": "@angular/build:application",
     "options": {
@@ -279,9 +281,9 @@ Un ejemplo es el siguiente:
       }
     }
   }
-</docs-code>
+```
 
-ÚTIL: Todos los valores de reemplazo se definen como strings dentro del archivo de configuración.
+CONSEJO: Todos los valores de reemplazo se definen como strings dentro del archivo de configuración.
 Si el reemplazo está destinado a ser un literal de string real, debería estar encerrado en comillas simples.
 Esto permite la flexibilidad de usar cualquier tipo JSON válido así como un identificador diferente como reemplazo.
 
@@ -290,19 +292,19 @@ El CLI fusionará valores `--define` de la línea de comandos con valores `defin
 El uso de línea de comandos tiene precedencia si el mismo identificador está presente para ambos.
 Para uso de línea de comandos, la opción `--define` usa el formato de `IDENTIFIER=VALUE`.
 
-<docs-code language="shell">
+```shell
 ng build --define SOME_NUMBER=5 --define "ANOTHER='these will overwrite existing'"
-</docs-code>
+```
 
 Las variables de entorno también pueden ser incluidas selectivamente en una construcción.
 Para shells no Windows, las comillas alrededor del literal hash pueden ser escapadas directamente si se prefiere.
 Este ejemplo asume un shell similar a bash pero comportamiento similar está disponible para otros shells también.
 
-<docs-code language="shell">
+```shell
 export MY_APP_API_HOST="http://example.com"
 export API_RETRY=3
 ng build --define API_HOST=\'$MY_APP_API_HOST\' --define API_RETRY=$API_RETRY
-</docs-code>
+```
 
 Para cualquier uso, TypeScript necesita estar al tanto de los tipos para los identificadores para prevenir errores de verificación de tipo durante la construcción.
 Esto puede ser logrado con un archivo de definición de tipo adicional dentro del código fuente de la aplicación (`src/types.d.ts`, por ejemplo) con contenido similar:
@@ -329,10 +331,13 @@ Al usar el builder `application`, la opción `loader` puede ser usada para manej
 La opción permite a un proyecto definir el tipo de loader a usar con una extensión de archivo especificada.
 Un archivo con la extensión definida puede entonces ser usado dentro del código de aplicación a través de una declaración de importación o expresión de importación dinámica.
 Los loaders disponibles que se pueden usar son:
-* `text` - incorpora el contenido como un `string` disponible como exportación predeterminada
-* `binary` - incorpora el contenido como un `Uint8Array` disponible como exportación predeterminada
-* `file` - emite el archivo en la ruta de salida de la aplicación y proporciona la ubicación en tiempo de ejecución del archivo como exportación predeterminada
-* `empty` - considera el contenido vacío y no lo incluirá en bundles
+
+- `text` - incorpora el contenido como un `string` disponible como exportación predeterminada
+- `binary` - incorpora el contenido como un `Uint8Array` disponible como exportación predeterminada
+- `file` - emite el archivo en la ruta de salida de la aplicación y proporciona la ubicación en tiempo de ejecución del archivo como exportación predeterminada
+- `dataurl` - incorpora el contenido como una [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
+- `base64` - incorpora el contenido como una cadena codificada en Base64.
+- `empty` - considera el contenido vacío y no lo incluirá en bundles
 
 El valor `empty`, aunque menos común, puede ser útil para compatibilidad de librerías de terceros que pueden contener uso de importación específico de bundler que necesita ser removido.
 Un caso para esto son las importaciones de efecto secundario (`import 'my.css';`) de archivos CSS que no tienen efecto en un navegador.
@@ -342,7 +347,7 @@ La opción loader es una opción basada en objeto con las claves usadas para def
 
 Un ejemplo del uso de la opción de construcción para incorporar el contenido de archivos SVG en la aplicación empaquetada sería el siguiente:
 
-<docs-code language="json">
+```json
   "build": {
     "builder": "@angular/build:application",
     "options": {
@@ -352,9 +357,10 @@ Un ejemplo del uso de la opción de construcción para incorporar el contenido d
       }
     }
   }
-</docs-code>
+```
 
 Un archivo SVG puede entonces ser importado:
+
 ```ts
 import contents from './some-file.svg';
 
@@ -362,6 +368,7 @@ console.log(contents); // <svg>...</svg>
 ```
 
 Adicionalmente, TypeScript necesita estar al tanto del tipo de módulo para la importación para prevenir errores de verificación de tipo durante la construcción. Esto puede ser logrado con un archivo de definición de tipo adicional dentro del código fuente de la aplicación (`src/types.d.ts`, por ejemplo) con el siguiente contenido o similar:
+
 ```ts
 declare module "*.svg" {
   const content: string;
@@ -376,12 +383,15 @@ La configuración predeterminada del proyecto ya está configurada para usar cua
 Para casos donde solo ciertos archivos deberían ser cargados de una manera específica, el control por archivo sobre el comportamiento de carga está disponible.
 Esto se logra con un [atributo de importación](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with) `loader` que puede ser usado tanto con declaraciones de importación como expresiones.
 La presencia del atributo de importación tiene precedencia sobre todo otro comportamiento de carga incluyendo JS/TS y cualquier valor de opción de construcción `loader`.
-Para carga general para todos los archivos de un tipo de archivo no soportado de otra manera, la opción de construcción [`loader`](#file-extension-loader-customization) es recomendada.
+Para carga general para todos los archivos de un tipo de archivo no soportado de otra manera, la opción de construcción [`loader`](#personalización-del-loader-de-extensión-de-archivo) es recomendada.
 
 Para el atributo de importación, los siguientes valores de loader son soportados:
-* `text` - incorpora el contenido como un `string` disponible como exportación predeterminada
-* `binary` - incorpora el contenido como un `Uint8Array` disponible como exportación predeterminada
-* `file` - emite el archivo en la ruta de salida de la aplicación y proporciona la ubicación en tiempo de ejecución del archivo como exportación predeterminada
+
+- `text` - incorpora el contenido como un `string` disponible como exportación predeterminada
+- `binary` - incorpora el contenido como un `Uint8Array` disponible como exportación predeterminada
+- `file` - emite el archivo en la ruta de salida de la aplicación y proporciona la ubicación en tiempo de ejecución del archivo como exportación predeterminada
+- `dataurl` - incorpora el contenido como una [data URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).
+- `base64` - incorpora el contenido como una cadena codificada en Base64.
 
 Un requisito adicional para usar atributos de importación es que la opción `module` de TypeScript debe ser establecida a `esnext` para permitir que TypeScript construya exitosamente el código de la aplicación.
 Una vez que `ES2025` esté disponible dentro de TypeScript, este cambio ya no será necesario.
@@ -389,40 +399,64 @@ Una vez que `ES2025` esté disponible dentro de TypeScript, este cambio ya no se
 En este momento, TypeScript no soporta definiciones de tipo que están basadas en valores de atributo de importación.
 El uso de `@ts-expect-error`/`@ts-ignore` o el uso de archivos de definición de tipo individuales (asumiendo que el archivo solo se importa con el mismo atributo de loader) es actualmente requerido.
 Como ejemplo, un archivo SVG puede ser importado como texto a través de:
+
 ```ts
 // @ts-expect-error TypeScript cannot provide types based on attributes yet
 import contents from './some-file.svg' with { loader: 'text' };
 ```
 
 Lo mismo puede ser logrado con una expresión de importación dentro de una función async.
+
 ```ts
 async function loadSvg(): Promise<string> {
   // @ts-expect-error TypeScript cannot provide types based on attributes yet
   return import('./some-file.svg', { with: { loader: 'text' } }).then((m) => m.default);
 }
 ```
+
 Para la expresión de importación, el valor `loader` debe ser un literal de string para ser analizado estáticamente.
 Se emitirá una advertencia si el valor no es un literal de string.
 
 El loader `file` es útil cuando un archivo será cargado en tiempo de ejecución a través de un `fetch()`, estableciéndolo al `src` de un elemento de imagen, u otro método similar.
+
 ```ts
 // @ts-expect-error TypeScript cannot provide types based on attributes yet
 import imagePath from './image.webp' with { loader: 'file' };
 
 console.log(imagePath); // media/image-ULK2SIIB.webp
 ```
-Para construcciones de producción como se muestra en el comentario de código arriba, el hashing será agregado automáticamente a la ruta para caché a largo plazo.
 
-ÚTIL: Al usar el servidor de desarrollo y usar un atributo `loader` para importar un archivo de un paquete Node.js, ese paquete debe ser excluido del prebundling a través de la opción `prebundle` del servidor de desarrollo.
+El loader `base64` es útil cuando un archivo necesita ser incorporado directamente en el bundle como una cadena codificada que luego puede usarse para construir una Data URL.
+
+```ts
+// @ts-expect-error TypeScript cannot provide types based on attributes yet
+import logo from './logo.png' with { loader: 'base64' };
+
+console.log(logo) // "iVBORw0KGgoAAAANSUhEUgAA..."
+```
+
+El loader `dataurl` para incorporar assets como Data URLs completas.
+
+```ts
+// @ts-expect-error TypeScript cannot provide types based on attributes yet
+import icon from './icon.svg' with { loader: 'dataurl' };
+
+console.log(icon);// "data:image/svg+xml;..."
+```
+
+Para construcciones de producción como se muestra en los comentarios de código arriba, el hashing será agregado automáticamente a la ruta para caché a largo plazo.
+
+CONSEJO: Al usar el servidor de desarrollo y usar un atributo `loader` para importar un archivo de un paquete Node.js, ese paquete debe ser excluido del prebundling a través de la opción `prebundle` del servidor de desarrollo.
 
 ### Condiciones de importación/exportación
 
 Los proyectos pueden necesitar mapear ciertas rutas de importación a archivos diferentes basados en el tipo de construcción.
 Esto puede ser particularmente útil para casos como `ng serve` necesitando usar código específico de depuración/desarrollo pero `ng build` necesitando usar código sin características/información de desarrollo.
 Varias [condiciones](https://nodejs.org/api/packages.html#community-conditions-definitions) de importación/exportación se aplican automáticamente para soportar estas necesidades del proyecto:
-* Para construcciones optimizadas, la condición `production` está habilitada.
-* Para construcciones no optimizadas, la condición `development` está habilitada.
-* Para código de salida del navegador, la condición `browser` está habilitada.
+
+- Para construcciones optimizadas, la condición `production` está habilitada.
+- Para construcciones no optimizadas, la condición `development` está habilitada.
+- Para código de salida del navegador, la condición `browser` está habilitada.
 
 Una construcción optimizada se determina por el valor de la opción `optimization`.
 Cuando `optimization` está establecido a `true` o más específicamente si `optimization.scripts` está establecido a `true`, entonces la construcción se considera optimizada.
@@ -431,13 +465,14 @@ En un proyecto nuevo, `ng build` predetermina a optimizado y `ng serve` predeter
 
 Un método útil para aprovechar estas condiciones dentro del código de aplicación es combinarlas con [importaciones de subruta](https://nodejs.org/api/packages.html#subpath-imports).
 Al usar la siguiente declaración de importación:
+
 ```ts
 import {verboseLogging} from '#logger';
 ```
 
 El archivo puede ser cambiado en el campo `imports` en `package.json`:
 
-<docs-code language="json">
+```json
 {
   ...
   "imports": {
@@ -447,11 +482,11 @@ El archivo puede ser cambiado en el campo `imports` en `package.json`:
     }
   }
 }
-</docs-code>
+```
 
 Para aplicaciones que también están usando SSR, el código del navegador y servidor puede ser cambiado usando la condición `browser`:
 
-<docs-code language="json">
+```json
 {
   ...
   "imports": {
@@ -461,11 +496,11 @@ Para aplicaciones que también están usando SSR, el código del navegador y ser
     }
   }
 }
-</docs-code>
+```
 
 Estas condiciones también aplican a paquetes Node.js y cualquier [`exports`](https://nodejs.org/api/packages.html#conditional-exports) definida dentro de los paquetes.
 
-ÚTIL: Si actualmente estás usando la opción de construcción `fileReplacements`, esta característica puede ser capaz de reemplazar su uso.
+CONSEJO: Si actualmente estás usando la opción de construcción `fileReplacements`, esta característica puede ser capaz de reemplazar su uso.
 
 ## Problemas Conocidos
 
@@ -497,7 +532,7 @@ console.log(moment().format());
 
 La construcción generará una advertencia para notificarte que hay un problema potencial. La advertencia será similar a:
 
-<docs-code language="text">
+```text
 ▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]
 
     src/main.ts:2:12:
@@ -511,7 +546,7 @@ Consider changing "moment" to a default import instead:
         │        ~~~~~~~~~~~
         ╵        moment
 
-</docs-code>
+```
 
 Sin embargo, puedes evitar los errores en tiempo de ejecución y la advertencia habilitando la opción TypeScript `esModuleInterop` para la aplicación y cambiando la importación a lo siguiente:
 
@@ -538,4 +573,4 @@ Esto podría romper algunas de las cadenas de herramientas que dependen de la ub
 
 Reporta problemas y solicitudes de características en [GitHub](https://github.com/angular/angular-cli/issues).
 
-Please provide a minimal reproduction where possible to aid the team in addressing issues.
\ No newline at end of file
+Por favor proporciona una reproducción mínima cuando sea posible para ayudar al equipo a abordar los problemas.
diff --git a/adev-es/src/content/tools/cli/build.en.md b/adev-es/src/content/tools/cli/build.en.md
index 8f7367e..a750718 100644
--- a/adev-es/src/content/tools/cli/build.en.md
+++ b/adev-es/src/content/tools/cli/build.en.md
@@ -6,20 +6,19 @@ This will compile your TypeScript code to JavaScript, as well as optimize, bundl
 `ng build` only executes the builder for the `build` target in the default project as specified in `angular.json`.
 Angular CLI includes four builders typically used as `build` targets:
 
-| Builder                                         | Purpose                                                                                                                                                                           |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@angular-devkit/build-angular:application`     | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/).                                     |
+| Builder                                         | Purpose                                                                                                                                                                                                                                        |
+| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@angular-devkit/build-angular:application`     | Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with [esbuild](https://esbuild.github.io/).                                                                                                  |
 | `@angular-devkit/build-angular:browser-esbuild` | Bundles a client-side application for use in a browser with [esbuild](https://esbuild.github.io/). See [`browser-esbuild` documentation](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) for more information. |
-| `@angular-devkit/build-angular:browser`         | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/).                                                                                   |
-| `@angular-devkit/build-angular:ng-packagr`      | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format).                                                                           |
+| `@angular-devkit/build-angular:browser`         | Bundles a client-side application for use in a browser with [webpack](https://webpack.js.org/).                                                                                                                                                |
+| `@angular-devkit/build-angular:ng-packagr`      | Builds an Angular library adhering to [Angular Package Format](tools/libraries/angular-package-format).                                                                                                                                        |
 
 Applications generated by `ng new` use `@angular-devkit/build-angular:application` by default.
 Libraries generated by `ng generate library` use `@angular-devkit/build-angular:ng-packagr` by default.
 
 You can determine which builder is being used for a particular project by looking up the `build` target for that project.
 
-<docs-code language="json">
-
+```json
 {
   "projects": {
     "my-app": {
@@ -36,8 +35,7 @@ You can determine which builder is being used for a particular project by lookin
     }
   }
 }
-
-</docs-code>
+```
 
 This page discusses usage and options of `@angular-devkit/build-angular:application`.
 
@@ -52,8 +50,7 @@ The CLI lets you set size thresholds in your configuration to ensure that parts
 
 Define your size boundaries in the CLI configuration file, `angular.json`, in a `budgets` section for each [configured environment](tools/cli/environments).
 
-<docs-code language="json">
-
+```json
 {
   …
   "configurations": {
@@ -69,8 +66,7 @@ Define your size boundaries in the CLI configuration file, `angular.json`, in a
     }
   }
 }
-
-</docs-code>
+```
 
 You can specify size budgets for the entire app, and for particular parts.
 Each budget entry configures a budget of a given type.
@@ -87,17 +83,17 @@ When you configure a budget, the builder warns or reports an error when a given
 
 Each budget entry is a JSON object with the following properties:
 
-| Property       | Value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Property       | Value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | type           | The type of budget. One of: <table> <thead> <tr> <th> Value </th> <th> Details </th> </tr> </thead> <tbody> <tr> <td> <code>bundle</code> </td> <td> The size of a specific bundle. </td> </tr> <tr> <td> <code>initial</code> </td> <td> The size of JavaScript and CSS needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb. </td> </tr> <tr> <td> <code>allScript</code> </td> <td> The size of all scripts. </td> </tr> <tr> <td> <code>all</code> </td> <td> The size of the entire application. </td> </tr> <tr> <td> <code>anyComponentStyle</code> </td> <td> This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb. </td> </tr> <tr> <td> <code>anyScript</code> </td> <td> The size of any one script. </td> </tr> <tr> <td> <code>any</code> </td> <td> The size of any file. </td> </tr> </tbody> </table> |
-| name           | The name of the bundle (for `type=bundle`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| baseline       | The baseline size for comparison.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| maximumWarning | The maximum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| maximumError   | The maximum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| minimumWarning | The minimum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| minimumError   | The minimum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| warning        | The threshold for warning relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| error          | The threshold for error relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| name           | The name of the bundle (for `type=bundle`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| baseline       | The baseline size for comparison.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| maximumWarning | The maximum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| maximumError   | The maximum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| minimumWarning | The minimum threshold for warning relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| minimumError   | The minimum threshold for error relative to the baseline.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| warning        | The threshold for warning relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| error          | The threshold for error relative to the baseline (min & max).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
 ## Configuring CommonJS dependencies
 
@@ -112,8 +108,7 @@ Angular CLI outputs warnings if it detects that your browser application depends
 When you encounter a CommonJS dependency, consider asking the maintainer to support ECMAScript modules, contributing that support yourself, or using an alternative dependency which meets your needs.
 If the best option is to use a CommonJS dependency, you can disable these warnings by adding the CommonJS module name to `allowedCommonJsDependencies` option in the `build` options located in `angular.json`.
 
-<docs-code language="json">
-
+```json
 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
@@ -124,8 +119,7 @@ If the best option is to use a CommonJS dependency, you can disable these warnin
    }
    …
 },
-
-</docs-code>
+```
 
 ## Configuring browser compatibility
 
@@ -146,4 +140,11 @@ HELPFUL: Use [browsersl.ist](https://browsersl.ist) to display compatible browse
 
 Angular supports [Tailwind CSS](https://tailwindcss.com/), a utility-first CSS framework.
 
-To integrate Tailwind CSS with Angular CLI, see [Using Tailwind CSS with Angular](guide/tailwind)
\ No newline at end of file
+To integrate Tailwind CSS with Angular CLI, see [Using Tailwind CSS with Angular](guide/tailwind)
+
+## Critical CSS inlining
+
+Angular can inline the critical CSS definitions of your application to improve [First Contentful Paint (FCP)](https://web.dev/first-contentful-paint).
+This option is enabled default. You can disable this inlining in the [`styles` customization options](reference/configs/workspace-config#styles-optimization-options).
+
+This optimization extracts the CSS needed to render the initial viewport and inlines it directly into the generated HTML, allowing the browser to display content faster without waiting for the full stylesheets to load. The remaining CSS then loads asynchronously in the background. Angular CLI uses [Beasties](https://github.com/danielroe/beasties) to analyze your application’s HTML and styles.
diff --git a/adev-es/src/content/tools/cli/build.md b/adev-es/src/content/tools/cli/build.md
index f12bc04..fbbf64a 100644
--- a/adev-es/src/content/tools/cli/build.md
+++ b/adev-es/src/content/tools/cli/build.md
@@ -9,7 +9,7 @@ Angular CLI incluye cuatro builders típicamente usados como objetivos `build`:
 | Builder                                         | Propósito                                                                                                                                                                           |
 | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@angular-devkit/build-angular:application`     | Construye una aplicación con un bundle del lado del cliente, un servidor Node y rutas prerenderizadas en tiempo de construcción con [esbuild](https://esbuild.github.io/).                                     |
-| `@angular-devkit/build-angular:browser-esbuild` | Empaqueta una aplicación del lado del cliente para usar en un navegador con [esbuild](https://esbuild.github.io/). Consulta la [documentación de `browser-esbuild`](tools/cli/build-system-migration#manual-migration-to-the-compatibility-builder) para más información. |
+| `@angular-devkit/build-angular:browser-esbuild` | Empaqueta una aplicación del lado del cliente para usar en un navegador con [esbuild](https://esbuild.github.io/). Consulta la [documentación de `browser-esbuild`](tools/cli/build-system-migration#migración-manual-al-builder-de-compatibilidad) para más información. |
 | `@angular-devkit/build-angular:browser`         | Empaqueta una aplicación del lado del cliente para usar en un navegador con [webpack](https://webpack.js.org/).                                                                                   |
 | `@angular-devkit/build-angular:ng-packagr`      | Construye una librería Angular adhiriéndose al [Angular Package Format](tools/libraries/angular-package-format).                                                                           |
 
@@ -18,8 +18,7 @@ Las librerías generadas por `ng generate library` usan `@angular-devkit/build-a
 
 Puedes determinar qué builder se está usando para un proyecto en particular buscando el objetivo `build` para ese proyecto.
 
-<docs-code language="json">
-
+```json
 {
   "projects": {
     "my-app": {
@@ -36,8 +35,7 @@ Puedes determinar qué builder se está usando para un proyecto en particular bu
     }
   }
 }
-
-</docs-code>
+```
 
 Esta página discute el uso y las opciones de `@angular-devkit/build-angular:application`.
 
@@ -52,8 +50,7 @@ El CLI te permite establecer umbrales de tamaño en tu configuración para asegu
 
 Define tus límites de tamaño en el archivo de configuración del CLI, `angular.json`, en una sección `budgets` para cada [entorno configurado](tools/cli/environments).
 
-<docs-code language="json">
-
+```json
 {
   …
   "configurations": {
@@ -69,8 +66,7 @@ Define tus límites de tamaño en el archivo de configuración del CLI, `angular
     }
   }
 }
-
-</docs-code>
+```
 
 Puedes especificar presupuestos de tamaño para toda la aplicación y para partes particulares.
 Cada entrada de presupuesto configura un presupuesto de un tipo dado.
@@ -112,8 +108,7 @@ Angular CLI emite advertencias si detecta que tu aplicación de navegador depend
 Cuando encuentres una dependencia CommonJS, considera pedir al mantenedor que soporte módulos ECMAScript, contribuir ese soporte tú mismo, o usar una dependencia alternativa que satisfaga tus necesidades.
 Si la mejor opción es usar una dependencia CommonJS, puedes deshabilitar estas advertencias agregando el nombre del módulo CommonJS a la opción `allowedCommonJsDependencies` en las opciones `build` ubicadas en `angular.json`.
 
-<docs-code language="json">
-
+```json
 "build": {
   "builder": "@angular-devkit/build-angular:browser",
   "options": {
@@ -124,8 +119,7 @@ Si la mejor opción es usar una dependencia CommonJS, puedes deshabilitar estas
    }
    …
 },
-
-</docs-code>
+```
 
 ## Configurar compatibilidad de navegadores
 
@@ -140,10 +134,17 @@ Consulta el [repositorio de browserslist](https://github.com/browserslist/browse
 Evita expandir esta lista a más navegadores. Incluso si tu código de aplicación es más ampliamente compatible, Angular mismo podría no serlo.
 Solo deberías _reducir_ el conjunto de navegadores o versiones en esta lista.
 
-ÚTIL: Usa [browsersl.ist](https://browsersl.ist) para mostrar navegadores compatibles para una consulta `browserslist`.
+CONSEJO: Usa [browsersl.ist](https://browsersl.ist) para mostrar navegadores compatibles para una consulta `browserslist`.
 
 ## Configurar Tailwind
 
 Angular soporta [Tailwind CSS](https://tailwindcss.com/), un framework CSS utility-first.
 
-Para integrar Tailwind CSS con Angular CLI, consulta [Usando Tailwind CSS con Angular](guide/tailwind)
\ No newline at end of file
+Para integrar Tailwind CSS con Angular CLI, consulta [Usando Tailwind CSS con Angular](guide/tailwind)
+
+## Inline de CSS crítico
+
+Angular puede incluir inline las definiciones de CSS crítico de tu aplicación para mejorar [First Contentful Paint (FCP)](https://web.dev/first-contentful-paint).
+Esta opción está habilitada por defecto. Puedes deshabilitar este inline en las [opciones de personalización de `styles`](reference/configs/workspace-config#styles-optimization-options).
+
+Esta optimización extrae el CSS necesario para renderizar el viewport inicial y lo incluye inline directamente en el HTML generado, permitiendo que el navegador muestre el contenido más rápido sin esperar a que se carguen las hojas de estilo completas. El CSS restante se carga de forma asíncrona en segundo plano. Angular CLI usa [Beasties](https://github.com/danielroe/beasties) para analizar el HTML y los estilos de tu aplicación.
diff --git a/adev-es/src/content/tools/cli/cli-builder.en.md b/adev-es/src/content/tools/cli/cli-builder.en.md
index 33e18ef..cb9f1d0 100644
--- a/adev-es/src/content/tools/cli/cli-builder.en.md
+++ b/adev-es/src/content/tools/cli/cli-builder.en.md
@@ -1,7 +1,7 @@
 # Angular CLI builders
 
 A number of Angular CLI commands run a complex process on your code, such as building, testing, or serving your application.
-The commands use an internal tool called Architect to run *CLI builders*, which invoke another tool (bundler, test runner, server) to accomplish the desired task.
+The commands use an internal tool called Architect to run _CLI builders_, which invoke another tool (bundler, test runner, server) to accomplish the desired task.
 Custom builders can perform an entirely new task, or to change which third-party tool is used by an existing command.
 
 This document explains how CLI builders integrate with the workspace configuration file, and shows how you can create your own builder.
@@ -10,19 +10,19 @@ HELPFUL: Find the code from the examples used here in this [GitHub repository](h
 
 ## CLI builders
 
-The internal Architect tool delegates work to handler functions called *builders*.
+The internal Architect tool delegates work to handler functions called _builders_.
 A builder handler function receives two arguments:
 
 | Argument  | Type             |
-|:---       |:---              |
+| :-------- | :--------------- |
 | `options` | `JSONObject`     |
 | `context` | `BuilderContext` |
 
 The separation of concerns here is the same as with [schematics](tools/cli/schematics-authoring), which are used for other CLI commands that touch your code (such as `ng generate`).
 
-* The `options` object is provided by the CLI user's options and configuration, while the `context` object is provided by the CLI Builder API automatically.
-* In addition to the contextual information, the `context` object also provides access to a scheduling method, `context.scheduleTarget()`.
-    The scheduler executes the builder handler function with a given target configuration.
+- The `options` object is provided by the CLI user's options and configuration, while the `context` object is provided by the CLI Builder API automatically.
+- In addition to the contextual information, the `context` object also provides access to a scheduling method, `context.scheduleTarget()`.
+  The scheduler executes the builder handler function with a given target configuration.
 
 The builder handler function can be synchronous (return a value), asynchronous (return a `Promise`), or watch and return multiple values (return an `Observable`).
 The return values must always be of type `BuilderOutput`.
@@ -38,7 +38,7 @@ A builder resides in a "project" folder that is similar in structure to an Angul
 For example, your `myBuilder` folder could contain the following files.
 
 | Files                    | Purpose                                                                                                   |
-|:---                      | :---                                                                                                      |
+| :----------------------- | :-------------------------------------------------------------------------------------------------------- |
 | `src/my-builder.ts`      | Main source file for the builder definition.                                                              |
 | `src/my-builder.spec.ts` | Source file for tests.                                                                                    |
 | `src/schema.json`        | Definition of builder input options.                                                                      |
@@ -92,7 +92,7 @@ Pass an empty string to remove the status.
 ## Builder input
 
 You can invoke a builder indirectly through a CLI command such as `ng build`, or directly with the Angular CLI `ng run` command.
-In either case, you must provide required inputs, but can let other inputs default to values that are pre-configured for a specific *target*, specified by a [configuration](tools/cli/environments), or set on the command line.
+In either case, you must provide required inputs, but can let other inputs default to values that are pre-configured for a specific _target_, specified by a [configuration](tools/cli/environments), or set on the command line.
 
 ### Input validation
 
@@ -104,7 +104,7 @@ a `source` and a `destination`, each of which are a string.
 
 You can provide the following schema for type validation of these values.
 
-<docs-code header="src/schema.json" language="json">
+```json {header: "schema.json"}
 
 {
   "$schema": "http://json-schema.org/schema",
@@ -118,17 +118,16 @@ You can provide the following schema for type validation of these values.
     }
   }
 }
-
-</docs-code>
+```
 
 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).
 
-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`.
+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`.
 
 Create a file named `builders.json` that looks like this:
 
-<docs-code header="builders.json" language="json">
+```json {header: "builders.json"}
 
 {
   "builders": {
@@ -139,13 +138,11 @@ Create a file named `builders.json` that looks like this:
     }
   }
 }
-
-</docs-code>
+```
 
 In the `package.json` file, add a `builders` key that tells the Architect tool where to find our builder definition file.
 
-<docs-code header="package.json" language="json">
-
+```json {header: "package.json"}
 {
   "name": "@example/copy-file",
   "version": "1.0.0",
@@ -156,8 +153,7 @@ In the `package.json` file, add a `builders` key that tells the Architect tool w
     "@angular-devkit/core": "^12.0.0"
   }
 }
-
-</docs-code>
+```
 
 The official name of our builder is now `@example/copy-file:copy`.
 The first part of this is the package name and the second part is the builder name as specified in the `builders.json` file.
@@ -177,41 +173,37 @@ Architect in the Angular CLI uses the target definition to resolve input options
 The `angular.json` file has a section for each project, and the "architect" section of each project configures targets for builders used by CLI commands such as 'build', 'test', and 'serve'.
 By default, for example, the `ng build` command runs the builder `@angular-devkit/build-angular:browser` to perform the build task, and passes in default option values as specified for the `build` target in `angular.json`.
 
-<docs-code header="angular.json" language="json">
-
-…
-
-"myApp": {
-  …
-  "architect": {
-    "build": {
-      "builder": "@angular-devkit/build-angular:browser",
-      "options": {
-        "outputPath": "dist/myApp",
-        "index": "src/index.html",
-        …
-      },
-      "configurations": {
-        "production": {
-          "fileReplacements": [
-            {
-              "replace": "src/environments/environment.ts",
-              "with": "src/environments/environment.prod.ts"
-            }
-          ],
-          "optimization": true,
-          "outputHashing": "all",
-          …
+```json {header: "angular.json"}
+{
+  "myApp": {
+    "...": "...",
+    "architect": {
+      "build": {
+        "builder": "@angular-devkit/build-angular:browser",
+        "options": {
+          "outputPath": "dist/myApp",
+          "index": "src/index.html",
+          "...": "..."
+        },
+        "configurations": {
+          "production": {
+            "fileReplacements": [
+              {
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }
+            ],
+            "optimization": true,
+            "outputHashing": "all",
+            "...": "..."
+          }
         }
-      }
-    },
-    …
+      },
+      "...": "..."
+    }
   }
 }
-
-…
-
-</docs-code>
+```
 
 The command passes the builder the set of default options specified in the "options" section.
 If you pass the `--configuration=production` flag, it uses the override values specified in the `production` configuration.
@@ -221,14 +213,14 @@ Specify further option overrides individually on the command line.
 
 The generic `ng run` CLI command takes as its first argument a target string of the following form.
 
-<docs-code language="shell">
+```shell
 
 project:target[:configuration]
 
-</docs-code>
+```
 
-|               | Details |
-|:---           |:---     |
+|               | Details                                                                                                               |
+| :------------ | :-------------------------------------------------------------------------------------------------------------------- |
 | project       | The name of the Angular CLI project that the target is associated with.                                               |
 | target        | A named builder configuration from the `architect` section of the `angular.json` file.                                |
 | configuration | (optional) The name of a specific configuration override for the given target, as defined in the `angular.json` file. |
@@ -255,7 +247,7 @@ For more information see [Workspace Configuration](reference/configs/workspace-c
 HELPFUL: You can also invoke a builder directly from another builder or test by calling `context.scheduleBuilder()`.
 You pass an `options` object directly to the method, and those option values are validated against the schema of the builder without further adjustment.
 
-Only the  `context.scheduleTarget()` method resolves the configuration and overrides through the `angular.json` file.
+Only the `context.scheduleTarget()` method resolves the configuration and overrides through the `angular.json` file.
 
 ### Default architect configuration
 
@@ -263,16 +255,15 @@ Let's create a simple `angular.json` file that puts target configurations into c
 
 You can publish the builder to npm (see [Publishing your Library](tools/libraries/creating-libraries#publishing-your-library)), and install it using the following command:
 
-<docs-code language="shell">
+```shell
 
 npm install @example/copy-file
 
-</docs-code>
+```
 
 If you create a new project with `ng new builder-test`, the generated `angular.json` file looks something like this, with only default builder configurations.
 
-<docs-code header="angular.json" language="json">
-
+```json {header: "angular.json"}
 {
   "projects": {
     "builder-test": {
@@ -280,7 +271,6 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            // more options...
             "outputPath": "dist/builder-test",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -289,7 +279,6 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
           },
           "configurations": {
             "production": {
-              // more options...
               "optimization": true,
               "aot": true,
               "buildOptimizer": true
@@ -300,65 +289,64 @@ If you create a new project with `ng new builder-test`, the generated `angular.j
     }
   }
 }
-
-</docs-code>
+```
 
 ### Adding a target
 
 Add a new target that will run our builder to copy a file.
 This target tells the builder to copy the `package.json` file.
 
-* We will add a new target section to the `architect` object for our project
-* The target named `copy-package` uses our builder, which you published to `@example/copy-file`.
-* The options object provides default values for the two inputs that you defined.
-  * `source` - The existing file you are copying.
-  * `destination` - The path you want to copy to.
+- We will add a new target section to the `architect` object for our project
+- The target named `copy-package` uses our builder, which you published to `@example/copy-file`.
+- The options object provides default values for the two inputs that you defined.
+  - `source` - The existing file you are copying.
+  - `destination` - The path you want to copy to.
 
-<docs-code header="angular.json" language="json">
+< header="angular.json" language="json">
 
 {
-  "projects": {
-    "builder-test": {
-      "architect": {
-        "copy-package": {
-          "builder": "@example/copy-file:copy",
-          "options": {
-            "source": "package.json",
-            "destination": "package-copy.json"
-          }
-        },
+"projects": {
+"builder-test": {
+"architect": {
+"copy-package": {
+"builder": "@example/copy-file:copy",
+"options": {
+"source": "package.json",
+"destination": "package-copy.json"
+}
+},
 
         // Existing targets...
       }
     }
-  }
-}
 
+}
+}
 </docs-code>
 
 ### Running the builder
 
 To run our builder with the new target's default configuration, use the following CLI command.
 
-<docs-code language="shell">
+```shell
 
 ng run builder-test:copy-package
 
-</docs-code>
+```
 
 This copies the `package.json` file to `package-copy.json`.
 
 Use command-line arguments to override the configured defaults.
 For example, to run with a different `destination` value, use the following CLI command.
 
-<docs-code language="shell">
+```shell
 
 ng run builder-test:copy-package --destination=package-other.json
 
-</docs-code>
+```
 
 This copies the file to `package-other.json` instead of `package-copy.json`.
-Because you did not override the *source* option, it will still copy from the default `package.json` file.
+Because you did not override the _source_ option, it will still copy from the default `package.json` file.
 
 ## Testing a builder
 
@@ -378,21 +366,21 @@ You can avoid this by renaming `my-builder.spec.ts` to `my-builder.spec.js`.
 Most builders to run once and return. However, this behavior is not entirely compatible with a builder that watches for changes (like a devserver, for example).
 Architect can support watch mode, but there are some things to look out for.
 
-* To be used with watch mode, a builder handler function should return an `Observable`.
-    Architect subscribes to the `Observable` until it completes and might reuse it if the builder is scheduled again with the same arguments.
+- To be used with watch mode, a builder handler function should return an `Observable`.
+  Architect subscribes to the `Observable` until it completes and might reuse it if the builder is scheduled again with the same arguments.
 
-* The builder should always emit a `BuilderOutput` object after each execution.
-    Once it's been executed, it can enter a watch mode, to be triggered by an external event.
-    If an event triggers it to restart, the builder should execute the `context.reportRunning()` function to tell Architect that it is running again.
-    This prevents Architect from stopping the builder if another run is scheduled.
+- The builder should always emit a `BuilderOutput` object after each execution.
+  Once it's been executed, it can enter a watch mode, to be triggered by an external event.
+  If an event triggers it to restart, the builder should execute the `context.reportRunning()` function to tell Architect that it is running again.
+  This prevents Architect from stopping the builder if another run is scheduled.
 
 When your builder calls `BuilderRun.stop()` to exit watch mode, Architect unsubscribes from the builder's `Observable` and calls the builder's teardown logic to clean up.
 This behavior also allows for long-running builds to be stopped and cleaned up.
 
 In general, if your builder is watching an external event, you should separate your run into three phases.
 
-| Phases     | Details |
-|:---        |:---     |
+| Phases     | Details                                                                                                                                                                                                                                       |
+| :--------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Running    | The task being performed, such as invoking a compiler. This ends when the compiler finishes and your builder emits a `BuilderOutput` object.                                                                                                  |
 | Watching   | Between two runs, watch an external event stream. For example, watch the file system for any changes. This ends when the compiler restarts, and `context.reportRunning()` is called.                                                          |
 | Completion | Either the task is fully completed, such as a compiler which needs to run a number of times, or the builder run was stopped (using `BuilderRun.stop()`). Architect executes teardown logic and unsubscribes from your builder's `Observable`. |
@@ -401,7 +389,7 @@ In general, if your builder is watching an external event, you should separate y
 
 The CLI Builder API provides a means of changing the behavior of the Angular CLI by using builders to execute custom logic.
 
-* Builders can be synchronous or asynchronous, execute once or watch for external events, and can schedule other builders or targets.
-* Builders have option defaults specified in the `angular.json` configuration file, which can be overwritten by an alternate configuration for the target, and further overwritten by command line flags
-* The Angular team recommends that you use integration tests to test Architect builders. Use unit tests to validate the logic that the builder executes.
-* If your builder returns an `Observable`, it should clean up the builder in the teardown logic of that `Observable`.
+- Builders can be synchronous or asynchronous, execute once or watch for external events, and can schedule other builders or targets.
+- Builders have option defaults specified in the `angular.json` configuration file, which can be overwritten by an alternate configuration for the target, and further overwritten by command line flags
+- The Angular team recommends that you use integration tests to test Architect builders. Use unit tests to validate the logic that the builder executes.
+- If your builder returns an `Observable`, it should clean up the builder in the teardown logic of that `Observable`.
diff --git a/adev-es/src/content/tools/cli/cli-builder.md b/adev-es/src/content/tools/cli/cli-builder.md
index 906a620..1111421 100644
--- a/adev-es/src/content/tools/cli/cli-builder.md
+++ b/adev-es/src/content/tools/cli/cli-builder.md
@@ -1,7 +1,7 @@
 # Builders del Angular CLI
 
 Varios comandos del Angular CLI ejecutan un proceso complejo en tu código, como construir, probar o servir tu aplicación.
-Los comandos usan una herramienta interna llamada Architect para ejecutar *builders del CLI*, que invocan otra herramienta (bundler, ejecutor de pruebas, servidor) para lograr la tarea deseada.
+Los comandos usan una herramienta interna llamada Architect para ejecutar _builders del CLI_, que invocan otra herramienta (bundler, ejecutor de pruebas, servidor) para lograr la tarea deseada.
 Los builders personalizados pueden realizar una tarea completamente nueva, o cambiar qué herramienta de terceros es usada por un comando existente.
 
 Este documento explica cómo los builders del CLI se integran con el archivo de configuración del workspace, y muestra cómo puedes crear tu propio builder.
@@ -10,7 +10,7 @@ Este documento explica cómo los builders del CLI se integran con el archivo de
 
 ## Builders del CLI
 
-La herramienta interna Architect delega trabajo a funciones manejadoras llamadas *builders*.
+La herramienta interna Architect delega trabajo a funciones manejadoras llamadas _builders_.
 Una función manejadora builder recibe dos argumentos:
 
 | Argumento  | Tipo             |
@@ -20,9 +20,9 @@ Una función manejadora builder recibe dos argumentos:
 
 La separación de preocupaciones aquí es la misma que con [schematics](tools/cli/schematics-authoring), que se usan para otros comandos CLI que tocan tu código (como `ng generate`).
 
-* El objeto `options` es proporcionado por las opciones y configuración del usuario del CLI, mientras que el objeto `context` es proporcionado por la API Builder del CLI automáticamente.
-* Además de la información contextual, el objeto `context` también proporciona acceso a un método de programación, `context.scheduleTarget()`.
-    El programador ejecuta la función manejadora builder con una configuración de objetivo dada.
+- El objeto `options` es proporcionado por las opciones y configuración del usuario del CLI, mientras que el objeto `context` es proporcionado por la API Builder del CLI automáticamente.
+- Además de la información contextual, el objeto `context` también proporciona acceso a un método de programación, `context.scheduleTarget()`.
+  El programador ejecuta la función manejadora builder con una configuración de objetivo dada.
 
 La función manejadora builder puede ser síncrona (devolver un valor), asíncrona (devolver una `Promise`), o observar y devolver múltiples valores (devolver un `Observable`).
 Los valores de retorno siempre deben ser de tipo `BuilderOutput`.
@@ -92,7 +92,7 @@ Pasa una cadena vacía para eliminar el estado.
 ## Entrada del Builder
 
 Puedes invocar un builder indirectamente a través de un comando CLI como `ng build`, o directamente con el comando `ng run` del Angular CLI.
-En cualquier caso, debes proporcionar entradas requeridas, pero puedes dejar que otras entradas predeterminen valores que están preconfigurados para un *objetivo* específico, especificado por una [configuración](tools/cli/environments), o establecido en la línea de comandos.
+En cualquier caso, debes proporcionar entradas requeridas, pero puedes dejar que otras entradas predeterminen valores que están preconfigurados para un _objetivo_ específico, especificado por una [configuración](tools/cli/environments), o establecido en la línea de comandos.
 
 ### Validación de entrada
 
@@ -104,7 +104,7 @@ un `source` y un `destination`, cada uno de los cuales es una cadena.
 
 Puedes proporcionar el siguiente esquema para validación de tipo de estos valores.
 
-<docs-code header="src/schema.json" language="json">
+```json {header: "schema.json"}
 
 {
   "$schema": "http://json-schema.org/schema",
@@ -118,8 +118,7 @@ Puedes proporcionar el siguiente esquema para validación de tipo de estos valor
     }
   }
 }
-
-</docs-code>
+```
 
 ÚTIL: Este es un ejemplo mínimo, pero el uso de un esquema para validación puede ser muy poderoso.
 Para más información, consulta el [sitio web de esquemas JSON](http://json-schema.org).
@@ -128,7 +127,7 @@ Para vincular nuestra implementación del builder con su esquema y nombre, neces
 
 Crea un archivo llamado `builders.json` que se vea así:
 
-<docs-code header="builders.json" language="json">
+```json {header: "builders.json"}
 
 {
   "builders": {
@@ -139,13 +138,11 @@ Crea un archivo llamado `builders.json` que se vea así:
     }
   }
 }
-
-</docs-code>
+```
 
 En el archivo `package.json`, agrega una clave `builders` que le diga a la herramienta Architect dónde encontrar nuestro archivo de definición de builder.
 
-<docs-code header="package.json" language="json">
-
+```json {header: "package.json"}
 {
   "name": "@example/copy-file",
   "version": "1.0.0",
@@ -156,8 +153,7 @@ En el archivo `package.json`, agrega una clave `builders` que le diga a la herra
     "@angular-devkit/core": "^12.0.0"
   }
 }
-
-</docs-code>
+```
 
 El nombre oficial de nuestro builder ahora es `@example/copy-file:copy`.
 La primera parte de esto es el nombre del paquete y la segunda parte es el nombre del builder como se especifica en el archivo `builders.json`.
@@ -177,41 +173,37 @@ Architect en el Angular CLI usa la definición de objetivo para resolver opcione
 El archivo `angular.json` tiene una sección para cada proyecto, y la sección "architect" de cada proyecto configura objetivos para builders usados por comandos CLI como 'build', 'test' y 'serve'.
 Por defecto, por ejemplo, el comando `ng build` ejecuta el builder `@angular-devkit/build-angular:browser` para realizar la tarea de construcción, y pasa valores de opción predeterminados como se especifica para el objetivo `build` en `angular.json`.
 
-<docs-code header="angular.json" language="json">
-
-…
-
-"myApp": {
-  …
-  "architect": {
-    "build": {
-      "builder": "@angular-devkit/build-angular:browser",
-      "options": {
-        "outputPath": "dist/myApp",
-        "index": "src/index.html",
-        …
-      },
-      "configurations": {
-        "production": {
-          "fileReplacements": [
-            {
-              "replace": "src/environments/environment.ts",
-              "with": "src/environments/environment.prod.ts"
-            }
-          ],
-          "optimization": true,
-          "outputHashing": "all",
-          …
+```json {header: "angular.json"}
+{
+  "myApp": {
+    "...": "...",
+    "architect": {
+      "build": {
+        "builder": "@angular-devkit/build-angular:browser",
+        "options": {
+          "outputPath": "dist/myApp",
+          "index": "src/index.html",
+          "...": "..."
+        },
+        "configurations": {
+          "production": {
+            "fileReplacements": [
+              {
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }
+            ],
+            "optimization": true,
+            "outputHashing": "all",
+            "...": "..."
+          }
         }
-      }
-    },
-    …
+      },
+      "...": "..."
+    }
   }
 }
-
-…
-
-</docs-code>
+```
 
 El comando pasa al builder el conjunto de opciones predeterminadas especificadas en la sección "options".
 Si pasas la bandera `--configuration=production`, usa los valores de sobrescritura especificados en la configuración `production`.
@@ -221,11 +213,11 @@ Especifica sobrescrituras de opción adicionales individualmente en la línea de
 
 El comando genérico `ng run` del CLI toma como su primer argumento una cadena de objetivo de la siguiente forma.
 
-<docs-code language="shell">
+```shell
 
 project:target[:configuration]
 
-</docs-code>
+```
 
 |               | Detalles |
 |:---           |:---     |
@@ -263,16 +255,15 @@ Creemos un archivo simple `angular.json` que pone las configuraciones de objetiv
 
 Puedes publicar el builder a npm (consulta [Publicando tu Librería](tools/libraries/creating-libraries#publishing-your-library)), e instalarlo usando el siguiente comando:
 
-<docs-code language="shell">
+```shell
 
 npm install @example/copy-file
 
-</docs-code>
+```
 
 Si creas un nuevo proyecto con `ng new builder-test`, el archivo `angular.json` generado se ve algo así, con solo configuraciones de builder predeterminadas.
 
-<docs-code header="angular.json" language="json">
-
+```json {header: "angular.json"}
 {
   "projects": {
     "builder-test": {
@@ -280,7 +271,6 @@ Si creas un nuevo proyecto con `ng new builder-test`, el archivo `angular.json`
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            // more options...
             "outputPath": "dist/builder-test",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -289,7 +279,6 @@ Si creas un nuevo proyecto con `ng new builder-test`, el archivo `angular.json`
           },
           "configurations": {
             "production": {
-              // more options...
               "optimization": true,
               "aot": true,
               "buildOptimizer": true
@@ -300,65 +289,64 @@ Si creas un nuevo proyecto con `ng new builder-test`, el archivo `angular.json`
     }
   }
 }
-
-</docs-code>
+```
 
 ### Agregando un objetivo
 
 Agrega un nuevo objetivo que ejecutará nuestro builder para copiar un archivo.
 Este objetivo le dice al builder que copie el archivo `package.json`.
 
-* Agregaremos una nueva sección de objetivo al objeto `architect` para nuestro proyecto
-* El objetivo llamado `copy-package` usa nuestro builder, que publicaste a `@example/copy-file`.
-* El objeto options proporciona valores predeterminados para las dos entradas que definiste.
-  * `source` - El archivo existente que estás copiando.
-  * `destination` - La ruta a la que quieres copiar.
+- Agregaremos una nueva sección de objetivo al objeto `architect` para nuestro proyecto
+- El objetivo llamado `copy-package` usa nuestro builder, que publicaste a `@example/copy-file`.
+- El objeto options proporciona valores predeterminados para las dos entradas que definiste.
+  - `source` - El archivo existente que estás copiando.
+  - `destination` - La ruta a la que quieres copiar.
 
-<docs-code header="angular.json" language="json">
+< header="angular.json" language="json">
 
 {
-  "projects": {
-    "builder-test": {
-      "architect": {
-        "copy-package": {
-          "builder": "@example/copy-file:copy",
-          "options": {
-            "source": "package.json",
-            "destination": "package-copy.json"
-          }
-        },
+"projects": {
+"builder-test": {
+"architect": {
+"copy-package": {
+"builder": "@example/copy-file:copy",
+"options": {
+"source": "package.json",
+"destination": "package-copy.json"
+}
+},
 
         // Existing targets...
       }
     }
-  }
-}
 
+}
+}
 </docs-code>
 
 ### Ejecutando el builder
 
 Para ejecutar nuestro builder con la configuración predeterminada del nuevo objetivo, usa el siguiente comando CLI.
 
-<docs-code language="shell">
+```shell
 
 ng run builder-test:copy-package
 
-</docs-code>
+```
 
 Esto copia el archivo `package.json` a `package-copy.json`.
 
 Usa argumentos de línea de comandos para sobrescribir los valores predeterminados configurados.
 Por ejemplo, para ejecutar con un valor `destination` diferente, usa el siguiente comando CLI.
 
-<docs-code language="shell">
+```shell
 
 ng run builder-test:copy-package --destination=package-other.json
 
-</docs-code>
+```
 
 Esto copia el archivo a `package-other.json` en lugar de `package-copy.json`.
-Debido a que no sobrescribiste la opción *source*, aún copiará desde el archivo `package.json` predeterminado.
+Debido a que no sobrescribiste la opción _source_, aún copiará desde el archivo `package.json` predeterminado.
 
 ## Probando un builder
 
@@ -378,13 +366,13 @@ Puedes evitar esto renombrando `my-builder.spec.ts` a `my-builder.spec.js`.
 La mayoría de los builders se ejecutan una vez y regresan. Sin embargo, este comportamiento no es completamente compatible con un builder que observa cambios (como un devserver, por ejemplo).
 Architect puede soportar modo watch, pero hay algunas cosas a tener en cuenta.
 
-* Para ser usado con modo watch, una función manejadora builder debería devolver un `Observable`.
-    Architect se suscribe al `Observable` hasta que completa y podría reutilizarlo si el builder se programa nuevamente con los mismos argumentos.
+- Para ser usado con modo watch, una función manejadora builder debería devolver un `Observable`.
+  Architect se suscribe al `Observable` hasta que completa y podría reutilizarlo si el builder se programa nuevamente con los mismos argumentos.
 
-* El builder siempre debería emitir un objeto `BuilderOutput` después de cada ejecución.
-    Una vez que se ha ejecutado, puede entrar en un modo watch, para ser activado por un evento externo.
-    Si un evento lo activa para reiniciar, el builder debería ejecutar la función `context.reportRunning()` para decirle a Architect que está ejecutándose nuevamente.
-    Esto previene que Architect detenga el builder si otra ejecución está programada.
+- El builder siempre debería emitir un objeto `BuilderOutput` después de cada ejecución.
+  Una vez que se ha ejecutado, puede entrar en un modo watch, para ser activado por un evento externo.
+  Si un evento lo activa para reiniciar, el builder debería ejecutar la función `context.reportRunning()` para decirle a Architect que está ejecutándose nuevamente.
+  Esto previene que Architect detenga el builder si otra ejecución está programada.
 
 Cuando tu builder llama a `BuilderRun.stop()` para salir del modo watch, Architect se desuscribe del `Observable` del builder y llama a la lógica de teardown del builder para limpiar.
 Este comportamiento también permite que las construcciones de larga duración sean detenidas y limpiadas.
@@ -401,7 +389,7 @@ En general, si tu builder está observando un evento externo, deberías separar
 
 La API Builder del CLI proporciona un medio de cambiar el comportamiento del Angular CLI usando builders para ejecutar lógica personalizada.
 
-* Los builders pueden ser síncronos o asíncronos, ejecutarse una vez u observar eventos externos, y pueden programar otros builders u objetivos.
-* Los builders tienen opciones predeterminadas especificadas en el archivo de configuración `angular.json`, que pueden ser sobrescritas por una configuración alternativa para el objetivo, y sobrescritas adicionalmente por banderas de línea de comandos
-* El equipo de Angular recomienda que uses pruebas de integración para probar builders Architect. Usa pruebas unitarias para validar la lógica que el builder ejecuta.
-* Si tu builder devuelve un `Observable`, debería limpiar el builder en la lógica de teardown de ese `Observable`.
+- Los builders pueden ser síncronos o asíncronos, ejecutarse una vez u observar eventos externos, y pueden programar otros builders u objetivos.
+- Los builders tienen opciones predeterminadas especificadas en el archivo de configuración `angular.json`, que pueden ser sobrescritas por una configuración alternativa para el objetivo, y sobrescritas adicionalmente por banderas de línea de comandos
+- El equipo de Angular recomienda que uses pruebas de integración para probar builders Architect. Usa pruebas unitarias para validar la lógica que el builder ejecuta.
+- Si tu builder devuelve un `Observable`, debería limpiar el builder en la lógica de teardown de ese `Observable`.
diff --git a/adev-es/src/content/tools/cli/deployment.en.md b/adev-es/src/content/tools/cli/deployment.en.md
index d69b3e1..bed7ace 100644
--- a/adev-es/src/content/tools/cli/deployment.en.md
+++ b/adev-es/src/content/tools/cli/deployment.en.md
@@ -13,12 +13,12 @@ You can then use the `ng deploy` command to deploy that project.
 
 For example, the following command automatically deploys a project to [Firebase](https://firebase.google.com/).
 
-<docs-code language="shell">
+```shell
 
 ng add @angular/fire
 ng deploy
 
-</docs-code>
+```
 
 The command is interactive.
 In this case, you must have or create a Firebase account and authenticate using it.
@@ -28,10 +28,10 @@ The table below lists tools which implement deployment functionality to differen
 The `deploy` command for each package may require different command line options.
 You can read more by following the links associated with the package names below:
 
-| Deployment to                                                     | Setup Command                                                                              |
-|:---                                                               |:---                                                                                  |
+| Deployment to                                                     | Setup Command                                                                               |
+| :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
 | [Firebase hosting](https://firebase.google.com/docs/hosting)      | [`ng add @angular/fire`](https://npmjs.org/package/@angular/fire)                           |
-| [Vercel](https://vercel.com/solutions/angular)                    | [`vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular) |
+| [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)               |
 | [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) |
@@ -60,17 +60,17 @@ Client-side rendered Angular applications are perfect candidates for serving wit
 If the application uses the Angular router, you must configure the server to return the application's host page (`index.html`) when asked for a file that it does not have.
 
 A routed application should support "deep links".
-A *deep link* is a URL that specifies a path to a component inside the application.
-For example, `http://my-app.test/users/42` is a *deep link* to the user detail page that displays the user with `id` 42.
+A _deep link_ is a URL that specifies a path to a component inside the application.
+For example, `http://my-app.test/users/42` is a _deep link_ to the user detail page that displays the user with `id` 42.
 
 There is no issue when the user initially loads the index page and then navigates to that URL from within a running client.
-The Angular router performs the navigation *client-side* and does not request a new HTML page.
+The Angular router performs the navigation _client-side_ and does not request a new HTML page.
 
-But clicking a deep link in an email, entering it in the browser address bar, or even refreshing the browser while already on the deep linked page will all be handled by the browser itself, *outside* the running application.
+But clicking a deep link in an email, entering it in the browser address bar, or even refreshing the browser while already on the deep linked page will all be handled by the browser itself, _outside_ the running application.
 The browser makes a direct request to the server for `/users/42`, bypassing Angular's router.
 
 A static server routinely returns `index.html` when it receives a request for `http://my-app.test/`.
-But most servers by default will reject `http://my-app.test/users/42` and returns a `404 - Not Found` error *unless* it is configured to return `index.html` instead.
+But most servers by default will reject `http://my-app.test/users/42` and returns a `404 - Not Found` error _unless_ it is configured to return `index.html` instead.
 Configure the fallback route or 404 page to `index.html` for your server, so Angular is served for deep links and can display the correct route.
 Some servers call this fallback behavior "Single-Page Application" (SPA) mode.
 
@@ -81,25 +81,25 @@ For "real" 404 pages such as `http://my-app.test/does-not-exist`, the server doe
 
 ### Requesting data from a different server (CORS)
 
-Web developers may encounter a [*cross-origin resource sharing*](https://developer.mozilla.org/docs/Web/HTTP/CORS "Cross-origin resource sharing") error when making a network request to a server other than the application's own host server.
+Web developers may encounter a [_cross-origin resource sharing_](https://developer.mozilla.org/docs/Web/HTTP/CORS 'Cross-origin resource sharing') error when making a network request to a server other than the application's own host server.
 Browsers forbid such requests unless the server explicitly permits them.
 
 There isn't anything Angular or the client application can do about these errors.
 The _server_ must be configured to accept the application's requests.
-Read about how to enable CORS for specific servers at [enable-cors.org](https://enable-cors.org/server.html "Enabling CORS server").
+Read about how to enable CORS for specific servers at [enable-cors.org](https://enable-cors.org/server.html 'Enabling CORS server').
 
 ## Production optimizations
 
 `ng build` uses the `production` configuration unless configured otherwise. This configuration enables the following build optimization features.
 
-| Features                                                           | Details                                                                                       |
-|:---                                                                |:---                                                                                           |
-| [Ahead-of-Time (AOT) Compilation](tools/cli/aot-compiler)          | Pre-compiles Angular component templates.                                                     |
+| Features                                                          | Details                                                                                       |
+| :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- |
+| [Ahead-of-Time (AOT) Compilation](tools/cli/aot-compiler)         | Pre-compiles Angular component templates.                                                     |
 | [Production mode](tools/cli/deployment#development-only-features) | Optimizes the application for the best runtime performance                                    |
-| Bundling                                                           | Concatenates your many application and library files into a minimum number of deployed files. |
-| Minification                                                       | Removes excess whitespace, comments, and optional tokens.                                     |
-| Mangling                                                           | Renames functions, classes, and variables to use shorter, arbitrary identifiers.              |
-| Dead code elimination                                              | Removes unreferenced modules and unused code.                                                 |
+| Bundling                                                          | Concatenates your many application and library files into a minimum number of deployed files. |
+| Minification                                                      | Removes excess whitespace, comments, and optional tokens.                                     |
+| Mangling                                                          | Renames functions, classes, and variables to use shorter, arbitrary identifiers.              |
+| Dead code elimination                                             | Removes unreferenced modules and unused code.                                                 |
 
 See [`ng build`](cli/build) for more about CLI build options and their effects.
 
@@ -108,9 +108,9 @@ See [`ng build`](cli/build) for more about CLI build options and their effects.
 When you run an application locally using `ng serve`, Angular uses the development configuration
 at runtime which enables:
 
-* Extra safety checks such as [`expression-changed-after-checked`](errors/NG0100) detection.
-* More detailed error messages.
-* Additional debugging utilities such as the global `ng` variable with [debugging functions](api#core-global) and [Angular DevTools](tools/devtools) support.
+- Extra safety checks such as [`expression-changed-after-checked`](errors/NG0100) detection.
+- More detailed error messages.
+- Additional debugging utilities such as the global `ng` variable with [debugging functions](api#core-global) and [Angular DevTools](tools/devtools) support.
 
 These features are helpful during development, but they require extra code in the app, which is
 undesirable in production. To ensure these features do not negatively impact bundle size for end users, Angular CLI
@@ -120,13 +120,13 @@ Building your application with `ng build` by default uses the `production` confi
 
 ## `--deploy-url`
 
-`--deploy-url` is a command line option used to specify the base path for resolving relative URLs for assets such as images, scripts, and style sheets at *compile* time.
+`--deploy-url` is a command line option used to specify the base path for resolving relative URLs for assets such as images, scripts, and style sheets at _compile_ time.
 
-<docs-code language="shell">
+```shell
 
 ng build --deploy-url /my/assets
 
-</docs-code>
+```
 
 The effect and purpose of `--deploy-url` overlaps with [`<base href>`](guide/routing/common-router-tasks). Both can be used for initial scripts, stylesheets, lazy scripts, and css resources.
 
diff --git a/adev-es/src/content/tools/cli/deployment.md b/adev-es/src/content/tools/cli/deployment.md
index 32da1c9..73f9844 100644
--- a/adev-es/src/content/tools/cli/deployment.md
+++ b/adev-es/src/content/tools/cli/deployment.md
@@ -13,12 +13,12 @@ Luego puedes usar el comando `ng deploy` para desplegar ese proyecto.
 
 Por ejemplo, el siguiente comando despliega automáticamente un proyecto a [Firebase](https://firebase.google.com/).
 
-<docs-code language="shell">
+```shell
 
 ng add @angular/fire
 ng deploy
 
-</docs-code>
+```
 
 El comando es interactivo.
 En este caso, debes tener o crear una cuenta de Firebase y autenticarte usándola.
@@ -42,7 +42,7 @@ Si estás desplegando a un servidor autogestionado o no hay un builder para tu p
 
 Para desplegar manualmente tu aplicación, crea una construcción de producción y copia el directorio de salida a un servidor web o red de entrega de contenido (CDN).
 Por defecto, `ng build` usa la configuración `production`.
-Si has personalizado tus configuraciones de construcción, es posible que quieras confirmar que se están aplicando las [optimizaciones de producción](tools/cli/deployment#production-optimizations) antes de desplegar.
+Si has personalizado tus configuraciones de construcción, es posible que quieras confirmar que se están aplicando las [optimizaciones de producción](tools/cli/deployment#optimizaciones-de-producción) antes de desplegar.
 
 `ng build` genera los artefactos construidos en `dist/my-app/` por defecto, sin embargo esta ruta puede configurarse con la opción `outputPath` en el builder `@angular-devkit/build-angular:browser`.
 Copia este directorio al servidor y configúralo para servir el directorio.
@@ -60,17 +60,17 @@ Las aplicaciones Angular renderizadas del lado del cliente son candidatas perfec
 Si la aplicación usa el router de Angular, debes configurar el servidor para que devuelva la página host de la aplicación (`index.html`) cuando se le pide un archivo que no tiene.
 
 Una aplicación enrutada debería soportar "deep links".
-Un *deep link* es una URL que especifica una ruta a un componente dentro de la aplicación.
-Por ejemplo, `http://my-app.test/users/42` es un *deep link* a la página de detalle del usuario que muestra el usuario con `id` 42.
+Un _deep link_ es una URL que especifica una ruta a un componente dentro de la aplicación.
+Por ejemplo, `http://my-app.test/users/42` es un _deep link_ a la página de detalle del usuario que muestra el usuario con `id` 42.
 
 No hay problema cuando el usuario inicialmente carga la página índice y luego navega a esa URL desde dentro de un cliente en ejecución.
-El router de Angular realiza la navegación *del lado del cliente* y no solicita una nueva página HTML.
+El router de Angular realiza la navegación _del lado del cliente_ y no solicita una nueva página HTML.
 
-Pero hacer clic en un deep link en un correo electrónico, ingresarlo en la barra de direcciones del navegador, o incluso refrescar el navegador mientras ya estás en la página del deep link será manejado por el navegador mismo, *fuera* de la aplicación en ejecución.
+Pero hacer clic en un deep link en un correo electrónico, ingresarlo en la barra de direcciones del navegador, o incluso refrescar el navegador mientras ya estás en la página del deep link será manejado por el navegador mismo, _fuera_ de la aplicación en ejecución.
 El navegador hace una petición directa al servidor por `/users/42`, evitando el router de Angular.
 
 Un servidor estático rutinariamente devuelve `index.html` cuando recibe una petición para `http://my-app.test/`.
-Pero la mayoría de los servidores por defecto rechazarán `http://my-app.test/users/42` y devolverán un error `404 - Not Found` *a menos que* esté configurado para devolver `index.html` en su lugar.
+Pero la mayoría de los servidores por defecto rechazarán `http://my-app.test/users/42` y devolverán un error `404 - Not Found` _a menos que_ esté configurado para devolver `index.html` en su lugar.
 Configura la ruta de respaldo o la página 404 a `index.html` para tu servidor, para que Angular se sirva para deep links y pueda mostrar la ruta correcta.
 Algunos servidores llaman a este comportamiento de respaldo modo "Single-Page Application" (SPA).
 
@@ -81,7 +81,7 @@ Las [páginas 404 implementadas en el router de Angular](guide/routing/common-ro
 
 ### Solicitar datos de un servidor diferente (CORS)
 
-Los desarrolladores web pueden encontrar un error de [*intercambio de recursos de origen cruzado*](https://developer.mozilla.org/docs/Web/HTTP/CORS "Cross-origin resource sharing") al hacer una petición de red a un servidor diferente al servidor host propio de la aplicación.
+Los desarrolladores web pueden encontrar un error de [_intercambio de recursos de origen cruzado_](https://developer.mozilla.org/docs/Web/HTTP/CORS "Cross-origin resource sharing") al hacer una petición de red a un servidor diferente al servidor host propio de la aplicación.
 Los navegadores prohíben tales peticiones a menos que el servidor las permita explícitamente.
 
 No hay nada que Angular o la aplicación cliente puedan hacer sobre estos errores.
@@ -95,7 +95,7 @@ Lee sobre cómo habilitar CORS para servidores específicos en [enable-cors.org]
 | Características                                                           | Detalles                                                                                       |
 |:---                                                                |:---                                                                                           |
 | [Compilación Ahead-of-Time (AOT)](tools/cli/aot-compiler)          | Precompila las plantillas de componentes Angular.                                                     |
-| [Modo de producción](tools/cli/deployment#development-only-features) | Optimiza la aplicación para el mejor rendimiento en tiempo de ejecución                                    |
+| [Modo de producción](tools/cli/deployment#características-solo-de-desarrollo) | Optimiza la aplicación para el mejor rendimiento en tiempo de ejecución                                    |
 | Bundling                                                           | Concatena tus muchos archivos de aplicación y librería en un número mínimo de archivos desplegados. |
 | Minificación                                                       | Elimina espacios en blanco excesivos, comentarios y tokens opcionales.                                     |
 | Mangling                                                           | Renombra funciones, clases y variables para usar identificadores más cortos y arbitrarios.              |
@@ -108,9 +108,9 @@ Consulta [`ng build`](cli/build) para más sobre las opciones de construcción d
 Cuando ejecutas una aplicación localmente usando `ng serve`, Angular usa la configuración de desarrollo
 en tiempo de ejecución que habilita:
 
-* Verificaciones de seguridad adicionales como la detección de [`expression-changed-after-checked`](errors/NG0100).
-* Mensajes de error más detallados.
-* Utilidades de depuración adicionales como la variable global `ng` con [funciones de depuración](api#core-global) y soporte de [Angular DevTools](tools/devtools).
+- Verificaciones de seguridad adicionales como la detección de [`expression-changed-after-checked`](errors/NG0100).
+- Mensajes de error más detallados.
+- Utilidades de depuración adicionales como la variable global `ng` con [funciones de depuración](api#core-global) y soporte de [Angular DevTools](tools/devtools).
 
 Estas características son útiles durante el desarrollo, pero requieren código extra en la aplicación, lo cual es
 indeseable en producción. Para asegurar que estas características no impacten negativamente el tamaño del bundle para los usuarios finales, Angular CLI
@@ -120,13 +120,13 @@ Construir tu aplicación con `ng build` por defecto usa la configuración `produ
 
 ## `--deploy-url`
 
-`--deploy-url` es una opción de línea de comandos usada para especificar la ruta base para resolver URLs relativas para recursos como imágenes, scripts y hojas de estilo en tiempo de *compilación*.
+`--deploy-url` es una opción de línea de comandos usada para especificar la ruta base para resolver URLs relativas para recursos como imágenes, scripts y hojas de estilo en tiempo de _compilación_.
 
-<docs-code language="shell">
+```shell
 
 ng build --deploy-url /my/assets
 
-</docs-code>
+```
 
 El efecto y propósito de `--deploy-url` se superpone con [`<base href>`](guide/routing/common-router-tasks). Ambos pueden usarse para scripts iniciales, hojas de estilo, scripts lazy y recursos css.
 
diff --git a/adev-es/src/content/tools/cli/end-to-end.en.md b/adev-es/src/content/tools/cli/end-to-end.en.md
index c1f888b..012657e 100644
--- a/adev-es/src/content/tools/cli/end-to-end.en.md
+++ b/adev-es/src/content/tools/cli/end-to-end.en.md
@@ -6,15 +6,15 @@ End-to-end or (E2E) testing is a form of testing used to assert your entire appl
 
 The Angular CLI downloads and installs everything you need to run end-to-end tests for your Angular application.
 
-<docs-code language="shell">
+```shell
 
 ng e2e
 
-</docs-code>
+```
 
 The `ng e2e` command will first check your project for the "e2e" target. If it can't locate it, the CLI will then prompt you which e2e package you would like to use and walk you through the setup.
 
-<docs-code language="shell">
+```text
 
 Cannot find "e2e" target for the specified project.
 You can add a package that implements these capabilities.
@@ -34,7 +34,7 @@ WebdriverIO
 Playwright
 Puppeteer
 
-</docs-code>
+```
 
 If you don't find the test runner you would like to use from the list above, you can manually add a package using `ng add`.
 
@@ -42,11 +42,11 @@ If you don't find the test runner you would like to use from the list above, you
 
 Now that your application is configured for end-to-end testing we can now run the same command to execute your tests.
 
-<docs-code language="shell">
+```shell
 
 ng e2e
 
-</docs-code>
+```
 
 Note, their isn't anything "special" about running your tests with any of the integrated e2e packages. The `ng e2e` command is really just running the `e2e` builder under the hood. You can always [create your own custom builder](tools/cli/cli-builder#creating-a-builder) named `e2e` and run it using `ng e2e`.
 
diff --git a/adev-es/src/content/tools/cli/end-to-end.md b/adev-es/src/content/tools/cli/end-to-end.md
index 4e51874..7a7cfa2 100644
--- a/adev-es/src/content/tools/cli/end-to-end.md
+++ b/adev-es/src/content/tools/cli/end-to-end.md
@@ -6,15 +6,15 @@ Las pruebas end-to-end o (E2E) son una forma de pruebas usadas para afirmar que
 
 El Angular CLI descarga e instala todo lo que necesitas para ejecutar pruebas end-to-end para tu aplicación Angular.
 
-<docs-code language="shell">
+```shell
 
 ng e2e
 
-</docs-code>
+```
 
 El comando `ng e2e` primero verificará tu proyecto por el objetivo "e2e". Si no puede localizarlo, el CLI te preguntará qué paquete e2e te gustaría usar y te guiará a través de la configuración.
 
-<docs-code language="shell">
+```text
 
 Cannot find "e2e" target for the specified project.
 You can add a package that implements these capabilities.
@@ -34,7 +34,7 @@ WebdriverIO
 Playwright
 Puppeteer
 
-</docs-code>
+```
 
 Si no encuentras el ejecutor de pruebas que te gustaría usar de la lista anterior, puedes agregar manualmente un paquete usando `ng add`.
 
@@ -42,13 +42,13 @@ Si no encuentras el ejecutor de pruebas que te gustaría usar de la lista anteri
 
 Ahora que tu aplicación está configurada para pruebas end-to-end, podemos ejecutar el mismo comando para ejecutar tus pruebas.
 
-<docs-code language="shell">
+```shell
 
 ng e2e
 
-</docs-code>
+```
 
-Nota, no hay nada "especial" sobre ejecutar tus pruebas con cualquiera de los paquetes e2e integrados. El comando `ng e2e` realmente solo está ejecutando el builder `e2e` bajo el capó. Siempre puedes [crear tu propio builder personalizado](tools/cli/cli-builder#creating-a-builder) llamado `e2e` y ejecutarlo usando `ng e2e`.
+Nota, no hay nada "especial" sobre ejecutar tus pruebas con cualquiera de los paquetes e2e integrados. El comando `ng e2e` realmente solo está ejecutando el builder `e2e` bajo el capó. Siempre puedes [crear tu propio builder personalizado](tools/cli/cli-builder#creando-un-builder) llamado `e2e` y ejecutarlo usando `ng e2e`.
 
 ## Más información sobre herramientas de pruebas end-to-end
 
diff --git a/adev-es/src/content/tools/cli/environments.en.md b/adev-es/src/content/tools/cli/environments.en.md
index a9a667a..7fe7b27 100644
--- a/adev-es/src/content/tools/cli/environments.en.md
+++ b/adev-es/src/content/tools/cli/environments.en.md
@@ -9,7 +9,7 @@ The [Angular CLI](tools/cli) `build`, `serve`, and `test` commands can then repl
 
 Angular CLI builders support a `configurations` object, which allows overwriting specific options for a builder based on the configuration provided on the command line.
 
-<docs-code language="json">
+```json
 
 {
   "projects": {
@@ -34,23 +34,23 @@ Angular CLI builders support a `configurations` object, which allows overwriting
   }
 }
 
-</docs-code>
+```
 
 You can choose which configuration to use with the `--configuration` option.
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration debug
 
-</docs-code>
+```
 
 Configurations can be applied to any Angular CLI builder. Multiple configurations can be specified with a comma separator. The configurations are applied in order, with conflicting options using the value from the last configuration.
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration debug,production,customer-facing
 
-</docs-code>
+```
 
 ## Configure environment-specific defaults
 
@@ -59,84 +59,84 @@ Using this in combination with `--configuration` provides a mechanism for config
 
 Start by [generating environments](cli/generate/environments) to create the `src/environments/` directory and configure the project to use file replacements.
 
-<docs-code language="shell">
+```shell
 
 ng generate environments
 
-</docs-code>
+```
 
 The project's `src/environments/` directory contains the base configuration file, `environment.ts`, which provides the default configuration for production.
 You can override default values for additional environments, such as `development` and `staging`, in target-specific configuration files.
 
 For example:
 
-<docs-code language="text">
+```text
 
 my-app/src/environments
 ├── environment.development.ts
 ├── environment.staging.ts
 └── environment.ts
 
-</docs-code>
+```
 
 The base file `environment.ts`, contains the default environment settings.
 For example:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: true
 };
 
-</docs-code>
+```
 
 The `build` command uses this as the build target when no environment is specified.
 You can add further variables, either as additional properties on the environment object, or as separate objects.
 For example, the following adds a default for a variable to the default environment:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: true,
   apiUrl: 'http://my-prod-url'
 };
 
-</docs-code>
+```
 
 You can add target-specific configuration files, such as `environment.development.ts`.
 The following content sets default values for the development build target:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: false,
   apiUrl: 'http://my-dev-url'
 };
 
-</docs-code>
+```
 
 ## Using environment-specific variables in your app
 
 To use the environment configurations you have defined, your components must import the original environments file:
 
-<docs-code language="typescript">
+```ts
 
 import { environment } from './environments/environment';
 
-</docs-code>
+```
 
 This ensures that the build and serve commands can find the configurations for specific build targets.
 
 The following code in the component file (`app.component.ts`) uses an environment variable defined in the configuration files.
 
-<docs-code language="typescript">
+```ts
 
 import { environment } from './../environments/environment';
 
 // Fetches from `http://my-prod-url` in production, `http://my-dev-url` in development.
 fetch(environment.apiUrl);
 
-</docs-code>
+```
 
 The main CLI configuration file, `angular.json`, contains a `fileReplacements` section in the configuration for each build target, which lets you replace any file in the TypeScript program with a target-specific version of that file.
 This is useful for including target-specific code or variables in a build that targets a specific environment, such as production or staging.
@@ -144,7 +144,7 @@ This is useful for including target-specific code or variables in a build that t
 By default no files are replaced, however `ng generate environments` sets up this configuration automatically.
 You can change or add file replacements for specific build targets by editing the `angular.json` configuration directly.
 
-<docs-code language="json">
+```json
 
   "configurations": {
     "development": {
@@ -156,13 +156,13 @@ You can change or add file replacements for specific build targets by editing th
         ],
         …
 
-</docs-code>
+```
 
 This means that when you build your development configuration with `ng build --configuration development`, the `src/environments/environment.ts` file is replaced with the target-specific version of the file, `src/environments/environment.development.ts`.
 
 To add a staging environment, create a copy of `src/environments/environment.ts` called `src/environments/environment.staging.ts`, then add a `staging` configuration to `angular.json`:
 
-<docs-code language="json">
+```json
 
   "configurations": {
     "development": { … },
@@ -177,23 +177,23 @@ To add a staging environment, create a copy of `src/environments/environment.ts`
     }
   }
 
-</docs-code>
+```
 
 You can add more configuration options to this target environment as well.
 Any option that your build supports can be overridden in a build target configuration.
 
 To build using the staging configuration, run the following command:
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration staging
 
-</docs-code>
+```
 
 By default, the `build` target includes `production` and `development` configurations and `ng serve` uses the development build of the application.
 You can also configure `ng serve` to use the targeted build configuration if you set the `buildTarget` option:
 
-<docs-code language="json">
+```json
 
   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
@@ -211,7 +211,7 @@ You can also configure `ng serve` to use the targeted build configuration if you
     "defaultConfiguration": "development"
   },
 
-</docs-code>
+```
 
 The `defaultConfiguration` option specifies which configuration is used by default.
 When `defaultConfiguration` is not set, `options` are used directly without modification.
diff --git a/adev-es/src/content/tools/cli/environments.md b/adev-es/src/content/tools/cli/environments.md
index de92123..0ad958c 100644
--- a/adev-es/src/content/tools/cli/environments.md
+++ b/adev-es/src/content/tools/cli/environments.md
@@ -9,7 +9,7 @@ Los comandos `build`, `serve` y `test` del [Angular CLI](tools/cli) pueden enton
 
 Los builders del Angular CLI soportan un objeto `configurations`, que permite sobrescribir opciones específicas para un builder basado en la configuración proporcionada en la línea de comandos.
 
-<docs-code language="json">
+```json
 
 {
   "projects": {
@@ -34,23 +34,23 @@ Los builders del Angular CLI soportan un objeto `configurations`, que permite so
   }
 }
 
-</docs-code>
+```
 
 Puedes elegir qué configuración usar con la opción `--configuration`.
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration debug
 
-</docs-code>
+```
 
 Las configuraciones pueden aplicarse a cualquier builder del Angular CLI. Se pueden especificar múltiples configuraciones con un separador de coma. Las configuraciones se aplican en orden, con opciones conflictivas usando el valor de la última configuración.
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration debug,production,customer-facing
 
-</docs-code>
+```
 
 ## Configurar valores predeterminados específicos del entorno
 
@@ -59,84 +59,84 @@ Usar esto en combinación con `--configuration` proporciona un mecanismo para co
 
 Comienza [generando entornos](cli/generate/environments) para crear el directorio `src/environments/` y configurar el proyecto para usar reemplazos de archivos.
 
-<docs-code language="shell">
+```shell
 
 ng generate environments
 
-</docs-code>
+```
 
 El directorio `src/environments/` del proyecto contiene el archivo de configuración base, `environment.ts`, que proporciona la configuración predeterminada para producción.
 Puedes sobrescribir valores predeterminados para entornos adicionales, como `development` y `staging`, en archivos de configuración específicos del objetivo.
 
 Por ejemplo:
 
-<docs-code language="text">
+```text
 
 my-app/src/environments
 ├── environment.development.ts
 ├── environment.staging.ts
 └── environment.ts
 
-</docs-code>
+```
 
 El archivo base `environment.ts`, contiene la configuración de entorno predeterminada.
 Por ejemplo:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: true
 };
 
-</docs-code>
+```
 
 El comando `build` usa esto como objetivo de construcción cuando no se especifica ningún entorno.
 Puedes agregar más variables, ya sea como propiedades adicionales en el objeto environment, o como objetos separados.
 Por ejemplo, lo siguiente agrega un valor predeterminado para una variable al entorno predeterminado:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: true,
   apiUrl: 'http://my-prod-url'
 };
 
-</docs-code>
+```
 
 Puedes agregar archivos de configuración específicos del objetivo, como `environment.development.ts`.
 El siguiente contenido establece valores predeterminados para el objetivo de construcción de desarrollo:
 
-<docs-code language="typescript">
+```ts
 
 export const environment = {
   production: false,
   apiUrl: 'http://my-dev-url'
 };
 
-</docs-code>
+```
 
 ## Usando variables específicas del entorno en tu aplicación
 
 Para usar las configuraciones de entorno que has definido, tus componentes deben importar el archivo de entornos original:
 
-<docs-code language="typescript">
+```ts
 
 import { environment } from './environments/environment';
 
-</docs-code>
+```
 
 Esto asegura que los comandos build y serve puedan encontrar las configuraciones para objetivos de construcción específicos.
 
 El siguiente código en el archivo del componente (`app.component.ts`) usa una variable de entorno definida en los archivos de configuración.
 
-<docs-code language="typescript">
+```ts
 
 import { environment } from './../environments/environment';
 
 // Obtiene de `http://my-prod-url` en producción, `http://my-dev-url` en desarrollo.
 fetch(environment.apiUrl);
 
-</docs-code>
+```
 
 El archivo de configuración principal del CLI, `angular.json`, contiene una sección `fileReplacements` en la configuración para cada objetivo de construcción, que te permite reemplazar cualquier archivo en el programa TypeScript con una versión específica del objetivo de ese archivo.
 Esto es útil para incluir código o variables específicas del objetivo en una construcción que apunta a un entorno específico, como producción o staging.
@@ -144,7 +144,7 @@ Esto es útil para incluir código o variables específicas del objetivo en una
 Por defecto no se reemplazan archivos, sin embargo `ng generate environments` configura esto automáticamente.
 Puedes cambiar o agregar reemplazos de archivos para objetivos de construcción específicos editando directamente la configuración `angular.json`.
 
-<docs-code language="json">
+```json
 
   "configurations": {
     "development": {
@@ -156,13 +156,13 @@ Puedes cambiar o agregar reemplazos de archivos para objetivos de construcción
         ],
         …
 
-</docs-code>
+```
 
 Esto significa que cuando construyes tu configuración de desarrollo con `ng build --configuration development`, el archivo `src/environments/environment.ts` es reemplazado con la versión específica del objetivo del archivo, `src/environments/environment.development.ts`.
 
 Para agregar un entorno staging, crea una copia de `src/environments/environment.ts` llamada `src/environments/environment.staging.ts`, luego agrega una configuración `staging` a `angular.json`:
 
-<docs-code language="json">
+```json
 
   "configurations": {
     "development": { … },
@@ -177,23 +177,23 @@ Para agregar un entorno staging, crea una copia de `src/environments/environment
     }
   }
 
-</docs-code>
+```
 
 También puedes agregar más opciones de configuración a este entorno objetivo.
 Cualquier opción que tu construcción soporte puede sobrescribirse en una configuración de objetivo de construcción.
 
 Para construir usando la configuración staging, ejecuta el siguiente comando:
 
-<docs-code language="shell">
+```shell
 
 ng build --configuration staging
 
-</docs-code>
+```
 
 Por defecto, el objetivo `build` incluye configuraciones `production` y `development` y `ng serve` usa la construcción de desarrollo de la aplicación.
 También puedes configurar `ng serve` para usar la configuración de construcción objetivo si estableces la opción `buildTarget`:
 
-<docs-code language="json">
+```json
 
   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
@@ -211,7 +211,7 @@ También puedes configurar `ng serve` para usar la configuración de construcci
     "defaultConfiguration": "development"
   },
 
-</docs-code>
+```
 
 La opción `defaultConfiguration` especifica qué configuración se usa por defecto.
 Cuando `defaultConfiguration` no está establecida, `options` se usa directamente sin modificación.
diff --git a/adev-es/src/content/tools/cli/esbuild.en.md b/adev-es/src/content/tools/cli/esbuild.en.md
deleted file mode 100644
index a040575..0000000
--- a/adev-es/src/content/tools/cli/esbuild.en.md
+++ /dev/null
@@ -1,246 +0,0 @@
-# Getting started with the Angular CLI's new build system
-
-In v17 and higher, the new build system provides an improved way to build Angular applications. This new build system includes:
-
-- A modern output format using ESM, with dynamic import expressions to support lazy module loading.
-- Faster build-time performance for both initial builds and incremental rebuilds.
-- Newer JavaScript ecosystem tools such as [esbuild](https://esbuild.github.io/) and [Vite](https://vitejs.dev/).
-- Integrated SSR and prerendering capabilities.
-
-This new build system is stable and fully supported for use with Angular applications.
-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 will not be automatically migrated when updating.
-
-## For new applications
-
-New applications will use this new build system by default via the `application` builder.
-
-## For existing applications
-
-For existing projects, you can opt-in to use the new builder on a per-application basis with two different options.
-Both options are considered stable and fully supported by the Angular team.
-The choice of which option to use is a factor of how many changes you will need to make to migrate and what new features you would like to use in the project.
-
-- The `browser-esbuild` builder builds only the client-side bundle of an application designed to be compatible with the existing `browser` builder that provides the preexisting build system. It serves as a drop-in replacement for existing `browser` applications.
-- The `application` builder covers an entire application, such as the client-side bundle, as well as optionally building a server for server-side rendering and performing build-time prerendering of static pages.
-
-The `application` builder is generally preferred as it improves server-side rendered (SSR) builds, and makes it easier for client-side rendered projects to adopt SSR in the future.
-However it requires a little more migration effort, particularly for existing SSR applications.
-If the `application` builder is difficult for your project to adopt, `browser-esbuild` can be an easier solution which gives most of the build performance benefits with fewer breaking changes.
-
-### Using the `browser-esbuild` builder
-
-A builder named `browser-esbuild` is available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application.
-You can try out the new build system for applications that use the `browser` builder.
-If using a custom builder, please refer to the documentation for that builder on possible migration options.
-
-The compatibility option was implemented to minimize the amount of changes necessary to initially migrate your applications.
-This is provided via an alternate builder (`browser-esbuild`).
-You can update the `build` target for any application target to migrate to the new build system.
-
-The following is what you would typically find in `angular.json` for an application:
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser",
-...
-</docs-code>
-
-Changing the `builder` field is the only change you will need to make.
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser-esbuild",
-...
-</docs-code>
-
-### Using the `application` builder
-
-A builder named `application` is also available within the `@angular-devkit/build-angular` package that is present in an Angular CLI generated application.
-This builder is the default for all new applications created via `ng new`.
-
-The following is what you would typically find in `angular.json` for an application:
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser",
-...
-</docs-code>
-
-Changing the `builder` field is the first change you will need to make.
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:application",
-...
-</docs-code>
-
-Once the builder name has been changed, options within the `build` target will need to be updated.
-The following list discusses all the `browser` builder options that will need to be adjusted.
-
-- `main` should be renamed to `browser`.
-- `polyfills` should be an array, rather than a single file.
-- `buildOptimizer` should be removed, as this is covered by the `optimization` option.
-- `resourcesOutputPath` should be removed, this is now always `media`.
-- `vendorChunk` should be removed, as this was a performance optimization which is no longer needed.
-- `commonChunk` should be removed, as this was a performance optimization which is no longer needed.
-- `deployUrl` should be removed and is not supported. Prefer [`<base href>`](guide/routing/common-router-tasks) instead. See [deployment documentation](tools/cli/deployment#--deploy-url) for more information.
-- `ngswConfigPath` should be renamed to `serviceWorker`.
-
-If the application is not using SSR currently, this should be the final step to allow `ng build` to function.
-After executing `ng build` for the first time, there may be new warnings or errors based on behavioral differences or application usage of Webpack-specific features.
-Many of the warnings will provide suggestions on how to remedy that problem.
-If it appears that a warning is incorrect or the solution is not apparent, please open an issue on [GitHub](https://github.com/angular/angular-cli/issues).
-Also, the later sections of this guide provide additional information on several specific cases as well as current known issues.
-
-For applications new to SSR, the [Angular SSR Guide](guide/ssr) provides additional information regarding the setup process for adding SSR to an application.
-
-For applications that are already using SSR, additional adjustments will be needed to update the application server to support the new integrated SSR capabilities.
-The `application` builder now provides the integrated functionality for all of the following preexisting builders:
-
-- `app-shell`
-- `prerender`
-- `server`
-- `ssr-dev-server`
-
-The `ng update` process will automatically remove usages of the `@nguniversal` scope packages where some of these builders were previously located.
-The new `@angular/ssr` package will also be automatically added and used with configuration and code being adjusted during the update.
-The `@angular/ssr` package supports the `browser` builder as well as the `application` builder.
-To convert from the separate SSR builders to the integrated capabilities of the `application` builder, run the experimental `use-application-builder` migration.
-
-<docs-code language="shell">
-
-ng update @angular/cli --name use-application-builder
-
-</docs-code>
-
-The migration does the following:
-
-* Converts existing `browser` or `browser-esbuild` target to `application`
-* Removes any previous SSR builders (because `application` does that now).
-* Updates configuration accordingly.
-* Merges `tsconfig.server.json` with `tsconfig.app.json` and adds the TypeScript option `"esModuleInterop": true` to ensure `express` imports are [ESM compliant](#esm-default-imports-vs-namespace-imports).
-* Updates application server code to use new bootstrapping and output directory structure.
-
-HELPFUL: Remember to remove any CommonJS assumptions in the application server code such as `require`, `__filename`, `__dirname`, or other constructs from the [CommonJS module scope](https://nodejs.org/api/modules.html#the-module-scope). All application code should be ESM compatible. This does not apply to third-party dependencies.
-
-## Executing a build
-
-Once you have updated the application configuration, builds can be performed using `ng build` as was previously done.
-Depending on the choice of builder migration, some of the command line options may be different.
-If the build command is contained in any `npm` or other scripts, ensure they are reviewed and updated.
-For applications that have migrated to the `application` builder and that use SSR and/or prererending, you also may be able to remove extra `ng run` commands from scripts now that `ng build` has integrated SSR support.
-
-<docs-code language="shell">
-
-ng build
-
-</docs-code>
-
-## Starting the development server
-
-The development server will automatically detect the new build system and use it to build the application.
-To start the development server no changes are necessary to the `dev-server` builder configuration or command line.
-
-<docs-code language="shell">
-
-ng serve
-
-</docs-code>
-
-You can continue to use the [command line options](/cli/serve) you have used in the past with the development server.
-
-## Hot module replacement
-
-JavaScript-based hot module replacement (HMR) is currently not supported.
-However, global stylesheet (`styles` build option) HMR is available and enabled by default.
-Angular focused HMR capabilities are currently planned and will be introduced in a future version.
-
-## Unimplemented options and behavior
-
-Several build options are not yet implemented but will be added in the future as the build system moves towards a stable status. If your application uses these options, you can still try out the build system without removing them. Warnings will be issued for any unimplemented options but they will otherwise be ignored. However, if your application relies on any of these options to function, you may want to wait to try.
-
-- [WASM imports](https://github.com/angular/angular-cli/issues/25102) -- WASM can still be loaded manually via [standard web APIs](https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running).
-
-## ESM default imports vs. namespace imports
-
-TypeScript by default allows default exports to be imported as namespace imports and then used in call expressions.
-This is unfortunately a divergence from the ECMAScript specification.
-The underlying bundler (`esbuild`) within the new build system expects ESM code that conforms to the specification.
-The build system will now generate a warning if your application uses an incorrect type of import of a package.
-However, to allow TypeScript to accept the correct usage, a TypeScript option must be enabled within the application's `tsconfig` file.
-When enabled, the [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) option provides better alignment with the ECMAScript specification and is also recommended by the TypeScript team.
-Once enabled, you can update package imports where applicable to an ECMAScript conformant form.
-
-Using the [`moment`](https://npmjs.com/package/moment) package as an example, the following application code will cause runtime errors:
-
-```ts
-import * as moment from 'moment';
-
-console.log(moment().format());
-```
-
-The build will generate a warning to notify you that there is a potential problem. The warning will be similar to:
-
-<docs-code language="text">
-▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]
-
-    src/main.ts:2:12:
-      2 │ console.log(moment().format());
-        ╵             ~~~~~~
-
-Consider changing "moment" to a default import instead:
-
-    src/main.ts:1:7:
-      1 │ import * as moment from 'moment';
-        │        ~~~~~~~~~~~
-        ╵        moment
-
-</docs-code>
-
-However, you can avoid the runtime errors and the warning by enabling the `esModuleInterop` TypeScript option for the application and changing the import to the following:
-
-```ts
-import moment from 'moment';
-
-console.log(moment().format());
-```
-
-## Vite as a development server
-
-The usage of Vite in the Angular CLI is currently only within a _development server capacity only_. Even without using the underlying Vite build system, Vite provides a full-featured development server with client side support that has been bundled into a low dependency npm package. This makes it an ideal candidate to provide comprehensive development server functionality. The current development server process uses the new build system to generate a development build of the application in memory and passes the results to Vite to serve the application. The usage of Vite, much like the Webpack-based development server, is encapsulated within the Angular CLI `dev-server` builder and currently cannot be directly configured.
-
-## Known Issues
-
-There are currently several known issues that you may encounter when trying the new build system. This list will be updated to stay current. If any of these issues are currently blocking you from trying out the new build system, please check back in the future as it may have been solved.
-
-### Type-checking of Web Worker code and processing of nested Web Workers
-
-Web Workers can be used within application code using the same syntax (`new Worker(new URL('<workerfile>', import.meta.url))`) that is supported with the `browser` builder.
-However, the code within the Worker will not currently be type-checked by the TypeScript compiler. TypeScript code is supported just not type-checked.
-Additionally, any nested workers will not be processed by the build system. A nested worker is a Worker instantiation within another Worker file.
-
-### Order-dependent side-effectful imports in lazy modules
-
-Import statements that are dependent on a specific ordering and are also used in multiple lazy modules can cause top-level statements to be executed out of order.
-This is not common as it depends on the usage of side-effectful modules and does not apply to the `polyfills` option.
-This is caused by a [defect](https://github.com/evanw/esbuild/issues/399) in the underlying bundler but will be addressed in a future update.
-
-IMPORTANT: Avoiding the use of modules with non-local side effects (outside of polyfills) is recommended whenever possible regardless of the build system being used and avoids this particular issue. Modules with non-local side effects can have a negative effect on both application size and runtime performance as well.
-
-## Bug reports
-
-Report issues and feature requests on [GitHub](https://github.com/angular/angular-cli/issues).
-
-Please provide a minimal reproduction where possible to aid the team in addressing issues.
diff --git a/adev-es/src/content/tools/cli/esbuild.md b/adev-es/src/content/tools/cli/esbuild.md
deleted file mode 100644
index 21e6482..0000000
--- a/adev-es/src/content/tools/cli/esbuild.md
+++ /dev/null
@@ -1,246 +0,0 @@
-# Comenzando con el nuevo sistema de construcción del Angular CLI
-
-En v17 y superior, el nuevo sistema de construcción proporciona una forma mejorada de construir aplicaciones Angular. Este nuevo sistema de construcción incluye:
-
-- Un formato de salida moderno usando ESM, con expresiones de importación dinámica para soportar carga lazy de módulos.
-- Rendimiento de tiempo de construcción más rápido tanto para construcciones iniciales como para reconstrucciones incrementales.
-- Herramientas más nuevas del ecosistema JavaScript como [esbuild](https://esbuild.github.io/) y [Vite](https://vitejs.dev/).
-- Capacidades integradas de SSR y prerendering.
-
-Este nuevo sistema de construcción es estable y completamente soportado para uso con aplicaciones Angular.
-Puedes migrar al nuevo sistema de construcción con aplicaciones que usan el builder `browser`.
-Si usas un builder personalizado, consulta la documentación de ese builder sobre posibles opciones de migración.
-
-IMPORTANTE: El sistema de construcción existente basado en Webpack todavía se considera estable y completamente soportado.
-Las aplicaciones pueden continuar usando el builder `browser` y no se migrarán automáticamente al actualizar.
-
-## Para nuevas aplicaciones
-
-Las nuevas aplicaciones usarán este nuevo sistema de construcción por defecto a través del builder `application`.
-
-## Para aplicaciones existentes
-
-Para proyectos existentes, puedes optar por usar el nuevo builder de manera individual por aplicación con dos opciones diferentes.
-Ambas opciones se consideran estables y completamente soportadas por el equipo de Angular.
-La elección de qué opción usar es un factor de cuántos cambios necesitarás hacer para migrar y qué nuevas características te gustaría usar en el proyecto.
-
-- El builder `browser-esbuild` construye solo el bundle del lado del cliente de una aplicación diseñada para ser compatible con el builder `browser` existente que proporciona el sistema de construcción preexistente. Sirve como un reemplazo directo para aplicaciones `browser` existentes.
-- El builder `application` cubre una aplicación completa, como el bundle del lado del cliente, así como opcionalmente construir un servidor para renderizado del lado del servidor y realizar prerendering en tiempo de construcción de páginas estáticas.
-
-El builder `application` es generalmente preferido ya que mejora las construcciones renderizadas del lado del servidor (SSR), y hace más fácil que proyectos renderizados del lado del cliente adopten SSR en el futuro.
-Sin embargo, requiere un poco más de esfuerzo de migración, particularmente para aplicaciones SSR existentes.
-Si el builder `application` es difícil de adoptar para tu proyecto, `browser-esbuild` puede ser una solución más fácil que da la mayoría de los beneficios de rendimiento de construcción con menos cambios disruptivos.
-
-### Usando el builder `browser-esbuild`
-
-Un builder llamado `browser-esbuild` está disponible dentro del paquete `@angular-devkit/build-angular` que está presente en una aplicación generada por Angular CLI.
-Puedes probar el nuevo sistema de construcción para aplicaciones que usan el builder `browser`.
-Si usas un builder personalizado, consulta la documentación de ese builder sobre posibles opciones de migración.
-
-La opción de compatibilidad se implementó para minimizar la cantidad de cambios necesarios para migrar inicialmente tus aplicaciones.
-Esto se proporciona a través de un builder alternativo (`browser-esbuild`).
-Puedes actualizar el objetivo `build` para cualquier objetivo de aplicación para migrar al nuevo sistema de construcción.
-
-Lo siguiente es lo que típicamente encontrarías en `angular.json` para una aplicación:
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser",
-...
-</docs-code>
-
-Cambiar el campo `builder` es el único cambio que necesitarás hacer.
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser-esbuild",
-...
-</docs-code>
-
-### Usando el builder `application`
-
-Un builder llamado `application` también está disponible dentro del paquete `@angular-devkit/build-angular` que está presente en una aplicación generada por Angular CLI.
-Este builder es el predeterminado para todas las nuevas aplicaciones creadas con `ng new`.
-
-Lo siguiente es lo que típicamente encontrarías en `angular.json` para una aplicación:
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:browser",
-...
-</docs-code>
-
-Cambiar el campo `builder` es el primer cambio que necesitarás hacer.
-
-<docs-code language="json">
-...
-"architect": {
-  "build": {
-    "builder": "@angular-devkit/build-angular:application",
-...
-</docs-code>
-
-Una vez que el nombre del builder haya sido cambiado, las opciones dentro del objetivo `build` necesitarán ser actualizadas.
-La siguiente lista discute todas las opciones del builder `browser` que necesitarán ser ajustadas.
-
-- `main` debería renombrarse a `browser`.
-- `polyfills` debería ser un array, en lugar de un solo archivo.
-- `buildOptimizer` debería eliminarse, ya que esto está cubierto por la opción `optimization`.
-- `resourcesOutputPath` debería eliminarse, esto ahora siempre es `media`.
-- `vendorChunk` debería eliminarse, ya que esto era una optimización de rendimiento que ya no es necesaria.
-- `commonChunk` debería eliminarse, ya que esto era una optimización de rendimiento que ya no es necesaria.
-- `deployUrl` debería eliminarse y no está soportado. Prefiere [`<base href>`](guide/routing/common-router-tasks) en su lugar. Consulta la [documentación de despliegue](tools/cli/deployment#--deploy-url) para más información.
-- `ngswConfigPath` debería renombrarse a `serviceWorker`.
-
-Si la aplicación no está usando SSR actualmente, este debería ser el paso final para permitir que `ng build` funcione.
-Después de ejecutar `ng build` por primera vez, puede haber nuevas advertencias o errores basados en diferencias de comportamiento o uso de la aplicación de características específicas de Webpack.
-Muchas de las advertencias proporcionarán sugerencias sobre cómo remediar ese problema.
-Si parece que una advertencia es incorrecta o la solución no es aparente, por favor abre un issue en [GitHub](https://github.com/angular/angular-cli/issues).
-Además, las secciones posteriores de esta guía proporcionan información adicional sobre varios casos específicos así como problemas conocidos actuales.
-
-Para aplicaciones nuevas en SSR, la [Guía SSR de Angular](guide/ssr) proporciona información adicional sobre el proceso de configuración para agregar SSR a una aplicación.
-
-Para aplicaciones que ya están usando SSR, se necesitarán ajustes adicionales para actualizar el servidor de aplicación para soportar las nuevas capacidades integradas de SSR.
-El builder `application` ahora proporciona la funcionalidad integrada para todos los siguientes builders preexistentes:
-
-- `app-shell`
-- `prerender`
-- `server`
-- `ssr-dev-server`
-
-El proceso `ng update` eliminará automáticamente los usos de los paquetes del scope `@nguniversal` donde algunos de estos builders estaban ubicados previamente.
-El nuevo paquete `@angular/ssr` también se agregará y usará automáticamente con la configuración y el código siendo ajustados durante la actualización.
-El paquete `@angular/ssr` soporta el builder `browser` así como el builder `application`.
-Para convertir de los builders SSR separados a las capacidades integradas del builder `application`, ejecuta la migración experimental `use-application-builder`.
-
-<docs-code language="shell">
-
-ng update @angular/cli --name use-application-builder
-
-</docs-code>
-
-La migración hace lo siguiente:
-
-* Convierte el objetivo `browser` o `browser-esbuild` existente a `application`
-* Elimina cualquier builder SSR anterior (porque `application` hace eso ahora).
-* Actualiza la configuración en consecuencia.
-* Fusiona `tsconfig.server.json` con `tsconfig.app.json` y agrega la opción TypeScript `"esModuleInterop": true` para asegurar que las importaciones de `express` sean [compatibles con ESM](#esm-default-imports-vs-namespace-imports).
-* Actualiza el código del servidor de aplicación para usar el nuevo bootstrapping y estructura de directorio de salida.
-
-ÚTIL: Recuerda eliminar cualquier suposición CommonJS en el código del servidor de aplicación como `require`, `__filename`, `__dirname`, u otros constructos del [alcance del módulo CommonJS](https://nodejs.org/api/modules.html#the-module-scope). Todo el código de aplicación debería ser compatible con ESM. Esto no aplica a dependencias de terceros.
-
-## Ejecutando una construcción
-
-Una vez que hayas actualizado la configuración de la aplicación, las construcciones pueden realizarse usando `ng build` como se hacía previamente.
-Dependiendo de la elección de migración del builder, algunas de las opciones de línea de comandos pueden ser diferentes.
-Si el comando de construcción está contenido en algún script de `npm` u otros scripts, asegúrate de que sean revisados y actualizados.
-Para aplicaciones que han migrado al builder `application` y que usan SSR y/o prerendering, también puedes eliminar comandos `ng run` extra de los scripts ahora que `ng build` tiene soporte SSR integrado.
-
-<docs-code language="shell">
-
-ng build
-
-</docs-code>
-
-## Iniciando el servidor de desarrollo
-
-El servidor de desarrollo detectará automáticamente el nuevo sistema de construcción y lo usará para construir la aplicación.
-Para iniciar el servidor de desarrollo no son necesarios cambios en la configuración del builder `dev-server` o línea de comandos.
-
-<docs-code language="shell">
-
-ng serve
-
-</docs-code>
-
-Puedes continuar usando las [opciones de línea de comandos](/cli/serve) que has usado en el pasado con el servidor de desarrollo.
-
-## Reemplazo de módulo en caliente
-
-El reemplazo de módulo en caliente (HMR) basado en JavaScript actualmente no está soportado.
-Sin embargo, el HMR de hojas de estilo globales (opción de construcción `styles`) está disponible y habilitado por defecto.
-Las capacidades HMR enfocadas en Angular están actualmente planificadas y se introducirán en una versión futura.
-
-## Opciones y comportamiento no implementados
-
-Varias opciones de construcción aún no están implementadas pero se agregarán en el futuro a medida que el sistema de construcción avance hacia un estado estable. Si tu aplicación usa estas opciones, todavía puedes probar el sistema de construcción sin eliminarlas. Se emitirán advertencias para cualquier opción no implementada pero de lo contrario serán ignoradas. Sin embargo, si tu aplicación depende de cualquiera de estas opciones para funcionar, es posible que quieras esperar para probar.
-
-- [Importaciones WASM](https://github.com/angular/angular-cli/issues/25102) -- WASM aún puede cargarse manualmente a través de [APIs web estándar](https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running).
-
-## Importaciones predeterminadas ESM vs. importaciones de namespace
-
-TypeScript por defecto permite que las exportaciones predeterminadas se importen como importaciones de namespace y luego se usen en expresiones de llamada.
-Esto es desafortunadamente una divergencia de la especificación ECMAScript.
-El bundler subyacente (`esbuild`) dentro del nuevo sistema de construcción espera código ESM que cumpla con la especificación.
-El sistema de construcción ahora generará una advertencia si tu aplicación usa un tipo incorrecto de importación de un paquete.
-Sin embargo, para permitir que TypeScript acepte el uso correcto, debe habilitarse una opción TypeScript dentro del archivo `tsconfig` de la aplicación.
-Cuando está habilitada, la opción [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) proporciona mejor alineación con la especificación ECMAScript y también es recomendada por el equipo de TypeScript.
-Una vez habilitada, puedes actualizar las importaciones de paquetes donde sea aplicable a una forma conforme con ECMAScript.
-
-Usando el paquete [`moment`](https://npmjs.com/package/moment) como ejemplo, el siguiente código de aplicación causará errores en tiempo de ejecución:
-
-```ts
-import * as moment from 'moment';
-
-console.log(moment().format());
-```
-
-La construcción generará una advertencia para notificarte que hay un problema potencial. La advertencia será similar a:
-
-<docs-code language="text">
-▲ [WARNING] Calling "moment" will crash at run-time because it's an import namespace object, not a function [call-import-namespace]
-
-    src/main.ts:2:12:
-      2 │ console.log(moment().format());
-        ╵             ~~~~~~
-
-Consider changing "moment" to a default import instead:
-
-    src/main.ts:1:7:
-      1 │ import * as moment from 'moment';
-        │        ~~~~~~~~~~~
-        ╵        moment
-
-</docs-code>
-
-Sin embargo, puedes evitar los errores en tiempo de ejecución y la advertencia habilitando la opción TypeScript `esModuleInterop` para la aplicación y cambiando la importación a lo siguiente:
-
-```ts
-import moment from 'moment';
-
-console.log(moment().format());
-```
-
-## Vite como servidor de desarrollo
-
-El uso de Vite en el Angular CLI actualmente es solo dentro de una _capacidad de servidor de desarrollo únicamente_. Incluso sin usar el sistema de construcción Vite subyacente, Vite proporciona un servidor de desarrollo completo con soporte del lado del cliente que ha sido empaquetado en un paquete npm de baja dependencia. Esto lo hace un candidato ideal para proporcionar funcionalidad completa de servidor de desarrollo. El proceso actual del servidor de desarrollo usa el nuevo sistema de construcción para generar una construcción de desarrollo de la aplicación en memoria y pasa los resultados a Vite para servir la aplicación. El uso de Vite, muy parecido al servidor de desarrollo basado en Webpack, está encapsulado dentro del builder `dev-server` del Angular CLI y actualmente no puede configurarse directamente.
-
-## Problemas conocidos
-
-Actualmente hay varios problemas conocidos que puedes encontrar al probar el nuevo sistema de construcción. Esta lista se actualizará para mantenerse al día. Si alguno de estos problemas te está bloqueando actualmente de probar el nuevo sistema de construcción, por favor verifica de nuevo en el futuro ya que puede haber sido resuelto.
-
-### Verificación de tipos del código Web Worker y procesamiento de Web Workers anidados
-
-Los Web Workers pueden usarse dentro del código de aplicación usando la misma sintaxis (`new Worker(new URL('<workerfile>', import.meta.url))`) que está soportada con el builder `browser`.
-Sin embargo, el código dentro del Worker actualmente no será verificado por tipos por el compilador TypeScript. El código TypeScript está soportado solo que no se verifica por tipos.
-Además, cualquier worker anidado no será procesado por el sistema de construcción. Un worker anidado es una instanciación de Worker dentro de otro archivo Worker.
-
-### Importaciones con efectos secundarios dependientes del orden en módulos lazy
-
-Las declaraciones de importación que dependen de un orden específico y que también se usan en múltiples módulos lazy pueden causar que las declaraciones de nivel superior se ejecuten fuera de orden.
-Esto no es común ya que depende del uso de módulos con efectos secundarios y no aplica a la opción `polyfills`.
-Esto es causado por un [defecto](https://github.com/evanw/esbuild/issues/399) en el bundler subyacente pero se abordará en una actualización futura.
-
-IMPORTANTE: Se recomienda evitar el uso de módulos con efectos secundarios no locales (fuera de polyfills) siempre que sea posible independientemente del sistema de construcción que se esté usando y evita este problema en particular. Los módulos con efectos secundarios no locales pueden tener un efecto negativo tanto en el tamaño de la aplicación como en el rendimiento en tiempo de ejecución también.
-
-## Reportes de errores
-
-Reporta problemas y solicitudes de características en [GitHub](https://github.com/angular/angular-cli/issues).
-
-Por favor proporciona una reproducción mínima donde sea posible para ayudar al equipo a abordar problemas.
diff --git a/adev-es/src/content/tools/cli/schematics-authoring.en.md b/adev-es/src/content/tools/cli/schematics-authoring.en.md
index 06f0295..4980bf7 100644
--- a/adev-es/src/content/tools/cli/schematics-authoring.en.md
+++ b/adev-es/src/content/tools/cli/schematics-authoring.en.md
@@ -15,25 +15,25 @@ When a schematic runs, the transformations are recorded in memory, and only appl
 
 The public API for schematics defines classes that represent the basic concepts.
 
-* The virtual file system is represented by a `Tree`.
-    The `Tree` data structure contains a *base* \(a set of files that already exists\) and a *staging area* \(a list of changes to be applied to the base\).
-    When making modifications, you don't actually change the base, but add those modifications to the staging area.
+- The virtual file system is represented by a `Tree`.
+  The `Tree` data structure contains a _base_ \(a set of files that already exists\) and a _staging area_ \(a list of changes to be applied to the base\).
+  When making modifications, you don't actually change the base, but add those modifications to the staging area.
 
-* A `Rule` object defines a function that takes a `Tree`, applies transformations, and returns a new `Tree`.
-    The main file for a schematic, `index.ts`, defines a set of rules that implement the schematic's logic.
+- A `Rule` object defines a function that takes a `Tree`, applies transformations, and returns a new `Tree`.
+  The main file for a schematic, `index.ts`, defines a set of rules that implement the schematic's logic.
 
-* A transformation is represented by an `Action`.
-    There are four action types: `Create`, `Rename`, `Overwrite`, and `Delete`.
+- A transformation is represented by an `Action`.
+  There are four action types: `Create`, `Rename`, `Overwrite`, and `Delete`.
 
-* Each schematic runs in a context, represented by a `SchematicContext` object.
+- Each schematic runs in a context, represented by a `SchematicContext` object.
 
 The context object passed into a rule provides access to utility functions and metadata that the schematic might need to work with, including a logging API to help with debugging.
-The context also defines a *merge strategy* that determines how changes are merged from the staged tree into the base tree.
+The context also defines a _merge strategy_ that determines how changes are merged from the staged tree into the base tree.
 A change can be accepted or ignored, or throw an exception.
 
 ### Defining rules and actions
 
-When you create a new blank schematic with the [Schematics CLI](#schematics-cli), the generated entry function is a *rule factory*.
+When you create a new blank schematic with the [Schematics CLI](#schematics-cli), the generated entry function is a _rule factory_.
 A `RuleFactory` object defines a higher-order function that creates a `Rule`.
 
 <docs-code header="index.ts" language="typescript">
@@ -42,10 +42,10 @@ 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) => {
-   return tree;
- };
+export function helloWorld(\_options: any): Rule {
+return (tree: Tree,\_context: SchematicContext) => {
+return tree;
+};
 }
 
 </docs-code>
@@ -59,13 +59,13 @@ Look for helper functions for working with modules, dependencies, TypeScript, AS
 <docs-code header="index.ts" language="typescript">
 
 import {
-  JsonAstObject,
-  JsonObject,
-  JsonValue,
-  Path,
-  normalize,
-  parseJsonAst,
-  strings,
+JsonAstObject,
+JsonObject,
+JsonValue,
+Path,
+normalize,
+parseJsonAst,
+strings,
 } from '@angular-devkit/core';
 
 </docs-code>
@@ -79,27 +79,26 @@ Define variable or enumerated data types for the schema using TypeScript interfa
 The schema defines the types and default values of variables used in the schematic.
 For example, the hypothetical "Hello World" schematic might have the following schema.
 
-<docs-code header="src/hello-world/schema.json" language="json">
-
+```json {header: "schema.json"}
 {
-    "properties": {
-        "name": {
-            "type": "string",
-            "minLength": 1,
-            "default": "world"
-        },
-        "useColor": {
-            "type": "boolean"
-        }
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 1,
+      "default": "world"
+    },
+    "useColor": {
+      "type": "boolean"
     }
+  }
 }
-</docs-code>
+```
 
 See examples of schema files for the Angular CLI command schematics in [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json).
 
 ### Schematic prompts
 
-Schematic *prompts* introduce user interaction into schematic execution.
+Schematic _prompts_ introduce user interaction into schematic execution.
 Configure schematic options to display a customizable question to the user.
 The prompts are displayed before the execution of the schematic, which then uses the response as the value for the option.
 This lets users direct the operation of the schematic without requiring in-depth knowledge of the full spectrum of available options.
@@ -110,23 +109,22 @@ To define such a prompt, add an `x-prompt` property to the schema for the `name`
 Similarly, you can add a prompt to let the user decide whether the schematic uses color when executing its hello action.
 The schema with both prompts would be as follows.
 
-<docs-code header="src/hello-world/schema.json" language="json">
-
+```json {header: "schema.json"}
 {
-    "properties": {
-        "name": {
-            "type": "string",
-            "minLength": 1,
-            "default": "world",
-            "x-prompt": "What is your name?"
-        },
-        "useColor": {
-            "type": "boolean",
-            "x-prompt": "Would you like the response in color?"
-        }
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 1,
+      "default": "world",
+      "x-prompt": "What is your name?"
+    },
+    "useColor": {
+      "type": "boolean",
+      "x-prompt": "Would you like the response in color?"
     }
+  }
 }
-</docs-code>
+```
 
 #### Prompt short-form syntax
 
@@ -140,41 +138,42 @@ In this case, "yes" corresponds to `true` and "no" corresponds to `false`.
 
 There are three supported input types.
 
-| Input type   | Details |
-|:---          |:----    |
+| Input type   | Details                                            |
+| :----------- | :------------------------------------------------- |
 | confirmation | A yes or no question; ideal for Boolean options.   |
 | input        | Textual input; ideal for string or number options. |
 | list         | A predefined set of allowed values.                |
 
 In the short form, the type is inferred from the property's type and constraints.
 
-| Property schema | Prompt type |
-|:---             |:---         |
-| "type": "boolean"  | confirmation \("yes"=`true`, "no"=`false`\)  |
-| "type": "string"   | input                                        |
-| "type": "number"   | input \(only valid numbers accepted\)        |
-| "type": "integer"  | input \(only valid numbers accepted\)        |
-| "enum": […] | list \(enum members become list selections\) |
+| Property schema   | Prompt type                                  |
+| :---------------- | :------------------------------------------- |
+| "type": "boolean" | confirmation \("yes"=`true`, "no"=`false`\)  |
+| "type": "string"  | input                                        |
+| "type": "number"  | input \(only valid numbers accepted\)        |
+| "type": "integer" | input \(only valid numbers accepted\)        |
+| "enum": […]       | list \(enum members become list selections\) |
 
 In the following example, the property takes an enumerated value, so the schematic automatically chooses the list type, and creates a menu from the possible values.
 
-<docs-code header="schema.json" language="json">
-
-"style": {
-  "description": "The file extension or preprocessor to use for style files.",
-  "type": "string",
-  "default": "css",
-  "enum": [
-    "css",
-    "scss",
-    "sass",
-    "less",
-    "styl"
-  ],
-  "x-prompt": "Which stylesheet format would you like to use?"
-}
+```json {header: "schema.json"}
 
-</docs-code>
+{
+  "style": {
+    "description": "The file extension or preprocessor to use for style files.",
+    "type": "string",
+    "default": "css",
+    "enum": [
+      "css",
+      "scss",
+      "sass",
+      "less",
+      "styl"
+    ],
+    "x-prompt": "Which stylesheet format would you like to use?"
+  }
+}
+```
 
 The prompt runtime automatically validates the provided response against the constraints provided in the JSON schema.
 If the value is not acceptable, the user is prompted for a new value.
@@ -185,8 +184,8 @@ This ensures that any values passed to the schematic meet the expectations of th
 The `x-prompt` field syntax supports a long form for cases where you require additional customization and control over the prompt.
 In this form, the `x-prompt` field value is a JSON object with subfields that customize the behavior of the prompt.
 
-| Field   | Data value |
-|:---     |:---        |
+| Field   | Data value                                                                  |
+| :------ | :-------------------------------------------------------------------------- |
 | type    | `confirmation`, `input`, or `list` \(selected automatically in short form\) |
 | message | string \(required\)                                                         |
 | items   | string and/or label/value object pair \(only valid with type `list`\)       |
@@ -195,31 +194,32 @@ The following example of the long form is from the JSON schema for the schematic
 It defines the prompt that lets users choose which style preprocessor they want to use for the application being created.
 By using the long form, the schematic can provide more explicit formatting of the menu choices.
 
-<docs-code header="package/schematics/angular/application/schema.json" language="json">
-
-"style": {
-  "description": "The file extension or preprocessor to use for style files.",
-  "type": "string",
-  "default": "css",
-  "enum": [
-    "css",
-    "scss",
-    "sass",
-    "less"
-  ],
-  "x-prompt": {
-    "message": "Which stylesheet format would you like to use?",
-    "type": "list",
-    "items": [
-      { "value": "css",  "label": "CSS" },
-      { "value": "scss", "label": "SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]" },
-      { "value": "sass", "label": "Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
-      { "value": "less", "label": "Less   [ https://lesscss.org/                                            ]" }
-    ]
-  },
-},
+```json {header: "schema.json"}
 
-</docs-code>
+{
+  "style": {
+    "description": "The file extension or preprocessor to use for style files.",
+    "type": "string",
+    "default": "css",
+    "enum": [
+      "css",
+      "scss",
+      "sass",
+      "less"
+    ],
+    "x-prompt": {
+      "message": "Which stylesheet format would you like to use?",
+      "type": "list",
+      "items": [
+        { "value": "css", "label": "CSS" },
+        { "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
+        { "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
+        { "value": "less", "label": "Less [ https://lesscss.org/ ]" }
+      ]
+    }
+  }
+}
+```
 
 #### x-prompt schema
 
@@ -227,50 +227,63 @@ The JSON schema that defines a schematic's options supports extensions to allow
 No additional logic or changes are required to the code of a schematic to support the prompts.
 The following JSON schema is a complete description of the long-form syntax for the `x-prompt` field.
 
-<docs-code header="x-prompt schema" language="json">
+```json {header: "x-prompt schema"}
 
 {
-    "oneOf": [
-        { "type": "string" },
-        {
-            "type": "object",
-            "properties": {
-                "type": { "type": "string" },
-                "message": { "type": "string" },
-                "items": {
-                    "type": "array",
-                    "items": {
-                        "oneOf": [
-                            { "type": "string" },
-                            {
-                                "type": "object",
-                                "properties": {
-                                    "label": { "type": "string" },
-                                    "value": { }
-                                },
-                                "required": [ "value" ]
-                            }
-                        ]
-                    }
-                }
-            },
-            "required": [ "message" ]
+  "oneOf": [
+    {
+      "type": "string"
+    },
+    {
+      "type": "object",
+      "properties": {
+        "type": {
+          "type": "string"
+        },
+        "message": {
+          "type": "string"
+        },
+        "items": {
+          "type": "array",
+          "items": {
+            "oneOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "object",
+                "properties": {
+                  "label": {
+                    "type": "string"
+                  },
+                  "value": {}
+                },
+                "required": [
+                  "value"
+                ]
+              }
+            ]
+          }
         }
-    ]
+      },
+      "required": [
+        "message"
+      ]
+    }
+  ]
 }
-
-</docs-code>
+```
 
 ## Schematics CLI
 
 Schematics come with their own command-line tool.
 Using Node 6.9 or later, install the Schematics command line tool globally:
 
-<docs-code language="shell">
+```shell
 
 npm install -g @angular-devkit/schematics-cli
 
-</docs-code>
+```
 
 This installs the `schematics` executable, which you can use to create a new schematics collection in its own project folder, add a new schematic to an existing collection, or extend an existing schematic.
 
@@ -284,11 +297,11 @@ See [Schematics for Libraries](tools/cli/schematics-for-libraries).
 
 The following command creates a new schematic named `hello-world` in a new project folder of the same name.
 
-<docs-code language="shell">
+```shell
 
 schematics blank --name=hello-world
 
-</docs-code>
+```
 
 The `blank` schematic is provided by the Schematics CLI.
 The command creates a new project folder \(the root folder for the collection\) and an initial named schematic in the collection.
@@ -296,14 +309,14 @@ The command creates a new project folder \(the root folder for the collection\)
 Go to the collection folder, install your npm dependencies, and open your new collection in your favorite editor to see the generated files.
 For example, if you are using VS Code:
 
-<docs-code language="shell">
+```shell
 
 cd hello-world
 npm install
 npm run build
 code .
 
-</docs-code>
+```
 
 The initial schematic gets the same name as the project folder, and is generated in `src/hello-world`.
 Add related schematics to this collection, and modify the generated skeleton code to define your schematic's functionality.
@@ -314,31 +327,31 @@ Each schematic name must be unique within the collection.
 Use the `schematics` command to run a named schematic.
 Provide the path to the project folder, the schematic name, and any mandatory options, in the following format.
 
-<docs-code language="shell">
+```shell
 
 schematics <path-to-schematics-project>:<schematics-name> --<required-option>=<value>
 
-</docs-code>
+```
 
 The path can be absolute or relative to the current working directory where the command is executed.
 For example, to run the schematic you just generated \(which has no required options\), use the following command.
 
-<docs-code language="shell">
+```shell
 
 schematics .:hello-world
 
-</docs-code>
+```
 
 ### Adding a schematic to a collection
 
 To add a schematic to an existing collection, use the same command you use to start a new schematics project, but run the command inside the project folder.
 
-<docs-code language="shell">
+```shell
 
 cd hello-world
 schematics blank --name=goodbye-world
 
-</docs-code>
+```
 
 The command generates the new named schematic inside your collection, with a main `index.ts` file and its associated test spec.
 It also adds the name, description, and factory function for the new schematic to the collection's schema in the `collection.json` file.
@@ -349,7 +362,7 @@ The top level of the root project folder for a collection contains configuration
 The `src/` folder contains subfolders for named schematics in the collection, and a schema, `collection.json`, which describes the collected schematics.
 Each schematic is created with a name, description, and factory function.
 
-<docs-code language="json">
+```json
 
 {
   "$schema":
@@ -362,37 +375,37 @@ Each schematic is created with a name, description, and factory function.
   }
 }
 
-</docs-code>
+```
 
-* The `$schema` property specifies the schema that the CLI uses for validation.
-* The `schematics` property lists named schematics that belong to this collection.
-    Each schematic has a plain-text description, and points to the generated entry function in the main file.
+- The `$schema` property specifies the schema that the CLI uses for validation.
+- The `schematics` property lists named schematics that belong to this collection.
+  Each schematic has a plain-text description, and points to the generated entry function in the main file.
 
-* The `factory` property points to the generated entry function.
-    In this example, you invoke the `hello-world` schematic by calling the `helloWorld()` factory function.
+- The `factory` property points to the generated entry function.
+  In this example, you invoke the `hello-world` schematic by calling the `helloWorld()` factory function.
 
-* The optional  `schema` property points to a JSON schema file that defines the command-line options available to the schematic.
-* The optional `aliases` array specifies one or more strings that can be used to invoke the schematic.
-    For example, the schematic for the Angular CLI "generate" command has an alias "g", that lets you use the command `ng g`.
+- The optional `schema` property points to a JSON schema file that defines the command-line options available to the schematic.
+- The optional `aliases` array specifies one or more strings that can be used to invoke the schematic.
+  For example, the schematic for the Angular CLI "generate" command has an alias "g", that lets you use the command `ng g`.
 
 ### Named schematics
 
 When you use the Schematics CLI to create a blank schematics project, the new blank schematic is the first member of the collection, and has the same name as the collection.
-When you add a new named schematic to this collection, it is automatically added to the  `collection.json`  schema.
+When you add a new named schematic to this collection, it is automatically added to the `collection.json` schema.
 
 In addition to the name and description, each schematic has a `factory` property that identifies the schematic's entry point.
-In the example, you invoke the schematic's defined functionality by calling the `helloWorld()` function in the main file,  `hello-world/index.ts`.
+In the example, you invoke the schematic's defined functionality by calling the `helloWorld()` function in the main file, `hello-world/index.ts`.
 
 <img alt="overview" src="assets/images/guide/schematics/collection-files.gif">
 
 Each named schematic in the collection has the following main parts.
 
-| Parts          | Details |
-|:---            |:---     |
-| `index.ts`     | Code that defines the transformation logic for a named schematic.  |
-| `schema.json`  | Schematic variable definition.                                     |
-| `schema.d.ts`  | Schematic variables.                                               |
-| `files/`       | Optional component/template files to replicate.                    |
+| Parts         | Details                                                           |
+| :------------ | :---------------------------------------------------------------- |
+| `index.ts`    | Code that defines the transformation logic for a named schematic. |
+| `schema.json` | Schematic variable definition.                                    |
+| `schema.d.ts` | Schematic variables.                                              |
+| `files/`      | Optional component/template files to replicate.                   |
 
 It is possible for a schematic to provide all of its logic in the `index.ts` file, without additional templates.
 You can create dynamic schematics for Angular, however, by providing components and templates in the `files` folder, like those in standalone Angular projects.
diff --git a/adev-es/src/content/tools/cli/schematics-authoring.md b/adev-es/src/content/tools/cli/schematics-authoring.md
index 5ccf838..4ecb53f 100644
--- a/adev-es/src/content/tools/cli/schematics-authoring.md
+++ b/adev-es/src/content/tools/cli/schematics-authoring.md
@@ -15,17 +15,17 @@ Cuando un schematic se ejecuta, las transformaciones se registran en memoria, y
 
 La API pública para schematics define clases que representan los conceptos básicos.
 
-* El sistema de archivos virtual está representado por un `Tree`.
-    La estructura de datos `Tree` contiene una *base* \(un conjunto de archivos que ya existe\) y un *área de staging* \(una lista de cambios a aplicar a la base\).
-    Al hacer modificaciones, no cambias realmente la base, sino que agregas esas modificaciones al área de staging.
+- El sistema de archivos virtual está representado por un `Tree`.
+  La estructura de datos `Tree` contiene una _base_ \(un conjunto de archivos que ya existe\) y un _área de staging_ \(una lista de cambios a aplicar a la base\).
+  Al hacer modificaciones, no cambias realmente la base, sino que agregas esas modificaciones al área de staging.
 
-* Un objeto `Rule` define una función que toma un `Tree`, aplica transformaciones, y devuelve un nuevo `Tree`.
-    El archivo principal para un schematic, `index.ts`, define un conjunto de reglas que implementan la lógica del schematic.
+- Un objeto `Rule` define una función que toma un `Tree`, aplica transformaciones, y devuelve un nuevo `Tree`.
+  El archivo principal para un schematic, `index.ts`, define un conjunto de reglas que implementan la lógica del schematic.
 
-* Una transformación está representada por una `Action`.
-    Hay cuatro tipos de acción: `Create`, `Rename`, `Overwrite` y `Delete`.
+- Una transformación está representada por una `Action`.
+  Hay cuatro tipos de acción: `Create`, `Rename`, `Overwrite` y `Delete`.
 
-* Cada schematic se ejecuta en un contexto, representado por un objeto `SchematicContext`.
+- Cada schematic se ejecuta en un contexto, representado por un objeto `SchematicContext`.
 
 El objeto de contexto pasado a una regla proporciona acceso a funciones utilitarias y metadata que el schematic podría necesitar para trabajar, incluyendo una API de logging para ayudar con la depuración.
 El contexto también define una *estrategia de fusión* que determina cómo se fusionan los cambios desde el árbol en staging en el árbol base.
@@ -33,7 +33,7 @@ Un cambio puede ser aceptado o ignorado, o lanzar una excepción.
 
 ### Definiendo reglas y acciones
 
-Cuando creas un nuevo schematic en blanco con el [CLI de Schematics](#schematics-cli), la función de entrada generada es una *factory de regla*.
+Cuando creas un nuevo schematic en blanco con el [CLI de Schematics](#cli-de-schematics), la función de entrada generada es una _factory de regla_.
 Un objeto `RuleFactory` define una función de orden superior que crea una `Rule`.
 
 <docs-code header="index.ts" language="typescript">
@@ -59,13 +59,13 @@ Busca funciones helper para trabajar con módulos, dependencias, TypeScript, AST
 <docs-code header="index.ts" language="typescript">
 
 import {
-  JsonAstObject,
-  JsonObject,
-  JsonValue,
-  Path,
-  normalize,
-  parseJsonAst,
-  strings,
+JsonAstObject,
+JsonObject,
+JsonValue,
+Path,
+normalize,
+parseJsonAst,
+strings,
 } from '@angular-devkit/core';
 
 </docs-code>
@@ -79,27 +79,26 @@ Define tipos de datos variables o enumerados para el esquema usando interfaces T
 El esquema define los tipos y valores predeterminados de variables usadas en el schematic.
 Por ejemplo, el hipotético schematic "Hello World" podría tener el siguiente esquema.
 
-<docs-code header="src/hello-world/schema.json" language="json">
-
+```json {header: "schema.json"}
 {
-    "properties": {
-        "name": {
-            "type": "string",
-            "minLength": 1,
-            "default": "world"
-        },
-        "useColor": {
-            "type": "boolean"
-        }
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 1,
+      "default": "world"
+    },
+    "useColor": {
+      "type": "boolean"
     }
+  }
 }
-</docs-code>
+```
 
 Consulta ejemplos de archivos de esquema para los schematics de comandos del Angular CLI en [`@schematics/angular`](https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/application/schema.json).
 
 ### Prompts de Schematic
 
-Los *prompts* de schematic introducen interacción de usuario en la ejecución del schematic.
+Los _prompts_ de schematic introducen interacción de usuario en la ejecución del schematic.
 Configura opciones del schematic para mostrar una pregunta personalizable al usuario.
 Los prompts se muestran antes de la ejecución del schematic, que luego usa la respuesta como el valor para la opción.
 Esto permite a los usuarios dirigir la operación del schematic sin requerir conocimiento profundo del espectro completo de opciones disponibles.
@@ -110,23 +109,22 @@ Para definir tal prompt, agrega una propiedad `x-prompt` al esquema para la vari
 Similarmente, puedes agregar un prompt para dejar que el usuario decida si el schematic usa color al ejecutar su acción hello.
 El esquema con ambos prompts sería el siguiente.
 
-<docs-code header="src/hello-world/schema.json" language="json">
-
+```json {header: "schema.json"}
 {
-    "properties": {
-        "name": {
-            "type": "string",
-            "minLength": 1,
-            "default": "world",
-            "x-prompt": "What is your name?"
-        },
-        "useColor": {
-            "type": "boolean",
-            "x-prompt": "Would you like the response in color?"
-        }
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 1,
+      "default": "world",
+      "x-prompt": "What is your name?"
+    },
+    "useColor": {
+      "type": "boolean",
+      "x-prompt": "Would you like the response in color?"
     }
+  }
 }
-</docs-code>
+```
 
 #### Sintaxis corta de prompt
 
@@ -158,23 +156,24 @@ En la forma corta, el tipo se infiere del tipo y restricciones de la propiedad.
 
 En el siguiente ejemplo, la propiedad toma un valor enumerado, por lo que el schematic automáticamente elige el tipo list, y crea un menú desde los valores posibles.
 
-<docs-code header="schema.json" language="json">
-
-"style": {
-  "description": "The file extension or preprocessor to use for style files.",
-  "type": "string",
-  "default": "css",
-  "enum": [
-    "css",
-    "scss",
-    "sass",
-    "less",
-    "styl"
-  ],
-  "x-prompt": "Which stylesheet format would you like to use?"
-}
+```json {header: "schema.json"}
 
-</docs-code>
+{
+  "style": {
+    "description": "The file extension or preprocessor to use for style files.",
+    "type": "string",
+    "default": "css",
+    "enum": [
+      "css",
+      "scss",
+      "sass",
+      "less",
+      "styl"
+    ],
+    "x-prompt": "Which stylesheet format would you like to use?"
+  }
+}
+```
 
 El runtime de prompt automáticamente valida la respuesta proporcionada contra las restricciones proporcionadas en el esquema JSON.
 Si el valor no es aceptable, se le solicita al usuario un nuevo valor.
@@ -195,31 +194,32 @@ El siguiente ejemplo de la forma larga es del esquema JSON para el schematic que
 Define el prompt que permite a los usuarios elegir qué preprocesador de estilo quieren usar para la aplicación que se está creando.
 Al usar la forma larga, el schematic puede proporcionar formato más explícito de las opciones de menú.
 
-<docs-code header="package/schematics/angular/application/schema.json" language="json">
-
-"style": {
-  "description": "The file extension or preprocessor to use for style files.",
-  "type": "string",
-  "default": "css",
-  "enum": [
-    "css",
-    "scss",
-    "sass",
-    "less"
-  ],
-  "x-prompt": {
-    "message": "Which stylesheet format would you like to use?",
-    "type": "list",
-    "items": [
-      { "value": "css",  "label": "CSS" },
-      { "value": "scss", "label": "SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]" },
-      { "value": "sass", "label": "Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
-      { "value": "less", "label": "Less   [ https://lesscss.org/                                            ]" }
-    ]
-  },
-},
+```json {header: "schema.json"}
 
-</docs-code>
+{
+  "style": {
+    "description": "The file extension or preprocessor to use for style files.",
+    "type": "string",
+    "default": "css",
+    "enum": [
+      "css",
+      "scss",
+      "sass",
+      "less"
+    ],
+    "x-prompt": {
+      "message": "Which stylesheet format would you like to use?",
+      "type": "list",
+      "items": [
+        { "value": "css", "label": "CSS" },
+        { "value": "scss", "label": "SCSS [ https://sass-lang.com/documentation/syntax#scss ]" },
+        { "value": "sass", "label": "Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]" },
+        { "value": "less", "label": "Less [ https://lesscss.org/ ]" }
+      ]
+    }
+  }
+}
+```
 
 #### Esquema x-prompt
 
@@ -227,50 +227,63 @@ El esquema JSON que define las opciones de un schematic soporta extensiones para
 No se requiere lógica o cambios adicionales al código de un schematic para soportar los prompts.
 El siguiente esquema JSON es una descripción completa de la sintaxis de forma larga para el campo `x-prompt`.
 
-<docs-code header="x-prompt schema" language="json">
+```json {header: "x-prompt schema"}
 
 {
-    "oneOf": [
-        { "type": "string" },
-        {
-            "type": "object",
-            "properties": {
-                "type": { "type": "string" },
-                "message": { "type": "string" },
-                "items": {
-                    "type": "array",
-                    "items": {
-                        "oneOf": [
-                            { "type": "string" },
-                            {
-                                "type": "object",
-                                "properties": {
-                                    "label": { "type": "string" },
-                                    "value": { }
-                                },
-                                "required": [ "value" ]
-                            }
-                        ]
-                    }
-                }
-            },
-            "required": [ "message" ]
+  "oneOf": [
+    {
+      "type": "string"
+    },
+    {
+      "type": "object",
+      "properties": {
+        "type": {
+          "type": "string"
+        },
+        "message": {
+          "type": "string"
+        },
+        "items": {
+          "type": "array",
+          "items": {
+            "oneOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "object",
+                "properties": {
+                  "label": {
+                    "type": "string"
+                  },
+                  "value": {}
+                },
+                "required": [
+                  "value"
+                ]
+              }
+            ]
+          }
         }
-    ]
+      },
+      "required": [
+        "message"
+      ]
+    }
+  ]
 }
-
-</docs-code>
+```
 
 ## CLI de Schematics
 
 Los schematics vienen con su propia herramienta de línea de comandos.
 Usando Node 6.9 o posterior, instala la herramienta de línea de comandos de Schematics globalmente:
 
-<docs-code language="shell">
+```shell
 
 npm install -g @angular-devkit/schematics-cli
 
-</docs-code>
+```
 
 Esto instala el ejecutable `schematics`, que puedes usar para crear una nueva colección de schematics en su propia carpeta de proyecto, agregar un nuevo schematic a una colección existente, o extender un schematic existente.
 
@@ -284,11 +297,11 @@ Consulta [Schematics para Librerías](tools/cli/schematics-for-libraries).
 
 El siguiente comando crea un nuevo schematic llamado `hello-world` en una nueva carpeta de proyecto del mismo nombre.
 
-<docs-code language="shell">
+```shell
 
 schematics blank --name=hello-world
 
-</docs-code>
+```
 
 El schematic `blank` es proporcionado por el CLI de Schematics.
 El comando crea una nueva carpeta de proyecto \(la carpeta raíz para la colección\) y un schematic con nombre inicial en la colección.
@@ -296,14 +309,14 @@ El comando crea una nueva carpeta de proyecto \(la carpeta raíz para la colecci
 Ve a la carpeta de la colección, instala tus dependencias npm, y abre tu nueva colección en tu editor favorito para ver los archivos generados.
 Por ejemplo, si estás usando VS Code:
 
-<docs-code language="shell">
+```shell
 
 cd hello-world
 npm install
 npm run build
 code .
 
-</docs-code>
+```
 
 El schematic inicial obtiene el mismo nombre que la carpeta del proyecto, y se genera en `src/hello-world`.
 Agrega schematics relacionados a esta colección, y modifica el código base generado para definir la funcionalidad de tu schematic.
@@ -314,31 +327,31 @@ Cada nombre de schematic debe ser único dentro de la colección.
 Usa el comando `schematics` para ejecutar un schematic con nombre.
 Proporciona la ruta a la carpeta del proyecto, el nombre del schematic y cualquier opción obligatoria, en el siguiente formato.
 
-<docs-code language="shell">
+```shell
 
 schematics <path-to-schematics-project>:<schematics-name> --<required-option>=<value>
 
-</docs-code>
+```
 
 La ruta puede ser absoluta o relativa al directorio de trabajo actual donde el comando es ejecutado.
 Por ejemplo, para ejecutar el schematic que acabas de generar \(que no tiene opciones requeridas\), usa el siguiente comando.
 
-<docs-code language="shell">
+```shell
 
 schematics .:hello-world
 
-</docs-code>
+```
 
 ### Agregando un schematic a una colección
 
 Para agregar un schematic a una colección existente, usa el mismo comando que usas para iniciar un nuevo proyecto schematics, pero ejecuta el comando dentro de la carpeta del proyecto.
 
-<docs-code language="shell">
+```shell
 
 cd hello-world
 schematics blank --name=goodbye-world
 
-</docs-code>
+```
 
 El comando genera el nuevo schematic con nombre dentro de tu colección, con un archivo principal `index.ts` y su spec de prueba asociado.
 También agrega el nombre, descripción y función factory para el nuevo schematic al esquema de la colección en el archivo `collection.json`.
@@ -349,7 +362,7 @@ El nivel superior de la carpeta raíz del proyecto para una colección contiene
 La carpeta `src/` contiene subcarpetas para schematics con nombre en la colección, y un esquema, `collection.json`, que describe los schematics recopilados.
 Cada schematic se crea con un nombre, descripción y función factory.
 
-<docs-code language="json">
+```json
 
 {
   "$schema":
@@ -362,18 +375,18 @@ Cada schematic se crea con un nombre, descripción y función factory.
   }
 }
 
-</docs-code>
+```
 
-* La propiedad `$schema` especifica el esquema que el CLI usa para validación.
-* La propiedad `schematics` lista schematics con nombre que pertenecen a esta colección.
-    Cada schematic tiene una descripción de texto plano, y apunta a la función de entrada generada en el archivo principal.
+- La propiedad `$schema` especifica el esquema que el CLI usa para validación.
+- La propiedad `schematics` lista schematics con nombre que pertenecen a esta colección.
+  Cada schematic tiene una descripción de texto plano, y apunta a la función de entrada generada en el archivo principal.
 
-* La propiedad `factory` apunta a la función de entrada generada.
-    En este ejemplo, invocas el schematic `hello-world` llamando a la función factory `helloWorld()`.
+- La propiedad `factory` apunta a la función de entrada generada.
+  En este ejemplo, invocas el schematic `hello-world` llamando a la función factory `helloWorld()`.
 
-* La propiedad opcional `schema` apunta a un archivo de esquema JSON que define las opciones de línea de comandos disponibles para el schematic.
-* El array opcional `aliases` especifica una o más cadenas que pueden usarse para invocar el schematic.
-    Por ejemplo, el schematic para el comando "generate" del Angular CLI tiene un alias "g", que te permite usar el comando `ng g`.
+- La propiedad opcional `schema` apunta a un archivo de esquema JSON que define las opciones de línea de comandos disponibles para el schematic.
+- El array opcional `aliases` especifica una o más cadenas que pueden usarse para invocar el schematic.
+  Por ejemplo, el schematic para el comando "generate" del Angular CLI tiene un alias "g", que te permite usar el comando `ng g`.
 
 ### Schematics con nombre
 
diff --git a/adev-es/src/content/tools/cli/schematics-for-libraries.en.md b/adev-es/src/content/tools/cli/schematics-for-libraries.en.md
index 4476492..968dc1c 100644
--- a/adev-es/src/content/tools/cli/schematics-for-libraries.en.md
+++ b/adev-es/src/content/tools/cli/schematics-for-libraries.en.md
@@ -16,17 +16,16 @@ The following steps show you how to add initial support without modifying any pr
 1. At the root level of the `schematics` folder, create a `collection.json` file.
 1. Edit the `collection.json` file to define the initial schema for your collection.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
-
-    * The `$schema` path is relative to the Angular Devkit collection schema.
-    * The `schematics` object describes the named schematics that are part of this collection.
-    * The first entry is for a schematic named `ng-add`.
-        It contains the description, and points to the factory function that is called when your schematic is executed.
+   <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
+   - The `$schema` path is relative to the Angular Devkit collection schema.
+   - The `schematics` object describes the named schematics that are part of this collection.
+   - The first entry is for a schematic named `ng-add`.
+     It contains the description, and points to the factory function that is called when your schematic is executed.
 
 1. In your library project's `package.json` file, add a "schematics" entry with the path to your schema file.
-    The Angular CLI uses this entry to find named schematics in your collection when it runs commands.
+   The Angular CLI uses this entry to find named schematics in your collection when it runs commands.
 
-    <docs-code header="projects/my-lib/package.json (Schematics Collection Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
+<docs-code header="projects/my-lib/package.json (Schematics Collection Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
 
 The initial schema that you have created tells the CLI where to find the schematic that supports the `ng add` command.
 Now you are ready to create that schematic.
@@ -40,7 +39,7 @@ The following steps define this type of schematic.
 1. Create the main file, `index.ts`.
 1. Open `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"/>
+<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.
 
@@ -52,8 +51,8 @@ Use the `save` option of `ng-add` to configure if the library should be added to
 
 Possible values are:
 
-| Values              | Details |
-|:---                 |:---     |
+| Values              | Details                                 |
+| :------------------ | :-------------------------------------- |
 | `false`             | Don't add the package to `package.json` |
 | `true`              | Add the package to the dependencies     |
 | `"dependencies"`    | Add the package to the dependencies     |
@@ -62,31 +61,30 @@ Possible values are:
 ## Building your schematics
 
 To bundle your schematics together with your library, you must configure the library to build the schematics separately, then add them to the bundle.
-You must build your schematics *after* you build your library, so they are placed in the correct directory.
+You must build your schematics _after_ you build your library, so they are placed in the correct directory.
 
-* Your library needs a custom Typescript configuration file with instructions on how to compile your schematics into your distributed library
-* To add the schematics to the library bundle, add scripts to the library's `package.json` file
+- Your library needs a custom Typescript configuration file with instructions on how to compile your schematics into your distributed library
+- To add the schematics to the library bundle, add scripts to the library's `package.json` file
 
 Assume you have a library project `my-lib` in your Angular workspace.
 To tell the library how to build the schematics, add a `tsconfig.schematics.json` file next to the generated `tsconfig.lib.json` file that configures the library build.
 
 1. Edit the `tsconfig.schematics.json` file to add the following content.
 
-    <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
+   <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
 
-    | Options | Details |
-    |:---     |:---     |
-    | `rootDir` | Specifies that your `schematics` folder contains the input files to be compiled.                                 |
-    | `outDir`  | Maps to the library's output folder. By default, this is the `dist/my-lib` folder at the root of your workspace. |
+   | Options   | Details                                                                                                          |
+   | :-------- | :--------------------------------------------------------------------------------------------------------------- |
+   | `rootDir` | Specifies that your `schematics` folder contains the input files to be compiled.                                 |
+   | `outDir`  | Maps to the library's output folder. By default, this is the `dist/my-lib` folder at the root of your workspace. |
 
 1. To make sure your schematics source files get compiled into the library bundle, add the following scripts to the `package.json` file in your library project's root folder \(`projects/my-lib`\).
 
-    <docs-code header="projects/my-lib/package.json (Build Scripts)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
-
-    * The `build` script compiles your schematic using the custom `tsconfig.schematics.json` file
-    * The `postbuild` script copies the schematic files after the `build` script completes
-    * Both the `build` and the `postbuild` scripts require the `copyfiles` and `typescript` dependencies.
-        To install the dependencies, navigate to the path defined in `devDependencies` and run `npm install` before you run the scripts.
+   <docs-code header="projects/my-lib/package.json (Build Scripts)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
+   - The `build` script compiles your schematic using the custom `tsconfig.schematics.json` file
+   - The `postbuild` script copies the schematic files after the `build` script completes
+   - Both the `build` and the `postbuild` scripts require the `copyfiles` and `typescript` dependencies.
+     To install the dependencies, navigate to the path defined in `devDependencies` and run `npm install` before you run the scripts.
 
 ## Providing generation support
 
@@ -95,11 +93,11 @@ You can add a named schematic to your collection that lets your users use the `n
 We'll assume that your library defines a service, `my-service`, that requires some setup.
 You want your users to be able to generate it using the following CLI command.
 
-<docs-code language="shell">
+```shell
 
 ng generate my-lib:my-service
 
-</docs-code>
+```
 
 To begin, create a new subfolder, `my-service`, in the `schematics` folder.
 
@@ -109,32 +107,31 @@ When you add a schematic to the collection, you have to point to it in the colle
 
 1. Edit the `schematics/collection.json` file to point to the new schematic subfolder, and include a pointer to a schema file that specifies inputs for the new schematic.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
+<docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
 
 1. Go to the `<lib-root>/schematics/my-service` folder.
 1. Create a `schema.json` file and define the available options for the schematic.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
+   <docs-code header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
+   - _id_: A unique ID for the schema in the collection.
+   - _title_: A human-readable description of the schema.
+   - _type_: A descriptor for the type provided by the properties.
+   - _properties_: An object that defines the available options for the schematic.
 
-    * *id*: A unique ID for the schema in the collection.
-    * *title*: A human-readable description of the schema.
-    * *type*: A descriptor for the type provided by the properties.
-    * *properties*: An object that defines the available options for the schematic.
+   Each option associates key with a type, description, and optional alias.
+   The type defines the shape of the value you expect, and the description is displayed when the user requests usage help for your schematic.
 
-    Each option associates key with a type, description, and optional alias.
-    The type defines the shape of the value you expect, and the description is displayed when the user requests usage help for your schematic.
-
-    See the workspace schema for additional customizations for schematic options.
+   See the workspace schema for additional customizations for schematic options.
 
 1. Create a `schema.ts` file and define an interface that stores the values of the options defined in the `schema.json` file.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
+   <docs-code header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
 
-    | Options | Details |
-    |:---     |:---     |
-    | name    | The name you want to provide for the created service.                                                                                       |
-    | path    | Overrides the path provided to the schematic. The default path value is based on the current working directory.                             |
-    | project | Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user. |
+   | Options | Details                                                                                                                                     |
+   | :------ | :------------------------------------------------------------------------------------------------------------------------------------------ |
+   | name    | The name you want to provide for the created service.                                                                                       |
+   | path    | Overrides the path provided to the schematic. The default path value is based on the current working directory.                             |
+   | project | Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user. |
 
 ### Add template files
 
@@ -143,26 +140,24 @@ Schematic templates support special syntax to execute code and variable substitu
 
 1. Create a `files/` folder inside the `schematics/my-service/` folder.
 1. Create a file named `__name@dasherize__.service.ts.template` that defines a template to use for generating files.
-    This template will generate a service that already has Angular's `HttpClient` injected into an `http` property.
-
-    <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
+   This template will generate a service that already has Angular's `HttpClient` injected into an `http` property.
 
-    import { Injectable } from '@angular/core';
-    import { HttpClient } from '@angular/common/http';
+   <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
 
-    @Injectable({
-      providedIn: 'root'
-    })
-    export class <%= classify(name) %>Service {
-      private http = inject(HttpClient);
-    }
+   import { Injectable } from '@angular/core';
+   import { HttpClient } from '@angular/common/http';
 
-    </docs-code>
+   @Injectable({
+   providedIn: 'root'
+   })
+   export class <%= classify(name) %>Service {
+   private http = inject(HttpClient);
+   }
 
-    * The `classify` and `dasherize` methods are utility functions that your schematic uses to transform your source template and filename.
-
-    * The `name` is provided as a property from your factory function.
-        It is the same `name` you defined in the schema.
+   </docs-code>
+   - The `classify` and `dasherize` methods are utility functions that your schematic uses to transform your source template and filename.
+   - The `name` is provided as a property from your factory function.
+     It is the same `name` you defined in the schema.
 
 ### Add the factory function
 
@@ -176,17 +171,17 @@ For details of these data structures and syntax, see the [Schematics README](htt
 
 1. Create the main file `index.ts` and add the source code for your schematic factory function.
 1. First, import the schematics definitions you will need.
-    The Schematics framework offers many utility functions to create and use rules when running a schematic.
+   The Schematics framework offers many utility functions to create and use rules when running a schematic.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
 
 1. Import the defined schema interface that provides the type information for your schematic's options.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
 
 1. To build up the generation schematic, start with an empty rule factory.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
 
 This rule factory returns the tree without modification.
 The options are the option values passed through from the `ng generate` command.
@@ -205,25 +200,25 @@ The `Tree` methods give you access to the complete file tree in your workspace,
 ### Get the project configuration
 
 1. To determine the destination project, use the `workspaces.readWorkspace` method to read the contents of the workspace configuration file, `angular.json`.
-    To use `workspaces.readWorkspace` you need to create a `workspaces.WorkspaceHost` from the `Tree`.
-    Add the following code to your factory function.
+   To use `workspaces.readWorkspace` you need to create a `workspaces.WorkspaceHost` from the `Tree`.
+   Add the following code to your factory function.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
 
-    Be sure to check that the context exists and throw the appropriate error.
+   Be sure to check that the context exists and throw the appropriate error.
 
 1. Now that you have the project name, use it to retrieve the project-specific configuration information.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
 
-    The `workspace.projects` object contains all the project-specific configuration information.
+   The `workspace.projects` object contains all the project-specific configuration information.
 
 1. The `options.path` determines where the schematic template files are moved to once the schematic is applied.
 
-    The `path` option in the schematic's schema is substituted by default with the current working directory.
-    If the `path` is not defined, use the `sourceRoot` from the project configuration along with the `projectType`.
+   The `path` option in the schematic's schema is substituted by default with the current working directory.
+   If the `path` is not defined, use the `sourceRoot` from the project configuration along with the `projectType`.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
 
 ### Define the rule
 
@@ -232,23 +227,23 @@ Use the templating to generate any custom files required for your schematic.
 
 1. Add the following code to your factory function.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
 
-    | Methods            | Details |
-    |:---                |:---     |
-    | `apply()`          | Applies multiple rules to a source and returns the transformed source. It takes 2 arguments, a source and an array of rules.                                                                                                                     |
-    | `url()`            | Reads source files from your filesystem, relative to the schematic.                                                                                                                                                                              |
-    | `applyTemplates()` | Receives an argument of methods and properties you want make available to the schematic template and the schematic filenames. It returns a `Rule`. This is where you define the `classify()` and `dasherize()` methods, and the `name` property. |
-    | `classify()`       | Takes a value and returns the value in title case. For example, if the provided name is `my service`, it is returned as `MyService`.                                                                                                             |
-    | `dasherize()`      | Takes a value and returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as `my-service`.                                                                                                     |
-    | `move()`           | Moves the provided source files to their destination when the schematic is applied.                                                                                                                                                              |
+   | Methods            | Details                                                                                                                                                                                                                                          |
+   | :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `apply()`          | Applies multiple rules to a source and returns the transformed source. It takes 2 arguments, a source and an array of rules.                                                                                                                     |
+   | `url()`            | Reads source files from your filesystem, relative to the schematic.                                                                                                                                                                              |
+   | `applyTemplates()` | Receives an argument of methods and properties you want make available to the schematic template and the schematic filenames. It returns a `Rule`. This is where you define the `classify()` and `dasherize()` methods, and the `name` property. |
+   | `classify()`       | Takes a value and returns the value in title case. For example, if the provided name is `my service`, it is returned as `MyService`.                                                                                                             |
+   | `dasherize()`      | Takes a value and returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as `my-service`.                                                                                                     |
+   | `move()`           | Moves the provided source files to their destination when the schematic is applied.                                                                                                                                                              |
 
 1. Finally, the rule factory must return a rule.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
 
-    The `chain()` method lets you combine multiple rules into a single rule, so that you can perform multiple operations in a single schematic.
-    Here you are only merging the template rules with any code executed by the schematic.
+   The `chain()` method lets you combine multiple rules into a single rule, so that you can perform multiple operations in a single schematic.
+   Here you are only merging the template rules with any code executed by the schematic.
 
 See a complete example of the following schematic rule function.
 
@@ -265,20 +260,20 @@ The following steps show you how to generate a service using the schematic you c
 
 From the root of your workspace, run the `ng build` command for your library.
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib
 
-</docs-code>
+```
 
 Then, you change into your library directory to build the schematic
 
-<docs-code language="shell">
+```shell
 
 cd projects/my-lib
 npm run build
 
-</docs-code>
+```
 
 ### Link the library
 
@@ -286,21 +281,21 @@ Your library and schematics are packaged and placed in the `dist/my-lib` folder
 For running the schematic, you need to link the library into your `node_modules` folder.
 From the root of your workspace, run the `npm link` command with the path to your distributable library.
 
-<docs-code language="shell">
+```shell
 
 npm link dist/my-lib
 
-</docs-code>
+```
 
 ### Run the schematic
 
 Now that your library is installed, run the schematic using the `ng generate` command.
 
-<docs-code language="shell">
+```shell
 
 ng generate my-lib:my-service --name my-data
 
-</docs-code>
+```
 
 In the console, you see that the schematic was run and the `my-data.service.ts` file was created in your application folder.
 
diff --git a/adev-es/src/content/tools/cli/schematics-for-libraries.md b/adev-es/src/content/tools/cli/schematics-for-libraries.md
index d43b949..d8587a4 100644
--- a/adev-es/src/content/tools/cli/schematics-for-libraries.md
+++ b/adev-es/src/content/tools/cli/schematics-for-libraries.md
@@ -4,7 +4,7 @@ Cuando creas una librería Angular, puedes proporcionarla y empaquetarla con sch
 Con tus schematics, tus usuarios pueden usar `ng add` para instalar una versión inicial de tu librería,
 `ng generate` para crear artefactos definidos en tu librería, y `ng update` para ajustar su proyecto para una nueva versión de tu librería que introduce cambios disruptivos.
 
-Los tres tipos de schematics pueden ser parte de una colección que empaquetas con tu librería.
+Todos los tres tipos de schematics pueden ser parte de una colección que empaquetas con tu librería.
 
 ## Creando una colección de schematics
 
@@ -16,17 +16,16 @@ Los siguientes pasos te muestran cómo agregar soporte inicial sin modificar nin
 1. En el nivel raíz de la carpeta `schematics`, crea un archivo `collection.json`.
 1. Edita el archivo `collection.json` para definir el esquema inicial para tu colección.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
-
-    * La ruta `$schema` es relativa al esquema de colección Angular Devkit.
-    * El objeto `schematics` describe los schematics con nombre que son parte de esta colección.
-    * La primera entrada es para un schematic llamado `ng-add`.
-        Contiene la descripción, y apunta a la función factory que se llama cuando tu schematic se ejecuta.
+   <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json"/>
+   - La ruta `$schema` es relativa al esquema de colección Angular Devkit.
+   - El objeto `schematics` describe los schematics con nombre que son parte de esta colección.
+   - La primera entrada es para un schematic llamado `ng-add`.
+     Contiene la descripción, y apunta a la función factory que se llama cuando tu schematic se ejecuta.
 
 1. En el archivo `package.json` del proyecto de tu librería, agrega una entrada "schematics" con la ruta a tu archivo de esquema.
     El Angular CLI usa esta entrada para encontrar schematics con nombre en tu colección cuando ejecuta comandos.
 
-    <docs-code header="projects/my-lib/package.json (Schematics Collection Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
+<docs-code header="projects/my-lib/package.json (Schematics Collection Reference)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json" visibleRegion="collection"/>
 
 El esquema inicial que has creado le dice al CLI dónde encontrar el schematic que soporta el comando `ng add`.
 Ahora estás listo para crear ese schematic.
@@ -40,7 +39,7 @@ Los siguientes pasos definen este tipo de schematic.
 1. Crea el archivo principal, `index.ts`.
 1. Abre `index.ts` y agrega el código fuente para tu función factory schematic.
 
-    <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/index.ts (ng-add Rule Factory)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts"/>
 
 El Angular CLI instalará la última versión de la librería automáticamente, y este ejemplo va un paso más allá agregando el `MyLibModule` a la raíz de la aplicación. La función `addRootImport` acepta un callback que necesita devolver un bloque de código. Puedes escribir cualquier código dentro de la cadena etiquetada con la función `code` y cualquier símbolo externo tiene que estar envuelto con la función `external` para asegurar que se generen las declaraciones de importación apropiadas.
 
@@ -62,31 +61,30 @@ Los valores posibles son:
 ## Construyendo tus schematics
 
 Para empaquetar tus schematics junto con tu librería, debes configurar la librería para construir los schematics por separado, luego agregarlos al bundle.
-Debes construir tus schematics *después* de construir tu librería, para que se coloquen en el directorio correcto.
+Debes construir tus schematics _después_ de construir tu librería, para que se coloquen en el directorio correcto.
 
-* Tu librería necesita un archivo de configuración TypeScript personalizado con instrucciones sobre cómo compilar tus schematics en tu librería distribuida
-* Para agregar los schematics al bundle de la librería, agrega scripts al archivo `package.json` de la librería
+- Tu librería necesita un archivo de configuración TypeScript personalizado con instrucciones sobre cómo compilar tus schematics en tu librería distribuida
+- Para agregar los schematics al bundle de la librería, agrega scripts al archivo `package.json` de la librería
 
 Supón que tienes un proyecto de librería `my-lib` en tu workspace Angular.
 Para decirle a la librería cómo construir los schematics, agrega un archivo `tsconfig.schematics.json` junto al archivo generado `tsconfig.lib.json` que configura la construcción de la librería.
 
 1. Edita el archivo `tsconfig.schematics.json` para agregar el siguiente contenido.
 
-    <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
+   <docs-code header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json"/>
 
-    | Opciones | Detalles |
-    |:---     |:---     |
-    | `rootDir` | Especifica que tu carpeta `schematics` contiene los archivos de entrada a compilar.                                 |
-    | `outDir`  | Mapea a la carpeta de salida de la librería. Por defecto, esta es la carpeta `dist/my-lib` en la raíz de tu workspace. |
+   | Options   | Details                                                                                                          |
+   | :-------- | :--------------------------------------------------------------------------------------------------------------- |
+   | `rootDir` | Especifica que tu carpeta `schematics` contiene los archivos de entrada a compilar.                                 |
+   | `outDir`  | Mapea a la carpeta de salida de la librería. Por defecto, esta es la carpeta `dist/my-lib` en la raíz de tu workspace. |
 
 1. Para asegurarte de que los archivos fuente de tus schematics se compilen en el bundle de la librería, agrega los siguientes scripts al archivo `package.json` en la carpeta raíz del proyecto de tu librería \(`projects/my-lib`\).
 
-    <docs-code header="projects/my-lib/package.json (Build Scripts)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
-
-    * El script `build` compila tu schematic usando el archivo personalizado `tsconfig.schematics.json`
-    * El script `postbuild` copia los archivos schematic después de que el script `build` completa
-    * Tanto el script `build` como el `postbuild` requieren las dependencias `copyfiles` y `typescript`.
-        Para instalar las dependencias, navega a la ruta definida en `devDependencies` y ejecuta `npm install` antes de ejecutar los scripts.
+   <docs-code header="projects/my-lib/package.json (Build Scripts)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/package.json"/>
+   - El script `build` compila tu schematic usando el archivo personalizado `tsconfig.schematics.json`
+   - El script `postbuild` copia los archivos schematic después de que el script `build` completa
+   - Tanto el script `build` como el `postbuild` requieren las dependencias `copyfiles` y `typescript`.
+     Para instalar las dependencias, navega a la ruta definida en `devDependencies` y ejecuta `npm install` antes de ejecutar los scripts.
 
 ## Proporcionando soporte de generación
 
@@ -95,11 +93,11 @@ Puedes agregar un schematic con nombre a tu colección que permita a tus usuario
 Supondremos que tu librería define un servicio, `my-service`, que requiere alguna configuración.
 Quieres que tus usuarios puedan generarlo usando el siguiente comando CLI.
 
-<docs-code language="shell">
+```shell
 
 ng generate my-lib:my-service
 
-</docs-code>
+```
 
 Para comenzar, crea una nueva subcarpeta, `my-service`, en la carpeta `schematics`.
 
@@ -109,17 +107,16 @@ Cuando agregas un schematic a la colección, tienes que apuntar a él en el esqu
 
 1. Edita el archivo `schematics/collection.json` para apuntar a la nueva subcarpeta schematic, e incluir un puntero a un archivo de esquema que especifica las entradas para el nuevo schematic.
 
-    <docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
+<docs-code header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json"/>
 
 1. Ve a la carpeta `<lib-root>/schematics/my-service`.
 1. Crea un archivo `schema.json` y define las opciones disponibles para el schematic.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
-
-    * *id*: Un ID único para el esquema en la colección.
-    * *title*: Una descripción legible para humanos del esquema.
-    * *type*: Un descriptor para el tipo proporcionado por las propiedades.
-    * *properties*: Un objeto que define las opciones disponibles para el schematic.
+   <docs-code header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json"/>
+   - _id_: Un ID único para el esquema en la colección.
+   - _title_: Una descripción legible para humanos del esquema.
+   - _type_: Un descriptor para el tipo proporcionado por las propiedades.
+   - _properties_: Un objeto que define las opciones disponibles para el schematic.
 
     Cada opción asocia una clave con un tipo, descripción y alias opcional.
     El tipo define la forma del valor que esperas, y la descripción se muestra cuando el usuario solicita ayuda de uso para tu schematic.
@@ -128,13 +125,13 @@ Cuando agregas un schematic a la colección, tienes que apuntar a él en el esqu
 
 1. Crea un archivo `schema.ts` y define una interfaz que almacene los valores de las opciones definidas en el archivo `schema.json`.
 
-    <docs-code header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
+   <docs-code header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts"/>
 
-    | Opciones | Detalles |
-    |:---     |:---     |
-    | name    | El nombre que quieres proporcionar para el servicio creado.                                                                                       |
-    | path    | Sobrescribe la ruta proporcionada al schematic. El valor de ruta predeterminado se basa en el directorio de trabajo actual.                             |
-    | project | Proporciona un proyecto específico en el que ejecutar el schematic. En el schematic, puedes proporcionar un valor predeterminado si la opción no es proporcionada por el usuario. |
+   | Options | Details                                                                                                                                     |
+   | :------ | :------------------------------------------------------------------------------------------------------------------------------------------ |
+   | name    | El nombre que quieres proporcionar para el servicio creado.                                                                                       |
+   | path    | Sobrescribe la ruta proporcionada al schematic. El valor de ruta predeterminado se basa en el directorio de trabajo actual.                             |
+   | project | Proporciona un proyecto específico en el que ejecutar el schematic. En el schematic, puedes proporcionar un valor predeterminado si la opción no es proporcionada por el usuario. |
 
 ### Agregar archivos de plantilla
 
@@ -145,24 +142,22 @@ Las plantillas schematic soportan sintaxis especial para ejecutar código y sust
 1. Crea un archivo llamado `__name@dasherize__.service.ts.template` que define una plantilla a usar para generar archivos.
     Esta plantilla generará un servicio que ya tiene el `HttpClient` de Angular inyectado en una propiedad `http`.
 
-    <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
-
-    import { Injectable } from '@angular/core';
-    import { HttpClient } from '@angular/common/http';
+   <docs-code lang="typescript" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
 
-    @Injectable({
-      providedIn: 'root'
-    })
-    export class <%= classify(name) %>Service {
-      private http = inject(HttpClient);
-    }
+   import { Injectable } from '@angular/core';
+   import { HttpClient } from '@angular/common/http';
 
-    </docs-code>
+   @Injectable({
+   providedIn: 'root'
+   })
+   export class <%= classify(name) %>Service {
+   private http = inject(HttpClient);
+   }
 
-    * Los métodos `classify` y `dasherize` son funciones utilitarias que tu schematic usa para transformar tu plantilla fuente y nombre de archivo.
-
-    * El `name` se proporciona como una propiedad de tu función factory.
-        Es el mismo `name` que definiste en el esquema.
+   </docs-code>
+   - Los métodos `classify` y `dasherize` son funciones utilitarias que tu schematic usa para transformar tu plantilla fuente y nombre de archivo.
+   - El `name` se proporciona como una propiedad de tu función factory.
+     Es el mismo `name` que definiste en el esquema.
 
 ### Agregar la función factory
 
@@ -178,15 +173,15 @@ Para detalles de estas estructuras de datos y sintaxis, consulta el [Schematics
 1. Primero, importa las definiciones de schematics que necesitarás.
     El framework de Schematics ofrece muchas funciones utilitarias para crear y usar reglas al ejecutar un schematic.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schematics-imports"/>
 
 1. Importa la interfaz de esquema definida que proporciona la información de tipo para las opciones de tu schematic.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="schema-imports"/>
 
 1. Para construir el schematic de generación, comienza con una factory de regla vacía.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
+<docs-code header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" visibleRegion="factory"/>
 
 Esta factory de regla devuelve el árbol sin modificación.
 Las opciones son los valores de opción pasados desde el comando `ng generate`.
@@ -208,22 +203,22 @@ Los métodos `Tree` te dan acceso al árbol completo de archivos en tu workspace
     Para usar `workspaces.readWorkspace` necesitas crear un `workspaces.WorkspaceHost` desde el `Tree`.
     Agrega el siguiente código a tu función factory.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="workspace"/>
 
-    Asegúrate de verificar que el contexto existe y lanza el error apropiado.
+   Asegúrate de verificar que el contexto existe y lanza el error apropiado.
 
 1. Ahora que tienes el nombre del proyecto, úsalo para recuperar la información de configuración específica del proyecto.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="project-info"/>
 
-    El objeto `workspace.projects` contiene toda la información de configuración específica del proyecto.
+   El objeto `workspace.projects` contiene toda la información de configuración específica del proyecto.
 
 1. El `options.path` determina dónde se mueven los archivos de plantilla schematic una vez que se aplica el schematic.
 
     La opción `path` en el esquema del schematic se sustituye por defecto con el directorio de trabajo actual.
     Si el `path` no está definido, usa el `sourceRoot` de la configuración del proyecto junto con el `projectType`.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="path"/>
 
 ### Definir la regla
 
@@ -232,23 +227,23 @@ Usa las plantillas para generar cualquier archivo personalizado requerido para t
 
 1. Agrega el siguiente código a tu función factory.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="template"/>
 
-    | Métodos            | Detalles |
-    |:---                |:---     |
-    | `apply()`          | Aplica múltiples reglas a una fuente y devuelve la fuente transformada. Toma 2 argumentos, una fuente y un array de reglas.                                                                                                                     |
-    | `url()`            | Lee archivos fuente de tu sistema de archivos, relativo al schematic.                                                                                                                                                                              |
-    | `applyTemplates()` | Recibe un argumento de métodos y propiedades que quieres hacer disponibles para la plantilla schematic y los nombres de archivo schematic. Devuelve una `Rule`. Aquí es donde defines los métodos `classify()` y `dasherize()`, y la propiedad `name`. |
-    | `classify()`       | Toma un valor y devuelve el valor en título. Por ejemplo, si el nombre proporcionado es `my service`, se devuelve como `MyService`.                                                                                                             |
-    | `dasherize()`      | Toma un valor y devuelve el valor en guiones y minúsculas. Por ejemplo, si el nombre proporcionado es MyService, se devuelve como `my-service`.                                                                                                     |
-    | `move()`           | Mueve los archivos fuente proporcionados a su destino cuando se aplica el schematic.                                                                                                                                                              |
+   | Methods            | Details                                                                                                                                                                                                                                          |
+   | :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `apply()`          | Aplica múltiples reglas a una fuente y devuelve la fuente transformada. Toma 2 argumentos, una fuente y un array de reglas.                                                                                                                     |
+   | `url()`            | Lee archivos fuente de tu sistema de archivos, relativo al schematic.                                                                                                                                                                              |
+   | `applyTemplates()` | Recibe un argumento de métodos y propiedades que quieres hacer disponibles para la plantilla schematic y los nombres de archivo schematic. Devuelve una `Rule`. Aquí es donde defines los métodos `classify()` y `dasherize()`, y la propiedad `name`. |
+   | `classify()`       | Toma un valor y devuelve el valor en título. Por ejemplo, si el nombre proporcionado es `my service`, se devuelve como `MyService`.                                                                                                             |
+   | `dasherize()`      | Toma un valor y devuelve el valor en guiones y minúsculas. Por ejemplo, si el nombre proporcionado es MyService, se devuelve como `my-service`.                                                                                                     |
+   | `move()`           | Mueve los archivos fuente proporcionados a su destino cuando se aplica el schematic.                                                                                                                                                              |
 
 1. Finalmente, la factory de regla debe devolver una regla.
 
-    <docs-code header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
+   <docs-code header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="adev/src/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" visibleRegion="chain"/>
 
-    El método `chain()` te permite combinar múltiples reglas en una sola regla, para que puedas realizar múltiples operaciones en un solo schematic.
-    Aquí solo estás fusionando las reglas de plantilla con cualquier código ejecutado por el schematic.
+   El método `chain()` te permite combinar múltiples reglas en una sola regla, para que puedas realizar múltiples operaciones en un solo schematic.
+   Aquí solo estás fusionando las reglas de plantilla con cualquier código ejecutado por el schematic.
 
 Consulta un ejemplo completo de la siguiente función de regla schematic.
 
@@ -265,20 +260,20 @@ Los siguientes pasos te muestran cómo generar un servicio usando el schematic q
 
 Desde la raíz de tu workspace, ejecuta el comando `ng build` para tu librería.
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib
 
-</docs-code>
+```
 
 Luego, cambias al directorio de tu librería para construir el schematic
 
-<docs-code language="shell">
+```shell
 
 cd projects/my-lib
 npm run build
 
-</docs-code>
+```
 
 ### Enlazar la librería
 
@@ -286,21 +281,21 @@ Tu librería y schematics se empaquetan y colocan en la carpeta `dist/my-lib` en
 Para ejecutar el schematic, necesitas enlazar la librería en tu carpeta `node_modules`.
 Desde la raíz de tu workspace, ejecuta el comando `npm link` con la ruta a tu librería distribuible.
 
-<docs-code language="shell">
+```shell
 
 npm link dist/my-lib
 
-</docs-code>
+```
 
 ### Ejecutar el schematic
 
 Ahora que tu librería está instalada, ejecuta el schematic usando el comando `ng generate`.
 
-<docs-code language="shell">
+```shell
 
 ng generate my-lib:my-service --name my-data
 
-</docs-code>
+```
 
 En la consola, ves que el schematic se ejecutó y el archivo `my-data.service.ts` fue creado en tu carpeta de aplicación.
 
diff --git a/adev-es/src/content/tools/cli/schematics.en.md b/adev-es/src/content/tools/cli/schematics.en.md
index 7b0800d..dc4aac3 100644
--- a/adev-es/src/content/tools/cli/schematics.en.md
+++ b/adev-es/src/content/tools/cli/schematics.en.md
@@ -11,7 +11,7 @@ Use schematics to enforce architectural rules and conventions, making your proje
 ## Schematics for the Angular CLI
 
 Schematics are part of the Angular ecosystem.
-The Angular CLI  uses schematics to apply transforms to a web-app project.
+The Angular CLI uses schematics to apply transforms to a web-app project.
 You can modify these schematics, and define new ones to do things like update your code to fix breaking changes in a dependency, for example, or to add a new configuration option or framework to an existing project.
 
 Schematics that are included in the `@schematics/angular` collection are run by default by the commands `ng generate` and `ng add`.
@@ -19,19 +19,19 @@ The package contains named schematics that configure the options that are availa
 The sub-commands for `ng generate` are shorthand for the corresponding schematic.
 To specify and generate a particular schematic, or a collection of schematics, using the long form:
 
-<docs-code language="shell">
+```shell
 
 ng generate my-schematic-collection:my-schematic-name
 
-</docs-code>
+```
 
 or
 
-<docs-code language="shell">
+```shell
 
 ng generate my-schematic-name --collection collection-name
 
-</docs-code>
+```
 
 ### Configuring CLI schematics
 
@@ -46,9 +46,9 @@ The schema describes the options available to the CLI for each of the `ng genera
 
 As a library developer, you can create your own collections of custom schematics to integrate your library with the Angular CLI.
 
-* An *add schematic* lets developers install your library in an Angular workspace using `ng add`
-* *Generation schematics* can tell the `ng generate` sub-commands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library
-* An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version
+- An _add schematic_ lets developers install your library in an Angular workspace using `ng add`
+- _Generation schematics_ can tell the `ng generate` sub-commands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library
+- An _update schematic_ can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version
 
 For more details of what these look like and how to create them, see:
 
@@ -59,16 +59,16 @@ For more details of what these look like and how to create them, see:
 
 ### Add schematics
 
-An *add schematic* is typically supplied with a library, so that the library can be added to an existing project with `ng add`.
+An _add schematic_ is typically supplied with a library, so that the library can be added to an existing project with `ng add`.
 The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic.
 
 For example, the [`@angular/material`](https://material.angular.dev/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`.
 Look at this one as an example and model for your own add schematic.
 
 Partner and third party libraries also support the Angular CLI with add schematics.
-For example, `@ng-bootstrap/schematics` adds [ng-bootstrap](https://ng-bootstrap.github.io)  to an app, and  `@clr/angular` installs and sets up [Clarity from VMWare](https://clarity.design/documentation/get-started).
+For example, `@ng-bootstrap/schematics` adds [ng-bootstrap](https://ng-bootstrap.github.io) to an app, and `@clr/angular` installs and sets up [Clarity from VMWare](https://clarity.design/documentation/get-started).
 
-An *add schematic* can also update a project with configuration changes, add additional dependencies \(such as polyfills\), or scaffold package-specific initialization code.
+An _add schematic_ can also update a project with configuration changes, add additional dependencies \(such as polyfills\), or scaffold package-specific initialization code.
 For example, the `@angular/pwa` schematic turns your application into a PWA by adding an application manifest and service worker.
 
 ### Generation schematics
@@ -79,31 +79,31 @@ The documented sub-commands use the default Angular generation schematics, but y
 Angular Material, for example, supplies generation schematics for the UI components that it defines.
 The following command uses one of these schematics to render an Angular Material `<mat-table>` that is pre-configured with a datasource for sorting and pagination.
 
-<docs-code language="shell">
+```shell
 
 ng generate @angular/material:table <component-name>
 
-</docs-code>
+```
 
 ### Update schematics
 
- The `ng update` command can be used to update your workspace's library dependencies.
- If you supply no options or use the help option, the command examines your workspace and suggests libraries to update.
+The `ng update` command can be used to update your workspace's library dependencies.
+If you supply no options or use the help option, the command examines your workspace and suggests libraries to update.
 
-<docs-code language="shell">
+```shell
 
 ng update
 We analyzed your package.json, there are some packages to update:
 
     Name                                      Version                     Command to update
-    &hyphen;-------------------------------------------------------------------------------
+    --------------------------------------------------------------------------------
     @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
     @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
     @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
     @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
     rxjs                                      6.3.3 -> 6.4.0           ng update rxjs
 
-</docs-code>
+```
 
 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.
 
@@ -114,13 +114,13 @@ Try updating specific dependencies first.
 
 For more about how the `ng update` command works, see [Update Command](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md).
 
-If you create a new version of your library that introduces potential breaking changes, you can provide an *update schematic* to enable the `ng update` command to automatically resolve any such changes in the project being updated.
+If you create a new version of your library that introduces potential breaking changes, you can provide an _update schematic_ to enable the `ng update` command to automatically resolve any such changes in the project being updated.
 
 For example, suppose you want to update the Angular Material library.
 
-<docs-code language="shell">
+```shell
 ng update @angular/material
-</docs-code>
+```
 
 This command updates both `@angular/material` and its dependency `@angular/cdk` in your workspace's `package.json`.
 If either package contains an update schematic that covers migration from the existing version to a new version, the command runs that schematic on your workspace.
diff --git a/adev-es/src/content/tools/cli/schematics.md b/adev-es/src/content/tools/cli/schematics.md
index db17989..4d7df89 100644
--- a/adev-es/src/content/tools/cli/schematics.md
+++ b/adev-es/src/content/tools/cli/schematics.md
@@ -19,19 +19,19 @@ El paquete contiene schematics nombrados que configuran las opciones que están
 Los sub-comandos para `ng generate` son abreviaciones para el schematic correspondiente.
 Para especificar y generar un schematic particular, o una colección de schematics, usando la forma larga:
 
-<docs-code language="shell">
+```shell
 
 ng generate my-schematic-collection:my-schematic-name
 
-</docs-code>
+```
 
 or
 
-<docs-code language="shell">
+```shell
 
 ng generate my-schematic-name --collection collection-name
 
-</docs-code>
+```
 
 ### Configurar schematics del CLI
 
@@ -46,9 +46,9 @@ El esquema describe las opciones disponibles para el CLI para cada uno de los su
 
 Como desarrollador de librerías, puedes crear tus propias colecciones de schematics personalizados para integrar tu librería con el Angular CLI.
 
-* Un *add schematic* permite a los desarrolladores instalar tu librería en un workspace Angular usando `ng add`
-* Los *generation schematics* pueden decirle a los sub-comandos de `ng generate` cómo modificar proyectos, agregar configuraciones y scripts, y crear artefactos que están definidos en tu librería
-* Un *update schematic* puede decirle al comando `ng update` cómo actualizar las dependencias de tu librería y ajustar para cambios disruptivos cuando lanzas una nueva versión
+- Un _add schematic_ permite a los desarrolladores instalar tu librería en un workspace Angular usando `ng add`
+- Los _generation schematics_ pueden decirle a los sub-comandos de `ng generate` cómo modificar proyectos, agregar configuraciones y scripts, y crear artefactos que están definidos en tu librería
+- Un _update schematic_ puede decirle al comando `ng update` cómo actualizar las dependencias de tu librería y ajustar para cambios disruptivos cuando lanzas una nueva versión
 
 Para más detalles sobre cómo se ven estos y cómo crearlos, consulta:
 
@@ -59,7 +59,7 @@ Para más detalles sobre cómo se ven estos y cómo crearlos, consulta:
 
 ### Add schematics
 
-Un *add schematic* típicamente se proporciona con una librería, para que la librería pueda agregarse a un proyecto existente con `ng add`.
+Un _add schematic_ típicamente se proporciona con una librería, para que la librería pueda agregarse a un proyecto existente con `ng add`.
 El comando `add` usa tu gestor de paquetes para descargar nuevas dependencias e invoca un script de instalación que se implementa como un schematic.
 
 Por ejemplo, el schematic [`@angular/material`](https://material.angular.dev/guide/schematics) le dice al comando `add` que instale y configure Angular Material y temas, y registre nuevos componentes iniciales que pueden crearse con `ng generate`.
@@ -68,7 +68,7 @@ Mira este como un ejemplo y modelo para tu propio add schematic.
 Las librerías de socios y de terceros también soportan el Angular CLI con add schematics.
 Por ejemplo, `@ng-bootstrap/schematics` agrega [ng-bootstrap](https://ng-bootstrap.github.io) a una aplicación, y `@clr/angular` instala y configura [Clarity de VMWare](https://clarity.design/documentation/get-started).
 
-Un *add schematic* también puede actualizar un proyecto con cambios de configuración, agregar dependencias adicionales \(como polyfills\), o crear código de inicialización específico del paquete.
+Un _add schematic_ también puede actualizar un proyecto con cambios de configuración, agregar dependencias adicionales \(como polyfills\), o crear código de inicialización específico del paquete.
 Por ejemplo, el schematic `@angular/pwa` convierte tu aplicación en una PWA agregando un manifiesto de aplicación y service worker.
 
 ### Generation schematics
@@ -79,48 +79,48 @@ Los sub-comandos documentados usan los schematics de generación de Angular pred
 Angular Material, por ejemplo, proporciona generation schematics para los componentes UI que define.
 El siguiente comando usa uno de estos schematics para renderizar un `<mat-table>` de Angular Material que está preconfigurado con un datasource para ordenamiento y paginación.
 
-<docs-code language="shell">
+```shell
 
 ng generate @angular/material:table <component-name>
 
-</docs-code>
+```
 
 ### Update schematics
 
 El comando `ng update` puede usarse para actualizar las dependencias de librerías de tu workspace.
 Si no proporcionas opciones o usas la opción de ayuda, el comando examina tu workspace y sugiere librerías para actualizar.
 
-<docs-code language="shell">
+```shell
 
 ng update
 We analyzed your package.json, there are some packages to update:
 
     Name                                      Version                     Command to update
-    &hyphen;-------------------------------------------------------------------------------
+    --------------------------------------------------------------------------------
     @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
     @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
     @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
     @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
     rxjs                                      6.3.3 -> 6.4.0           ng update rxjs
 
-</docs-code>
+```
 
 Si le pasas al comando un conjunto de librerías para actualizar, actualiza esas librerías, sus dependencias peer y las dependencias peer que dependen de ellas.
 
-ÚTIL: Si hay inconsistencias \(por ejemplo, si las dependencias peer no pueden coincidir con un rango [semver](https://semver.io) simple\), el comando genera un error y no cambia nada en el workspace.
+CONSEJO: Si hay inconsistencias \(por ejemplo, si las dependencias peer no pueden coincidir con un rango [semver](https://semver.io) simple\), el comando genera un error y no cambia nada en el workspace.
 
 Recomendamos que no fuerces una actualización de todas las dependencias por defecto.
 Intenta actualizar dependencias específicas primero.
 
 Para más información sobre cómo funciona el comando `ng update`, consulta [Comando Update](https://github.com/angular/angular-cli/blob/main/docs/specifications/update.md).
 
-Si creas una nueva versión de tu librería que introduce posibles cambios disruptivos, puedes proporcionar un *update schematic* para habilitar que el comando `ng update` resuelva automáticamente cualquiera de esos cambios en el proyecto que se está actualizando.
+Si creas una nueva versión de tu librería que introduce posibles cambios disruptivos, puedes proporcionar un _update schematic_ para habilitar que el comando `ng update` resuelva automáticamente cualquiera de esos cambios en el proyecto que se está actualizando.
 
 Por ejemplo, supón que quieres actualizar la librería Angular Material.
 
-<docs-code language="shell">
+```shell
 ng update @angular/material
-</docs-code>
+```
 
 Este comando actualiza tanto `@angular/material` como su dependencia `@angular/cdk` en el `package.json` de tu workspace.
 Si cualquiera de los paquetes contiene un update schematic que cubre la migración desde la versión existente a una nueva versión, el comando ejecuta ese schematic en tu workspace.
diff --git a/adev-es/src/content/tools/cli/serve.en.md b/adev-es/src/content/tools/cli/serve.en.md
index 1682cff..34cab17 100644
--- a/adev-es/src/content/tools/cli/serve.en.md
+++ b/adev-es/src/content/tools/cli/serve.en.md
@@ -4,12 +4,11 @@ You can serve your Angular CLI application with the `ng serve` command.
 This will compile your application, skip unnecessary optimizations, start a devserver, and automatically rebuild and live reload any subsequent changes.
 You can stop the server by pressing `Ctrl+C`.
 
-`ng serve` only executes the builder for the `serve` target in the default project as specified in `angular.json`.
-While any builder can be used here, the most common (and default) builder is `@angular-devkit/build-angular:dev-server`.
+`ng serve` only executes the builder for the `serve` target in the default project as specified in `angular.json`. While any builder can be used here, the most common (and default) builder is `@angular/build:dev-server`.
 
 You can determine which builder is being used for a particular project by looking up the `serve` target for that project.
 
-<docs-code language="json">
+```json
 
 {
   "projects": {
@@ -17,63 +16,67 @@ You can determine which builder is being used for a particular project by lookin
       "architect": {
         // `ng serve` invokes the Architect target named `serve`.
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           // ...
         },
-        "build": { /* ... */ }
+        "build": { /* ... */ },
         "test": { /* ... */ }
       }
     }
   }
 }
 
-</docs-code>
-
-This page discusses usage and options of `@angular-devkit/build-angular:dev-server`.
+```
 
 ## Proxying to a backend server
 
-Use [proxying support](https://webpack.js.org/configuration/dev-server/#devserverproxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
+Use [proxying support](https://vite.dev/config/server-options#server-proxy) to divert certain URLs to a backend server, by passing a file to the `--proxy-config` build option.
 For example, to divert all calls for `http://localhost:4200/api` to a server running on `http://localhost:3000/api`, take the following steps.
 
 1. Create a file `proxy.conf.json` in your project's `src/` folder.
 1. Add the following content to the new proxy file:
 
-    <docs-code language="json">
-
-    {
-      "/api": {
-        "target": "http://localhost:3000",
-        "secure": false
-      }
-    }
-
-    </docs-code>
+```json
+{
+  "/api/**": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}
+```
 
 1. In the CLI configuration file, `angular.json`, add the `proxyConfig` option to the `serve` target:
 
-    <docs-code language="json">
-
-    {
-      "projects": {
-        "my-app": {
-          "architect": {
-            "serve": {
-              "builder": "@angular-devkit/build-angular:dev-server",
-              "options": {
-                "proxyConfig": "src/proxy.conf.json"
-              }
-            }
+```json
+{
+  "projects": {
+    "my-app": {
+      "architect": {
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
           }
         }
       }
     }
+  }
+}
 
-    </docs-code>
+```
 
 1. To run the development server with this proxy configuration, call `ng serve`.
 
-Edit the proxy configuration file to add configuration options; following are some examples.
-For a detailed description of all options, refer to the [webpack DevServer documentation](https://webpack.js.org/configuration/dev-server/#devserverproxy) when using `@angular-devkit/build-angular:browser`, or the [Vite DevServer documentation](https://vite.dev/config/server-options#server-proxy) when using `@angular-devkit/build-angular:browser-esbuild` or `@angular-devkit/build-angular:application`.
+NOTE: To apply changes made to your proxy configuration file, you must restart the `ng serve` process.
+
+### Path matching behavior depends on the builder
+
+**`@angular/build:dev-server`** (based on [Vite](https://vite.dev/config/server-options#server-proxy))
+
+- `/api` matches only `/api`.
+- `/api/*` matches `/api/users` but not `/api/users/123`.
+- `/api/**` matches `/api/users` and `/api/users/123`.
+
+**`@angular-devkit/build-angular:dev-server`** (based on [Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy))
 
-NOTE: If you edit the proxy configuration file, you must relaunch the `ng serve` process to make your changes effective.
+- `/api` matches `/api` and any sub-paths (equivalent to `/api/**`).
diff --git a/adev-es/src/content/tools/cli/serve.md b/adev-es/src/content/tools/cli/serve.md
index 98b8742..85b6a53 100644
--- a/adev-es/src/content/tools/cli/serve.md
+++ b/adev-es/src/content/tools/cli/serve.md
@@ -4,12 +4,11 @@ Puedes servir tu aplicación Angular CLI con el comando `ng serve`.
 Esto compilará tu aplicación, omitirá optimizaciones innecesarias, iniciará un servidor de desarrollo y automáticamente reconstruirá y recargará en vivo cualquier cambio subsiguiente.
 Puedes detener el servidor presionando `Ctrl+C`.
 
-`ng serve` solo ejecuta el builder para el objetivo `serve` en el proyecto predeterminado como se especifica en `angular.json`.
-Aunque cualquier builder puede usarse aquí, el más común (y predeterminado) es `@angular-devkit/build-angular:dev-server`.
+`ng serve` solo ejecuta el builder para el objetivo `serve` en el proyecto predeterminado como se especifica en `angular.json`. Aunque cualquier builder puede usarse aquí, el más común (y predeterminado) es `@angular/build:dev-server`.
 
 Puedes determinar qué builder se está usando para un proyecto en particular buscando el objetivo `serve` para ese proyecto.
 
-<docs-code language="json">
+```json
 
 {
   "projects": {
@@ -17,7 +16,7 @@ Puedes determinar qué builder se está usando para un proyecto en particular bu
       "architect": {
         // `ng serve` invoca el objetivo Architect llamado `serve`.
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           // ...
         },
         "build": { /* ... */ }
@@ -27,53 +26,57 @@ Puedes determinar qué builder se está usando para un proyecto en particular bu
   }
 }
 
-</docs-code>
-
-Esta página discute el uso y las opciones de `@angular-devkit/build-angular:dev-server`.
+```
 
 ## Hacer proxy a un servidor backend
 
-Usa el [soporte de proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) para desviar ciertas URLs a un servidor backend, pasando un archivo a la opción de construcción `--proxy-config`.
+Usa el [soporte de proxy](https://vite.dev/config/server-options#server-proxy) para desviar ciertas URLs a un servidor backend, pasando un archivo a la opción de construcción `--proxy-config`.
 Por ejemplo, para desviar todas las llamadas a `http://localhost:4200/api` a un servidor ejecutándose en `http://localhost:3000/api`, sigue los siguientes pasos.
 
 1. Crea un archivo `proxy.conf.json` en la carpeta `src/` de tu proyecto.
 1. Agrega el siguiente contenido al nuevo archivo proxy:
 
-    <docs-code language="json">
-
-    {
-      "/api": {
-        "target": "http://localhost:3000",
-        "secure": false
-      }
-    }
-
-    </docs-code>
+```json
+{
+  "/api/**": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}
+```
 
 1. En el archivo de configuración del CLI, `angular.json`, agrega la opción `proxyConfig` al objetivo `serve`:
 
-    <docs-code language="json">
-
-    {
-      "projects": {
-        "my-app": {
-          "architect": {
-            "serve": {
-              "builder": "@angular-devkit/build-angular:dev-server",
-              "options": {
-                "proxyConfig": "src/proxy.conf.json"
-              }
-            }
+```json
+{
+  "projects": {
+    "my-app": {
+      "architect": {
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
           }
         }
       }
     }
+  }
+}
 
-    </docs-code>
+```
 
 1. Para ejecutar el servidor de desarrollo con esta configuración de proxy, llama a `ng serve`.
 
-Edita el archivo de configuración de proxy para agregar opciones de configuración; a continuación algunos ejemplos.
-Para una descripción detallada de todas las opciones, consulta la [documentación de webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy) cuando uses `@angular-devkit/build-angular:browser`, o la [documentación de Vite DevServer](https://vite.dev/config/server-options#server-proxy) cuando uses `@angular-devkit/build-angular:browser-esbuild` o `@angular-devkit/build-angular:application`.
-
 NOTA: Si editas el archivo de configuración de proxy, debes relanzar el proceso `ng serve` para que tus cambios tengan efecto.
+
+### El comportamiento de coincidencia de rutas depende del builder
+
+**`@angular/build:dev-server`** (basado en [Vite](https://vite.dev/config/server-options#server-proxy))
+
+- `/api` coincide solo con `/api`.
+- `/api/*` coincide con `/api/users` pero no con `/api/users/123`.
+- `/api/**` coincide con `/api/users` y `/api/users/123`.
+
+**`@angular-devkit/build-angular:dev-server`** (basado en [Webpack DevServer](https://webpack.js.org/configuration/dev-server/#devserverproxy))
+
+- `/api` coincide con `/api` y cualquier subruta (equivalente a `/api/**`).
diff --git a/adev-es/src/content/tools/cli/setup-local.en.md b/adev-es/src/content/tools/cli/setup-local.en.md
index 87a87af..58ce7fd 100644
--- a/adev-es/src/content/tools/cli/setup-local.en.md
+++ b/adev-es/src/content/tools/cli/setup-local.en.md
@@ -1,6 +1,6 @@
 # Setting up the local environment and workspace
 
-This guide explains how to set up your environment for Angular development using the [Angular CLI](cli "CLI command reference").
+This guide explains how to set up your environment for Angular development using the [Angular CLI](cli 'CLI command reference').
 It includes information about installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.
 
 <docs-callout title="Try Angular without local setup">
@@ -16,9 +16,9 @@ You don't need to set up your local environment until you're ready.
 To use Angular CLI, you should be familiar with the following:
 
 <docs-pill-row>
-  <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="JavaScript"/>
-  <docs-pill href="https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML" title="HTML"/>
-  <docs-pill href="https://developer.mozilla.org/docs/Learn/CSS/First_steps" title="CSS"/>
+  <docs-pill href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" title="JavaScript"/>
+  <docs-pill href="https://developer.mozilla.org/en-US/docs/Web/HTML" title="HTML"/>
+  <docs-pill href="https://developer.mozilla.org/en-US/docs/Web/CSS" title="CSS"/>
 </docs-pill-row>
 
 You should also be familiar with usage of command line interface (CLI) tools and have a general understanding of command shells.
@@ -40,21 +40,25 @@ To install the Angular CLI, open a terminal window and run the following command
 <docs-code-multifile>
    <docs-code
      header="npm"
+     language="shell"
      >
      npm install -g @angular/cli
      </docs-code>
    <docs-code
      header="pnpm"
+     language="shell"
      >
      pnpm install -g @angular/cli
      </docs-code>
    <docs-code
      header="yarn"
+     language="shell"
      >
      yarn global add @angular/cli
      </docs-code>
    <docs-code
      header="bun"
+     language="shell"
      >
      bun install -g @angular/cli
      </docs-code>
@@ -66,37 +70,41 @@ To install the Angular CLI, open a terminal window and run the following command
 On Windows client computers, the execution of PowerShell scripts is disabled by default, so the above command may fail with an error.
 To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following <a href="https://docs.microsoft.com/powershell/module/microsoft.powershell.core/about/about_execution_policies">execution policy</a>:
 
-<docs-code language="sh">
+```sh
 
 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
 
-</docs-code>
+```
 
 Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.
 
 ### Unix permissions
 
-On some Unix-like setups, global  scripts may be owned by the root user, so to the above command may fail with a permission error.
+On some Unix-like setups, global scripts may be owned by the root user, so to the above command may fail with a permission error.
 Run with `sudo` to execute the command as the root user and enter your password when prompted:
 
 <docs-code-multifile>
    <docs-code
      header="npm"
+     language="shell"
      >
      sudo npm install -g @angular/cli
      </docs-code>
    <docs-code
      header="pnpm"
+     language="shell"
      >
      sudo pnpm install -g @angular/cli
      </docs-code>
    <docs-code
      header="yarn"
+     language="shell"
      >
      sudo yarn global add @angular/cli
      </docs-code>
    <docs-code
      header="bun"
+     language="shell"
      >
      sudo bun install -g @angular/cli
      </docs-code>
@@ -111,11 +119,11 @@ You develop apps in the context of an Angular **workspace**.
 
 To create a new workspace and initial starter app, run the CLI command `ng new` and provide the name `my-app`, as shown here, then answer prompts about features to include:
 
-<docs-code language="shell">
+```shell
 
 ng new my-app
 
-</docs-code>
+```
 
 The Angular CLI installs the necessary Angular npm packages and other dependencies.
 This can take a few minutes.
@@ -123,21 +131,21 @@ This can take a few minutes.
 The CLI creates a new workspace and a small welcome app in a new directory with the same name as the workspace, ready to run.
 Navigate to the new directory so subsequent commands use this workspace.
 
-<docs-code language="shell">
+```shell
 
 cd my-app
 
-</docs-code>
+```
 
 ## Run the application
 
 The Angular CLI includes a development server, for you to build and serve your app locally. Run the following command:
 
-<docs-code language="shell">
+```shell
 
 ng serve --open
 
-</docs-code>
+```
 
 The `ng serve` command launches the server, watches your files, as well as rebuilds the app and reloads the browser as you make changes to those files.
 
@@ -156,16 +164,16 @@ Each application has a `src` folder that contains its components, data, and asse
 You can edit the generated files directly, or add to and modify them using CLI commands.
 Use the [`ng generate`](cli/generate) command to add new files for additional components, directives, pipes, services, and more.
 Commands such as [`ng add`](cli/add) and [`ng generate`](cli/generate), which create or operate on applications and libraries, must be executed
-from within a workspace. By contrast, commands such as `ng new` must be executed *outside* a workspace because they will create a new one.
+from within a workspace. By contrast, commands such as `ng new` must be executed _outside_ a workspace because they will create a new one.
 
 ## Next steps
 
-* Learn more about the [file structure](reference/configs/file-structure) and [configuration](reference/configs/workspace-config) of the generated workspace.
+- Learn more about the [file structure](reference/configs/file-structure) and [configuration](reference/configs/workspace-config) of the generated workspace.
 
-* Test your new application with [`ng test`](cli/test).
+- Test your new application with [`ng test`](cli/test).
 
-* Generate boilerplate like components, directives, and pipes with [`ng generate`](cli/generate).
+- Generate boilerplate like components, directives, and pipes with [`ng generate`](cli/generate).
 
-* Deploy your new application and make it available to real users with [`ng deploy`](cli/deploy).
+- Deploy your new application and make it available to real users with [`ng deploy`](cli/deploy).
 
-* Set up and run end-to-end tests of your application with [`ng e2e`](cli/e2e).
+- Set up and run end-to-end tests of your application with [`ng e2e`](cli/e2e).
diff --git a/adev-es/src/content/tools/cli/setup-local.md b/adev-es/src/content/tools/cli/setup-local.md
index 8fef153..f9bfd06 100644
--- a/adev-es/src/content/tools/cli/setup-local.md
+++ b/adev-es/src/content/tools/cli/setup-local.md
@@ -1,6 +1,6 @@
 # Configurando el entorno local y el workspace
 
-Esta guía explica cómo configurar tu entorno para el desarrollo en Angular usando el [Angular CLI](cli "Referencia de comandos CLI").
+Esta guía explica cómo configurar tu entorno para el desarrollo en Angular usando el [Angular CLI](cli 'Referencia de comandos CLI').
 Incluye información sobre cómo instalar el CLI, crear un workspace inicial y una aplicación de inicio, y ejecutar esa aplicación localmente para verificar tu configuración.
 
 <docs-callout title="Prueba Angular sin configuración local">
@@ -16,9 +16,9 @@ No necesitas configurar tu entorno local hasta que estés listo.
 Para usar Angular CLI, debes estar familiarizado con lo siguiente:
 
 <docs-pill-row>
-  <docs-pill href="https://developer.mozilla.org/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="JavaScript"/>
-  <docs-pill href="https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML" title="HTML"/>
-  <docs-pill href="https://developer.mozilla.org/docs/Learn/CSS/First_steps" title="CSS"/>
+  <docs-pill href="https://developer.mozilla.org/es/docs/Web/JavaScript" title="JavaScript"/>
+  <docs-pill href="https://developer.mozilla.org/es/docs/Web/HTML" title="HTML"/>
+  <docs-pill href="https://developer.mozilla.org/es/docs/Web/CSS" title="CSS"/>
 </docs-pill-row>
 
 También debes estar familiarizado con el uso de herramientas de interfaz de línea de comandos (CLI) y tener una comprensión general de los shells de comandos.
@@ -40,21 +40,25 @@ Para instalar el Angular CLI, abre una ventana de terminal y ejecuta el siguient
 <docs-code-multifile>
    <docs-code
      header="npm"
+     language="shell"
      >
      npm install -g @angular/cli
      </docs-code>
    <docs-code
      header="pnpm"
+     language="shell"
      >
      pnpm install -g @angular/cli
      </docs-code>
    <docs-code
      header="yarn"
+     language="shell"
      >
      yarn global add @angular/cli
      </docs-code>
    <docs-code
      header="bun"
+     language="shell"
      >
      bun install -g @angular/cli
      </docs-code>
@@ -66,11 +70,11 @@ Para instalar el Angular CLI, abre una ventana de terminal y ejecuta el siguient
 En computadoras cliente con Windows, la ejecución de scripts de PowerShell está deshabilitada por defecto, por lo que el comando anterior puede fallar con un error.
 Para permitir la ejecución de scripts de PowerShell, que es necesario para los binarios globales de npm, debes establecer la siguiente <a href="https://docs.microsoft.com/powershell/module/microsoft.powershell.core/about/about_execution_policies">política de ejecución</a>:
 
-<docs-code language="sh">
+```sh
 
 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
 
-</docs-code>
+```
 
 Lee cuidadosamente el mensaje mostrado después de ejecutar el comando y sigue las instrucciones. Asegúrate de entender las implicaciones de establecer una política de ejecución.
 
@@ -82,21 +86,25 @@ Ejecuta con `sudo` para ejecutar el comando como usuario root e ingresa tu contr
 <docs-code-multifile>
    <docs-code
      header="npm"
+     language="shell"
      >
      sudo npm install -g @angular/cli
      </docs-code>
    <docs-code
      header="pnpm"
+     language="shell"
      >
      sudo pnpm install -g @angular/cli
      </docs-code>
    <docs-code
      header="yarn"
+     language="shell"
      >
      sudo yarn global add @angular/cli
      </docs-code>
    <docs-code
      header="bun"
+     language="shell"
      >
      sudo bun install -g @angular/cli
      </docs-code>
@@ -111,11 +119,11 @@ Desarrollas aplicaciones en el contexto de un **workspace** de Angular.
 
 Para crear un nuevo workspace y una aplicación de inicio inicial, ejecuta el comando CLI `ng new` y proporciona el nombre `my-app`, como se muestra aquí, luego responde las preguntas sobre las características a incluir:
 
-<docs-code language="shell">
+```shell
 
 ng new my-app
 
-</docs-code>
+```
 
 El Angular CLI instala los paquetes npm de Angular necesarios y otras dependencias.
 Esto puede tomar unos minutos.
@@ -123,21 +131,21 @@ Esto puede tomar unos minutos.
 El CLI crea un nuevo workspace y una pequeña aplicación de bienvenida en un nuevo directorio con el mismo nombre que el workspace, lista para ejecutarse.
 Navega al nuevo directorio para que los comandos subsiguientes usen este workspace.
 
-<docs-code language="shell">
+```shell
 
 cd my-app
 
-</docs-code>
+```
 
 ## Ejecutar la aplicación
 
 El Angular CLI incluye un servidor de desarrollo, para que puedas construir y servir tu aplicación localmente. Ejecuta el siguiente comando:
 
-<docs-code language="shell">
+```shell
 
 ng serve --open
 
-</docs-code>
+```
 
 El comando `ng serve` lanza el servidor, observa tus archivos, así como reconstruye la aplicación y recarga el navegador a medida que haces cambios en esos archivos.
 
@@ -156,16 +164,16 @@ Cada aplicación tiene una carpeta `src` que contiene sus componentes, datos y r
 Puedes editar los archivos generados directamente, o agregar y modificarlos usando comandos CLI.
 Usa el comando [`ng generate`](cli/generate) para agregar nuevos archivos para componentes adicionales, directivas, pipes, servicios y más.
 Los comandos como [`ng add`](cli/add) y [`ng generate`](cli/generate), que crean u operan en aplicaciones y librerías, deben ejecutarse
-desde dentro de un workspace. Por el contrario, los comandos como `ng new` deben ejecutarse *fuera* de un workspace porque crearán uno nuevo.
+desde dentro de un workspace. Por el contrario, los comandos como `ng new` deben ejecutarse _fuera_ de un workspace porque crearán uno nuevo.
 
 ## Siguientes pasos
 
-* Aprende más sobre la [estructura de archivos](reference/configs/file-structure) y [configuración](reference/configs/workspace-config) del workspace generado.
+- Aprende más sobre la [estructura de archivos](reference/configs/file-structure) y [configuración](reference/configs/workspace-config) del workspace generado.
 
-* Prueba tu nueva aplicación con [`ng test`](cli/test).
+- Prueba tu nueva aplicación con [`ng test`](cli/test).
 
-* Genera código repetitivo como componentes, directivas y pipes con [`ng generate`](cli/generate).
+- Genera código repetitivo como componentes, directivas y pipes con [`ng generate`](cli/generate).
 
-* Despliega tu nueva aplicación y hazla disponible para usuarios reales con [`ng deploy`](cli/deploy).
+- Despliega tu nueva aplicación y hazla disponible para usuarios reales con [`ng deploy`](cli/deploy).
 
-* Configura y ejecuta pruebas end-to-end de tu aplicación con [`ng e2e`](cli/e2e).
+- Configura y ejecuta pruebas end-to-end de tu aplicación con [`ng e2e`](cli/e2e).
diff --git a/adev-es/src/content/tools/cli/template-typecheck.en.md b/adev-es/src/content/tools/cli/template-typecheck.en.md
index a563f68..b6340c8 100644
--- a/adev-es/src/content/tools/cli/template-typecheck.en.md
+++ b/adev-es/src/content/tools/cli/template-typecheck.en.md
@@ -11,16 +11,16 @@ In the most basic type-checking mode, with the `fullTemplateTypeCheck` flag set
 
 If you write `<map [city]="user.address.city">`, the compiler verifies the following:
 
-* `user` is a property on the component class
-* `user` is an object with an address property
-* `user.address` is an object with a city property
+- `user` is a property on the component class
+- `user` is an object with an address property
+- `user.address` is an object with a city property
 
 The compiler does not verify that the value of `user.address.city` is assignable to the city input of the `<map>` component.
 
 The compiler also has some major limitations in this mode:
 
-* Importantly, it doesn't check embedded views, such as `*ngIf`, `*ngFor`, other `<ng-template>` embedded view.
-* It doesn't figure out the types of `#refs`, the results of pipes, or the type of `$event` in event bindings.
+- Importantly, it doesn't check embedded views, such as `*ngIf`, `*ngFor`, other `<ng-template>` embedded view.
+- It doesn't figure out the types of `#refs`, the results of pipes, or the type of `$event` in event bindings.
 
 In many cases, these things end up as type `any`, which can cause subsequent parts of the expression to go unchecked.
 
@@ -29,15 +29,15 @@ In many cases, these things end up as type `any`, which can cause subsequent par
 If the `fullTemplateTypeCheck` flag is set to `true`, Angular is more aggressive in its type-checking within templates.
 In particular:
 
-* Embedded views \(such as those within an `*ngIf` or `*ngFor`\) are checked
-* Pipes have the correct return type
-* Local references to directives and pipes have the correct type \(except for any generic parameters, which will be `any`\)
+- Embedded views \(such as those within an `*ngIf` or `*ngFor`\) are checked
+- Pipes have the correct return type
+- Local references to directives and pipes have the correct type \(except for any generic parameters, which will be `any`\)
 
 The following still have type `any`.
 
-* Local references to DOM elements
-* The `$event` object
-* Safe navigation expressions
+- Local references to DOM elements
+- The `$event` object
+- Safe navigation expressions
 
 IMPORTANT: The `fullTemplateTypeCheck` flag has been deprecated in Angular 13.
 The `strictTemplates` family of compiler options should be used instead.
@@ -50,38 +50,38 @@ This flag supersedes the `fullTemplateTypeCheck` flag.
 
 In addition to the full mode behavior, Angular does the following:
 
-* Verifies that component/directive bindings are assignable to their `input()`s
-* Obeys TypeScript's `strictNullChecks` flag when validating the preceding mode
-* Infers the correct type of components/directives, including generics
-* Infers template context types where configured \(for example, allowing correct type-checking of `NgFor`\)
-* Infers the correct type of `$event` in component/directive, DOM, and animation event bindings
-* Infers the correct type of local references to DOM elements, based on the tag name \(for example, the type that `document.createElement` would return for that tag\)
+- Verifies that component/directive bindings are assignable to their `input()`s
+- Obeys TypeScript's `strictNullChecks` flag when validating the preceding mode
+- Infers the correct type of components/directives, including generics
+- Infers template context types where configured \(for example, allowing correct type-checking of `NgFor`\)
+- Infers the correct type of `$event` in component/directive, DOM, and animation event bindings
+- Infers the correct type of local references to DOM elements, based on the tag name \(for example, the type that `document.createElement` would return for that tag\)
 
 ## Checking of `*ngFor`
 
 The three modes of type-checking treat embedded views differently.
 Consider the following example.
 
-<docs-code language="typescript" header="User interface">
+```ts {header:"User interface"}
 
 interface User {
   name: string;
   address: {
     city: string;
     state: string;
-  }
+  };
 }
 
-</docs-code>
+```
 
-<docs-code language="html">
+```html
 
 <div *ngFor="let user of users">
   <h2>{{config.title}}</h2>
   <span>City: {{user.address.city}}</span>
 </div>
 
-</docs-code>
+```
 
 The `<h2>` and the `<span>` are in the `*ngFor` embedded view.
 In basic mode, Angular doesn't check either of them.
@@ -96,33 +96,33 @@ If this is the case, the error message should make it clear where in the templat
 
 There can also be false positives when the typings of an Angular library are either incomplete or incorrect, or when the typings don't quite line up with expectations as in the following cases.
 
-* When a library's typings are wrong or incomplete \(for example, missing `null | undefined` if the library was not written with `strictNullChecks` in mind\)
-* When a library's input types are too narrow and the library hasn't added appropriate metadata for Angular to figure this out.
-    This usually occurs with disabled or other common Boolean inputs used as attributes, for example, `<input disabled>`.
+- When a library's typings are wrong or incomplete \(for example, missing `null | undefined` if the library was not written with `strictNullChecks` in mind\)
+- When a library's input types are too narrow and the library hasn't added appropriate metadata for Angular to figure this out.
+  This usually occurs with disabled or other common Boolean inputs used as attributes, for example, `<input disabled>`.
 
-* When using `$event.target` for DOM events \(because of the possibility of event bubbling, `$event.target` in the DOM typings doesn't have the type you might expect\)
+- When using `$event.target` for DOM events \(because of the possibility of event bubbling, `$event.target` in the DOM typings doesn't have the type you might expect\)
 
 In case of a false positive like these, there are a few options:
 
-* Use the `$any()` type-cast function in certain contexts to opt out of type-checking for a part of the expression
-* Disable strict checks entirely by setting `strictTemplates: false` in the application's TypeScript configuration file, `tsconfig.json`
-* Disable certain type-checking operations individually, while maintaining strictness in other aspects, by setting a *strictness flag* to `false`
-* If you want to use `strictTemplates` and `strictNullChecks` together, opt out of strict null type checking specifically for input bindings using `strictNullInputTypes`
+- Use the `$any()` type-cast function in certain contexts to opt out of type-checking for a part of the expression
+- Disable strict checks entirely by setting `strictTemplates: false` in the application's TypeScript configuration file, `tsconfig.json`
+- Disable certain type-checking operations individually, while maintaining strictness in other aspects, by setting a _strictness flag_ to `false`
+- If you want to use `strictTemplates` and `strictNullChecks` together, opt out of strict null type checking specifically for input bindings using `strictNullInputTypes`
 
 Unless otherwise commented, each following option is set to the value for `strictTemplates` \(`true` when `strictTemplates` is `true` and conversely, the other way around\).
 
-| Strictness flag              | Effect |
-|:---                          |:---    |
-| `strictInputTypes`           | Whether the assignability of a binding expression to the `@Input()` field is checked. Also affects the inference of directive generic types.                                                                                                                                                                                                                                                                                                |
-| `strictInputAccessModifiers` | Whether access modifiers such as `private`/`protected`/`readonly` are honored when assigning a binding expression to an `@Input()`. If disabled, the access modifiers of the `@Input` are ignored; only the type is checked. This option is `false` by default, even with `strictTemplates` set to `true`.                                                                                                                                  |
-| `strictNullInputTypes`       | Whether `strictNullChecks` is honored when checking `@Input()` bindings \(per `strictInputTypes`\). Turning this off can be useful when using a library that was not built with `strictNullChecks` in mind.                                                                                                                                                                                                                                 |
-| `strictAttributeTypes`       | Whether to check `@Input()` bindings that are made using text attributes. For example, `<input matInput disabled="true">` \(setting the `disabled` property to the string `'true'`\) vs `<input matInput [disabled]="true">` \(setting the `disabled` property to the boolean `true`\). |
-| `strictSafeNavigationTypes`  | Whether the return type of safe navigation operations \(for example, `user?.name` will be correctly inferred based on the type of `user`\). If disabled, `user?.name` will be of type `any`.                                                                                                                                                                                                                                                |
-| `strictDomLocalRefTypes`     | Whether local references to DOM elements will have the correct type. If disabled `ref` will be of type `any` for `<input #ref>`.                                                                                                                                                                                                                                                                                                            |
-| `strictOutputEventTypes`     | Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                |
-| `strictDomEventTypes`        | Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                                                                                |
-| `strictContextGenerics`      | Whether the type parameters of generic components will be inferred correctly \(including any generic bounds\). If disabled, any type parameters will be `any`.                                                                                                                                                                                                                                                                              |
-| `strictLiteralTypes`         | Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`. This flag is `true` when *either* `fullTemplateTypeCheck` or `strictTemplates` is set to `true`.                                                                                                                                                                                            |
+| Strictness flag              | Effect                                                                                                                                                                                                                                                                                                                                                                        |
+| :--------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `strictInputTypes`           | Whether the assignability of a binding expression to the `@Input()` field is checked. Also affects the inference of directive generic types.                                                                                                                                                                                                                                  |
+| `strictInputAccessModifiers` | Whether access modifiers such as `private`/`protected`/`readonly` are honored when assigning a binding expression to an `@Input()` or `input()`. If disabled, the access modifiers of the input are ignored; only the type is checked. This option is `false` by default, even with `strictTemplates` set to `true`. Note: This checking only applies to inputs, not outputs. |
+| `strictNullInputTypes`       | Whether `strictNullChecks` is honored when checking `@Input()` bindings \(per `strictInputTypes`\). Turning this off can be useful when using a library that was not built with `strictNullChecks` in mind.                                                                                                                                                                   |
+| `strictAttributeTypes`       | Whether to check `@Input()` bindings that are made using text attributes. For example, `<input matInput disabled="true">` \(setting the `disabled` property to the string `'true'`\) vs `<input matInput [disabled]="true">` \(setting the `disabled` property to the boolean `true`\).                                                                                       |
+| `strictSafeNavigationTypes`  | Whether the return type of safe navigation operations \(for example, `user?.name` will be correctly inferred based on the type of `user`\). If disabled, `user?.name` will be of type `any`.                                                                                                                                                                                  |
+| `strictDomLocalRefTypes`     | Whether local references to DOM elements will have the correct type. If disabled `ref` will be of type `any` for `<input #ref>`.                                                                                                                                                                                                                                              |
+| `strictOutputEventTypes`     | Whether `$event` will have the correct type for event bindings to component/directive an `@Output()`, or to animation events. If disabled, it will be `any`.                                                                                                                                                                                                                  |
+| `strictDomEventTypes`        | Whether `$event` will have the correct type for event bindings to DOM events. If disabled, it will be `any`.                                                                                                                                                                                                                                                                  |
+| `strictContextGenerics`      | Whether the type parameters of generic components will be inferred correctly \(including any generic bounds\). If disabled, any type parameters will be `any`.                                                                                                                                                                                                                |
+| `strictLiteralTypes`         | Whether object and array literals declared in the template will have their type inferred. If disabled, the type of such literals will be `any`. This flag is `true` when _either_ `fullTemplateTypeCheck` or `strictTemplates` is set to `true`.                                                                                                                              |
 
 If you still have issues after troubleshooting with these flags, fall back to full mode by disabling `strictTemplates`.
 
@@ -137,7 +137,7 @@ If this happens, [file an issue](https://github.com/angular/angular/issues) so t
 The template type checker checks whether a binding expression's type is compatible with that of the corresponding directive input.
 As an example, consider the following component:
 
-<docs-code language="typescript">
+```angular-ts
 
 export interface User {
   name: string;
@@ -151,11 +151,11 @@ export class UserDetailComponent {
   user = input.required<User>();
 }
 
-</docs-code>
+```
 
 The `AppComponent` template uses this component as follows:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-root',
@@ -165,7 +165,7 @@ export class AppComponent {
   selectedUser: User | null = null;
 }
 
-</docs-code>
+```
 
 Here, during type checking of the template for `AppComponent`, the `[user]="selectedUser"` binding corresponds with the `UserDetailComponent.user` input.
 Therefore, Angular assigns the `selectedUser` property to `UserDetailComponent.user`, which would result in an error if their types were incompatible.
@@ -180,42 +180,42 @@ See [Improving template type checking for custom directives](guide/directives/st
 When you enable `strictTemplates` and the TypeScript flag `strictNullChecks`, typecheck errors might occur for certain situations that might not easily be avoided.
 For example:
 
-* A nullable value that is bound to a directive from a library which did not have `strictNullChecks` enabled.
+- A nullable value that is bound to a directive from a library which did not have `strictNullChecks` enabled.
 
-    For a library compiled without `strictNullChecks`, its declaration files will not indicate whether a field can be `null` or not.
-    For situations where the library handles `null` correctly, this is problematic, as the compiler will check a nullable value against the declaration files which omit the `null` type.
-    As such, the compiler produces a type-check error because it adheres to `strictNullChecks`.
+  For a library compiled without `strictNullChecks`, its declaration files will not indicate whether a field can be `null` or not.
+  For situations where the library handles `null` correctly, this is problematic, as the compiler will check a nullable value against the declaration files which omit the `null` type.
+  As such, the compiler produces a type-check error because it adheres to `strictNullChecks`.
 
-* Using the `async` pipe with an Observable which you know will emit synchronously.
+- Using the `async` pipe with an Observable which you know will emit synchronously.
 
-    The `async` pipe currently assumes that the Observable it subscribes to can be asynchronous, which means that it's possible that there is no value available yet.
-    In that case, it still has to return something —which is `null`.
-    In other words, the return type of the `async` pipe includes `null`, which might result in errors in situations where the Observable is known to emit a non-nullable value synchronously.
+  The `async` pipe currently assumes that the Observable it subscribes to can be asynchronous, which means that it's possible that there is no value available yet.
+  In that case, it still has to return something —which is `null`.
+  In other words, the return type of the `async` pipe includes `null`, which might result in errors in situations where the Observable is known to emit a non-nullable value synchronously.
 
 There are two potential workarounds to the preceding issues:
 
-* In the template, include the non-null assertion operator `!` at the end of a nullable expression, such as
+- In the template, include the non-null assertion operator `!` at the end of a nullable expression, such as
 
-    <docs-code hideCopy language="html">
+```html
 
-    <user-detail [user]="user!"></user-detail>
+<user-detail [user]="user!"></user-detail>
 
-    </docs-code>
+```
 
-    In this example, the compiler disregards type incompatibilities in nullability, just as in TypeScript code.
-    In the case of the `async` pipe, notice that the expression needs to be wrapped in parentheses, as in
+In this example, the compiler disregards type incompatibilities in nullability, just as in TypeScript code.
+In the case of the `async` pipe, notice that the expression needs to be wrapped in parentheses, as in
 
-    <docs-code hideCopy language="html">
+```html
 
-    <user-detail [user]="(user$ | async)!"></user-detail>
+<user-detail [user]="(user$ | async)!"></user-detail>
 
-    </docs-code>
+```
 
-* Disable strict null checks in Angular templates completely.
+- Disable strict null checks in Angular templates completely.
 
-    When `strictTemplates` is enabled, it is still possible to disable certain aspects of type checking.
-    Setting the option `strictNullInputTypes` to `false` disables strict null checks within Angular templates.
-    This flag applies for all components that are part of the application.
+  When `strictTemplates` is enabled, it is still possible to disable certain aspects of type checking.
+  Setting the option `strictNullInputTypes` to `false` disables strict null checks within Angular templates.
+  This flag applies for all components that are part of the application.
 
 ### Advice for library authors
 
@@ -231,7 +231,7 @@ As an example, consider this custom button component:
 
 Consider the following directive:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'submit-button',
@@ -245,36 +245,36 @@ class SubmitButton {
   disabled = input.required({transform: booleanAttribute });
 }
 
-</docs-code>
+```
 
 Here, the `disabled` input of the component is being passed on to the `<button>` in the template.
 All of this works as expected, as long as a `boolean` value is bound to the input.
 But, suppose a consumer uses this input in the template as an attribute:
 
-<docs-code language="html">
+```html
 
 <submit-button disabled></submit-button>
 
-</docs-code>
+```
 
 This has the same effect as the binding:
 
-<docs-code language="html">
+```html
 
 <submit-button [disabled]="''"></submit-button>
 
-</docs-code>
+```
 
 At runtime, the input will be set to the empty string, which is not a `boolean` value.
 Angular component libraries that deal with this problem often "coerce" the value into the right type in the setter:
 
-<docs-code language="typescript">
+```ts
 
 set disabled(value: boolean) {
   this._disabled = (value === '') || value;
 }
 
-</docs-code>
+```
 
 It would be ideal to change the type of `value` here, from `boolean` to `boolean|''`, to match the set of values which are actually accepted by the setter.
 TypeScript prior to version 4.3 requires that both the getter and setter have the same type, so if the getter should return a `boolean` then the setter is stuck with the narrower type.
@@ -284,7 +284,7 @@ If the consumer has Angular's strictest type checking for templates enabled, thi
 As a workaround for this problem, Angular supports checking a wider, more permissive type for `@Input()` than is declared for the input field itself.
 Enable this by adding a static property with the `ngAcceptInputType_` prefix to the component class:
 
-<docs-code language="typescript">
+```ts
 
 class SubmitButton {
   private _disabled: boolean;
@@ -301,14 +301,14 @@ class SubmitButton {
   static ngAcceptInputType_disabled: boolean|'';
 }
 
-</docs-code>
+```
 
 Since TypeScript 4.3, the setter could have been declared to accept `boolean|''` as type, making the input setter coercion field obsolete.
 As such, input setters coercion fields have been deprecated.
 
 This field does not need to have a value.
 Its existence communicates to the Angular type checker that the `disabled` input should be considered as accepting bindings that match the type `boolean|''`.
-The suffix should be the `@Input` *field* name.
+The suffix should be the `@Input` _field_ name.
 
 Care should be taken that if an `ngAcceptInputType_` override is present for a given input, then the setter should be able to handle any values of the overridden type.
 
@@ -319,7 +319,7 @@ The compiler treats it as a cast to the `any` type just like in TypeScript when
 
 In the following example, casting `person` to the `any` type suppresses the error `Property address does not exist`.
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -329,4 +329,4 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
diff --git a/adev-es/src/content/tools/cli/template-typecheck.md b/adev-es/src/content/tools/cli/template-typecheck.md
index de13301..27e706f 100644
--- a/adev-es/src/content/tools/cli/template-typecheck.md
+++ b/adev-es/src/content/tools/cli/template-typecheck.md
@@ -11,16 +11,16 @@ En el modo de verificación de tipos más básico, con la bandera `fullTemplateT
 
 Si escribes `<map [city]="user.address.city">`, el compilador verifica lo siguiente:
 
-* `user` es una propiedad en la clase del componente
-* `user` es un objeto con una propiedad address
-* `user.address` es un objeto con una propiedad city
+- `user` es una propiedad en la clase del componente
+- `user` es un objeto con una propiedad address
+- `user.address` es un objeto con una propiedad city
 
 El compilador no verifica que el valor de `user.address.city` sea asignable a la entrada city del componente `<map>`.
 
 El compilador también tiene algunas limitaciones importantes en este modo:
 
-* Importantemente, no verifica vistas incrustadas, como `*ngIf`, `*ngFor`, u otras vistas incrustadas `<ng-template>`.
-* No determina los tipos de `#refs`, los resultados de pipes, o el tipo de `$event` en enlaces de eventos.
+- Importantemente, no verifica vistas incrustadas, como `*ngIf`, `*ngFor`, u otras vistas incrustadas `<ng-template>`.
+- No determina los tipos de `#refs`, los resultados de pipes, o el tipo de `$event` en enlaces de eventos.
 
 En muchos casos, estas cosas terminan siendo de tipo `any`, lo que puede causar que partes subsiguientes de la expresión no se verifiquen.
 
@@ -29,15 +29,15 @@ En muchos casos, estas cosas terminan siendo de tipo `any`, lo que puede causar
 Si la bandera `fullTemplateTypeCheck` está establecida en `true`, Angular es más agresivo en su verificación de tipos dentro de plantillas.
 En particular:
 
-* Las vistas incrustadas \(como aquellas dentro de un `*ngIf` o `*ngFor`\) son verificadas
-* Los pipes tienen el tipo de retorno correcto
-* Las referencias locales a directivas y pipes tienen el tipo correcto \(excepto por cualquier parámetro genérico, que será `any`\)
+- Las vistas incrustadas \(como aquellas dentro de un `*ngIf` o `*ngFor`\) son verificadas
+- Los pipes tienen el tipo de retorno correcto
+- Las referencias locales a directivas y pipes tienen el tipo correcto \(excepto por cualquier parámetro genérico, que será `any`\)
 
 Lo siguiente todavía tiene tipo `any`.
 
-* Referencias locales a elementos DOM
-* El objeto `$event`
-* Expresiones de navegación segura
+- Referencias locales a elementos DOM
+- El objeto `$event`
+- Expresiones de navegación segura
 
 IMPORTANTE: La bandera `fullTemplateTypeCheck` ha sido deprecada en Angular 13.
 La familia de opciones de compilador `strictTemplates` debería usarse en su lugar.
@@ -50,38 +50,38 @@ Esta bandera reemplaza la bandera `fullTemplateTypeCheck`.
 
 Además del comportamiento del modo completo, Angular hace lo siguiente:
 
-* Verifica que los enlaces de componente/directiva sean asignables a sus `input()`s
-* Obedece la bandera `strictNullChecks` de TypeScript al validar el modo precedente
-* Infiere el tipo correcto de componentes/directivas, incluyendo genéricos
-* Infiere tipos de contexto de plantilla donde está configurado \(por ejemplo, permitiendo verificación de tipos correcta de `NgFor`\)
-* Infiere el tipo correcto de `$event` en enlaces de eventos de componente/directiva, DOM y animación
-* Infiere el tipo correcto de referencias locales a elementos DOM, basado en el nombre de etiqueta \(por ejemplo, el tipo que `document.createElement` devolvería para esa etiqueta\)
+- Verifica que los enlaces de componente/directiva sean asignables a sus `input()`s
+- Obedece la bandera `strictNullChecks` de TypeScript al validar el modo precedente
+- Infiere el tipo correcto de componentes/directivas, incluyendo genéricos
+- Infiere tipos de contexto de plantilla donde está configurado \(por ejemplo, permitiendo verificación de tipos correcta de `NgFor`\)
+- Infiere el tipo correcto de `$event` en enlaces de eventos de componente/directiva, DOM y animación
+- Infiere el tipo correcto de referencias locales a elementos DOM, basado en el nombre de etiqueta \(por ejemplo, el tipo que `document.createElement` devolvería para esa etiqueta\)
 
 ## Verificación de `*ngFor`
 
 Los tres modos de verificación de tipos tratan las vistas incrustadas de manera diferente.
 Considera el siguiente ejemplo.
 
-<docs-code language="typescript" header="User interface">
+```ts {header:"User interface"}
 
 interface User {
   name: string;
   address: {
     city: string;
     state: string;
-  }
+  };
 }
 
-</docs-code>
+```
 
-<docs-code language="html">
+```html
 
 <div *ngFor="let user of users">
   <h2>{{config.title}}</h2>
   <span>City: {{user.address.city}}</span>
 </div>
 
-</docs-code>
+```
 
 El `<h2>` y el `<span>` están en la vista incrustada `*ngFor`.
 En modo básico, Angular no verifica ninguno de ellos.
@@ -96,25 +96,25 @@ Si este es el caso, el mensaje de error debería dejar claro dónde en la planti
 
 También puede haber falsos positivos cuando los tipos de una librería Angular son incompletos o incorrectos, o cuando los tipos no se alinean del todo con las expectativas como en los siguientes casos.
 
-* Cuando los tipos de una librería son incorrectos o incompletos \(por ejemplo, falta `null | undefined` si la librería no fue escrita con `strictNullChecks` en mente\)
-* Cuando los tipos de entrada de una librería son demasiado estrechos y la librería no ha agregado metadata apropiada para que Angular lo determine.
-    Esto usualmente ocurre con disabled u otras entradas Boolean comunes usadas como atributos, por ejemplo, `<input disabled>`.
+- Cuando los tipos de una librería son incorrectos o incompletos \(por ejemplo, falta `null | undefined` si la librería no fue escrita con `strictNullChecks` en mente\)
+- Cuando los tipos de entrada de una librería son demasiado estrechos y la librería no ha agregado metadata apropiada para que Angular lo determine.
+  Esto usualmente ocurre con disabled u otras entradas Boolean comunes usadas como atributos, por ejemplo, `<input disabled>`.
 
-* Cuando se usa `$event.target` para eventos DOM \(debido a la posibilidad de propagación de eventos, `$event.target` en los tipos DOM no tiene el tipo que podrías esperar\)
+- Cuando se usa `$event.target` para eventos DOM \(debido a la posibilidad de propagación de eventos, `$event.target` en los tipos DOM no tiene el tipo que podrías esperar\)
 
 En caso de un falso positivo como estos, hay algunas opciones:
 
-* Usa la función de conversión de tipo `$any()` en ciertos contextos para optar por no verificar tipos para una parte de la expresión
-* Deshabilita las verificaciones estrictas completamente estableciendo `strictTemplates: false` en el archivo de configuración TypeScript de la aplicación, `tsconfig.json`
-* Deshabilita ciertas operaciones de verificación de tipos individualmente, mientras mantienes rigurosidad en otros aspectos, estableciendo una *bandera de rigurosidad* en `false`
-* Si quieres usar `strictTemplates` y `strictNullChecks` juntos, opta por no verificar tipos null estrictamente específicamente para enlaces de entrada usando `strictNullInputTypes`
+- Usa la función de conversión de tipo `$any()` en ciertos contextos para optar por no verificar tipos para una parte de la expresión
+- Deshabilita las verificaciones estrictas completamente estableciendo `strictTemplates: false` en el archivo de configuración TypeScript de la aplicación, `tsconfig.json`
+- Deshabilita ciertas operaciones de verificación de tipos individualmente, mientras mantienes rigurosidad en otros aspectos, estableciendo una _bandera de rigurosidad_ en `false`
+- Si quieres usar `strictTemplates` y `strictNullChecks` juntos, opta por no verificar tipos null estrictamente específicamente para enlaces de entrada usando `strictNullInputTypes`
 
 A menos que se comente lo contrario, cada opción siguiente se establece al valor de `strictTemplates` \(`true` cuando `strictTemplates` es `true` y viceversa, de lo contrario\).
 
 | Bandera de rigurosidad              | Efecto |
 |:---                          |:---    |
 | `strictInputTypes`           | Si se verifica la asignabilidad de una expresión de enlace al campo `@Input()`. También afecta la inferencia de tipos genéricos de directiva.                                                                                                                                                                                                                                                                                                |
-| `strictInputAccessModifiers` | Si se respetan los modificadores de acceso como `private`/`protected`/`readonly` al asignar una expresión de enlace a un `@Input()`. Si se deshabilita, los modificadores de acceso del `@Input` se ignoran; solo se verifica el tipo. Esta opción es `false` por defecto, incluso con `strictTemplates` establecido en `true`.                                                                                                                                  |
+| `strictInputAccessModifiers` | Si se respetan los modificadores de acceso como `private`/`protected`/`readonly` al asignar una expresión de enlace a un `@Input()` o `input()`. Si se deshabilita, los modificadores de acceso del input se ignoran; solo se verifica el tipo. Esta opción es `false` por defecto, incluso con `strictTemplates` establecido en `true`. Nota: Esta verificación solo aplica a inputs, no a outputs.                                                                                                                                  |
 | `strictNullInputTypes`       | Si se respeta `strictNullChecks` al verificar enlaces `@Input()` \(según `strictInputTypes`\). Desactivar esto puede ser útil cuando se usa una librería que no fue construida con `strictNullChecks` en mente.                                                                                                                                                                                                                                 |
 | `strictAttributeTypes`       | Si se deben verificar enlaces `@Input()` que se hacen usando atributos de texto. Por ejemplo, `<input matInput disabled="true">` \(estableciendo la propiedad `disabled` a la cadena `'true'`\) vs `<input matInput [disabled]="true">` \(estableciendo la propiedad `disabled` al booleano `true`\). |
 | `strictSafeNavigationTypes`  | Si el tipo de retorno de operaciones de navegación segura \(por ejemplo, `user?.name` se inferirá correctamente basado en el tipo de `user`\). Si se deshabilita, `user?.name` será de tipo `any`.                                                                                                                                                                                                                                                |
@@ -122,7 +122,7 @@ A menos que se comente lo contrario, cada opción siguiente se establece al valo
 | `strictOutputEventTypes`     | Si `$event` tendrá el tipo correcto para enlaces de eventos a `@Output()` de componente/directiva, o a eventos de animación. Si se deshabilita, será `any`.                                                                                                                                                                                                                                                                                |
 | `strictDomEventTypes`        | Si `$event` tendrá el tipo correcto para enlaces de eventos a eventos DOM. Si se deshabilita, será `any`.                                                                                                                                                                                                                                                                                                                                |
 | `strictContextGenerics`      | Si los parámetros de tipo de componentes genéricos se inferirán correctamente \(incluyendo cualquier límite genérico\). Si se deshabilita, cualquier parámetro de tipo será `any`.                                                                                                                                                                                                                                                                                              |
-| `strictLiteralTypes`         | Si los literales de objeto y array declarados en la plantilla tendrán su tipo inferido. Si se deshabilita, el tipo de tales literales será `any`. Esta bandera es `true` cuando *cualquiera* de `fullTemplateTypeCheck` o `strictTemplates` está establecido en `true`.                                                                                                                                                                                            |
+| `strictLiteralTypes`         | Si los literales de objeto y array declarados en la plantilla tendrán su tipo inferido. Si se deshabilita, el tipo de tales literales será `any`. Esta bandera es `true` cuando _cualquiera_ de `fullTemplateTypeCheck` o `strictTemplates` está establecido en `true`.                                                                                                                                                                                            |
 
 Si aún tienes problemas después de solucionar problemas con estas banderas, vuelve al modo completo deshabilitando `strictTemplates`.
 
@@ -137,7 +137,7 @@ Si esto sucede, [abre un issue](https://github.com/angular/angular/issues) para
 El verificador de tipos de plantilla verifica si el tipo de una expresión de enlace es compatible con el de la entrada de directiva correspondiente.
 Como ejemplo, considera el siguiente componente:
 
-<docs-code language="typescript">
+```angular-ts
 
 export interface User {
   name: string;
@@ -151,11 +151,11 @@ export class UserDetailComponent {
   user = input.required<User>();
 }
 
-</docs-code>
+```
 
 La plantilla de `AppComponent` usa este componente como sigue:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'app-root',
@@ -165,7 +165,7 @@ export class AppComponent {
   selectedUser: User | null = null;
 }
 
-</docs-code>
+```
 
 Aquí, durante la verificación de tipos de la plantilla para `AppComponent`, el enlace `[user]="selectedUser"` corresponde con la entrada `UserDetailComponent.user`.
 Por lo tanto, Angular asigna la propiedad `selectedUser` a `UserDetailComponent.user`, lo que resultaría en un error si sus tipos fueran incompatibles.
@@ -180,49 +180,49 @@ Consulta [Mejorando la verificación de tipos de plantilla para directivas perso
 Cuando habilitas `strictTemplates` y la bandera TypeScript `strictNullChecks`, pueden ocurrir errores de verificación de tipos para ciertas situaciones que podrían no evitarse fácilmente.
 Por ejemplo:
 
-* Un valor nullable que está enlazado a una directiva de una librería que no tenía `strictNullChecks` habilitado.
+- Un valor nullable que está enlazado a una directiva de una librería que no tenía `strictNullChecks` habilitado.
 
-    Para una librería compilada sin `strictNullChecks`, sus archivos de declaración no indicarán si un campo puede ser `null` o no.
-    Para situaciones donde la librería maneja `null` correctamente, esto es problemático, ya que el compilador verificará un valor nullable contra los archivos de declaración que omiten el tipo `null`.
-    Como tal, el compilador produce un error de verificación de tipos porque se adhiere a `strictNullChecks`.
+  Para una librería compilada sin `strictNullChecks`, sus archivos de declaración no indicarán si un campo puede ser `null` o no.
+  Para situaciones donde la librería maneja `null` correctamente, esto es problemático, ya que el compilador verificará un valor nullable contra los archivos de declaración que omiten el tipo `null`.
+  Como tal, el compilador produce un error de verificación de tipos porque se adhiere a `strictNullChecks`.
 
-* Usar el pipe `async` con un Observable que sabes que emitirá sincrónicamente.
+- Usar el pipe `async` con un Observable que sabes que emitirá sincrónicamente.
 
-    El pipe `async` actualmente asume que el Observable al que se suscribe puede ser asíncrono, lo que significa que es posible que aún no haya un valor disponible.
-    En ese caso, aún tiene que devolver algo —que es `null`.
-    En otras palabras, el tipo de retorno del pipe `async` incluye `null`, lo que podría resultar en errores en situaciones donde se sabe que el Observable emite un valor no nullable sincrónicamente.
+  El pipe `async` actualmente asume que el Observable al que se suscribe puede ser asíncrono, lo que significa que es posible que aún no haya un valor disponible.
+  En ese caso, aún tiene que devolver algo —que es `null`.
+  En otras palabras, el tipo de retorno del pipe `async` incluye `null`, lo que podría resultar en errores en situaciones donde se sabe que el Observable emite un valor no nullable sincrónicamente.
 
 Hay dos soluciones potenciales para los problemas anteriores:
 
-* En la plantilla, incluye el operador de aserción no null `!` al final de una expresión nullable, como
+- En la plantilla, incluye el operador de aserción no null `!` al final de una expresión nullable, como
 
-    <docs-code hideCopy language="html">
+```html
 
-    <user-detail [user]="user!"></user-detail>
+<user-detail [user]="user!"></user-detail>
 
-    </docs-code>
+```
 
-    En este ejemplo, el compilador ignora incompatibilidades de tipo en nulabilidad, al igual que en código TypeScript.
-    En el caso del pipe `async`, nota que la expresión necesita estar envuelta en paréntesis, como en
+En este ejemplo, el compilador ignora incompatibilidades de tipo en nulabilidad, al igual que en código TypeScript.
+En el caso del pipe `async`, nota que la expresión necesita estar envuelta en paréntesis, como en
 
-    <docs-code hideCopy language="html">
+```html
 
-    <user-detail [user]="(user$ | async)!"></user-detail>
+<user-detail [user]="(user$ | async)!"></user-detail>
 
-    </docs-code>
+```
 
-* Deshabilita verificaciones null estrictas en plantillas Angular completamente.
+- Deshabilita verificaciones null estrictas en plantillas Angular completamente.
 
-    Cuando `strictTemplates` está habilitado, aún es posible deshabilitar ciertos aspectos de la verificación de tipos.
-    Establecer la opción `strictNullInputTypes` en `false` deshabilita verificaciones null estrictas dentro de plantillas Angular.
-    Esta bandera se aplica para todos los componentes que son parte de la aplicación.
+  Cuando `strictTemplates` está habilitado, aún es posible deshabilitar ciertos aspectos de la verificación de tipos.
+  Establecer la opción `strictNullInputTypes` en `false` deshabilita verificaciones null estrictas dentro de plantillas Angular.
+  Esta bandera se aplica para todos los componentes que son parte de la aplicación.
 
 ### Consejo para autores de librerías
 
 Como autor de librería, puedes tomar varias medidas para proporcionar una experiencia óptima para tus usuarios.
 Primero, habilitar `strictNullChecks` e incluir `null` en el tipo de una entrada, según corresponda, comunica a tus consumidores si pueden proporcionar un valor nullable o no.
 Adicionalmente, es posible proporcionar pistas de tipo específicas para el verificador de tipos de plantilla.
-Consulta [Mejorando la verificación de tipos de plantilla para directivas personalizadas](guide/directives/structural-directives#directive-type-checks), y [Coerción de setter de entrada](#input-setter-coercion).
+Consulta [Mejorando la verificación de tipos de plantilla para directivas personalizadas](guide/directives/structural-directives#directive-type-checks), y [Coerción de setter de entrada](#coerción-de-setter-de-entrada).
 
 ## Coerción de setter de entrada
 
@@ -231,7 +231,7 @@ Como ejemplo, considera este componente de botón personalizado:
 
 Considera la siguiente directiva:
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'submit-button',
@@ -245,36 +245,36 @@ class SubmitButton {
   disabled = input.required({transform: booleanAttribute });
 }
 
-</docs-code>
+```
 
 Aquí, la entrada `disabled` del componente se pasa al `<button>` en la plantilla.
 Todo esto funciona como se espera, siempre que un valor `boolean` esté enlazado a la entrada.
 Pero, supón que un consumidor usa esta entrada en la plantilla como un atributo:
 
-<docs-code language="html">
+```html
 
 <submit-button disabled></submit-button>
 
-</docs-code>
+```
 
 Esto tiene el mismo efecto que el enlace:
 
-<docs-code language="html">
+```html
 
 <submit-button [disabled]="''"></submit-button>
 
-</docs-code>
+```
 
 En tiempo de ejecución, la entrada se establecerá a la cadena vacía, que no es un valor `boolean`.
 Las librerías de componentes Angular que lidian con este problema a menudo "coercionan" el valor al tipo correcto en el setter:
 
-<docs-code language="typescript">
+```ts
 
 set disabled(value: boolean) {
   this._disabled = (value === '') || value;
 }
 
-</docs-code>
+```
 
 Sería ideal cambiar el tipo de `value` aquí, de `boolean` a `boolean|''`, para que coincida con el conjunto de valores que realmente son aceptados por el setter.
 TypeScript anterior a la versión 4.3 requiere que tanto el getter como el setter tengan el mismo tipo, por lo que si el getter debe devolver un `boolean` entonces el setter está atascado con el tipo más estrecho.
@@ -284,7 +284,7 @@ Si el consumidor tiene habilitada la verificación de tipos más estricta de Ang
 Como solución a este problema, Angular soporta verificar un tipo más amplio y permisivo para `@Input()` que el declarado para el campo de entrada mismo.
 Habilita esto agregando una propiedad estática con el prefijo `ngAcceptInputType_` a la clase del componente:
 
-<docs-code language="typescript">
+```ts
 
 class SubmitButton {
   private _disabled: boolean;
@@ -301,14 +301,14 @@ class SubmitButton {
   static ngAcceptInputType_disabled: boolean|'';
 }
 
-</docs-code>
+```
 
 Desde TypeScript 4.3, el setter podría haberse declarado para aceptar `boolean|''` como tipo, haciendo obsoleto el campo de coerción de setter de entrada.
 Como tal, los campos de coerción de setters de entrada han sido deprecados.
 
 Este campo no necesita tener un valor.
 Su existencia comunica al verificador de tipos de Angular que la entrada `disabled` debería considerarse como aceptando enlaces que coincidan con el tipo `boolean|''`.
-El sufijo debe ser el nombre del *campo* `@Input`.
+El sufijo debe ser el nombre del _campo_ `@Input`.
 
 Se debe tener cuidado de que si un override `ngAcceptInputType_` está presente para una entrada dada, entonces el setter debería poder manejar cualquier valor del tipo sobrescrito.
 
@@ -319,7 +319,7 @@ El compilador la trata como una conversión al tipo `any` al igual que en TypeSc
 
 En el siguiente ejemplo, convertir `person` al tipo `any` suprime el error `Property address does not exist`.
 
-<docs-code language="typescript">
+```angular-ts
 
 @Component({
   selector: 'my-component',
@@ -329,4 +329,4 @@ class MyComponent {
   person?: Person;
 }
 
-</docs-code>
+```
diff --git a/adev-es/src/content/tools/devtools/component.md b/adev-es/src/content/tools/devtools/component.md
index 7928b25..3c93452 100644
--- a/adev-es/src/content/tools/devtools/component.md
+++ b/adev-es/src/content/tools/devtools/component.md
@@ -7,7 +7,7 @@ You can visualize the component and directive instances in the DOM and inspect o
 
 ### Explore the application structure
 
-The component tree displays a hierarchical relationship of the *components and directives* within your application.
+The component tree displays a hierarchical relationship of the _components and directives_ within your application.
 
 <img src="assets/images/guide/devtools/component-explorer.png" alt="A screenshot of the 'Components' tab showing a tree of Angular components and directives starting the root of the application.">
 
@@ -48,32 +48,29 @@ Type `$ng0` to get a reference to the instance of the currently selected compone
 ### Select a directive or component
 
 Similar to browsers' DevTools, you can inspect the page to select a particular component or directive.
-Click the ***Inspect element*** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
+Click the **_Inspect element_** icon in the top left corner within Angular DevTools and hover over a DOM element on the page.
 The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
 
 <img src="assets/images/guide/devtools/inspect-element.png" alt="A screenshot of the 'Components' tab with an Angular todo application visible. In the very top-left corner of Angular DevTools, an icon of a screen with a mouse icon inside it is selected. The mouse rests on a todo element in the Angular application UI. The element is highlighted with a `<TodoComponent>` label displayed in an adjacent tooltip.">
 
+### Inspect Deferrable views
 
-## Inspect your injectors
+Alongside the directives, the directive tree also includes [`@defer` blocks](/guide/templates/defer).
 
- NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
+<img src="assets/images/guide/devtools/defer-block.png" />
 
-### View the injector hierarchy of your application
+Clicking a defer block shows more details in the properties sidebar: the different optional blocks (for example `@loading`, `@placeholder`, and `@error`), the configured triggers (defer triggers, prefetch triggers, and hydrate triggers), and timing options such as the `minimum` and `after` values.
 
- The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
+### Hydration
 
-<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
+When [hydration](/guide/hydration) is enabled on your SSR/SSG application, the directive tree shows the hydration status of each component.
 
- ### Visualize resolution paths
+In case of errors, an error message is displayed on the affected component.
 
- When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
+<img src="assets/images/guide/devtools/hydration-status.png" />
 
-See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
+The hydration status can also be visualized on the application itself by enabling the overlay.
 
-<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
+<img src="assets/images/guide/devtools/hydration-overlay-ecom.png" />
 
- ### View injector providers
-
- Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type.
-
-<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
+Here is an illustration of the hydration overlays on a Angular e-shop example app.
diff --git a/adev-es/src/content/tools/devtools/injectors.md b/adev-es/src/content/tools/devtools/injectors.md
new file mode 100644
index 0000000..f84a95a
--- /dev/null
+++ b/adev-es/src/content/tools/devtools/injectors.md
@@ -0,0 +1,23 @@
+## Inspect your injectors
+
+NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
+
+### View the injector hierarchy of your application
+
+The **Injector Tree** tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the [injector hierarchy](guide/di/hierarchical-dependency-injection) of your application. One tree is your environment hierarchy, the other is your element hierarchy.
+
+<img src="assets/images/guide/devtools/di-injector-tree.png" alt="A screenshot of the 'Profiler' tab displaying the injector tree tab in Angular Devtools visualizing the injector graph for an example application.">
+
+### Visualize resolution paths
+
+When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
+
+See [resolution rules](guide/di/hierarchical-dependency-injection#resolution-rules) for more details about how Angular resolves resolution paths.
+
+<img src="assets/images/guide/devtools/di-injector-tree-selected.png" alt="A screenshot of the 'Profiler' tab displaying how the injector tree visualize highlights resolution paths when an injector is selected.">
+
+### View injector providers
+
+Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type. The button on the right of each provider allows you to log the provider in the console.
+
+<img src="assets/images/guide/devtools/di-injector-tree-providers.png" alt="A screenshot of the 'Profiler' tab displaying how providers are made visible when an injector is selected.">
diff --git a/adev-es/src/content/tools/devtools/overview.md b/adev-es/src/content/tools/devtools/overview.md
index 62d812a..40cf26b 100644
--- a/adev-es/src/content/tools/devtools/overview.md
+++ b/adev-es/src/content/tools/devtools/overview.md
@@ -15,19 +15,22 @@ HELPFUL: Chrome's new tab page does not run installed extensions, so the Angular
 
 ## Open your application
 
-When you open the extension, you'll see two additional tabs:
+When you open the extension, you'll see three additional tabs:
 
-| Tabs                                     | Details |
-|:---                                      |:---     |
-| [Components](tools/devtools/component) | Lets you explore the components and directives in your application and preview or edit their state.                    |
-| [Profiler](tools/devtools/profiler)     | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
+| Tabs                                      | Details                                                                                                                |
+| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------- |
+| [Components](tools/devtools/component)    | Lets you explore the components and directives in your application and preview or edit their state.                    |
+| [Profiler](tools/devtools/profiler)       | Lets you profile your application and understand what the performance bottleneck is during change detection execution. |
+| [Injector Tree](tools/devtools/injectors) | Lets you visualize the Environment and Element Injector hierarchy                                                      |
 
-<!-- TODO: Add new sections like signals, router etc. -->
+Other tabs like `Router Tree` or `Transfer State` are experimental and can be enabled via the devtools settings and are not documented yet.
 
+HELPFUL: For users of Chromium based browsers, you might be interested in the [Performance panel integration](/best-practices/profiling-with-chrome-devtools).
 
 <img src="assets/images/guide/devtools/devtools-tabs.png" alt="A screenshot of the top of Angular DevTools illustrating two tabs in the upper-left corner, one labeled 'Components' and another labeled 'Profiler'.">
 
-In the top-right corner of Angular DevTools you'll find which version of Angular is running on the page as well as the latest commit hash for the extension.
+In the top-right corner of Angular DevTools you'll find the information button which open a popover.
+The information popover contains among others what version of Angular is running on the page as well as the devtools version.
 
 ### Angular application not detected
 
@@ -42,4 +45,3 @@ When compiling for production, Angular CLI removes various debug features to min
 
 To run DevTools, you need to compile your application with optimizations disabled. `ng serve` does this by default.
 If you need to debug a deployed application, disable optimizations in your build with the [`optimization` configuration option](reference/configs/workspace-config#optimization-configuration) (`{"optimization": false}`).
-
diff --git a/adev-es/src/content/tools/devtools/profiler.md b/adev-es/src/content/tools/devtools/profiler.md
index 0b893d4..34ce43d 100644
--- a/adev-es/src/content/tools/devtools/profiler.md
+++ b/adev-es/src/content/tools/devtools/profiler.md
@@ -27,8 +27,7 @@ When you select a bar, DevTools displays useful information about it including:
 
 - A bar chart with all the components and directives that it captured during this cycle
 - How much time Angular spent running change detection in this cycle.
-- An estimated frame rate as experienced by the user.
-- The source which triggered change detection.
+- An estimated frame rate as experienced by the user (if below 60fps)
 
 <img src="assets/images/guide/devtools/profiler-selected-bar.png" alt="A screenshot of the 'Profiler' tab. A single bar has been selected by the user and a nearby dropdown menu displays 'Bar chart`, showing a second bar chart underneath it. The new chart has two bars which take up the majority of the space, one labeled `TodosComponent` and the other labeled `NgForOf`. The other bars are small enough to be negligible in comparison.">
 
diff --git a/adev-es/src/content/tools/language-service.md b/adev-es/src/content/tools/language-service.md
index ea2b16e..c7b18d3 100644
--- a/adev-es/src/content/tools/language-service.md
+++ b/adev-es/src/content/tools/language-service.md
@@ -7,13 +7,13 @@ It works with external templates in separate HTML files, and also with in-line t
 
 To enable the latest Language Service features, set the `strictTemplates` option in `tsconfig.json` by setting `strictTemplates` to `true`, as shown in the following example:
 
-<docs-code language="json">
+```json
 
 "angularCompilerOptions": {
   "strictTemplates": true
 }
 
-</docs-code>
+```
 
 For more information, see the [Angular compiler options](reference/configs/angular-compiler-options) guide.
 
@@ -24,10 +24,10 @@ It then uses the Angular Language Service to read your `tsconfig.json` file, fin
 
 Language services include:
 
-* Completions lists
-* AOT Diagnostic messages
-* Quick info
-* Go to definition
+- Completions lists
+- AOT Diagnostic messages
+- Quick info
+- Go to definition
 
 ### Autocompletion
 
@@ -91,37 +91,35 @@ Starting with TypeScript 2.3, TypeScript has a plug-in model that the language s
 
 1. Install the latest version of TypeScript in a local `node_modules` directory:
 
-    <docs-code language="shell">
+```shell
 
-    npm install --save-dev typescript
+npm install --save-dev typescript
 
-    </docs-code>
+```
 
 1. Install the Angular Language Service package in the same location:
 
-    <docs-code language="shell">
+```shell
 
-    npm install --save-dev @angular/language-service
+npm install --save-dev @angular/language-service
 
-    </docs-code>
+```
 
-1. Once the package is installed,  add the following to the `"compilerOptions"` section of your project's `tsconfig.json`.
+1. Once the package is installed, add the following to the `"compilerOptions"` section of your project's `tsconfig.json`.
 
-    <docs-code header="tsconfig.json" language="json">
+   ```json {header:"tsconfig.json"}
+   "plugins": [
+     {"name": "@angular/language-service"}
+   ]
+   ```
 
-    "plugins": [
-        {"name": "@angular/language-service"}
-    ]
+2. In your editor's user preferences \(`Cmd+,` or `Ctrl+,`\), add the following:
 
-    </docs-code>
+   ```json {header:"Sublime Text user preferences"}
 
-1. In your editor's user preferences \(`Cmd+,` or `Ctrl+,`\), add the following:
+   "typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
 
-    <docs-code header="Sublime Text user preferences" language="json">
-
-    "typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
-
-    </docs-code>
+   ```
 
 This lets the Angular Language Service provide diagnostics and completions in `.ts` files.
 
@@ -136,36 +134,36 @@ Either directly install the "Eclipse IDE for Web and JavaScript developers" pack
 The Angular Language Service uses the tsserver, which doesn't follow the LSP specifications exactly. Therefore if you are using neovim or vim with JavaScript or TypeScript or Angular you may find that [Conquer of Completion](https://github.com/neoclide/coc.nvim) (COC) has the fullest implementation of the Angular Language Service and the tsserver. This is because COC ports the VSCode implementation of the tsserver which accommodates the tsserver's implementation.
 
 1. [Setup coc.nvim](https://github.com/neoclide/coc.nvim)
-   
+
 2. Configure the Angular Language Service
 
-    Once installed run the `CocConfig` vim command line command to open the config file `coc-settings.json` and add the angular property. 
-
-    Make sure to substitute the correct paths to your global `node_modules` such that they go to directories which contain `tsserver` and the `ngserver` respectively.
-
-    <docs-code header="CocConfig example file coc-settings.json" language="json">
-    {
-      "languageserver": {
-        "angular": {
-          "command": "ngserver",
-          "args": [
-            "--stdio",
-            "--tsProbeLocations",
-            "/usr/local/lib/node_modules/typescript/lib/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES", 
-            "--ngProbeLocations",
-            "/usr/local/lib/node_modules/@angular/language-server/bin/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES"
-          ],
-          "filetypes": ["ts", "typescript", "html"],
-          "trace.server.verbosity": "verbose"
-        }
-      }
-    }
-    </docs-code>
+   Once installed run the `CocConfig` vim command line command to open the config file `coc-settings.json` and add the angular property.
+
+   Make sure to substitute the correct paths to your global `node_modules` such that they go to directories which contain `tsserver` and the `ngserver` respectively.
+
+   ```json {header:"CocConfig example file coc-settings.json"}
+   {
+     "languageserver": {
+       "angular": {
+         "command": "ngserver",
+         "args": [
+           "--stdio",
+           "--tsProbeLocations",
+           "/usr/local/lib/node_modules/typescript/lib/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES",
+           "--ngProbeLocations",
+           "/usr/local/lib/node_modules/@angular/language-server/bin/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES"
+         ],
+         "filetypes": ["ts", "typescript", "html"],
+         "trace.server.verbosity": "verbose"
+       }
+     }
+   }
+   ```
 
 HELPFUL: `/usr/local/lib/node_modules/typescript/lib` and `/usr/local/lib/node_modules/@angular/language-server/bin` above should point to the location of your global node modules, which may be different.
 
-
 #### Built In Neovim LSP
+
 Angular Language Service can be used with Neovim by using the [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) plugin.
 
 1. [Install nvim-lspconfig](https://github.com/neovim/nvim-lspconfig?tab=readme-ov-file#install)
@@ -193,5 +191,5 @@ The Angular Language Services then looks at `data.---` within its context, asks
 
 ## More information
 
-* For more in-depth information on the implementation, see the [Angular Language Service source](https://github.com/angular/angular/blob/main/packages/language-service/src)
-* For more on the design considerations and intentions, see [design documentation here](https://github.com/angular/vscode-ng-language-service/wiki/Design)
+- For more in-depth information on the implementation, see the [Angular Language Service source](https://github.com/angular/angular/blob/main/packages/language-service/src)
+- For more on the design considerations and intentions, see [design documentation here](https://github.com/angular/vscode-ng-language-service/wiki/Design)
diff --git a/adev-es/src/content/tools/libraries/angular-package-format.en.md b/adev-es/src/content/tools/libraries/angular-package-format.en.md
index 82d1282..4176aa3 100644
--- a/adev-es/src/content/tools/libraries/angular-package-format.en.md
+++ b/adev-es/src/content/tools/libraries/angular-package-format.en.md
@@ -28,49 +28,45 @@ The following example shows a simplified version of the `@angular/core` package'
 node_modules/@angular/core
 ├── README.md
 ├── package.json
-├── index.d.ts
 ├── fesm2022
 │   ├── core.mjs
 │   ├── core.mjs.map
 │   ├── testing.mjs
 │   └── testing.mjs.map
-└── testing
-    └── index.d.ts
+└── types
+│   ├── core.d.ts
+│   ├── testing.d.ts
 ```
 
 This table describes the file layout under `node_modules/@angular/core` annotated to describe the purpose of files and directories:
 
-| Files                                                                                                                                                     | Purpose |
-|:---                                                                                                                                                       |:---     |
+| Files                                                                                                                                                     | Purpose                                                                                                                                                                                                        |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `README.md`                                                                                                                                               | Package README, used by npmjs web UI.                                                                                                                                                                          |
 | `package.json`                                                                                                                                            | Primary `package.json`, describing the package itself as well as all available entrypoints and code formats. This file contains the "exports" mapping used by runtimes and tools to perform module resolution. |
-| `index.d.ts`                                                                                                                                               | Bundled `.d.ts` for the primary entrypoint `@angular/core`.                                                                                                                                                    |
-| `fesm2022/` <br /> &nbsp;&nbsp;─ `core.mjs` <br /> &nbsp;&nbsp;─ `core.mjs.map` <br /> &nbsp;&nbsp;─ `testing.mjs` <br /> &nbsp;&nbsp;─ `testing.mjs.map` | Code for all entrypoints in flattened \(FESM\) ES2022 format, along with source maps.                                                                                                                           |
-| `testing/`                                                                                                                                                | Directory representing the "testing" entrypoint.                                                                                                                                                               |
-| `testing/index.d.ts`                                                                                                                                    | Bundled `.d.ts` for the `@angular/core/testing` entrypoint.                                                                                                                                                     |
+| `fesm2022/` <br /> &nbsp;&nbsp;─ `core.mjs` <br /> &nbsp;&nbsp;─ `core.mjs.map` <br /> &nbsp;&nbsp;─ `testing.mjs` <br /> &nbsp;&nbsp;─ `testing.mjs.map` | Code for all entrypoints in flattened \(FESM\) ES2022 format, along with source maps.                                                                                                                          |
+| `types/` <br /> &nbsp;&nbsp;─ `core.d.ts` <br /> &nbsp;&nbsp;─ `testing.d.ts`                                                                             | Bundled TypeScript type definitions for all public entrypoints.                                                                                                                                                |
 
 ## `package.json`
 
 The primary `package.json` contains important package metadata, including the following:
 
-* It [declares](#esm-declaration) the package to be in EcmaScript Module \(ESM\) format
-* It contains an [`"exports"` field](#exports) which defines the available source code formats of all entrypoints
-* It contains [keys](#legacy-resolution-keys) which define the available source code formats of the primary `@angular/core` entrypoint, for tools which do not understand `"exports"`.
-    These keys are considered deprecated, and could be removed as the support for `"exports"` rolls out across the ecosystem.
+- It [declares](#esm-declaration) the package to be in EcmaScript Module \(ESM\) format
+- It contains an `"exports"` field which defines the available source code formats of all entrypoints
+- It contains [keys](#legacy-resolution-keys) which define the available source code formats of the primary `@angular/core` entrypoint, for tools which do not understand `"exports"`.
+  These keys are considered deprecated, and could be removed as the support for `"exports"` rolls out across the ecosystem.
 
-* It declares whether the package contains [side effects](#side-effects)
+- It declares whether the package contains [side effects](#side-effects)
 
 ### ESM declaration
 
 The top-level `package.json` contains the key:
 
-<docs-code language="javascript">
-
+```js
 {
   "type": "module"
 }
-
-</docs-code>
+```
 
 This informs resolvers that code within the package is using EcmaScript Modules as opposed to CommonJS modules.
 
@@ -78,8 +74,7 @@ This informs resolvers that code within the package is using EcmaScript Modules
 
 The `"exports"` field has the following structure:
 
-<docs-code language="javascript">
-
+```js
 "exports": {
   "./schematics/*": {
     "default": "./schematics/*.js"
@@ -88,24 +83,23 @@ The `"exports"` field has the following structure:
     "default": "./package.json"
   },
   ".": {
-    "types": "./core.d.ts",
+    "types": "./types/core.d.ts",
     "default": "./fesm2022/core.mjs"
   },
   "./testing": {
-    "types": "./testing/testing.d.ts",
+    "types": "./types/testing.d.ts",
     "default": "./fesm2022/testing.mjs"
   }
 }
-
-</docs-code>
+```
 
 Of primary interest are the `"."` and the `"./testing"` keys, which define the available code formats for the `@angular/core` primary entrypoint and the `@angular/core/testing` secondary entrypoint, respectively.
 For each entrypoint, the available formats are:
 
-| Formats                   | Details |
-|:---                       |:---     |
-| Typings \(`.d.ts` files\) | `.d.ts` files are used by TypeScript when depending on a given package.                                                                                                           |
-| `default`               | ES2022 code flattened into a single source.
+| Formats                   | Details                                                                 |
+| :------------------------ | :---------------------------------------------------------------------- |
+| Typings \(`.d.ts` files\) | `.d.ts` files are used by TypeScript when depending on a given package. |
+| `default`                 | ES2022 code flattened into a single source.                             |
 
 Tooling that is aware of these keys may preferentially select a desirable code format from `"exports"`.
 
@@ -118,14 +112,12 @@ For more information, see [Managing assets in a library](tools/libraries/creatin
 In addition to `"exports"`, the top-level `package.json` also defines legacy module resolution keys for resolvers that don't support `"exports"`.
 For `@angular/core` these are:
 
-<docs-code language="javascript">
-
+```js
 {
   "module": "./fesm2022/core.mjs",
-  "typings": "./core.d.ts",
+  "typings": "./types/core.d.ts",
 }
-
-</docs-code>
+```
 
 As shown in the preceding code snippet, a module resolver can use these keys to load a specific code format.
 
@@ -133,13 +125,11 @@ As shown in the preceding code snippet, a module resolver can use these keys to
 
 The last function of `package.json` is to declare whether the package has [side effects](#sideeffects-flag).
 
-<docs-code language="javascript">
-
+```js
 {
   "sideEffects": false
 }
-
-</docs-code>
+```
 
 Most Angular packages should not depend on top-level side effects, and thus should include this declaration.
 
@@ -150,15 +140,15 @@ Entrypoints serve several functions.
 
 1. They define the module specifiers from which users import code \(for example, `@angular/core` and `@angular/core/testing`\).
 
-    Users typically perceive these entrypoints as distinct groups of symbols, with different purposes or capability.
+   Users typically perceive these entrypoints as distinct groups of symbols, with different purposes or capability.
 
-    Specific entrypoints might only be used for special purposes, such as testing.
-    Such APIs can be separated out from the primary entrypoint to reduce the chance of them being used accidentally or incorrectly.
+   Specific entrypoints might only be used for special purposes, such as testing.
+   Such APIs can be separated out from the primary entrypoint to reduce the chance of them being used accidentally or incorrectly.
 
 1. They define the granularity at which code can be lazily loaded.
 
-    Many modern build tools are only capable of "code splitting" \(aka lazy loading\) at the ES Module level.
-    The Angular Package Format uses primarily a single "flat" ES Module per entry point. This means that most build tooling is not able to split code with a single entry point into multiple output chunks.
+   Many modern build tools are only capable of "code splitting" \(aka lazy loading\) at the ES Module level.
+   The Angular Package Format uses primarily a single "flat" ES Module per entry point. This means that most build tooling is not able to split code with a single entry point into multiple output chunks.
 
 The general rule for APF packages is to use entrypoints for the smallest sets of logically connected code possible.
 For example, the Angular Material package publishes each logical component or set of components as a separate entrypoint - one for Button, one for Tabs, etc.
@@ -178,7 +168,7 @@ The README file in the Markdown format that is used to display description of a
 
 Example README content of @angular/core package:
 
-<docs-code language="html">
+```html
 
 Angular
 &equals;&equals;&equals;&equals;&equals;&equals;&equals;
@@ -187,7 +177,7 @@ The sources for this package are in the main [Angular](https://github.com/angula
 
 License: MIT
 
-</docs-code>
+```
 
 ## Partial compilation
 
@@ -196,16 +186,14 @@ This is a compilation mode for `ngc` which produces compiled Angular code that i
 
 To partially compile Angular code, use the `compilationMode` flag in the `angularCompilerOptions` property of your `tsconfig.json`:
 
-<docs-code language="javascript">
-
+```js
 {
   …
   "angularCompilerOptions": {
     "compilationMode": "partial",
   }
 }
-
-</docs-code>
+```
 
 Partially compiled library code is then converted to fully compiled code during the application build process by the Angular CLI.
 
@@ -219,19 +207,18 @@ The Angular Package Format specifies that code be published in "flattened" ES mo
 This significantly reduces the build time of Angular applications as well as download and parse time of the final application bundle.
 Please check out the excellent post ["The cost of small modules"](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules) by Nolan Lawson.
 
-The Angular compiler can generate index ES module files. Tools like Rollup can use these files to generate flattened modules in a *Flattened ES Module* (FESM) file format.
+The Angular compiler can generate index ES module files. Tools like Rollup can use these files to generate flattened modules in a _Flattened ES Module_ (FESM) file format.
 
 FESM is a file format created by flattening all ES Modules accessible from an entrypoint into a single ES Module.
 It's formed by following all imports from a package and copying that code into a single file while preserving all public ES exports and removing all private imports.
 
-The abbreviated name, FESM, pronounced *phe-som*, can be followed by a number such as FESM2020.
+The abbreviated name, FESM, pronounced _phe-som_, can be followed by a number such as FESM2020.
 The number refers to the language level of the JavaScript inside the module.
 Accordingly a FESM2022 file would be ESM+ES2022 and include import/export statements and ES2022 source code.
 
 To generate a flattened ES Module index file, use the following configuration options in your tsconfig.json file:
 
-<docs-code language="javascript">
-
+```js
 {
   "compilerOptions": {
     …
@@ -245,8 +232,7 @@ To generate a flattened ES Module index file, use the following configuration op
     "flatModuleId": "my-ui-lib"
   }
 }
-
-</docs-code>
+```
 
 Once the index file \(for example, `my-ui-lib.js`\) is generated by ngc, bundlers and optimizers like Rollup can be used to produce the flattened ESM file.
 
diff --git a/adev-es/src/content/tools/libraries/angular-package-format.md b/adev-es/src/content/tools/libraries/angular-package-format.md
index 58a2428..fc0dc8d 100644
--- a/adev-es/src/content/tools/libraries/angular-package-format.md
+++ b/adev-es/src/content/tools/libraries/angular-package-format.md
@@ -28,14 +28,14 @@ El siguiente ejemplo muestra una versión simplificada del diseño de archivos d
 node_modules/@angular/core
 ├── README.md
 ├── package.json
-├── index.d.ts
 ├── fesm2022
 │   ├── core.mjs
 │   ├── core.mjs.map
 │   ├── testing.mjs
 │   └── testing.mjs.map
-└── testing
-    └── index.d.ts
+└── types
+│   ├── core.d.ts
+│   ├── testing.d.ts
 ```
 
 Esta tabla describe el diseño de archivos bajo `node_modules/@angular/core` anotado para describir el propósito de archivos y directorios:
@@ -44,33 +44,29 @@ Esta tabla describe el diseño de archivos bajo `node_modules/@angular/core` ano
 |:---                                                                                                                                                       |:---     |
 | `README.md`                                                                                                                                               | README del paquete, usado por la interfaz web de npmjs.                                                                                                                                                                          |
 | `package.json`                                                                                                                                            | `package.json` principal, describiendo el paquete en sí así como todos los puntos de entrada disponibles y formatos de código. Este archivo contiene el mapeo "exports" usado por runtimes y herramientas para realizar resolución de módulos. |
-| `index.d.ts`                                                                                                                                               | `.d.ts` empaquetado para el punto de entrada principal `@angular/core`.                                                                                                                                                                    |
 | `fesm2022/` <br /> &nbsp;&nbsp;─ `core.mjs` <br /> &nbsp;&nbsp;─ `core.mjs.map` <br /> &nbsp;&nbsp;─ `testing.mjs` <br /> &nbsp;&nbsp;─ `testing.mjs.map` | Código para todos los puntos de entrada en formato ES2022 aplanado \(FESM\), junto con mapas de código fuente.                                                                                                                           |
-| `testing/`                                                                                                                                                | Directorio representando el punto de entrada "testing".                                                                                                                                                               |
-| `testing/index.d.ts`                                                                                                                                    | `.d.ts` empaquetado para el punto de entrada `@angular/core/testing`.                                                                                                                                                                     |
+| `types/` <br /> &nbsp;&nbsp;─ `core.d.ts` <br /> &nbsp;&nbsp;─ `testing.d.ts`                                                                             | Definiciones de tipo TypeScript empaquetadas para todos los puntos de entrada públicos.                                                                                                                                                |
 
 ## `package.json`
 
 El `package.json` principal contiene metadatos importantes del paquete, incluyendo lo siguiente:
 
-* [Declara](#esm-declaration) que el paquete está en formato de módulo EcmaScript \(ESM\)
-* Contiene un [campo `"exports"`](#exports) que define los formatos de código fuente disponibles de todos los puntos de entrada
-* Contiene [claves](#legacy-resolution-keys) que definen los formatos de código fuente disponibles del punto de entrada principal `@angular/core`, para herramientas que no entienden `"exports"`.
-    Estas claves se consideran deprecadas, y podrían eliminarse a medida que el soporte para `"exports"` se implemente en todo el ecosistema.
+- [Declara](#declaración-esm) que el paquete está en formato de módulo EcmaScript \(ESM\)
+- Contiene un campo `"exports"` que define los formatos de código fuente disponibles de todos los puntos de entrada
+- Contiene [claves](#claves-de-resolución-heredadas) que definen los formatos de código fuente disponibles del punto de entrada principal `@angular/core`, para herramientas que no entienden `"exports"`.
+  Estas claves se consideran deprecadas, y podrían eliminarse a medida que el soporte para `"exports"` se implemente en todo el ecosistema.
 
-* Declara si el paquete contiene [efectos secundarios](#side-effects)
+- Declara si el paquete contiene [efectos secundarios](#efectos-secundarios)
 
 ### Declaración ESM
 
 El `package.json` de nivel superior contiene la clave:
 
-<docs-code language="javascript">
-
+```js
 {
   "type": "module"
 }
-
-</docs-code>
+```
 
 Esto informa a los resolvers que el código dentro del paquete está usando módulos EcmaScript en oposición a módulos CommonJS.
 
@@ -78,8 +74,7 @@ Esto informa a los resolvers que el código dentro del paquete está usando mód
 
 El campo `"exports"` tiene la siguiente estructura:
 
-<docs-code language="javascript">
-
+```js
 "exports": {
   "./schematics/*": {
     "default": "./schematics/*.js"
@@ -88,16 +83,15 @@ El campo `"exports"` tiene la siguiente estructura:
     "default": "./package.json"
   },
   ".": {
-    "types": "./core.d.ts",
+    "types": "./types/core.d.ts",
     "default": "./fesm2022/core.mjs"
   },
   "./testing": {
-    "types": "./testing/testing.d.ts",
+    "types": "./types/testing.d.ts",
     "default": "./fesm2022/testing.mjs"
   }
 }
-
-</docs-code>
+```
 
 De interés principal son las claves `"."` y `"./testing"`, que definen los formatos de código disponibles para el punto de entrada principal `@angular/core` y el punto de entrada secundario `@angular/core/testing`, respectivamente.
 Para cada punto de entrada, los formatos disponibles son:
@@ -111,35 +105,31 @@ Las herramientas que conocen estas claves pueden seleccionar preferentemente un
 
 Las librerías pueden querer exponer archivos estáticos adicionales que no están capturados por las exportaciones de los puntos de entrada basados en JavaScript, como mixins de Sass o CSS pre-compilado.
 
-Para más información, consulta [Gestionando recursos en una librería](tools/libraries/creating-libraries#managing-assets-in-a-library).
+Para más información, consulta [Gestionando recursos en una librería](tools/libraries/creating-libraries#gestionando-recursos-en-una-librería).
 
 ### Claves de resolución heredadas
 
 Además de `"exports"`, el `package.json` de nivel superior también define claves de resolución de módulos heredadas para resolvers que no soportan `"exports"`.
 Para `@angular/core` estas son:
 
-<docs-code language="javascript">
-
+```js
 {
   "module": "./fesm2022/core.mjs",
-  "typings": "./core.d.ts",
+  "typings": "./types/core.d.ts",
 }
-
-</docs-code>
+```
 
 Como se muestra en el fragmento de código anterior, un resolver de módulos puede usar estas claves para cargar un formato de código específico.
 
 ### Efectos secundarios
 
-La última función de `package.json` es declarar si el paquete tiene [efectos secundarios](#sideeffects-flag).
-
-<docs-code language="javascript">
+La última función de `package.json` es declarar si el paquete tiene [efectos secundarios](#bandera-sideeffects).
 
+```js
 {
   "sideEffects": false
 }
-
-</docs-code>
+```
 
 La mayoría de los paquetes de Angular no deberían depender de efectos secundarios de nivel superior, y por lo tanto deberían incluir esta declaración.
 
@@ -150,15 +140,15 @@ Los puntos de entrada sirven para varias funciones.
 
 1. Definen los especificadores de módulo desde los cuales los usuarios importan código \(por ejemplo, `@angular/core` y `@angular/core/testing`\).
 
-    Los usuarios típicamente perciben estos puntos de entrada como grupos distintos de símbolos, con diferentes propósitos o capacidades.
+   Los usuarios típicamente perciben estos puntos de entrada como grupos distintos de símbolos, con diferentes propósitos o capacidades.
 
-    Puntos de entrada específicos podrían usarse solo para propósitos especiales, como pruebas.
-    Tales APIs pueden separarse del punto de entrada principal para reducir la posibilidad de que se usen accidental o incorrectamente.
+   Puntos de entrada específicos podrían usarse solo para propósitos especiales, como pruebas.
+   Tales APIs pueden separarse del punto de entrada principal para reducir la posibilidad de que se usen accidental o incorrectamente.
 
 1. Definen la granularidad a la que el código puede cargarse de forma diferida.
 
-    Muchas herramientas de compilación modernas solo son capaces de "dividir código" \(también conocido como lazy loading\) a nivel de módulo ES.
-    El formato de paquete Angular usa principalmente un único módulo ES "aplanado" por punto de entrada. Esto significa que la mayoría de las herramientas de compilación no pueden dividir código con un único punto de entrada en múltiples fragmentos de salida.
+   Muchas herramientas de compilación modernas solo son capaces de "dividir código" \(también conocido como lazy loading\) a nivel de módulo ES.
+   El formato de paquete Angular usa principalmente un único módulo ES "aplanado" por punto de entrada. Esto significa que la mayoría de las herramientas de compilación no pueden dividir código con un único punto de entrada en múltiples fragmentos de salida.
 
 La regla general para paquetes APF es usar puntos de entrada para los conjuntos más pequeños posibles de código lógicamente conectado.
 Por ejemplo, el paquete Angular Material publica cada componente lógico o conjunto de componentes como un punto de entrada separado - uno para Button, uno para Tabs, etc.
@@ -178,7 +168,7 @@ El archivo README en formato Markdown que se usa para mostrar la descripción de
 
 Ejemplo de contenido README del paquete @angular/core:
 
-<docs-code language="html">
+```html
 
 Angular
 &equals;&equals;&equals;&equals;&equals;&equals;&equals;
@@ -187,7 +177,7 @@ The sources for this package are in the main [Angular](https://github.com/angula
 
 License: MIT
 
-</docs-code>
+```
 
 ## Compilación parcial
 
@@ -196,20 +186,18 @@ Este es un modo de compilación para `ngc` que produce código Angular compilado
 
 Para compilar parcialmente código Angular, usa la bandera `compilationMode` en la propiedad `angularCompilerOptions` de tu `tsconfig.json`:
 
-<docs-code language="javascript">
-
+```js
 {
   …
   "angularCompilerOptions": {
     "compilationMode": "partial",
   }
 }
-
-</docs-code>
+```
 
 El código de librería compilado parcialmente se convierte luego a código completamente compilado durante el proceso de compilación de la aplicación por el Angular CLI.
 
-Si tu pipeline de compilación no usa el Angular CLI, consulta la guía [Consumiendo código partial ivy fuera del Angular CLI](tools/libraries/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli).
+Si tu pipeline de compilación no usa el Angular CLI, consulta la guía [Consumiendo código partial ivy fuera del Angular CLI](tools/libraries/creating-libraries#consumiendo-código-partial-ivy-fuera-del-angular-cli).
 
 ## Optimizaciones
 
@@ -219,19 +207,18 @@ El formato de paquete Angular especifica que el código se publique en formato d
 Esto reduce significativamente el tiempo de compilación de aplicaciones de Angular así como el tiempo de descarga y análisis del bundle final de la aplicación.
 Por favor revisa el excelente post ["The cost of small modules"](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules) de Nolan Lawson.
 
-El compilador de Angular puede generar archivos de módulos ES índice. Herramientas como Rollup pueden usar estos archivos para generar módulos aplanados en un formato de archivo *Módulo ES Aplanado* (FESM).
+El compilador de Angular puede generar archivos de módulos ES índice. Herramientas como Rollup pueden usar estos archivos para generar módulos aplanados en un formato de archivo _Módulo ES Aplanado_ (FESM).
 
 FESM es un formato de archivo creado aplanando todos los módulos ES accesibles desde un punto de entrada en un único módulo ES.
 Se forma siguiendo todas las importaciones desde un paquete y copiando ese código en un único archivo mientras se preservan todas las exportaciones públicas de ES y se eliminan todas las importaciones privadas.
 
-El nombre abreviado, FESM, pronunciado *fe-som*, puede ir seguido de un número como FESM2020.
+El nombre abreviado, FESM, pronunciado _phe-som_, puede ir seguido de un número como FESM2020.
 El número se refiere al nivel de lenguaje del JavaScript dentro del módulo.
 Por lo tanto, un archivo FESM2022 sería ESM+ES2022 e incluiría declaraciones de importación/exportación y código fuente ES2022.
 
 Para generar un archivo índice de módulo ES aplanado, usa las siguientes opciones de configuración en tu archivo tsconfig.json:
 
-<docs-code language="javascript">
-
+```js
 {
   "compilerOptions": {
     …
@@ -245,8 +232,7 @@ Para generar un archivo índice de módulo ES aplanado, usa las siguientes opcio
     "flatModuleId": "my-ui-lib"
   }
 }
-
-</docs-code>
+```
 
 Una vez que el archivo índice \(por ejemplo, `my-ui-lib.js`\) es generado por ngc, bundlers y optimizadores como Rollup pueden usarse para producir el archivo ESM aplanado.
 
diff --git a/adev-es/src/content/tools/libraries/creating-libraries.en.md b/adev-es/src/content/tools/libraries/creating-libraries.en.md
index 0998768..349f42c 100644
--- a/adev-es/src/content/tools/libraries/creating-libraries.en.md
+++ b/adev-es/src/content/tools/libraries/creating-libraries.en.md
@@ -9,13 +9,13 @@ A simple example might be a button that sends users to your company website, tha
 
 Use the Angular CLI to generate a new library skeleton in a new workspace with the following commands.
 
-<docs-code language="shell">
+```shell
 
 ng new my-workspace --no-create-application
 cd my-workspace
 ng generate library my-lib
 
-</docs-code>
+```
 
 <docs-callout title="Naming your library">
 
@@ -38,7 +38,7 @@ See [Setting up for a multi-project workspace](reference/configs/file-structure#
 
 When you generate a new library, the workspace configuration file, `angular.json`, is updated with a project of type `library`.
 
-<docs-code language="json">
+```json
 
 "projects": {
   …
@@ -52,17 +52,17 @@ When you generate a new library, the workspace configuration file, `angular.json
         "builder": "@angular-devkit/build-angular:ng-packagr",
         …
 
-</docs-code>
+```
 
 Build, test, and lint the project with CLI commands:
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib --configuration development
 ng test my-lib
 ng lint my-lib
 
-</docs-code>
+```
 
 Notice that the configured builder for the project is different from the default builder for application projects.
 This builder, among other things, ensures that the library is always built with the [AOT compiler](tools/cli/aot-compiler).
@@ -81,30 +81,29 @@ Your library should supply documentation \(typically a README file\) for install
 To make your solution reusable, you need to adjust it so that it does not depend on application-specific code.
 Here are some things to consider in migrating application functionality to a library.
 
-* Declarations such as components and pipes should be designed as stateless, meaning they don't rely on or alter external variables.
-    If you do rely on state, you need to evaluate every case and decide whether it is application state or state that the library would manage.
+- Declarations such as components and pipes should be designed as stateless, meaning they don't rely on or alter external variables.
+  If you do rely on state, you need to evaluate every case and decide whether it is application state or state that the library would manage.
 
-* Any observables that the components subscribe to internally should be cleaned up and disposed of during the lifecycle of those components
-* Components should expose their interactions through inputs for providing context, and outputs for communicating events to other components
+- Any observables that the components subscribe to internally should be cleaned up and disposed of during the lifecycle of those components
+- Components should expose their interactions through inputs for providing context, and outputs for communicating events to other components
 
-* Check all internal dependencies.
-  * For custom classes or interfaces used in components or service, check whether they depend on additional classes or interfaces that also need to be migrated
-  * Similarly, if your library code depends on a service, that service needs to be migrated
-  * If your library code or its templates depend on other libraries \(such as Angular Material, for instance\), you must configure your library with those dependencies
+- Check all internal dependencies.
+  - For custom classes or interfaces used in components or service, check whether they depend on additional classes or interfaces that also need to be migrated
+  - Similarly, if your library code depends on a service, that service needs to be migrated
+  - If your library code or its templates depend on other libraries \(such as Angular Material, for instance\), you must configure your library with those dependencies
 
-* Consider how you provide services to client applications.
+- Consider how you provide services to client applications.
+  - Services should declare their own providers, rather than declaring providers in the NgModule or a component.
+    Declaring a provider makes that service _tree-shakable_.
+    This practice lets the compiler leave the service out of the bundle if it never gets injected into the application that imports the library.
+    For more about this, see [Tree-shakable providers](guide/di/lightweight-injection-tokens).
 
-  * Services should declare their own providers, rather than declaring providers in the NgModule or a component.
-        Declaring a provider makes that service *tree-shakable*.
-        This practice lets the compiler leave the service out of the bundle if it never gets injected into the application that imports the library.
-        For more about this, see [Tree-shakable providers](guide/di/lightweight-injection-tokens).
-
-  * If you register global service providers expose a `provideXYZ()` provider function.
-  * If your library provides optional services that might not be used by all client applications, support proper tree-shaking for that case by using the [lightweight token design pattern](guide/di/lightweight-injection-tokens)
+  - If you register global service providers expose a `provideXYZ()` provider function.
+  - If your library provides optional services that might not be used by all client applications, support proper tree-shaking for that case by using the [lightweight token design pattern](guide/di/lightweight-injection-tokens)
 
 ## Integrating with the CLI using code-generation schematics
 
-A library typically includes *reusable code* that defines components, services, and other Angular artifacts \(pipes, directives\) that you import into a project.
+A library typically includes _reusable code_ that defines components, services, and other Angular artifacts \(pipes, directives\) that you import into a project.
 A library is packaged into an npm package for publishing and sharing.
 This package can also include schematics that provide instructions for generating or transforming code directly in your project, in the same way that the CLI creates a generic new component with `ng generate component`.
 A schematic that is packaged with a library can, for example, provide the Angular CLI with the information it needs to generate a component that configures and uses a particular feature, or set of features, defined in that library.
@@ -112,9 +111,9 @@ One example of this is [Angular Material's navigation schematic](https://materia
 
 Create and include the following kinds of schematics:
 
-* Include an installation schematic so that `ng add` can add your library to a project
-* Include generation schematics in your library so that `ng generate` can scaffold your defined artifacts \(components, services, tests\) in a project
-* Include an update schematic so that `ng update` can update your library's dependencies and provide migrations for breaking changes in new releases
+- Include an installation schematic so that `ng add` can add your library to a project
+- Include generation schematics in your library so that `ng generate` can scaffold your defined artifacts \(components, services, tests\) in a project
+- Include an update schematic so that `ng update` can update your library's dependencies and provide migrations for breaking changes in new releases
 
 What you include in your library depends on your task.
 For example, you could define a schematic to create a dropdown that is pre-populated with canned data to show how to add it to an application.
@@ -139,13 +138,13 @@ to choose the right format for your library.
 You should always build libraries for distribution using the `production` configuration.
 This ensures that generated output uses the appropriate optimizations and the correct package format for npm.
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib
 cd dist/my-lib
 npm publish
 
-</docs-code>
+```
 
 ## Managing assets in a library
 
@@ -157,7 +156,7 @@ You need to add these manually to the conditional ["exports"](tools/libraries/an
 
 `ng-packagr` will merge handwritten `"exports"` with the auto-generated ones, allowing for library authors to configure additional export subpaths, or custom conditions.
 
-<docs-code language="json">
+```json
 
 "exports": {
   ".": {
@@ -171,7 +170,7 @@ You need to add these manually to the conditional ["exports"](tools/libraries/an
   }
 }
 
-</docs-code>
+```
 
 The above is an extract from the [@angular/material](https://unpkg.com/browse/@angular/material/package.json) distributable.
 
@@ -187,22 +186,18 @@ You don't have to publish your library to the npm package manager to use it in t
 
 To use your own library in an application:
 
-* Build the library.
-    You cannot use a library before it is built.
-
-    <docs-code language="shell">
-
-    ng build my-lib
-
-    </docs-code>
-
-* In your applications, import from the library by name:
+- Build the library.
+  You cannot use a library before it is built.
 
-    <docs-code language="typescript">
+```shell
+  ng build my-lib
+```
 
-    import { myExport } from 'my-lib';
+- In your applications, import from the library by name:
 
-    </docs-code>
+```ts
+  import { myExport } from 'my-lib';
+```
 
 ### Building and rebuilding your library
 
@@ -218,41 +213,96 @@ The Angular CLI uses the `tsconfig` paths to tell the build system where to find
 
 For more information, see [Path mapping overview](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping).
 
-If you find that changes to your library are not reflected in your application, your application is probably using an old build of the library.
-
 You can rebuild your library whenever you make changes to it, but this extra step takes time.
-*Incremental builds* functionality improves the library-development experience.
+_Incremental builds_ functionality improves the library-development experience.
 Every time a file is changed a partial build is performed that emits the amended files.
 
 Incremental builds can be run as a background process in your development environment.
 To take advantage of this feature add the `--watch` flag to the build command:
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib --watch
 
-</docs-code>
+```
 
 IMPORTANT: The CLI `build` command uses a different builder and invokes a different build tool for libraries than it does for applications.
 
-* The build system for applications, `@angular-devkit/build-angular`, is based on `webpack`, and is included in all new Angular CLI projects
-* The build system for libraries is based on `ng-packagr`.
-    It is only added to your dependencies when you add a library using `ng generate library my-lib`.
+- The build system for applications, `@angular-devkit/build-angular`, is based on `webpack`, and is included in all new Angular CLI projects
+- The build system for libraries is based on `ng-packagr`.
+  It is only added to your dependencies when you add a library using `ng generate library my-lib`.
 
 The two build systems support different things, and even where they support the same things, they do those things differently.
 This means that the TypeScript source can result in different JavaScript code in a built library than it would in a built application.
 
-For this reason, an application that depends on a library should only use TypeScript path mappings that point to the *built library*.
-TypeScript path mappings should *not* point to the library source `.ts` files.
+For this reason, an application that depends on a library should only use TypeScript path mappings that point to the _built library_.
+TypeScript path mappings should _not_ point to the library source `.ts` files.
+
+### Linking libraries for local development
+
+This section explains how to use your package manager's local linking feature
+(such as [`npm link`](https://pnpm.io/cli/link) or [`pnpm link`](https://pnpm.io/cli/link)) to test a standalone Angular library with an external application during
+local development, without relying on the monorepo workspace structure or publishing to the NPM registry.
+
+NOTE: If your library and application are in the same Angular workspace (a monorepo setup), the standard monorepo workflow automatically handles the linking and is generally more efficient. This local linking approach is best when:
+
+- You are developing a standalone library and need to test changes with an external, consuming application.
+- You are testing library changes in a consuming application outside the monorepo workspace.
+
+#### Configuring the consuming application
+
+To use linked libraries, you need to configure your application's `angular.json` file with the following settings:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "preserveSymlinks": true
+          },
+          "configurations": {
+            "development": {
+              "sourceMap": {
+                "scripts": true,
+                "styles": true,
+                "vendor": true
+              }
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "prebundle": {
+              "exclude": [
+                "my-lib"
+              ]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Configuration options explained:**
+
+- `preserveSymlinks: true`: Instructs the build system to follow the symlinks created by your package manager's linking command instead of resolving to the symlink's original location. This is essential to to avoid multiple copies of the dependent node packages.
+- `sourceMap.vendor`: Enabling vendor source maps (especially `vendor: true`) for easier debugging of linked library code.
+- `prebundle.exclude`: By default, the Angular CLI can pre-bundle all node dependencies. Excluding your library ensures that the linked source code is properly watched and rebuilt when changes occur.
 
 ## Publishing libraries
 
 There are two distribution formats to use when publishing a library:
 
-| Distribution formats        | Details |
-|:---                         |:---     |
-| Partial-Ivy \(recommended\) | Contains portable code that can be consumed by Ivy applications built with any version of Angular from v12 onwards. |
-| Full-Ivy                    | Contains private Angular Ivy instructions, which are not guaranteed to work across different versions of Angular. This format requires that the library and application are built with the *exact* same version of Angular. This format is useful for environments where all library and application code is built directly from source. |
+| Distribution formats        | Details                                                                                                                                                                                                                                                                                                                                  |
+| :-------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Partial-Ivy \(recommended\) | Contains portable code that can be consumed by Ivy applications built with any version of Angular from v12 onwards.                                                                                                                                                                                                                      |
+| Full-Ivy                    | Contains private Angular Ivy instructions, which are not guaranteed to work across different versions of Angular. This format requires that the library and application are built with the _exact_ same version of Angular. This format is useful for environments where all library and application code is built directly from source. |
 
 For publishing to npm use the partial-Ivy format as it is stable between patch versions of Angular.
 
diff --git a/adev-es/src/content/tools/libraries/creating-libraries.md b/adev-es/src/content/tools/libraries/creating-libraries.md
index 994562c..a621a7c 100644
--- a/adev-es/src/content/tools/libraries/creating-libraries.md
+++ b/adev-es/src/content/tools/libraries/creating-libraries.md
@@ -9,18 +9,18 @@ Un ejemplo simple podría ser un botón que envía usuarios al sitio web de tu e
 
 Usa el Angular CLI para generar un nuevo esqueleto de librería en un nuevo espacio de trabajo con los siguientes comandos.
 
-<docs-code language="shell">
+```shell
 
 ng new my-workspace --no-create-application
 cd my-workspace
 ng generate library my-lib
 
-</docs-code>
+```
 
 <docs-callout title="Nombrando tu librería">
 
 Debes tener mucho cuidado al elegir el nombre de tu librería si quieres publicarla más tarde en un registro de paquetes público como npm.
-Consulta [Publicando tu librería](tools/libraries/creating-libraries#publishing-your-library).
+Consulta [Publicando tu librería](tools/libraries/creating-libraries#publicando-tu-librería).
 
 Evita usar un nombre que esté prefijado con `ng-`, como `ng-library`.
 El prefijo `ng-` es una palabra clave reservada usada por el framework Angular y sus librerías.
@@ -38,7 +38,7 @@ Consulta [Configurando un espacio de trabajo multi-proyecto](reference/configs/f
 
 Cuando generas una nueva librería, el archivo de configuración del espacio de trabajo, `angular.json`, se actualiza con un proyecto de tipo `library`.
 
-<docs-code language="json">
+```json
 
 "projects": {
   …
@@ -52,17 +52,17 @@ Cuando generas una nueva librería, el archivo de configuración del espacio de
         "builder": "@angular-devkit/build-angular:ng-packagr",
         …
 
-</docs-code>
+```
 
 Construye, prueba y verifica el proyecto con comandos del CLI:
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib --configuration development
 ng test my-lib
 ng lint my-lib
 
-</docs-code>
+```
 
 Observa que el builder configurado para el proyecto es diferente del builder predeterminado para proyectos de aplicación.
 Este builder, entre otras cosas, asegura que la librería siempre se construya con el [compilador AOT](tools/cli/aot-compiler).
@@ -81,30 +81,29 @@ Tu librería debería proporcionar documentación \(típicamente un archivo READ
 Para hacer tu solución reutilizable, necesitas ajustarla para que no dependa de código específico de la aplicación.
 Aquí hay algunas cosas a considerar al migrar funcionalidad de aplicación a una librería.
 
-* Las declaraciones como componentes y pipes deberían diseñarse como sin estado, lo que significa que no dependen ni alteran variables externas.
-    Si dependes del estado, necesitas evaluar cada caso y decidir si es estado de aplicación o estado que la librería gestionaría.
+- Las declaraciones como componentes y pipes deberían diseñarse como sin estado, lo que significa que no dependen ni alteran variables externas.
+  Si dependes del estado, necesitas evaluar cada caso y decidir si es estado de aplicación o estado que la librería gestionaría.
 
-* Cualquier observable al que los componentes se suscriban internamente debería limpiarse y eliminarse durante el ciclo de vida de esos componentes
-* Los componentes deberían exponer sus interacciones a través de entradas para proporcionar contexto, y salidas para comunicar eventos a otros componentes
+- Cualquier observable al que los componentes se suscriban internamente debería limpiarse y eliminarse durante el ciclo de vida de esos componentes
+- Los componentes deberían exponer sus interacciones a través de entradas para proporcionar contexto, y salidas para comunicar eventos a otros componentes
 
-* Verifica todas las dependencias internas.
-  * Para clases personalizadas o interfaces usadas en componentes o servicios, verifica si dependen de clases o interfaces adicionales que también necesitan ser migradas
-  * De manera similar, si tu código de librería depende de un servicio, ese servicio necesita ser migrado
-  * Si tu código de librería o sus plantillas dependen de otras librerías \(como Angular Material, por ejemplo\), debes configurar tu librería con esas dependencias
+- Verifica todas las dependencias internas.
+  - Para clases personalizadas o interfaces usadas en componentes o servicios, verifica si dependen de clases o interfaces adicionales que también necesitan ser migradas
+  - De manera similar, si tu código de librería depende de un servicio, ese servicio necesita ser migrado
+  - Si tu código de librería o sus plantillas dependen de otras librerías \(como Angular Material, por ejemplo\), debes configurar tu librería con esas dependencias
 
-* Considera cómo proporcionas servicios a las aplicaciones cliente.
+- Considera cómo proporcionas servicios a las aplicaciones cliente.
+  - Los servicios deberían declarar sus propios proveedores, en lugar de declarar proveedores en el NgModule o un componente.
+    Declarar un proveedor hace que ese servicio sea _tree-shakable_.
+    Esta práctica permite que el compilador deje el servicio fuera del bundle si nunca se inyecta en la aplicación que importa la librería.
+    Para más información sobre esto, consulta [Proveedores tree-shakable](guide/di/lightweight-injection-tokens).
 
-  * Los servicios deberían declarar sus propios proveedores, en lugar de declarar proveedores en el NgModule o un componente.
-        Declarar un proveedor hace que ese servicio sea *tree-shakable*.
-        Esta práctica permite que el compilador deje el servicio fuera del bundle si nunca se inyecta en la aplicación que importa la librería.
-        Para más información sobre esto, consulta [Proveedores tree-shakable](guide/di/lightweight-injection-tokens).
-
-  * Si registras proveedores de servicios globales, expone una función proveedor `provideXYZ()`.
-  * Si tu librería proporciona servicios opcionales que podrían no ser usados por todas las aplicaciones cliente, soporta tree-shaking apropiado para ese caso usando el [patrón de diseño de token ligero](guide/di/lightweight-injection-tokens)
+  - Si registras proveedores de servicios globales, expone una función proveedor `provideXYZ()`.
+  - Si tu librería proporciona servicios opcionales que podrían no ser usados por todas las aplicaciones cliente, soporta tree-shaking apropiado para ese caso usando el [patrón de diseño de token ligero](guide/di/lightweight-injection-tokens)
 
 ## Integración con el CLI usando schematics de generación de código
 
-Una librería típicamente incluye *código reutilizable* que define componentes, servicios y otros artefactos de Angular \(pipes, directivas\) que importas en un proyecto.
+Una librería típicamente incluye _código reutilizable_ que define componentes, servicios y otros artefactos de Angular \(pipes, directivas\) que importas en un proyecto.
 Una librería se empaqueta en un paquete npm para publicación y distribución.
 Este paquete también puede incluir schematics que proporcionan instrucciones para generar o transformar código directamente en tu proyecto, de la misma manera que el CLI crea un nuevo componente genérico con `ng generate component`.
 Un schematic que se empaqueta con una librería puede, por ejemplo, proporcionar al Angular CLI la información que necesita para generar un componente que configure y use una característica particular, o conjunto de características, definidas en esa librería.
@@ -112,9 +111,9 @@ Un ejemplo de esto es el [schematic de navegación de Angular Material](https://
 
 Crea e incluye los siguientes tipos de schematics:
 
-* Incluye un schematic de instalación para que `ng add` pueda agregar tu librería a un proyecto
-* Incluye schematics de generación en tu librería para que `ng generate` pueda crear tus artefactos definidos \(componentes, servicios, pruebas\) en un proyecto
-* Incluye un schematic de actualización para que `ng update` pueda actualizar las dependencias de tu librería y proporcionar migraciones para cambios disruptivos en nuevas versiones
+- Incluye un schematic de instalación para que `ng add` pueda agregar tu librería a un proyecto
+- Incluye schematics de generación en tu librería para que `ng generate` pueda crear tus artefactos definidos \(componentes, servicios, pruebas\) en un proyecto
+- Incluye un schematic de actualización para que `ng update` pueda actualizar las dependencias de tu librería y proporcionar migraciones para cambios disruptivos en nuevas versiones
 
 Lo que incluyas en tu librería depende de tu tarea.
 Por ejemplo, podrías definir un schematic para crear un dropdown que esté pre-poblado con datos predefinidos para mostrar cómo agregarlo a una aplicación.
@@ -133,18 +132,19 @@ Para más información, consulta [Visión general de Schematics](tools/cli/schem
 Usa el Angular CLI y el gestor de paquetes npm para construir y publicar tu librería como un paquete npm.
 
 Angular CLI usa una herramienta llamada [ng-packagr](https://github.com/ng-packagr/ng-packagr/blob/master/README.md) para crear paquetes desde tu código compilado que pueden publicarse en npm.
-Consulta [Construyendo librerías con Ivy](tools/libraries/creating-libraries#publishing-libraries) para información sobre los formatos de distribución soportados por `ng-packagr` y orientación sobre cómo elegir el formato correcto para tu librería.
+Consulta [Construyendo librerías con Ivy](tools/libraries/creating-libraries#publicando-librerías) para información sobre los formatos de 
+distribución soportados por `ng-packagr` y orientación sobre cómo elegir el formato correcto para tu librería.
 
 Siempre debes construir librerías para distribución usando la configuración `production`.
 Esto asegura que la salida generada use las optimizaciones apropiadas y el formato de paquete correcto para npm.
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib
 cd dist/my-lib
 npm publish
 
-</docs-code>
+```
 
 ## Gestionando recursos en una librería
 
@@ -152,11 +152,11 @@ En tu librería de Angular, el distribuible puede incluir recursos adicionales c
 Para más información [copia recursos en tu librería como parte de la compilación](https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md) e [incrusta recursos en estilos de componentes](https://github.com/ng-packagr/ng-packagr/blob/master/docs/embed-assets-css.md).
 
 IMPORTANTE: Cuando incluyas recursos adicionales como mixins de Sass o CSS pre-compilado.
-Necesitas agregar estos manualmente a las ["exports"](tools/libraries/angular-package-format#quotexportsquot) condicionales en el `package.json` del punto de entrada principal.
+IMPORTANTE: Necesitas agregar estos manualmente a las ["exports"](tools/libraries/angular-package-format#exports) condicionales en el `package.json` del punto de entrada principal.
 
 `ng-packagr` fusionará las `"exports"` escritas manualmente con las auto-generadas, permitiendo que los autores de librerías configuren subpaths de exportación adicionales, o condiciones personalizadas.
 
-<docs-code language="json">
+```json
 
 "exports": {
   ".": {
@@ -170,7 +170,7 @@ Necesitas agregar estos manualmente a las ["exports"](tools/libraries/angular-pa
   }
 }
 
-</docs-code>
+```
 
 Lo anterior es un extracto del distribuible de [@angular/material](https://unpkg.com/browse/@angular/material/package.json).
 
@@ -186,22 +186,18 @@ No tienes que publicar tu librería en el gestor de paquetes npm para usarla en
 
 Para usar tu propia librería en una aplicación:
 
-* Construye la librería.
-    No puedes usar una librería antes de que se construya.
-
-    <docs-code language="shell">
-
-    ng build my-lib
-
-    </docs-code>
-
-* En tus aplicaciones, importa desde la librería por nombre:
+- Construye la librería.
+  No puedes usar una librería antes de que se construya.
 
-    <docs-code language="typescript">
+```shell
+  ng build my-lib
+```
 
-    import { myExport } from 'my-lib';
+- En tus aplicaciones, importa desde la librería por nombre:
 
-    </docs-code>
+```ts
+  import { myExport } from 'my-lib';
+```
 
 ### Construyendo y reconstruyendo tu librería
 
@@ -217,32 +213,87 @@ El Angular CLI usa las rutas `tsconfig` para decirle al sistema de compilación
 
 Para más información, consulta [Visión general del mapeo de rutas](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping).
 
-Si encuentras que los cambios en tu librería no se reflejan en tu aplicación, tu aplicación probablemente esté usando una construcción antigua de la librería.
-
 Puedes reconstruir tu librería cuando hagas cambios en ella, pero este paso extra lleva tiempo.
-La funcionalidad de *compilaciones incrementales* mejora la experiencia de desarrollo de librerías.
+La funcionalidad de _compilaciones incrementales_ mejora la experiencia de desarrollo de librerías.
 Cada vez que se cambia un archivo, se realiza una compilación parcial que emite los archivos modificados.
 
 Las compilaciones incrementales pueden ejecutarse como un proceso en segundo plano en tu entorno de desarrollo.
 Para aprovechar esta característica, agrega la bandera `--watch` al comando de compilación:
 
-<docs-code language="shell">
+```shell
 
 ng build my-lib --watch
 
-</docs-code>
+```
 
 IMPORTANTE: El comando `build` del CLI usa un builder diferente e invoca una herramienta de compilación diferente para librerías que para aplicaciones.
 
-* El sistema de compilación para aplicaciones, `@angular-devkit/build-angular`, está basado en `webpack`, y está incluido en todos los nuevos proyectos de Angular CLI
-* El sistema de compilación para librerías está basado en `ng-packagr`.
-    Solo se agrega a tus dependencias cuando agregas una librería usando `ng generate library my-lib`.
+- El sistema de compilación para aplicaciones, `@angular-devkit/build-angular`, está basado en `webpack`, y está incluido en todos los nuevos proyectos de Angular CLI
+- El sistema de compilación para librerías está basado en `ng-packagr`.
+  Solo se agrega a tus dependencias cuando agregas una librería usando `ng generate library my-lib`.
 
 Los dos sistemas de compilación soportan cosas diferentes, e incluso donde soportan las mismas cosas, hacen esas cosas de manera diferente.
 Esto significa que el código fuente TypeScript puede resultar en código JavaScript diferente en una librería construida que en una aplicación construida.
 
-Por esta razón, una aplicación que depende de una librería debería usar solo mapeos de rutas de TypeScript que apunten a la *librería construida*.
-Los mapeos de rutas de TypeScript *no* deberían apuntar a los archivos `.ts` fuente de la librería.
+Por esta razón, una aplicación que depende de una librería debería usar solo mapeos de rutas de TypeScript que apunten a la _librería construida_.
+Los mapeos de rutas de TypeScript _no_ deberían apuntar a los archivos `.ts` fuente de la librería.
+
+### Enlazando librerías para desarrollo local
+
+Esta sección explica cómo usar la característica de enlace local de tu gestor de paquetes
+(como [`npm link`](https://pnpm.io/cli/link) o [`pnpm link`](https://pnpm.io/cli/link)) para probar una librería Angular independiente con una aplicación externa durante
+el desarrollo local, sin depender de la estructura de workspace monorepo o publicar en el registro NPM.
+
+NOTA: Si tu librería y aplicación están en el mismo workspace de Angular (una configuración monorepo), el flujo de trabajo monorepo estándar maneja el enlace automáticamente y generalmente es más eficiente. Este enfoque de enlace local es mejor cuando:
+
+- Estás desarrollando una librería independiente y necesitas probar cambios con una aplicación externa que la consume.
+- Estás probando cambios de librería en una aplicación que la consume fuera del workspace monorepo.
+
+#### Configurando la aplicación que consume
+
+Para usar librerías enlazadas, necesitas configurar el archivo `angular.json` de tu aplicación con las siguientes configuraciones:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "preserveSymlinks": true
+          },
+          "configurations": {
+            "development": {
+              "sourceMap": {
+                "scripts": true,
+                "styles": true,
+                "vendor": true
+              }
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "prebundle": {
+              "exclude": [
+                "my-lib"
+              ]
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Opciones de configuración explicadas:**
+
+- `preserveSymlinks: true`: Instruye al sistema de compilación a seguir los enlaces simbólicos creados por el comando de enlace de tu gestor de paquetes en lugar de resolver a la ubicación original del enlace simbólico. Esto es esencial para evitar múltiples copias de los paquetes de nodos dependientes.
+- `sourceMap.vendor`: Habilitar mapas de código fuente de vendor (especialmente `vendor: true`) para facilitar la depuración del código de librería enlazada.
+- `prebundle.exclude`: Por defecto, el Angular CLI puede pre-empaquetar todas las dependencias de nodos. Excluir tu librería asegura que el código fuente enlazado sea observado y reconstruido correctamente cuando ocurran cambios.
 
 ## Publicando librerías
 
@@ -251,7 +302,7 @@ Hay dos formatos de distribución para usar al publicar una librería:
 | Formatos de distribución     | Detalles |
 |:---                          |:---     |
 | Partial-Ivy \(recomendado\) | Contiene código portable que puede ser consumido por aplicaciones Ivy construidas con cualquier versión de Angular desde v12 en adelante. |
-| Full-Ivy                    | Contiene instrucciones privadas de Angular Ivy, que no están garantizadas para funcionar en diferentes versiones de Angular. Este formato requiere que la librería y la aplicación sean construidas con la *misma* versión exacta de Angular. Este formato es útil para entornos donde todo el código de librería y aplicación se construye directamente desde el código fuente. |
+| Full-Ivy                    | Contiene instrucciones privadas de Angular Ivy, que no están garantizadas para funcionar en diferentes versiones de Angular. Este formato requiere que la librería y la aplicación sean construidas con la _misma_ versión exacta de Angular. Este formato es útil para entornos donde todo el código de librería y aplicación se construye directamente desde el código fuente. |
 
 Para publicar en npm usa el formato partial-Ivy ya que es estable entre versiones de parche de Angular.
 
diff --git a/adev-es/src/content/tools/libraries/overview.en.md b/adev-es/src/content/tools/libraries/overview.en.md
index 99be388..9a0dfce 100644
--- a/adev-es/src/content/tools/libraries/overview.en.md
+++ b/adev-es/src/content/tools/libraries/overview.en.md
@@ -2,7 +2,7 @@
 
 Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry.
 Developers can create general solutions for particular domains that can be adapted for re-use in different applications.
-Such a solution can be built as Angular *libraries* and these libraries can be published and shared as *npm packages*.
+Such a solution can be built as Angular _libraries_ and these libraries can be published and shared as _npm packages_.
 
 An Angular library is an Angular project that differs from an application in that it cannot run on its own.
 A library must be imported and used in an application.
diff --git a/adev-es/src/content/tools/libraries/overview.md b/adev-es/src/content/tools/libraries/overview.md
index c865ba1..4781140 100644
--- a/adev-es/src/content/tools/libraries/overview.md
+++ b/adev-es/src/content/tools/libraries/overview.md
@@ -2,7 +2,7 @@
 
 Muchas aplicaciones necesitan resolver los mismos problemas generales, como presentar una interfaz de usuario unificada, presentar datos y permitir la entrada de datos.
 Los desarrolladores pueden crear soluciones generales para dominios particulares que pueden ser adaptadas para reutilización en diferentes aplicaciones.
-Tales soluciones pueden construirse como *librerías* de Angular y estas librerías pueden publicarse y compartirse como *paquetes npm*.
+Tales soluciones pueden construirse como _librerías_ de Angular y estas librerías pueden publicarse y compartirse como _paquetes npm_.
 
 Una librería de Angular es un proyecto de Angular que difiere de una aplicación en que no puede ejecutarse por sí sola.
 Una librería debe importarse y usarse en una aplicación.
diff --git a/adev-es/src/content/tools/libraries/using-libraries.en.md b/adev-es/src/content/tools/libraries/using-libraries.en.md
index 777add5..b1969d3 100644
--- a/adev-es/src/content/tools/libraries/using-libraries.en.md
+++ b/adev-es/src/content/tools/libraries/using-libraries.en.md
@@ -23,12 +23,12 @@ If the package of your library does not include typings and your IDE complains,
 
 For example, suppose you have a library named `d3`:
 
-<docs-code language="shell">
+```shell
 
 npm install d3 --save
 npm install @types/d3 --save-dev
 
-</docs-code>
+```
 
 Types defined in a `@types/` package for a library installed into the workspace are automatically added to the TypeScript configuration for the project that uses that library.
 TypeScript looks for types in the `node_modules/@types` directory by default, so you do not have to add each type package individually.
@@ -37,32 +37,30 @@ If a library does not have typings available at `@types/`, you may use it by man
 To do this:
 
 1. Create a `typings.d.ts` file in your `src/` directory.
-    This file is automatically included as global type definition.
+   This file is automatically included as global type definition.
 
 1. Add the following code in `src/typings.d.ts`:
 
-    <docs-code language="typescript">
-
-    declare module 'host' {
-      export interface Host {
-        protocol?: string;
-        hostname?: string;
-        pathname?: string;
-      }
-      export function parse(url: string, queryString?: string): Host;
-    }
+```ts
+declare module 'host' {
+  export interface Host {
+    protocol?: string;
+    hostname?: string;
+    pathname?: string;
+  }
+  export function parse(url: string, queryString?: string): Host;
+}
 
-    </docs-code>
+```
 
 1. In the component or file that uses the library, add the following code:
 
-    <docs-code language="typescript">
+```ts
+import * as host from 'host';
+const parsedUrl = host.parse('https://angular.dev');
+console.log(parsedUrl.hostname);
 
-    import * as host from 'host';
-    const parsedUrl = host.parse('https://angular.dev');
-    console.log(parsedUrl.hostname);
-
-    </docs-code>
+```
 
 Define more typings as needed.
 
@@ -87,36 +85,33 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 
 1. Install the library and the associated dependencies using the npm package manager:
 
-    <docs-code language="shell">
-
-    npm install jquery --save
-    npm install popper.js --save
-    npm install bootstrap --save
+```shell
+npm install jquery --save
+npm install popper.js --save
+npm install bootstrap --save
 
-    </docs-code>
+```
 
 1. In the `angular.json` configuration file, add the associated script files to the `scripts` array:
 
-    <docs-code language="json">
+```json
+"scripts": [
+  "node_modules/jquery/dist/jquery.slim.js",
+  "node_modules/popper.js/dist/umd/popper.js",
+  "node_modules/bootstrap/dist/js/bootstrap.js"
+],
 
-    "scripts": [
-      "node_modules/jquery/dist/jquery.slim.js",
-      "node_modules/popper.js/dist/umd/popper.js",
-      "node_modules/bootstrap/dist/js/bootstrap.js"
-    ],
-
-    </docs-code>
+```
 
 1. Add the `bootstrap.css` CSS file to the `styles` array:
 
-    <docs-code language="css">
-
-    "styles": [
-      "node_modules/bootstrap/dist/css/bootstrap.css",
-      "src/styles.css"
-    ],
+```json
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.css",
+  "src/styles.css"
+],
 
-    </docs-code>
+```
 
 1. Run or restart the `ng serve` Angular CLI command to see Bootstrap 4 work in your application.
 
@@ -125,11 +120,11 @@ For example, to use the [Bootstrap 4][GetbootstrapDocs40GettingStartedIntroducti
 After you import a library using the "scripts" array, do **not** import it using an import statement in your TypeScript code.
 The following code snippet is an example import statement.
 
-<docs-code language="typescript">
+```ts
 
 import * as $ from 'jquery';
 
-</docs-code>
+```
 
 If you import it using import statements, you have two different copies of the library: one imported as a global library, and one imported as a module.
 This is especially bad for libraries with plugins, like JQuery, because each copy includes different plugins.
@@ -143,53 +138,45 @@ If the global library you need to use does not have global typings, you can decl
 
 For example:
 
-<docs-code language="typescript">
+```ts
 
 declare var libraryName: any;
 
-</docs-code>
+```
 
 Some scripts extend other libraries; for instance with JQuery plugins:
 
-<docs-code language="typescript">
+```ts
 
 $('.test').myPlugin();
 
-</docs-code>
+```
 
 In this case, the installed `@types/jquery` does not include `myPlugin`, so you need to add an interface in `src/typings.d.ts`.
 For example:
 
-<docs-code language="typescript">
+```ts
 
 interface JQuery {
   myPlugin(options?: any): any;
 }
 
-</docs-code>
+```
 
 If you do not add the interface for the script-defined extension, your IDE shows an error:
 
-<docs-code language="text">
+```text
 
 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery'
 
-</docs-code>
-
-[CliUpdate]: cli/update "ng update | CLI |Angular"
-
-[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
-
-[Resources]: resources "Explore Angular Resources | Angular"
-
-[AngularMaterialMain]: https://material.angular.dev "Angular Material | Angular"
-
-[AngularUpdateMain]: https://angular.dev/update-guide "Angular Update Guide | Angular"
-
-[GetbootstrapDocs40GettingStartedIntroduction]: https://getbootstrap.com/docs/4.0/getting-started/introduction "Introduction | Bootstrap"
-
-[NpmjsMain]: https://www.npmjs.com "npm"
-
-[YarnpkgMain]: https://yarnpkg.com " Yarn"
+```
+
+[CliUpdate]: cli/update 'ng update | CLI |Angular'
+[GuideNpmPackages]: reference/configs/npm-packages 'Workspace npm dependencies | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
+[Resources]: resources 'Explore Angular Resources | Angular'
+[AngularMaterialMain]: https://material.angular.dev 'Angular Material | Angular'
+[AngularUpdateMain]: https://angular.dev/update-guide 'Angular Update Guide | Angular'
+[GetbootstrapDocs40GettingStartedIntroduction]: https://getbootstrap.com/docs/4.0/getting-started/introduction 'Introduction | Bootstrap'
+[NpmjsMain]: https://www.npmjs.com 'npm'
+[YarnpkgMain]: https://yarnpkg.com ' Yarn'
diff --git a/adev-es/src/content/tools/libraries/using-libraries.md b/adev-es/src/content/tools/libraries/using-libraries.md
index 7678cd0..eaf2e1a 100644
--- a/adev-es/src/content/tools/libraries/using-libraries.md
+++ b/adev-es/src/content/tools/libraries/using-libraries.md
@@ -23,12 +23,12 @@ Si el paquete de tu librería no incluye tipados y tu IDE se queja, es posible q
 
 Por ejemplo, supón que tienes una librería llamada `d3`:
 
-<docs-code language="shell">
+```shell
 
 npm install d3 --save
 npm install @types/d3 --save-dev
 
-</docs-code>
+```
 
 Los tipos definidos en un paquete `@types/` para una librería instalada en el espacio de trabajo se agregan automáticamente a la configuración de TypeScript para el proyecto que usa esa librería.
 TypeScript busca tipos en el directorio `node_modules/@types` por defecto, así que no tienes que agregar cada paquete de tipos individualmente.
@@ -41,28 +41,26 @@ Para hacer esto:
 
 1. Agrega el siguiente código en `src/typings.d.ts`:
 
-    <docs-code language="typescript">
-
-    declare module 'host' {
-      export interface Host {
-        protocol?: string;
-        hostname?: string;
-        pathname?: string;
-      }
-      export function parse(url: string, queryString?: string): Host;
-    }
+```ts
+declare module 'host' {
+  export interface Host {
+    protocol?: string;
+    hostname?: string;
+    pathname?: string;
+  }
+  export function parse(url: string, queryString?: string): Host;
+}
 
-    </docs-code>
+```
 
 1. En el componente o archivo que usa la librería, agrega el siguiente código:
 
-    <docs-code language="typescript">
+```ts
+import * as host from 'host';
+const parsedUrl = host.parse('https://angular.dev');
+console.log(parsedUrl.hostname);
 
-    import * as host from 'host';
-    const parsedUrl = host.parse('https://angular.dev');
-    console.log(parsedUrl.hostname);
-
-    </docs-code>
+```
 
 Define más tipados según sea necesario.
 
@@ -87,36 +85,33 @@ Por ejemplo, para usar la librería [Bootstrap 4][GetbootstrapDocs40GettingStart
 
 1. Instala la librería y las dependencias asociadas usando el gestor de paquetes npm:
 
-    <docs-code language="shell">
-
-    npm install jquery --save
-    npm install popper.js --save
-    npm install bootstrap --save
+```shell
+  npm install jquery --save
+  npm install popper.js --save
+  npm install bootstrap --save
 
-    </docs-code>
+```
 
 1. En el archivo de configuración `angular.json`, agrega los archivos de script asociados al array `scripts`:
 
-    <docs-code language="json">
+```json
+"scripts": [
+  "node_modules/jquery/dist/jquery.slim.js",
+  "node_modules/popper.js/dist/umd/popper.js",
+  "node_modules/bootstrap/dist/js/bootstrap.js"
+],
 
-    "scripts": [
-      "node_modules/jquery/dist/jquery.slim.js",
-      "node_modules/popper.js/dist/umd/popper.js",
-      "node_modules/bootstrap/dist/js/bootstrap.js"
-    ],
-
-    </docs-code>
+```
 
 1. Agrega el archivo CSS `bootstrap.css` al array `styles`:
 
-    <docs-code language="css">
-
-    "styles": [
-      "node_modules/bootstrap/dist/css/bootstrap.css",
-      "src/styles.css"
-    ],
+```json
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.css",
+  "src/styles.css"
+],
 
-    </docs-code>
+```
 
 1. Ejecuta o reinicia el comando `ng serve` de Angular CLI para ver Bootstrap 4 funcionar en tu aplicación.
 
@@ -125,11 +120,11 @@ Por ejemplo, para usar la librería [Bootstrap 4][GetbootstrapDocs40GettingStart
 Después de importar una librería usando el array "scripts", **no** la importes usando una declaración de importación en tu código TypeScript.
 El siguiente fragmento de código es un ejemplo de declaración de importación.
 
-<docs-code language="typescript">
+```ts
 
 import * as $ from 'jquery';
 
-</docs-code>
+```
 
 Si la importas usando declaraciones de importación, tienes dos copias diferentes de la librería: una importada como librería global, y una importada como módulo.
 Esto es especialmente malo para librerías con plugins, como JQuery, porque cada copia incluye diferentes plugins.
@@ -143,53 +138,45 @@ Si la librería global que necesitas usar no tiene tipados globales, puedes decl
 
 Por ejemplo:
 
-<docs-code language="typescript">
+```ts
 
 declare var libraryName: any;
 
-</docs-code>
+```
 
 Algunos scripts extienden otras librerías; por ejemplo con plugins de JQuery:
 
-<docs-code language="typescript">
+```ts
 
 $('.test').myPlugin();
 
-</docs-code>
+```
 
 En este caso, el `@types/jquery` instalado no incluye `myPlugin`, así que necesitas agregar una interfaz en `src/typings.d.ts`.
 Por ejemplo:
 
-<docs-code language="typescript">
+```ts
 
 interface JQuery {
   myPlugin(options?: any): any;
 }
 
-</docs-code>
+```
 
 Si no agregas la interfaz para la extensión definida por el script, tu IDE muestra un error:
 
-<docs-code language="text">
+```text
 
 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery'
 
-</docs-code>
-
-[CliUpdate]: cli/update "ng update | CLI |Angular"
-
-[GuideNpmPackages]: reference/configs/npm-packages "Workspace npm dependencies | Angular"
-
-[GuideWorkspaceConfig]: reference/configs/workspace-config "Angular workspace configuration | Angular"
-
-[Resources]: resources "Explore Angular Resources | Angular"
-
-[AngularMaterialMain]: https://material.angular.dev "Angular Material | Angular"
-
-[AngularUpdateMain]: https://angular.dev/update-guide "Angular Update Guide | Angular"
-
-[GetbootstrapDocs40GettingStartedIntroduction]: https://getbootstrap.com/docs/4.0/getting-started/introduction "Introduction | Bootstrap"
-
-[NpmjsMain]: https://www.npmjs.com "npm"
-
-[YarnpkgMain]: https://yarnpkg.com " Yarn"
+```
+
+[CliUpdate]: cli/update 'ng update | CLI |Angular'
+[GuideNpmPackages]: reference/configs/npm-packages 'Workspace npm dependencies | Angular'
+[GuideWorkspaceConfig]: reference/configs/workspace-config 'Angular workspace configuration | Angular'
+[Resources]: resources 'Explore Angular Resources | Angular'
+[AngularMaterialMain]: https://material.angular.dev 'Angular Material | Angular'
+[AngularUpdateMain]: https://angular.dev/update-guide 'Angular Update Guide | Angular'
+[GetbootstrapDocs40GettingStartedIntroduction]: https://getbootstrap.com/docs/4.0/getting-started/introduction 'Introduction | Bootstrap'
+[NpmjsMain]: https://www.npmjs.com 'npm'
+[YarnpkgMain]: https://yarnpkg.com ' Yarn'
diff --git a/adev-es/src/content/tutorials/README.md b/adev-es/src/content/tutorials/README.md
index 1a252bf..af5d77a 100644
--- a/adev-es/src/content/tutorials/README.md
+++ b/adev-es/src/content/tutorials/README.md
@@ -93,16 +93,16 @@ The homepage contains the source code for the homepage playground. It should not
 
 See [`src/content/tutorials/homepage`](/src/content/tutorials/homepage)
 
-## Update dependencies 
+## Update dependencies
 
-To update the dependencies  of all tutorials you can run the following script
+To update the dependencies of all tutorials you can run the following script
 
-```bash 
+```bash
 rm ./adev/src/content/tutorials/homepage/package-lock.json  ./adev/src/content/tutorials/first-app/common/package-lock.json ./adev/src/content/tutorials/learn-angular/common/package-lock.json ./adev/src/content/tutorials/playground/common/package-lock.json ./adev/src/content/tutorials/deferrable-views/common/package-lock.json
 
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/homepage
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/first-app/common
-npm i --package-lock-only --prefix ./adev/src/content/tutorials/learn-angular/common               
+npm i --package-lock-only --prefix ./adev/src/content/tutorials/learn-angular/common
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/playground/common
 npm i --package-lock-only --prefix ./adev/src/content/tutorials/deferrable-views/common
-```
\ No newline at end of file
+```
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
index 89e7690..97abbd3 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
@@ -1,7 +1,7 @@
 # What are deferrable views?
 
 A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
-Angular's *deferrable views*, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
+Angular's _deferrable views_, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
 
 In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
 
@@ -25,14 +25,13 @@ In your browser's developer console, you can see that the `article-comments-comp
 <docs-code language="markdown">
 Initial chunk files | Names                      |  Raw size
 chunk-NNSQHFIE.js   | -                          | 769.00 kB | 
-main.js             | main                       | 229.25 kB | 
+main.js             | main                       | 229.25 kB |
 
-Lazy chunk files    | Names                      |  Raw size
-chunk-T5UYXUSI.js   | article-comments-component |   1.84 kB |
+Lazy chunk files | Names | Raw size
+chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
 </docs-code>
 
 </docs-step>
 </docs-workflow>
 
-
 Great work! You’ve learned the basics of deferrable views.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
index 0dd4d85..9d32e42 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
@@ -65,12 +65,12 @@ Next add a `@loading` block to the component template.
 
 The `@loading` block accepts two optional parameters:
 
-* `minimum`: the amount of time that this block should be shown
-* `after`: the amount of time to wait after loading begins before showing the loading template
+- `minimum`: the amount of time that this block should be shown
+- `after`: the amount of time to wait after loading begins before showing the loading template
 
 Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
 
-Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms  to the @loading block.
+Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
 
 <docs-code language="angular-html" highlight="[5,6,7]">
 @defer {
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
index a0cfc83..4308728 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
@@ -29,8 +29,8 @@ If the `when` condition evaluates to `false`, the `defer` block is not reverted
 
 You can define multiple event triggers at once, these triggers will be evaluated as OR conditions.
 
-* Ex: `@defer (on viewport; on timer(2s))`
-* Ex: `@defer (on viewport; when customizedCondition)`
+- Ex: `@defer (on viewport; on timer(2s))`
+- Ex: `@defer (on viewport; when customizedCondition)`
 
 In this activity, you'll learn how to use triggers to specify the condition to load the deferrable views.
 
@@ -63,8 +63,9 @@ Next, update the template to include a button with the label "Show all comments"
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover) {
-  <article-comments />
+<article-comments />
 } @placeholder (minimum 1s) {
+
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -84,8 +85,9 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
 <button type="button" #showComments>Show all comments</button>
 
 @defer (on hover; on interaction(showComments)) {
-  <article-comments />
+<article-comments />
 } @placeholder (minimum 1s) {
+
   <p>Placeholder for comments</p>
 } @loading (minimum 1s; after 500ms) {
   <p>Loading comments...</p>
@@ -95,8 +97,9 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
 </docs-code>
 
 With these changes, the page will wait for one of the following conditions before rendering the comments section:
-* User hovers the comments section’s placeholder
-* User clicks on the “Show all comments" button
+
+- User hovers the comments section’s placeholder
+- User clicks on the “Show all comments" button
 
 You can reload the page to try out different triggers to render the comments section.
 </docs-step>
diff --git a/adev-es/src/content/tutorials/first-app/intro/README.md b/adev-es/src/content/tutorials/first-app/intro/README.md
index 8413c26..1b6d8c9 100644
--- a/adev-es/src/content/tutorials/first-app/intro/README.md
+++ b/adev-es/src/content/tutorials/first-app/intro/README.md
@@ -49,7 +49,7 @@ From a **Terminal** window:
 
 1. Run the following command: `node --version`
 1. Confirm that the version number displayed meets the requirements.
-</docs-step>
+   </docs-step>
 
 <docs-step title="Install the correct version of `node.js` for Angular">
 If you do not have a version of `node.js` installed, please follow the [directions for installation on nodejs.org](https://nodejs.org/en/download/)
@@ -67,7 +67,7 @@ You are free to use any tool you prefer to build apps with Angular. We recommend
 1. [Visual Studio Code](https://code.visualstudio.com/)
 2. As an optional, but recommended step you can further improve your developer experience by installing the [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
 3. [WebStorm](https://www.jetbrains.com/webstorm/)
-</docs-step>
+   </docs-step>
 
 <docs-step title="Optional: set-up your AI powered IDE">
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md
index a1a8c61..33cd19a 100644
--- a/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/01-hello-world/README.md
@@ -8,7 +8,7 @@ This first lesson serves as the starting point from which each lesson in this tu
 
 The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app.
 
-NOTE: If you are working with the embedded editor, skip to [step three](#create-%60hello-world%60).
+NOTE: If you are working with the embedded editor, skip to [step four](#create-hello-world).
 When working in the browser playground, you do not need to `ng serve` to run the app. Other commands like `ng generate` can be done in the console window to your right.
 
 <docs-workflow>
@@ -28,22 +28,22 @@ In the **Terminal** pane of your IDE:
 1. In your project directory, navigate to the `first-app` directory.
 1. Run this command to install the dependencies needed to run the app.
 
-    <docs-code language="shell">
-    npm install
-    </docs-code>
+   ```shell
+   npm install
+   ```
 
 1. Run this command to build and serve the default app.
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+   ```shell
+   ng serve
+   ```
 
-    The app should build without errors.
+   The app should build without errors.
 
 1. In a web browser on your development computer, open `http://localhost:4200`.
 1. Confirm that the default web site appears in the browser.
 1. You can leave `ng serve` running as you complete the next steps.
-</docs-step>
+   </docs-step>
 
 <docs-step title="Review the files in the project">
 In this step, you get to know the files that make up a default Angular app.
@@ -52,27 +52,29 @@ In the **Explorer** pane of your IDE:
 
 1. In your project directory, navigate to the `first-app` directory.
 1. Open the `src` directory to see these files.
-    1. In the file explorer, find the Angular app files (`/src`).
-        1. `index.html` is the app's top level HTML template.
-        1. `styles.css` is the app's top level style sheet.
-        1. `main.ts` is where the app starts running.
-        1. `favicon.ico` is the app's icon, just as you would find in any web site.
-    1. In the file explorer, find the Angular app's component files (`/app`).
-        1. `app.ts` is the source file that describes the `app-root` component.
-            This is the top-level Angular component in the app. A component is the basic building block of an Angular application.
-            The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
-
-            In this app, the styles are in a separate file while the component's code and HTML template are in this file.
-        1. `app.css` is the style sheet for this component.
-        1. New components are added to this directory.
-    1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
-    1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
-        1. `.angular` has files required to build the Angular app.
-        1. `.e2e` has files used to test the app.
-        1. `.node_modules` has the node.js packages that the app uses.
-        1. `angular.json` describes the Angular app to the app building tools.
-        1. `package.json` is used by `npm` (the node package manager) to run the finished app.
-        1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.
+   1. In the file explorer, find the Angular app files (`/src`).
+      1. `index.html` is the app's top level HTML template.
+      1. `styles.css` is the app's top level style sheet.
+      1. `main.ts` is where the app starts running.
+      1. `favicon.ico` is the app's icon, just as you would find in any web site.
+   1. In the file explorer, find the Angular app's component files (`/app`).
+      1. `app.ts` is the source file that describes the `app-root` component.
+         This is the top-level Angular component in the app. A component is the basic building block of an Angular application.
+         The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.
+
+         In this app, the styles are in a separate file while the component's code and HTML template are in this file.
+
+      1. `app.css` is the style sheet for this component.
+      1. New components are added to this directory.
+
+   1. In the file explorer, find the image directory (`/assets`) that contains images used by the app.
+   1. In the file explorer, find the files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.
+      1. `.angular` has files required to build the Angular app.
+      1. `.e2e` has files used to test the app.
+      1. `.node_modules` has the node.js packages that the app uses.
+      1. `angular.json` describes the Angular app to the app building tools.
+      1. `package.json` is used by `npm` (the node package manager) to run the finished app.
+      1. `tsconfig.*` are the files that describe the app's configuration to the TypeScript compiler.
 
 After you have reviewed the files that make up an Angular app project, continue to the next step.
 </docs-step>
@@ -83,33 +85,33 @@ In this step, you update the Angular project files to change the displayed conte
 In your IDE:
 
 1. Open `first-app/src/index.html`.
-    NOTE: This step and the next are only for your local environment!
+   NOTE: This step and the next are only for your local environment!
 
 1. In `index.html`, replace the `<title>` element with this code to update the title of the app.
 
-    <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/>
+   <docs-code header="Replace in src/index.html" path="adev/src/content/tutorials/first-app/steps/02-Home/src/index.html" visibleLines="[5]"/>
 
-    Then, save the changes you just made to `index.html`.
+   Then, save the changes you just made to `index.html`.
 
-1. Next, open  `first-app/src/app/app.ts`.
+1. Next, open `first-app/src/app/app.ts`.
 1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.
 
-    <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
+   <docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[6,8]"/>
 
 1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.
 
-    <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/>
+   <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/02-Home/src/app/app.ts" visibleLines="[11,13]"/>
 
-    Then, save the changes you made to `app.ts`.
+   Then, save the changes you made to `app.ts`.
 
 1. If you stopped the `ng serve` command from step 1, in the **Terminal** window of your IDE, run `ng serve` again.
-1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays *Homes* in the title and *Hello world* in the body of your app:
-    <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
-</docs-step>
+1. Open your browser and navigate to `localhost:4200` and confirm that the app builds without error and displays _Homes_ in the title and _Hello world_ in the body of your app:
+   <img alt="browser frame of page displaying the text 'Hello World'" src="assets/images/tutorials/first-app/homes-app-lesson-01-browser.png">
+   </docs-step>
 
 </docs-workflow>
 
-SUMMARY: In this lesson, you updated a default Angular app to display *Hello world*.
+SUMMARY: In this lesson, you updated a default Angular app to display _Hello world_.
 In the process, you learned about the `ng serve` command to serve your app locally for testing.
 
 For more information about the topics covered in this lesson, visit:
diff --git a/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md
index ab4d311..9af6c5e 100644
--- a/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/02-Home/README.md
@@ -17,11 +17,11 @@ In Angular, components can contain other components. An app's functions and appe
 In Angular, components have metadata that define its properties.
 When you create your `Home`, you use these properties:
 
-* `selector`: to describe how Angular refers to the component in templates.
-* `standalone`: to describe whether the component requires a `NgModule`.
-* `imports`: to describe the component's dependencies.
-* `template`: to describe the component's HTML markup and layout.
-* `styleUrls`: to list the URLs of the CSS files that the component uses in an array.
+- `selector`: to describe how Angular refers to the component in templates.
+- `standalone`: to describe whether the component requires a `NgModule`.
+- `imports`: to describe the component's dependencies.
+- `template`: to describe the component's HTML markup and layout.
+- `styleUrls`: to list the URLs of the CSS files that the component uses in an array.
 
 <docs-pill-row>
   <docs-pill href="api/core/Component" title="Learn more about Components"/>
@@ -37,26 +37,26 @@ In the **Terminal** pane of your IDE:
 1. In your project directory, navigate to the `first-app` directory.
 1. Run this command to create a new `Home`
 
-    <docs-code language="shell">
-    ng generate component home
-    </docs-code>
+   ```shell
+   ng generate component home
+   ```
 
 1. Run this command to build and serve your app.
 
-    NOTE: This step is only for your local environment!
+   NOTE: This step is only for your local environment!
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+   ```shell
+   ng serve
+   ```
 
 1. Open a browser and navigate to `http://localhost:4200` to find the application.
 
 1. Confirm that the app builds without error.
 
-    HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
+   HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
 
 1. Leave `ng serve` running as you complete the next steps.
-</docs-step>
+   </docs-step>
 
 <docs-step title="Add the new component to your app's layout">
 In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout.
@@ -66,23 +66,23 @@ In the **Edit** pane of your IDE:
 1. Open `app.ts` in the editor.
 1. In `app.ts`, import `Home` by adding this line to the file level imports.
 
-    <docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/>
+<docs-code header="Import Home in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[2]"/>
 
 1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`.
 
-    <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/>
+<docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[6]"/>
 
 1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code.
 
-    <docs-code header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/>
+<docs-code language="angular-ts" header="Replace in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts" visibleLines="[7,16]"/>
 
-1. Save your changes to  `app.ts`.
+1. Save your changes to `app.ts`.
 1. If `ng serve` is running, the app should update.
-    If `ng serve` is not running, start it again.
-    *Hello world* in your app should change to *home works!* from the `Home`.
+   If `ng serve` is not running, start it again.
+   _Hello world_ in your app should change to _home works!_ from the `Home`.
 1. Check the running app in the browser and confirm that the app has been updated.
 
-    <img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png">
+<img alt="browser frame of page displaying the text 'home works!'" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png">
 
 </docs-step>
 
@@ -100,20 +100,20 @@ In the **Edit** pane of your IDE:
 1. In the `first-app` directory, open `home.ts` in the editor.
 1. In `home.ts`, in `@Component`, update the `template` property with this code.
 
-    <docs-code header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/>
+<docs-code language="angular-ts" header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/>
 
 1. Next, open `home.css` in the editor and update the content with these styles.
 
-    NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array.
+   NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array.
 
-    <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/>
+   <docs-code header="Replace in src/app/home/home.css" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/>
 
 1. Confirm that the app builds without error.
-    You should find the filter query box and button in your app and they should be styled.
-    Correct any errors before you continue to the next step.
+   You should find the filter query box and button in your app and they should be styled.
+   Correct any errors before you continue to the next step.
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
-    </docs-step>
+<img alt="browser frame of homes-app displaying logo, filter text input box and search button" src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
+</docs-step>
 
 </docs-workflow>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
index 68c52e5..d3c3ba6 100644
--- a/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
@@ -6,7 +6,7 @@ This tutorial lesson demonstrates how to add the `HousingLocation` component to
 
 ## What you'll learn
 
-* Your app has a new component: `HousingLocation` and it displays a message confirming that the component was added to your application.
+- Your app has a new component: `HousingLocation` and it displays a message confirming that the component was added to your application.
 
 <docs-workflow>
 
@@ -19,25 +19,25 @@ In the **Terminal** pane of your IDE:
 
 1. Run this command to create a new `HousingLocation`
 
-    <docs-code language="shell">
-    ng generate component housingLocation
-    </docs-code>
+   ```shell
+   ng generate component housingLocation
+   ```
 
 1. Run this command to build and serve your app.
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+   ```shell
+   ng serve
+   ```
 
-    NOTE: This step is only for your local environment!
+   NOTE: This step is only for your local environment!
 
 1. Open a browser and navigate to `http://localhost:4200` to find the application.
 1. Confirm that the app builds without error.
 
-    HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
+   HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
 
 1. Leave `ng serve` running as you complete the next steps.
-</docs-step>
+   </docs-step>
 
 <docs-step title="Add the new component to your app's layout">
 In this step, you add the new component, `HousingLocation` to your app's `Home`, so that it displays in your app's layout.
@@ -47,15 +47,15 @@ In the **Edit** pane of your IDE:
 1. Open `home.ts` in the editor.
 1. In `home.ts`, import `HousingLocation` by adding this line to the file level imports.
 
-    <docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/>
+<docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/>
 
 1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array.
 
-    <docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/>
+<docs-code  header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/>
 
 1. Now the component is ready for use in the template for the `Home`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.
 
-    <docs-code header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/>
+<docs-code language="angular-ts" header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/>
 
 </docs-step>
 
@@ -64,13 +64,13 @@ In this step, you will copy over the pre-written styles for the `HousingLocation
 
 1. Open `src/app/housing-location/housing-location.css`, and paste the styles below into the file:
 
-    NOTE: In the browser, these can go in `src/app/housing-location/housing-location.ts` in the `styles` array.
+   NOTE: In the browser, these can go in `src/app/housing-location/housing-location.ts` in the `styles` array.
 
-    <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/>
+   <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/>
 
 1. Save your code, return to the browser and confirm that the app builds without error. You should find the message "housing-location works!" rendered to the screen.Correct any errors before you continue to the next step.
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
+<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
 
 </docs-step>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md
index 0c1f6dd..5d9f396 100644
--- a/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/04-interfaces/README.md
@@ -6,8 +6,8 @@ This tutorial lesson demonstrates how to create an interface and include it in a
 
 ## What you'll learn
 
-* Your app has a new interface that it can use as a data type.
-* Your app has an instance of the new interface with sample data.
+- Your app has a new interface that it can use as a data type.
+- Your app has an instance of the new interface with sample data.
 
 ## Conceptual preview of interfaces
 
@@ -29,17 +29,17 @@ In the **Terminal** pane of your IDE:
 1. In your project directory, navigate to the `first-app` directory.
 1. In the `first-app` directory, run this command to create the new interface.
 
-    <docs-code language="shell">
+   ```shell
 
-    ng generate interface housinglocation
+   ng generate interface housinglocation
 
-    </docs-code>
+   ```
 
 1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
 1. In a browser, open `http://localhost:4200` to see your app.
 1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
-</docs-step>
+   Correct any errors before you continue to the next step.
+   </docs-step>
 
 <docs-step title="Add properties to the new interface">
 This step adds the properties to the interface that your app needs to represent a housing location.
@@ -48,7 +48,7 @@ This step adds the properties to the interface that your app needs to represent
 1. In the **Edit** pane of your IDE, open the `src/app/housinglocation.ts` file.
 1. In `housinglocation.ts`, replace the default content with the following code to make your new interface to match this example.
 
-    <docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
+<docs-code header="Update src/app/housinglocation.ts to match this code" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housinglocation.ts" visibleLines="[1,10]" />
 
 1. Save your changes and confirm the app does not display any errors. Correct any errors before you continue to the next step.
 
@@ -66,24 +66,24 @@ There are a few more lessons to complete before that happens.
 1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`.
 1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface.
 
-    <docs-code header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
+<docs-code language="angular-ts" header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
 
 1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.
 
-    <docs-code header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
+<docs-code language="angular-ts" header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
 
 1. Confirm that your `home.ts` file matches this example.
 
-    <docs-code header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
+   <docs-code language="angular-ts" header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
 
-    By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
+   By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
 
 1. Save your changes and confirm the app does not have any errors. Open the browser and confirm that your application still displays the message "housing-location works!"
 
-    <img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
+<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!'" src="assets/images/tutorials/first-app/homes-app-lesson-03-step-2.png">
 
 1. Correct any errors before you continue to the next step.
-</docs-step>
+   </docs-step>
 
 </docs-workflow>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md
index e15c0e1..df1d409 100644
--- a/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/05-inputs/README.md
@@ -39,7 +39,7 @@ You have to invoke the `required` method on `input` to indicate that the parent
 <docs-step title="Pass data to the input">
 Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
 
-<docs-code header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
+<docs-code language="angular-ts" header="Declare the input property for HousingLocation in home.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
 
 </docs-step>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md
index 1a4cf9f..0bf9b0a 100644
--- a/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/06-property-binding/README.md
@@ -6,8 +6,8 @@ This tutorial lesson demonstrates how to add property binding to a template and
 
 ## What you'll learn
 
-* Your app has data bindings in the `Home` template.
-* Your app sends data from the `Home` to the `HousingLocation`.
+- Your app has data bindings in the `Home` template.
+- Your app sends data from the `Home` to the `HousingLocation`.
 
 ## Conceptual preview of Inputs
 
@@ -24,14 +24,15 @@ This step adds property binding to the `<app-housing-location>` tag.
 
 In the code editor:
 
-1. Navigate to `src/app/home/home.ts`
-1. In the template property of the `@Component` decorator, update the code to match the code below:
-    <docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/>
+1.  Navigate to `src/app/home/home.ts`
+1.  In the template property of the `@Component` decorator, update the code to match the code below:
+    <docs-code language="angular-ts" header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/>
 
-    When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.
+        When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.
 
-    The value on the right-hand side is the name of the property from the `Home`.
-</docs-step>
+        The value on the right-hand side is the name of the property from the `Home`.
+
+    </docs-step>
 
 <docs-step title="Confirm the code still works">
 1.  Save your changes and confirm the app does not have any errors.
diff --git a/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
index e9d294a..a1654ec 100644
--- a/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
@@ -27,11 +27,11 @@ In the code editor:
 1.  Navigate to `src/app/housing-location/housing-location.ts`
 1.  In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
 
-<docs-code header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
+<docs-code language="angular-ts"  header="Update HousingLocation template in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
 
-  In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.
+In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.
 
-  You use interpolation to include the values for `name`, `city` and `state` of the `housingLocation` property.
+You use interpolation to include the values for `name`, `city` and `state` of the `housingLocation` property.
 
 </docs-step>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md
index 9ecc63e..0628c9c 100644
--- a/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/08-ngFor/README.md
@@ -8,8 +8,8 @@ NOTE: This video reflects an older syntax, but the main concepts remain valid.
 
 ## What you'll learn
 
-* You will have added a data set to the app
-* Your app will display a list of elements from the new data set using `@for`
+- You will have added a data set to the app
+- Your app will display a list of elements from the new data set using `@for`
 
 ## Conceptual preview of `@for`
 
@@ -27,9 +27,9 @@ In the `Home` there is only a single housing location. In this step, you will ad
 
 1. In `src/app/home/home.ts`, remove the `housingLocation` property from the `Home` class.
 1. Update the `Home` class to have a property called `housingLocationList`. Update your code to match the following code:
-    <docs-code header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
+   <docs-code language="angular-ts"  header="Add housingLocationList property in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="26-131"/>
 
-    IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
+   IMPORTANT: Do not remove the `@Component` decorator, you will update that code in an upcoming step.
 
 </docs-step>
 
@@ -37,17 +37,17 @@ In the `Home` there is only a single housing location. In this step, you will ad
 Now the app has a dataset that you can use to display the entries in the browser using the `@for` block.
 
 1. Update the `<app-housing-location>` tag in the template code to this:
-    <docs-code header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/>
+   <docs-code language="angular-ts"  header="Add @for to Home template in home.ts" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[15,19]"/>
 
-    Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class.
+   Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class.
 
 1. Save all changes.
 
 1. Refresh the browser and confirm that the app now renders a grid of housing locations.
 
-    <section class="lightbox">
-    <img alt="browser frame of homes-app displaying logo, filter text input box, search button and a grid of housing location cards" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png">
-    </section>
+<section class="lightbox">
+<img alt="browser frame of homes-app displaying logo, filter text input box, search button and a grid of housing location cards" src="assets/images/tutorials/first-app/homes-app-lesson-08-step-2.png">
+</section>
 
 </docs-step>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/09-services/README.md b/adev-es/src/content/tutorials/first-app/steps/09-services/README.md
index 5f79162..ed81640 100644
--- a/adev-es/src/content/tutorials/first-app/steps/09-services/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/09-services/README.md
@@ -16,14 +16,14 @@ This tutorial introduces Angular services and dependency injection.
 
 ### Angular services
 
-*Angular services* provide a way for you to separate Angular app data and functions that can be used by multiple components in your app.
-To be used by multiple components, a service must be made *injectable*.
+_Angular services_ provide a way for you to separate Angular app data and functions that can be used by multiple components in your app.
+To be used by multiple components, a service must be made _injectable_.
 Services that are injectable and used by a component become dependencies of that component.
 The component depends on those services and can't function without them.
 
 ### Dependency injection
 
-*Dependency injection* is the mechanism that manages the dependencies of an app's components and the services that other components can use.
+_Dependency injection_ is the mechanism that manages the dependencies of an app's components and the services that other components can use.
 
 <docs-workflow>
 
@@ -35,14 +35,14 @@ In the **Terminal** pane of your IDE:
 1. In your project directory, navigate to the `first-app` directory.
 1. In the `first-app` directory, run this command to create the new service.
 
-    <docs-code language="shell">
-    ng generate service housing --skip-tests
-    </docs-code>
+```shell
+ng generate service housing --skip-tests
+```
 
 1. Run `ng serve` to build the app and serve it to `http://localhost:4200`.
 1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
-</docs-step>
+   Correct any errors before you continue to the next step.
+   </docs-step>
 
 <docs-step title="Add static data to the new service">
 This step adds some sample data to your new service.
@@ -53,21 +53,21 @@ In the **Edit** pane of your IDE:
 
 1. In `src/app/home/home.ts`, from `Home`, copy the `housingLocationList` variable and its array value.
 1. In `src/app/housing.service.ts`:
-    1. Inside the `HousingService` class, paste the variable that you copied from `Home` in the previous step.
-    1. Inside the `HousingService` class, paste these functions after the data you just copied.
-        These functions allow dependencies to access the service's data.
+   1. Inside the `HousingService` class, paste the variable that you copied from `Home` in the previous step.
+   1. Inside the `HousingService` class, paste these functions after the data you just copied.
+      These functions allow dependencies to access the service's data.
 
-        <docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/>
+      <docs-code header="Service functions in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[112,118]"/>
 
-        You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list.
+      You will need these functions in a future lesson. For now, it is enough to understand that these functions return either a specific `HousingLocation` by id or the entire list.
 
-    1. Add a file level import for the `HousingLocation`.
+   1. Add a file level import for the `HousingLocation`.
 
-        <docs-code header="Import HousingLocation type in  src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/>
+   <docs-code header="Import HousingLocation type in  src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/housing.service.ts" visibleLines="[2]"/>
 
 1. Confirm that the app builds without error.
-    Correct any errors before you continue to the next step.
-</docs-step>
+   Correct any errors before you continue to the next step.
+   </docs-step>
 
 <docs-step title="Inject the new service into `Home`">
 This step injects the new service into your app's `Home` so that it can read the app's data from a service.
@@ -77,21 +77,21 @@ In the **Edit** pane of your IDE, in `src/app/home/home.ts`:
 
 1. At the top of `src/app/home/home.ts`, add the `inject` to the items imported from `@angular/core`. This will import the `inject` function into the `Home` class.
 
-    <docs-code header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/>
+<docs-code language="angular-ts" header="Update to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[1]"/>
 
 1. Add a new file level import for the `HousingService`:
 
-    <docs-code header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/>
+<docs-code language="angular-ts" header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[4]"/>
 
 1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
 
 1. In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`.
 
-    <docs-code header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/>
+<docs-code language="angular-ts" header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/>
 
 1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error.
-    Correct any errors before you continue to the next step.
-</docs-step>
+   Correct any errors before you continue to the next step.
+   </docs-step>
 
 </docs-workflow>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md
index a2a2c3f..b0e5efd 100644
--- a/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/10-routing/README.md
@@ -23,37 +23,35 @@ In this lesson, you will enable routing in your application to navigate to the d
 <docs-step title="Create a default details component ">
 1. From the terminal, enter the following command to create the `Details`:
 
-    <docs-code language="shell">
+    ```shell
     ng generate component details
-    </docs-code>
+    ```
 
     This component will represent the details page that provides more information on a given housing location.
+
 </docs-step>
 
 <docs-step title="Add routing to the application">
 1.  In the `src/app` directory, create a file called `routes.ts`. This file is where we will define the routes in the application.
 
-1. In `main.ts`, make the following updates to enable routing in the application:
-    1. Import the routes file and the `provideRouter` function:
-
-        <docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/>
-
-    1. Update the call to `bootstrapApplication` to include the routing configuration:
+2. In `main.ts`, make the following updates to enable routing in the application:
+   1. Import the routes file and the `provideRouter` function:
 
-        <docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
+   <docs-code header="Import routing details in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[7,8]"/>
+   2. Update the call to `bootstrapApplication` to include the routing configuration:
 
-1. In `src/app/app.ts`, update the component to use routing:
-    1. Add a file level import for `RoutingModule`:
+   <docs-code header="Add router configuration in src/main.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/main.ts" visibleLines="[10,17]"/>
 
-        <docs-code header="Import RouterModule in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/>
+3. In `src/app/app.ts`, update the component to use routing:
+   1. Add file level imports for the router directives `RouterOutlet` and `RouterLink`:
 
-    1. Add `RouterModule` to the `@Component` metadata imports
+   <docs-code language="angular-ts" header="Import router directives in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[3]"/>
+   2. Add `RouterOutlet` and `RouterLink` to the `@Component` metadata imports
 
-        <docs-code header="Import RouterModule in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/>
+   <docs-code language="angular-ts" header="Add router directives to component imports in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[6]"/>
+   3. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
 
-    1. In the `template` property, replace the `<app-home></app-home>` tag with the `<router-outlet>` directive and add a link back to the home page. Your code should match this code:
-
-        <docs-code header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/>
+   <docs-code language="angular-ts" header="Add router-outlet in src/app/app.ts" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/app.ts" visibleLines="[7,18]"/>
 
 </docs-step>
 
@@ -61,17 +59,16 @@ In this lesson, you will enable routing in your application to navigate to the d
 In the previous step you removed the reference to the `<app-home>` component in the template. In this step, you will add a new route to that component.
 
 1. In `routes.ts`, perform the following updates to create a route.
-    1. Add a file level imports for the `Home`, `Details` and the `Routes` type that you'll use in the route definitions.
-
-        <docs-code header="Import components and Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/>
+   1. Add a file level imports for the `Home`, `Details` and the `Routes` type that you'll use in the route definitions.
 
-    1. Define a variable called `routeConfig` of type `Routes` and define two  routes for the app:
-        <docs-code header="Add routes to the app" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/>
+   <docs-code header="Import components and Routes" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[1,3]"/>
+   1. Define a variable called `routeConfig` of type `Routes` and define two routes for the app:
+      <docs-code header="Add routes to the app" path="adev/src/content/tutorials/first-app/steps/11-details-page/src/app/routes.ts" visibleLines="[5,18]"/>
 
-        The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `Home` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson.
+   The entries in the `routeConfig` array represent the routes in the application. The first entry navigates to the `Home` whenever the url matches `''`. The second entry uses some special formatting that will be revisited in a future lesson.
 
 1. Save all changes and confirm that the application works in the browser. The application should still display the list of housing locations.
-</docs-step>
+   </docs-step>
 
 </docs-workflow>
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md
index 09b4790..8b92116 100644
--- a/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/11-details-page/README.md
@@ -21,22 +21,23 @@ Route parameters enable you to include dynamic information as a part of your rou
 <docs-step title="Using `routerLink` for dynamic navigation">
 In lesson 10, you added a second route to `src/app/routes.ts` which includes a special segment that identifies the route parameter, `id`:
 
-<docs-code language="javascript">
+```
 'details/:id'
-</docs-code>
+```
 
 In this case, `:id` is dynamic and will change based on how the route is requested by the code.
 
 1. In `src/app/housing-location/housing-location.ts`, add an anchor tag to the `section` element and include the `routerLink` directive:
 
-    <docs-code header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/>
+   <docs-code language="angular-ts" header="Add anchor with a routerLink directive to housing-location.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/housing-location/housing-location.ts" visibleLines="[18]"/>
 
-    The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
+   The `routerLink` directive enables Angular's router to create dynamic links in the application. The value assigned to the `routerLink` is an array with two entries: the static portion of the path and the dynamic data.
+
+   For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`.
 
-    For the `routerLink` to work in the template, add a file level import of `RouterLink` and `RouterOutlet` from '@angular/router', then update the component `imports` array to include both `RouterLink` and `RouterOutlet`.
 1. At this point you can confirm that the routing is working in your app. In the browser, refresh the home page and click the "Learn More" button for a housing location.
 
-    <img alt="details page displaying the text 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png">
+<img alt="details page displaying the text 'details works!'" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-1.png">
 
 </docs-step>
 
@@ -45,32 +46,32 @@ In this step, you will get the route parameter in the `Details`. Currently, the
 
 1. In `src/app/details/details.ts` update the template to import the functions, classes and services that you'll need to use in the `Details`:
 
-    <docs-code header="Update file level imports" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[1,4]"/>
+<docs-code header="Update file level imports" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[1,4]"/>
 
 1. Update the `template` property of the `@Component` decorator to display the value `housingLocationId`:
 
-    <docs-code language="javascript">
-      template: `<p>details works! {{ housingLocationId }}</p>`,
-    </docs-code>
+   ```angular-ts
+     template: `<p>details works! {{ housingLocationId }}</p>`,
+   ```
 
 1. Update the body of the `Details` class with the following code:
 
-    <docs-code language="javascript">
-    export class Details {
-      route: ActivatedRoute = inject(ActivatedRoute);
-      housingLocationId = -1;
-      constructor() {
-        this.housingLocationId = Number(this.route.snapshot.params['id']);
-      }
-    }
-    </docs-code>
+   ```ts
+   export class Details {
+     route: ActivatedRoute = inject(ActivatedRoute);
+     housingLocationId = -1;
+     constructor() {
+       this.housingLocationId = Number(this.route.snapshot.params['id']);
+     }
+   }
+   ```
 
-    This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number.
+   This code gives the `Details` access to the `ActivatedRoute` router feature that enables you to have access to the data about the current route. In the `constructor`, the code converts the `id` parameter acquired from the route from a string to a number.
 
 1. Save all changes.
 
 1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data.
-</docs-step>
+   </docs-step>
 
 <docs-step title="Customize the `Details`">
 Now that routing is working properly in the application this is a great time to update the template of the `Details` to display the specific data represented by the housing location for the route parameter.
@@ -79,40 +80,41 @@ To access the data you will add a call to the `HousingService`.
 
 1. Update the template code to match the following code:
 
-    <docs-code header="Update the Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/>
+   <docs-code language="angular-ts" header="Update the Details template in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[8,29]"/>
 
-    Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash.
+   Notice that the `housingLocation` properties are being accessed with the optional chaining operator `?`. This ensures that if the `housingLocation` value is null or undefined the application doesn't crash.
 
 1. Update the body of the `Details` class to match the following code:
 
-    <docs-code header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/>
+   <docs-code language="angular-ts" header="Update the Details class in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[32,41]"/>
 
-    Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function.
+   Now the component has the code to display the correct information based on the selected housing location. The `constructor` now includes a call to the `HousingService` to pass the route parameter as an argument to the `getHousingLocationById` service function.
 
 1. Copy the following styles into the `src/app/details/details.css` file:
 
-    <docs-code header="Add styles for the Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/>
+   <docs-code header="Add styles for the Details" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.css" visibleLines="[1,71]"/>
 
-    and save your changes
+   and save your changes
 
-1. In `Details` use the just created `details.css` file as the source for the styles: 
-    <docs-code header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/>
+1. In `Details` use the just created `details.css` file as the source for the styles:
+   <docs-code language="angular-ts" header="Update details.ts to use the created css file" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/details/details.ts" visibleLines="[30]"/>
 
 1. In the browser refresh the page and confirm that when you click on the "Learn More" link for a given housing location the details page displays the correct information based on the data for that selected item.
 
-    <img alt="Details page listing home info" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png">
+<img alt="Details page listing home info" src="assets/images/tutorials/first-app/homes-app-lesson-11-step-3.png">
 
 </docs-step>
 
 <docs-step title="Check navigation in the `Home`">
 In a previous lesson you updated the `App` template to include a `routerLink`. Adding that code updated your app to enable navigation back to the `Home` whenever the logo is clicked.
 
-1. Confirm that your code matches the following:
+1.  Confirm that your code matches the following:
 
-    <docs-code header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
+        <docs-code language="angular-ts" header="Confirm the routerLink in app.ts" path="adev/src/content/tutorials/first-app/steps/12-forms/src/app/app.ts" visibleLines="[8,19]"/>
 
-    Your code should already be up-to-date but confirm to be sure.
-</docs-step>
+        Your code should already be up-to-date but confirm to be sure.
+
+    </docs-step>
 
 </docs-workflow>
 
@@ -120,9 +122,9 @@ SUMMARY: In this lesson you added routing to show details pages.
 
 You now know how to:
 
-* use route parameters to pass data to a route
-* use the `routerLink` directive to use dynamic data to create a route
-* use route parameter to retrieve data from the `HousingService` to display specific housing location information.
+- use route parameters to pass data to a route
+- use the `routerLink` directive to use dynamic data to create a route
+- use route parameter to retrieve data from the `HousingService` to display specific housing location information.
 
 Really great work so far.
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md
index cded7ac..249b2c1 100644
--- a/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/12-forms/README.md
@@ -25,7 +25,7 @@ In the **Edit** pane of your IDE:
 
 1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition.
 
-    <docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
+<docs-code header="Submit method in src/app/housing.service.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/housing.service.ts" visibleLines="[120,124]"/>
 
 1. Confirm that the app builds without error.
    Correct any errors before you continue to the next step.
@@ -38,11 +38,11 @@ In the **Edit** pane of your IDE, in `src/app/details/details.ts`:
 
 1. After the `import` statements at the top of the file, add the following code to import the Angular form classes.
 
-    <docs-code header="Forms imports in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[5]"/>
+<docs-code header="Forms imports in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[5]"/>
 
 1. In the `Details` decorator metadata, update the `imports` property with the following code:
 
-    <docs-code header="imports directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[9]"/>
+<docs-code header="imports directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[9]"/>
 
 1. In the `Details` class, before the `constructor()` method, add the following code to create the form object.
 
@@ -67,12 +67,12 @@ In the **Edit** pane of your IDE, in `src/app/details/details.ts`:
 
 1. In the `Details` decorator metadata, update the `template` HTML to match the following code to add the form's markup.
 
-   <docs-code header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/>
+   <docs-code language="angular-ts" header="template directive in src/app/details/details.ts" path="adev/src/content/tutorials/first-app/steps/13-search/src/app/details/details.ts" visibleLines="[10,45]"/>
 
    The template now includes an event handler `(submit)="submitApplication()"`. Angular uses parentheses syntax around the event name to define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events.
 
 1. Confirm that the app builds without error.
-Correct any errors before you continue to the next step.
+   Correct any errors before you continue to the next step.
 
 <img alt="details page with a form for applying to live at this location" src="assets/images/tutorials/first-app/homes-app-lesson-12-step-3.png">
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/13-search/README.md b/adev-es/src/content/tutorials/first-app/steps/13-search/README.md
index d972657..00d774a 100644
--- a/adev-es/src/content/tutorials/first-app/steps/13-search/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/13-search/README.md
@@ -35,12 +35,12 @@ The `Home` already contains an input field that you will use to capture input fr
 
 1. Update the `Home` template to include a template variable in the `input` element called `#filter`.
 
-   <docs-code header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/>
+   <docs-code language="angular-ts" header="Add a template variable to the input HTML element in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[12]"/>
    This example uses a [template reference variable](guide/templates) to get access to the `input` element as its value.
 
 1. Next, update the component template to attach an event handler to the "Search" button.
 
-   <docs-code header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/>
+   <docs-code language="angular-ts" header="Bind the button click event to a method in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.ts" visibleLines="[13]"/>
 
    By binding to the `click` event on the `button` element, you are able to call the `filterResults` function. The argument to the function is the `value` property of the `filter` template variable. Specifically, the `.value` property from the `input` HTML element.
 
diff --git a/adev-es/src/content/tutorials/first-app/steps/14-http/README.md b/adev-es/src/content/tutorials/first-app/steps/14-http/README.md
index c9bd6e9..57d30cf 100644
--- a/adev-es/src/content/tutorials/first-app/steps/14-http/README.md
+++ b/adev-es/src/content/tutorials/first-app/steps/14-http/README.md
@@ -18,127 +18,129 @@ Your app will use data from a JSON server
 JSON Server is an open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service.
 
 1. Install `json-server` from npm by using the following command.
-    <docs-code language="bash">
-        npm install -g json-server
-    </docs-code>
+
+   ```bash
+   npm install -g json-server
+   ```
 
 1. In the root directory of your project, create a file called `db.json`. This is where you will store the data for the `json-server`.
 
 1. Open `db.json` and copy the following code into the file
-    <docs-code language="json">
-    {
-      "locations": [
-        {
-          "id": 0,
-          "name": "Acme Fresh Start Housing",
-          "city": "Chicago",
-          "state": "IL",
-          "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
-          "availableUnits": 4,
-          "wifi": true,
-          "laundry": true
-        },
-        {
-          "id": 1,
-          "name": "A113 Transitional Housing",
-          "city": "Santa Monica",
-          "state": "CA",
-          "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
-          "availableUnits": 0,
-          "wifi": false,
-          "laundry": true
-        },
-        {
-          "id": 2,
-          "name": "Warm Beds Housing Support",
-          "city": "Juneau",
-          "state": "AK",
-          "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
-          "availableUnits": 1,
-          "wifi": false,
-          "laundry": false
-        },
-        {
-          "id": 3,
-          "name": "Homesteady Housing",
-          "city": "Chicago",
-          "state": "IL",
-          "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
-          "availableUnits": 1,
-          "wifi": true,
-          "laundry": false
-        },
-        {
-          "id": 4,
-          "name": "Happy Homes Group",
-          "city": "Gary",
-          "state": "IN",
-          "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
-          "availableUnits": 1,
-          "wifi": true,
-          "laundry": false
-        },
-        {
-          "id": 5,
-          "name": "Hopeful Apartment Group",
-          "city": "Oakland",
-          "state": "CA",
-          "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
-          "availableUnits": 2,
-          "wifi": true,
-          "laundry": true
-        },
-        {
-          "id": 6,
-          "name": "Seriously Safe Towns",
-          "city": "Oakland",
-          "state": "CA",
-          "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
-          "availableUnits": 5,
-          "wifi": true,
-          "laundry": true
-        },
-        {
-          "id": 7,
-          "name": "Hopeful Housing Solutions",
-          "city": "Oakland",
-          "state": "CA",
-          "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
-          "availableUnits": 2,
-          "wifi": true,
-          "laundry": true
-        },
-        {
-          "id": 8,
-          "name": "Seriously Safe Towns",
-          "city": "Oakland",
-          "state": "CA",
-          "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
-          "availableUnits": 10,
-          "wifi": false,
-          "laundry": false
-        },
-        {
-          "id": 9,
-          "name": "Capital Safe Towns",
-          "city": "Portland",
-          "state": "OR",
-          "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
-          "availableUnits": 6,
-          "wifi": true,
-          "laundry": true
-        }
-      ]
-    }
-    </docs-code>
+
+   ```json
+   {
+     "locations": [
+       {
+         "id": 0,
+         "name": "Acme Fresh Start Housing",
+         "city": "Chicago",
+         "state": "IL",
+         "photo": "https://angular.dev/assets/images/tutorials/common/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
+         "availableUnits": 4,
+         "wifi": true,
+         "laundry": true
+       },
+       {
+         "id": 1,
+         "name": "A113 Transitional Housing",
+         "city": "Santa Monica",
+         "state": "CA",
+         "photo": "https://angular.dev/assets/images/tutorials/common/brandon-griggs-wR11KBaB86U-unsplash.jpg",
+         "availableUnits": 0,
+         "wifi": false,
+         "laundry": true
+       },
+       {
+         "id": 2,
+         "name": "Warm Beds Housing Support",
+         "city": "Juneau",
+         "state": "AK",
+         "photo": "https://angular.dev/assets/images/tutorials/common/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
+         "availableUnits": 1,
+         "wifi": false,
+         "laundry": false
+       },
+       {
+         "id": 3,
+         "name": "Homesteady Housing",
+         "city": "Chicago",
+         "state": "IL",
+         "photo": "https://angular.dev/assets/images/tutorials/common/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
+         "availableUnits": 1,
+         "wifi": true,
+         "laundry": false
+       },
+       {
+         "id": 4,
+         "name": "Happy Homes Group",
+         "city": "Gary",
+         "state": "IN",
+         "photo": "https://angular.dev/assets/images/tutorials/common/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
+         "availableUnits": 1,
+         "wifi": true,
+         "laundry": false
+       },
+       {
+         "id": 5,
+         "name": "Hopeful Apartment Group",
+         "city": "Oakland",
+         "state": "CA",
+         "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
+         "availableUnits": 2,
+         "wifi": true,
+         "laundry": true
+       },
+       {
+         "id": 6,
+         "name": "Seriously Safe Towns",
+         "city": "Oakland",
+         "state": "CA",
+         "photo": "https://angular.dev/assets/images/tutorials/common/phil-hearing-IYfp2Ixe9nM-unsplash.jpg",
+         "availableUnits": 5,
+         "wifi": true,
+         "laundry": true
+       },
+       {
+         "id": 7,
+         "name": "Hopeful Housing Solutions",
+         "city": "Oakland",
+         "state": "CA",
+         "photo": "https://angular.dev/assets/images/tutorials/common/r-architecture-GGupkreKwxA-unsplash.jpg",
+         "availableUnits": 2,
+         "wifi": true,
+         "laundry": true
+       },
+       {
+         "id": 8,
+         "name": "Seriously Safe Towns",
+         "city": "Oakland",
+         "state": "CA",
+         "photo": "https://angular.dev/assets/images/tutorials/common/saru-robert-9rP3mxf8qWI-unsplash.jpg",
+         "availableUnits": 10,
+         "wifi": false,
+         "laundry": false
+       },
+       {
+         "id": 9,
+         "name": "Capital Safe Towns",
+         "city": "Portland",
+         "state": "OR",
+         "photo": "https://angular.dev/assets/images/tutorials/common/webaliser-_TPTXZd9mOo-unsplash.jpg",
+         "availableUnits": 6,
+         "wifi": true,
+         "laundry": true
+       }
+     ]
+   }
+   ```
 
 1. Save this file.
 
 1. Time to test your configuration. From the command line, at the root of your project run the following commands.
 
-    <docs-code language="bash">
-        json-server --watch db.json
-    </docs-code>
+```bash
+json-server --watch db.json
+```
 
 1. In your web browser, navigate to the `http://localhost:3000/locations` and confirm that the response includes the data stored in `db.json`.
 
@@ -154,15 +156,15 @@ The data source has been configured, the next step is to update your web app to
 
 1. Add a string property called `url` and set its value to `'http://localhost:3000/locations'`
 
-    <docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/>
+   <docs-code header="Add url property to housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[8]"/>
 
-    This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
+   This code will result in errors in the rest of the file because it depends on the `housingLocationList` property. We're going to update the service methods next.
 
 1. Update the `getAllHousingLocations` function to make a call to the web server you configured.
 
     <docs-code header="Update the getAllHousingLocations method in housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[10,13]"/>
 
-    The code now uses asynchronous code to make a **GET** request over HTTP.
+   The code now uses asynchronous code to make a **GET** request over HTTP.
 
    HELPFUL: For this example, the code uses `fetch`. For more advanced use cases consider using `HttpClient` provided by Angular.
 
@@ -174,7 +176,7 @@ The data source has been configured, the next step is to update your web app to
 
 1. Once all the updates are complete, your updated service should match the following code.
 
-    <docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" />
+<docs-code header="Final version of housing.service.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/housing.service.ts" visibleLines="[1,25]" />
 
 </docs-step>
 
@@ -183,15 +185,16 @@ The server is now reading data from the HTTP request but the components that rel
 
 1. In `src/app/home/home.ts`, update the `constructor` to use the new asynchronous version of the `getAllHousingLocations` method.
 
-    <docs-code header="Update constructor in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/>
+<docs-code header="Update constructor in home.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.ts" visibleLines="[29,36]"/>
 
 1. In `src/app/details/details.ts`, update the `constructor` to use the new asynchronous version of the `getHousingLocationById` method.
 
-    <docs-code header="Update constructor in details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/>
-2. Save your code.
+<docs-code header="Update constructor in details.ts" path="adev/src/content/tutorials/first-app/steps/14-http/src-final/app/details/details.ts" visibleLines="[59,64]"/>
 
-3. Open the application in the browser and confirm that it runs without any errors.
-</docs-step>
+1. Save your code.
+
+1. Open the application in the browser and confirm that it runs without any errors.
+   </docs-step>
 
 </docs-workflow>
 
diff --git a/adev-es/src/content/tutorials/home.md b/adev-es/src/content/tutorials/home.md
index b6b7458..ffe118a 100644
--- a/adev-es/src/content/tutorials/home.md
+++ b/adev-es/src/content/tutorials/home.md
@@ -6,6 +6,9 @@ Welcome to the Angular tutorials! These tutorials will guide you through the cor
   <docs-card title="Learn Angular in your browser" link="Start coding" href="tutorials/learn-angular" imgSrc="adev/src/assets/images/learn-angular-browser.svg">
     via the Playground
   </docs-card>
+  <docs-card title="Angular AI Tutor" link="Installation and usage instructions" href="ai/ai-tutor" imgSrc="adev/src/assets/images/learn-angular-local.svg">
+    via MCP Server
+  </docs-card>
   <docs-card title="Build your first Angular app locally" link="Start coding" href="tutorials/first-app" imgSrc="adev/src/assets/images/learn-angular-local.svg">
     via npm
   </docs-card>
@@ -15,4 +18,7 @@ Welcome to the Angular tutorials! These tutorials will guide you through the cor
   <docs-card title="Deferrable views" link="Start coding" href="tutorials/deferrable-views" imgSrc="adev/src/assets/images/ang_illustrations-04.svg">
     via the Playground
   </docs-card>
+  <docs-card title="Learn signals forms" link="Start coding" href="tutorials/signal-forms" imgSrc="adev/src/assets/images/learn-angular-local.svg">
+    via the Playground
+  </docs-card>
 </docs-card-container>
diff --git a/adev-es/src/content/tutorials/learn-angular/intro/README.md b/adev-es/src/content/tutorials/learn-angular/intro/README.md
index 316e3b0..92210d5 100644
--- a/adev-es/src/content/tutorials/learn-angular/intro/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/intro/README.md
@@ -14,4 +14,4 @@ Alright, let's [get started](/tutorials/learn-angular/1-components-in-angular).
 
 ## Using AI for Development
 
-In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
\ No newline at end of file
+In case you're following this tutorial in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
index f40d54d..6c085fe 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md
@@ -35,8 +35,7 @@ To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ng
 import { NgOptimizedImage } from '@angular/common';
 
 @Component({
-  template: `
-    ...
+template: `     ...
     <li>
       Static Image:
       <img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />
@@ -47,7 +46,7 @@ import { NgOptimizedImage } from '@angular/common';
     </li>
     ...
   `,
-  imports: [NgOptimizedImage],
+imports: [NgOptimizedImage],
 })
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
index fd0fbfe..3009baa 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md
@@ -39,7 +39,7 @@ import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+providers: [provideRouter(routes)],
 };
 </docs-code>
 
@@ -55,16 +55,15 @@ Update the template for `App` by adding `<router-outlet />`
 import {RouterOutlet} from '@angular/router';
 
 @Component({
-  ...
-  template: `
-    <nav>
+...
+template: `     <nav>
       <a href="/">Home</a>
       |
       <a href="/user">User</a>
     </nav>
     <router-outlet />
   `,
-  imports: [RouterOutlet],
+imports: [RouterOutlet],
 })
 export class App {}
 </docs-code>
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
index 307ede1..861a4f2 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
@@ -48,11 +48,11 @@ import {Routes} from '@angular/router';
 import {Home} from './home/home';
 
 export const routes: Routes = [
-  {
-    path: '',
-    title: 'App Home Page',
-    component: Home,
-  },
+{
+path: '',
+title: 'App Home Page',
+component: Home,
+},
 ];
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md
index 29544a4..e58201a 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/15-forms/README.md
@@ -36,8 +36,8 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 @Component({
-  ...
-  imports: [FormsModule],
+...
+imports: [FormsModule],
 })
 export class User {}
 </docs-code>
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
index 531058c..c8ac0f1 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
@@ -51,9 +51,9 @@ export class User {
   favoriteFramework = '';
   ...
 
-  showFramework() {
-    alert(this.favoriteFramework);
-  }
+showFramework() {
+alert(this.favoriteFramework);
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md
index 29b1e78..7d78431 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/22-pipes/README.md
@@ -14,12 +14,12 @@ To use a pipe in a template include it in an interpolated expression. Check out
 import {UpperCasePipe} from '@angular/common';
 
 @Component({
-  ...
-  template: `{{ loudMessage | uppercase }}`,
-  imports: [UpperCasePipe],
+...
+template: `{{ loudMessage | uppercase }}`,
+imports: [UpperCasePipe],
 })
 export class App {
-  loudMessage = 'we think you are doing great!'
+loudMessage = 'we think you are doing great!'
 }
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
index b6f2fef..100ffbf 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md
@@ -58,7 +58,8 @@ export class ReversePipe implements PipeTransform {
     }
 
     return reverse;
-  }
+
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/8-input/README.md b/adev-es/src/content/tutorials/learn-angular/steps/8-input/README.md
index 442b8ab..78e13a0 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/8-input/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/8-input/README.md
@@ -1,4 +1,4 @@
-# Component input properties 
+# Component input properties
 
 Sometimes app development requires you to send data into a component. This data can be used to customize a component or perhaps send information from a parent component to a child component.
 
@@ -28,7 +28,7 @@ When you are ready to pass in a value through an `input`, values can be set in t
 export class App {}
 </docs-code>
 
-The `input` function returns an `InputSignal`. You can read the value by calling the signal. 
+The `input` function returns an `InputSignal`. You can read the value by calling the signal.
 
 <docs-code header="user.ts" language="angular-ts">
 @Component({
diff --git a/adev-es/src/content/tutorials/learn-angular/steps/9-output/README.md b/adev-es/src/content/tutorials/learn-angular/steps/9-output/README.md
index 642a659..c9ee886 100644
--- a/adev-es/src/content/tutorials/learn-angular/steps/9-output/README.md
+++ b/adev-es/src/content/tutorials/learn-angular/steps/9-output/README.md
@@ -1,4 +1,4 @@
-# Component output properties 
+# Component output properties
 
 When working with components it may be required to notify other components that something has happened. Perhaps a button has been clicked, an item has been added/removed from a list or some other important update has occurred. In this scenario components need to communicate with parent components.
 
@@ -25,10 +25,10 @@ Now the component can generate events that can be listened to by the parent comp
 class Child {
   ...
 
-  onClick() {
-    this.count++;
-    this.incrementCountEvent.emit(this.count);
-  }
+onClick() {
+this.count++;
+this.incrementCountEvent.emit(this.count);
+}
 }
 </docs-code>
 
diff --git a/adev-es/src/content/tutorials/signal-forms/intro/README.md b/adev-es/src/content/tutorials/signal-forms/intro/README.md
new file mode 100644
index 0000000..943de65
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/intro/README.md
@@ -0,0 +1,24 @@
+# Learn Angular Signal Forms
+
+This interactive tutorial will teach you how to build reactive forms using Angular's experimental Signal Forms API.
+
+IMPORTANT: Signal Forms is currently [experimental](reference/releases#experimental). The API may change before stabilizing. Check the [official documentation](guide/forms/signal-forms) for the latest updates.
+
+## How to use this tutorial
+
+This tutorial assumes you understand Angular's core concepts and have basic familiarity with signals. If you're new to Angular, read our [essentials guide](/essentials). If you're new to signals, complete the [signals tutorial](/tutorials/signals) first.
+
+Each step represents a concept in Signal Forms. You'll build a complete login form from scratch, learning the fundamentals step by step.
+
+**Your learning path:**
+
+1. Set up the form model with TypeScript and signals
+2. Connect the form to your template
+3. Add validation rules
+4. Display validation errors to users
+5. Handle form submission
+6. Explore advanced topics and next steps
+
+If you get stuck, click "Reveal answer" at the top.
+
+Alright, let's [get started](/tutorials/signal-forms/1-set-up-form-model)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
new file mode 100644
index 0000000..68988c3
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/1-set-up-form-model/README.md
@@ -0,0 +1,73 @@
+# Set up the form model
+
+Every Signal Form starts with a form data model - a signal that defines the shape of your data, and stores your form data.
+
+In this lesson, you'll learn how to:
+
+- Define a TypeScript interface for your form data
+- Create a signal to hold form values
+- Use the `form()` function to create a Signal Form
+
+Let's build the foundation for our login form!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Define the LoginData interface">
+Create a TypeScript interface that defines the structure of your login form data. The form will have:
+
+- An `email` field (string)
+- A `password` field (string)
+- A `rememberMe` field (boolean)
+
+```ts
+interface LoginData {
+  email: string;
+  password: string;
+  rememberMe: boolean;
+}
+```
+
+Add this interface above the `@Component` decorator.
+</docs-step>
+
+<docs-step title="Import signal and form">
+Import the `signal` function from `@angular/core` and the `form` function from `@angular/forms/signals`:
+
+```ts
+import { Component, signal } from '@angular/core';
+import { form } from '@angular/forms/signals';
+```
+
+</docs-step>
+
+<docs-step title="Create the form model signal">
+In your component class, create a `loginModel` signal with initial values. Use the `LoginData` interface as the type parameter:
+
+```ts
+loginModel = signal<LoginData>({
+  email: '',
+  password: '',
+  rememberMe: false,
+});
+```
+
+The initial values start as empty strings for text fields and `false` for the checkbox.
+</docs-step>
+
+<docs-step title="Create the form">
+Now create the form by passing your model signal to the `form()` function:
+
+```ts
+loginForm = form(this.loginModel);
+```
+
+The `form()` function creates a form from your model, giving you access to field state and validation.
+</docs-step>
+
+</docs-workflow>
+
+Excellent! You've set up your form model. The `loginModel` signal holds your form data, and the `loginForm` provides access to each field with type safety.
+
+Next, you'll learn [how to connect your form to the template](/tutorials/signal-forms/2-connect-form-template)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
new file mode 100644
index 0000000..8191053
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/2-connect-form-template/README.md
@@ -0,0 +1,79 @@
+# Connect your form to the template
+
+Now, you need to connect your form to the template using the `[field]` directive. This creates two-way data binding between your form model and the input elements.
+
+In this lesson, you'll learn how to:
+
+- Import the `Field` directive
+- Use the `[field]` directive to bind form fields to inputs
+- Connect text inputs and checkboxes to your form
+- Display form field values in the template
+
+Let's wire up the template!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Import the Field directive">
+Import the `Field` directive from `@angular/forms/signals` and add it to your component's imports array:
+
+```ts
+import { form, Field } from '@angular/forms/signals';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  imports: [Field],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+```
+
+</docs-step>
+
+<docs-step title="Bind the email field">
+In your template, add the `[field]` directive to the email input:
+
+```html
+<input type="email" [field]="loginForm.email" />
+```
+
+The `loginForm.email` expression accesses the email field from your form.
+</docs-step>
+
+<docs-step title="Bind the password field">
+Add the `[field]` directive to the password input:
+
+```html
+<input type="password" [field]="loginForm.password" />
+```
+
+</docs-step>
+
+<docs-step title="Bind the checkbox field">
+Add the `[field]` directive to the checkbox input:
+
+```html
+<input type="checkbox" [field]="loginForm.rememberMe" />
+```
+
+</docs-step>
+
+<docs-step title="Display the form values">
+Below the form, there's a debug section to show current form values. Display each field value using `.value()`:
+
+```html
+<p>Email: {{ loginForm.email().value() }}</p>
+<p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
+<p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>
+```
+
+Form field values are signals, so the displayed values update automatically as you type.
+</docs-step>
+
+</docs-workflow>
+
+Great work! You've connected your form to the template and displayed the form values. The `[field]` directive handles two-way data binding automatically - as you type, the `loginModel` signal updates, and the displayed values update immediately.
+
+Next, you'll learn [how to add validation to your form](/tutorials/signal-forms/3-add-validation)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
new file mode 100644
index 0000000..bc5f431
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/3-add-validation/README.md
@@ -0,0 +1,67 @@
+# Add validation to your form
+
+Adding validation to your form is critical to ensure users enter valid data. Signal Forms uses validators in a schema function that you pass to the `form()` function.
+
+In this activity, you'll learn how to:
+
+- Import built-in validators
+- Define a schema function for your form
+- Apply validators to specific fields with custom error messages
+
+Let's add validation!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Import the validators">
+Import the `required` and `email` validators from `@angular/forms/signals`:
+
+```ts
+import { form, Field, required, email } from '@angular/forms/signals';
+```
+
+</docs-step>
+
+<docs-step title="Add a schema function to your form">
+Update your `form()` call to include a schema function as the second parameter. The schema function receives a `fieldPath` parameter that lets you access each field:
+
+```ts
+loginForm = form(this.loginModel, (fieldPath) => {
+  // Validators will go here
+});
+```
+
+</docs-step>
+
+<docs-step title="Add validation to the email field">
+Inside the schema function, add validation for the email field. Use both `required()` and `email()` validators:
+
+```ts
+loginForm = form(this.loginModel, (fieldPath) => {
+  required(fieldPath.email, { message: 'Email is required' });
+  email(fieldPath.email, { message: 'Enter a valid email address' });
+});
+```
+
+The `message` option provides custom error messages for users.
+</docs-step>
+
+<docs-step title="Add validation to the password field">
+Add validation for the password field using the `required()` validator:
+
+```ts
+loginForm = form(this.loginModel, (fieldPath) => {
+  required(fieldPath.email, { message: 'Email is required' });
+  email(fieldPath.email, { message: 'Enter a valid email address' });
+  required(fieldPath.password, { message: 'Password is required' });
+});
+```
+
+</docs-step>
+
+</docs-workflow>
+
+Perfect! You've added validation to your form. The validators run automatically as users interact with the form. When validation fails, the field's state will reflect the errors.
+
+Next, you'll learn [how to display validation errors in the template](/tutorials/signal-forms/4-display-errors)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
new file mode 100644
index 0000000..9b278df
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/4-display-errors/README.md
@@ -0,0 +1,61 @@
+# Display validation errors
+
+Now that you're able to validate the form, it's important to show validation errors to users.
+
+In this activity, you'll learn how to:
+
+- Access field state with validation signals
+- Use `@if` to conditionally display errors
+- Loop through errors with `@for`
+- Show errors only after user interaction
+
+Let's display validation feedback!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Add error display for email field">
+Below the email input, add conditional error display. This will only show errors when the field is both invalid and touched:
+
+```html
+<label>
+  Email
+  <input type="email" [field]="loginForm.email" />
+</label>
+@if (loginForm.email().invalid() && loginForm.email().touched()) {
+  <div class="error">
+    @for (error of loginForm.email().errors(); track error.kind) {
+      <span>{{ error.message }}</span>
+    }
+  </div>
+}
+```
+
+The `loginForm.email()` call accesses the field's state signal. The `invalid()` method returns `true` when validation fails, `touched()` returns `true` after the user has interacted with the field, and `errors()` provides an array of validation errors with their custom messages.
+</docs-step>
+
+<docs-step title="Add error display for password field">
+Below the password input, add the same pattern for password errors:
+
+```html
+<label>
+  Password
+  <input type="password" [field]="loginForm.password" />
+</label>
+@if (loginForm.password().invalid() && loginForm.password().touched()) {
+  <div class="error">
+    @for (error of loginForm.password().errors(); track error.kind) {
+      <span>{{ error.message }}</span>
+    }
+  </div>
+}
+```
+
+</docs-step>
+
+</docs-workflow>
+
+Excellent! You've added error display to your form. The errors appear only after users interact with a field, providing helpful feedback without being intrusive.
+
+Next, you'll learn [how to handle form submission](/tutorials/signal-forms/5-add-submission)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
new file mode 100644
index 0000000..783b73a
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/5-add-submission/README.md
@@ -0,0 +1,69 @@
+# Add form submission
+
+Finally, let's learn how to handle form submission. You'll learn how to use the `submit()` function to run async operations when the form is valid, and disable the submit button when the form has errors.
+
+In this activity, you'll learn how to:
+
+- Import the `submit()` function
+- Create a submission handler method
+- Use `submit()` to run logic only when valid
+- Disable the submit button based on form state
+
+Let's complete the form!
+
+<hr />
+
+<docs-workflow>
+
+<docs-step title="Import the submit function">
+Import the `submit` function from `@angular/forms/signals`:
+
+```ts
+import { form, Field, required, email, submit } from '@angular/forms/signals';
+```
+
+</docs-step>
+
+<docs-step title="Add the onSubmit method">
+In your component class, add an `onSubmit()` method that handles form submission:
+
+```ts
+onSubmit(event: Event) {
+  event.preventDefault();
+  submit(this.loginForm, async () => {
+    const credentials = this.loginModel();
+    console.log('Logging in with:', credentials);
+    // Add your login logic here
+  });
+}
+```
+
+The `submit()` function only runs your async callback if the form is valid. It also handles the form's submission state automatically.
+</docs-step>
+
+<docs-step title="Bind the submit handler to the form">
+In your template, bind the `onSubmit()` method to the form's submit event:
+
+```html
+<form (submit)="onSubmit($event)">
+```
+
+</docs-step>
+
+<docs-step title="Disable the button when form is invalid">
+Update the submit button to be disabled when the form is invalid:
+
+```html
+<button type="submit" [disabled]="loginForm().invalid()">
+  Log in
+</button>
+```
+
+This prevents submission when the form has validation errors.
+</docs-step>
+
+</docs-workflow>
+
+Congratulations! You've built a complete login form with Signal Forms.
+
+Ready to see what you've learned and explore advanced topics? Continue to [the next steps](/tutorials/signal-forms/6-next-steps)!
diff --git a/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
new file mode 100644
index 0000000..d50c4c2
--- /dev/null
+++ b/adev-es/src/content/tutorials/signal-forms/steps/6-next-steps/README.md
@@ -0,0 +1,32 @@
+# Congratulations!
+
+You've completed the Signal Forms tutorial and built a complete login form from scratch!
+
+## What you learned
+
+Throughout this tutorial, you learned the fundamentals of Angular Signal Forms:
+
+1. **Form Models** - Creating type-safe form data with signals and the `form()` function
+2. **Field Binding** - Using the `[field]` directive for two-way data binding and displaying the field with `value()`
+3. **Validation** - Applying built-in validators (such as `required()`, `email()`) with custom messages
+4. **Error Display** - Showing validation errors conditionally based on field state
+5. **Form Submission** - Handling form submission with the `submit()` function
+
+## Next steps
+
+Ready to learn more? Here are recommended next steps:
+
+### Explore the documentation
+
+- **[Signal Forms Overview](guide/forms/signals/overview)** - Introduction to Signal Forms and when to use them
+- **[Form Models Guide](guide/forms/signals/models)** - Deep dive into form models and data management
+  <!-- TODO: Uncomment when the guides are available -->
+  <!-- - **[Validation Guide](guide/forms/signals/validation)** - Comprehensive validation reference
+- **[Field State Management Guide](guide/forms/signals/field-state-management)** - Advanced state patterns
+- **[Custom Controls Guide](guide/forms/signals/custom-controls)** - Building reusable form components -->
+
+## Keep learning
+
+Remember: Signal Forms is experimental, so check the [official documentation](guide/forms/signal-forms) for updates to the API.
+
+Happy coding!
diff --git a/adev-es/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md b/adev-es/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
index 780cdbd..562424b 100644
--- a/adev-es/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/10-reacting-to-signal-changes-with-effect/README.md
@@ -103,8 +103,9 @@ Excellent! You've now learned how to use effects with signals. Key concepts to r
 - **Automatic tracking**: Effects automatically track which signals they read and re-run when those signals change
 
 **Remember: Use effects sparingly!** The examples in this lesson (localStorage sync, logging, timers) are appropriate uses. Avoid effects for:
+
 - Deriving values from other signals - use `computed()` instead
-- Creating writable derived state - use `linkedSignal()` instead  
+- Creating writable derived state - use `linkedSignal()` instead
 - Copying data between signals - restructure to use a shared source of truth
 
 Effects are powerful but should be your last resort when `computed()` and `linkedSignal()` can't solve your use case.
diff --git a/adev-es/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md b/adev-es/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
index e0a5bc5..8305008 100644
--- a/adev-es/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
@@ -68,7 +68,7 @@ The template already has placeholders showing "Loading...". Replace them with yo
 
 1. For notifications, replace `Loading...` with an @if block:
 
-```html
+```angular-html
 @if (notificationsEnabled()) {
   Enabled
 } @else {
@@ -78,13 +78,13 @@ The template already has placeholders showing "Loading...". Replace them with yo
 
 2. For the message, replace `Loading...` with:
 
-```html
+```angular-html
 {{ statusMessage() }}
 ```
 
 3. For working hours, replace `Loading...` with an @if block:
 
-```html
+```angular-html
 @if (isWithinWorkingHours()) {
   Yes
 } @else {
diff --git a/adev-es/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md b/adev-es/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md
index 5623d00..f1980a4 100644
--- a/adev-es/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md
@@ -50,7 +50,7 @@ This is the key difference: computed signals are read-only, but linked signals c
 <docs-step title="Update the template to add manual notification control">
 Update your template to add a toggle button for notifications:
 
-```html
+```angular-html
 <div class="status-info">
   <div class="notifications">
     <strong>Notifications:</strong>
diff --git a/adev-es/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md b/adev-es/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
index 93a79e4..da3a520 100644
--- a/adev-es/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md
@@ -75,7 +75,7 @@ Part 1. **Add click handlers to the buttons:**
 
 Part 2. **Replace the placeholder with resource state handling:**
 
-```html
+```angular-html
 @if (isLoading()) {
   <p>Loading user...</p>
 } @else if (hasError()) {
diff --git a/adev-es/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md b/adev-es/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
index 528af3b..636cac4 100644
--- a/adev-es/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md
@@ -13,7 +13,7 @@ Add signal `input()` functions to receive data in the `product-card` component.
 
 ```ts
 // Add imports for signal inputs
-import {Component, input} from '@angular/core';
+import {Component, input, ChangeDetectionStrategy} from '@angular/core';
 
 // Add these signal inputs
 name = input.required<string>();
@@ -27,7 +27,7 @@ Notice how `input.required()` creates an input that must be provided, while `inp
 <docs-step title="Connect inputs to the template">
 Update the template in `product-card` to display the signal input values.
 
-```html
+```angular-html
 <div class="product-card">
   <h3>{{ name() }}</h3>
   <p class="price">\${{ price() }}</p>
diff --git a/adev-es/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md b/adev-es/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md
index d68cdee..f451bc0 100644
--- a/adev-es/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md
@@ -13,7 +13,7 @@ Create a model signal in the `custom-checkbox` component that can both receive a
 
 ```ts
 // Add imports for model signals
-import {Component, model, input} from '@angular/core';
+import {Component, model, input, ChangeDetectionStrategy} from '@angular/core';
 
 // Model signal for two-way binding
 checked = model.required<boolean>();
@@ -83,12 +83,18 @@ Part 1. **Uncomment the checkboxes and add two-way binding:**
 
 Part 2. **Replace the `???` placeholders with @if blocks:**
 
-```html
+```angular-html
 @if (agreedToTerms()) {
   Yes
 } @else {
   No
 }
+
+@if (enableNotifications()) {
+  Yes
+} @else {
+  No
+}
 ```
 
 Part 3. **Add click handlers to the buttons:**
diff --git a/adev-es/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md b/adev-es/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
index 6d6c554..15cc226 100644
--- a/adev-es/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md
@@ -60,7 +60,7 @@ These methods read the current cart state using `cartItems()` and update quantit
 <docs-step title="Update the main app component">
 Update the main app component in `app.ts` to use the cart service and display the cart component.
 
-```ts
+```angular-ts
 import {Component, inject} from '@angular/core';
 import {CartStore} from './cart-store';
 import {CartDisplay} from './cart-display';
diff --git a/adev-es/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md b/adev-es/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
index aae2a5d..5f6dba3 100644
--- a/adev-es/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
+++ b/adev-es/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
@@ -76,7 +76,7 @@ The host bindings automatically re-evaluate when the signals change - just like
 <docs-step title="Use the directive in your template">
 Update the app template to demonstrate the reactive directive:
 
-```ts
+```angular-ts
 template: `
   <div>
     <h1>Directive with Signals</h1>
diff --git a/origin b/origin
index c314ccb..47a7396 160000
--- a/origin
+++ b/origin
@@ -1 +1 @@
-Subproject commit c314ccba0c2104cd2003e39f4ab12ed6ebd4cf92
+Subproject commit 47a739611a4104c4757719bff45878aa93166bda