diff --git a/adev-es/src/content/kitchen-sink.en.md b/adev-es/src/content/kitchen-sink.en.md
new file mode 100644
index 0000000..a42045a
--- /dev/null
+++ b/adev-es/src/content/kitchen-sink.en.md
@@ -0,0 +1,366 @@
+
+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-h2), [horizontal lines](#horizontal-line-divider)
+- and more!
+
+Get ready to:
+
+1. Write...
+2. great...
+3. docs!
+
+## Headers (h2)
+
+### Smaller headers (h3)
+
+#### Even smaller (h4)
+
+##### Even more smaller (h5)
+
+###### The smallest! (h6)
+
+## Cards
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
+
+
+
+### `` Attributes
+
+| Attributes | Details |
+| :---------------------- | :------------------------------------------------ |
+| `` | All cards must be nested inside a container |
+| `title` | Card title |
+| card body contents | Anything between `` and `` |
+| `link` | (Optional) Call to Action link text |
+| `href` | (Optional) Call to Action link href |
+
+## Callouts
+
+
+ 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.
+
+
+
+ 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.
+
+
+
+ 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.
+
+
+### `` Attributes
+
+| Attributes | Details |
+| :----------------------------------------------- | :-------------------------------------------------------- |
+| `title` | Callout title |
+| card body contents | Anything between `` and `` |
+| `helpful` (default) \| `critical` \| `important` | (Optional) Adds styling and icons based on severity level |
+
+## Pills
+
+Pill rows are helpful as a sort of navigation with links to helpful resources.
+
+
+
+
+
+
+
+
+
+
+### `` Attributes
+
+| Attributes | Details |
+| :--------------- | :----------------------------------------- |
+| `` element.
+
+
+import { Component } from '@angular/core';
+
+@Component({
+selector: 'example-code',
+template: 'Hello World!
',
+})
+export class ComponentOverviewComponent {}
+
+
+### Styling the example
+
+Here's a code example fully styled:
+
+
+
+
+We also have styling for the terminal, just set the language as `shell`:
+
+```shell
+npm install @angular/material --save
+```
+
+#### `` 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. |
+
+### Multifile examples
+
+You can create multifile examples by wrapping the examples inside a ``.
+
+
+
+
+
+
+#### `` 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. |
+
+### Adding `preview` to your code example
+
+Adding the `preview` flag builds a running example of the code below the code snippet. This also automatically adds a button to open the running example in Stackblitz.
+
+NOTE: `preview` only works with standalone.
+
+### Styling example previews with Tailwind CSS
+
+Tailwind utility classes can be used within code examples.
+
+
+
+
+
+
+## Tabs
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+## Workflow
+
+Style numbered steps using ``. Numbering is created using CSS (handy!).
+
+### `` and `` Attributes
+
+| Attributes | Details |
+| :----------------- | :------------------------------------------------ |
+| `` | All steps must be nested inside a workflow |
+| `title` | Step title |
+| step body contents | Anything between `` and `` |
+
+Steps must start on a new line, and can contain `docs-code`s and other nested elements and styles.
+
+
+
+
+ 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:
+
+```shell
+npm install -g @angular/cli
+```
+
+
+
+
+ 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:
+
+ ```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 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.
+
+
+
+ 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:
+
+ ```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 `--open` (or just `-o`) option automatically opens your browser to .
+ If your installation and setup was successful, you should see a page similar to the following.
+
+
+
+ That's all the docs components! Now:
+
+
+
+
+
+
+
+
+
+
+
+## Images and video
+
+You can add images using the semantic Markdown image:
+
+
+
+### Add `#small` and `#medium` to change the image size
+
+
+
+
+## Add attributes using curly braces syntax
+
+
+
+
+Embedded videos are created with `docs-video` and just need a `src` and `alt`:
+
+
+
+## Charts & Graphs
+
+Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the code language to `mermaid`, all theming is built-in.
+
+```mermaid
+ graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
+```
+
+```mermaid
+ sequenceDiagram
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ John-->>-Alice: I feel great!
+```
+
+```mermaid
+ pie title Pets adopted by volunteers
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 15
+```
+
+## 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.
+
+
+
+The end!
diff --git a/adev-es/src/content/kitchen-sink.md b/adev-es/src/content/kitchen-sink.md
index c4d66f9..ef4bf7f 100644
--- a/adev-es/src/content/kitchen-sink.md
+++ b/adev-es/src/content/kitchen-sink.md
@@ -1,153 +1,153 @@
-
-This is a visual list of all custom components and styles for Angular.dev.
+
+Esta es una lista visual de todos los componentes y estilos personalizados para Angular.dev.
-As a design system, this page contains visual and Markdown authoring guidance for:
+Como sistema de diseño, esta página contiene guías visuales y de redacción en Markdown para:
-- 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!
+- Elementos personalizados de la documentación de Angular: [`docs-card`](#tarjetas), [`docs-callout`](#callouts), [`docs-pill`](#pills) y [`docs-steps`](#flujo-de-trabajo)
+- Elementos de texto personalizados: [alertas](#alertas)
+- Ejemplos de código: [`docs-code`](#código)
+- Elementos de estilo Markdown integrados: enlaces, listas, [encabezados](#encabezados-h2), [líneas horizontales](#divisor-de-línea-horizontal)
+- ¡y más!
-Get ready to:
+Prepárate para:
-1. Write...
-2. great...
-3. docs!
+1. Escribir...
+2. excelente...
+3. documentación!
-## Headers (h2)
+## Encabezados (h2)
-### Smaller headers (h3)
+### Encabezados más pequeños (h3)
-#### Even smaller (h4)
+#### Aún más pequeños (h4)
-##### Even more smaller (h5)
+##### Todavía más pequeños (h5)
-###### The smallest! (h6)
+###### ¡Los más pequeños! (h6)
-## Cards
+## Tarjetas
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare ligula nisi
-### `` Attributes
+### Atributos de ``
-| Attributes | Details |
-| :---------------------- | :------------------------------------------------ |
-| `` | All cards must be nested inside a container |
-| `title` | Card title |
-| card body contents | Anything between `` and `` |
-| `link` | (Optional) Call to Action link text |
-| `href` | (Optional) Call to Action link href |
+| Atributos | Detalles |
+| :---------------------------------- | :-------------------------------------------------------------- |
+| `` | Todas las tarjetas deben estar anidadas dentro de un contenedor |
+| `title` | Título de la tarjeta |
+| contenidos del cuerpo de la tarjeta | Cualquier cosa entre `` y `` |
+| `link` | (Opcional) Texto del enlace de llamada a la acción |
+| `href` | (Opcional) Href del enlace de llamada a la acción |
## Callouts
-
+
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.
-
+
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.
-
+
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.
-### `` Attributes
+### Atributos de ``
-| Attributes | Details |
-| :----------------------------------------------- | :-------------------------------------------------------- |
-| `title` | Callout title |
-| card body contents | Anything between `` and `` |
-| `helpful` (default) \| `critical` \| `important` | (Optional) Adds styling and icons based on severity level |
+| Atributos | Detalles |
+| :----------------------------------------------- | :----------------------------------------------------------------- |
+| `title` | Título del callout |
+| contenidos del cuerpo de la tarjeta | Cualquier cosa entre `` y `` |
+| `helpful` (default) \| `critical` \| `important` | (Opcional) Añade estilos e iconos basados en el nivel de severidad |
## Pills
-Pill rows are helpful as a sort of navigation with links to helpful resources.
+Las filas de pills son útiles como una especie de navegación con enlaces a recursos útiles.
-
-
-
-
-
-
+
+
+
+
+
+
-### `` Attributes
+### Atributos de ``
-| Attributes | Details |
-| :--------------- | :----------------------------------------- |
-| `` element.
+O usando el elemento ``.
-
+
import { Component } from '@angular/core';
@Component({
selector: 'example-code',
-template: 'Hello World!
',
+template: '¡Hola Mundo!
',
})
export class ComponentOverviewComponent {}
-### Styling the example
+### Estilizando el ejemplo
-Here's a code example fully styled:
+Aquí tienes un ejemplo de código completamente estilizado:
-We also have styling for the terminal, just set the language as `shell`:
+También tenemos estilos para la terminal, simplemente establece el lenguaje como `shell`:
```shell
npm install @angular/material --save
```
-#### `` Attributes
+#### Atributos de ``
-| 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. |
+| Atributos | Tipo | Detalles |
+| :-------------- | :------------------- | :---------------------------------------------------- |
+| code | `string` | Cualquier cosa entre etiquetas se trata como código |
+| `path` | `string` | Ruta al ejemplo de código (raíz: `content/examples/`) |
+| `header` | `string` | Título del ejemplo (predeterminado: `file-name`) |
+| `language` | `string` | lenguaje del código |
+| `linenums` | `boolean` | (Falso) muestra números de línea |
+| `highlight` | `string of number[]` | líneas resaltadas |
+| `diff` | `string` | ruta al código modificado |
+| `visibleLines` | `string of number[]` | rango de líneas para el modo colapsado |
+| `visibleRegion` | `string` | **DEPRECADO** POR `visibleLines` |
+| `preview` | `boolean` | (Falso) muestra vista previa |
+| `hideCode` | `boolean` | (Falso) Si colapsar el ejemplo de código por defecto. |
-### Multifile examples
+### Ejemplos de múltiples archivos
-You can create multifile examples by wrapping the examples inside a ``.
+Puedes crear ejemplos de múltiples archivos envolviendo los ejemplos dentro de un ``.
-#### `` Attributes
+#### Atributos de ``
-| 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. |
+| Atributos | Tipo | Detalles |
+| :------------ | :-------- | :----------------------------------------------------------- |
+| body contents | `string` | pestañas anidadas de ejemplos `docs-code` |
+| `path` | `string` | Ruta al ejemplo de código para vista previa y enlace externo |
+| `preview` | `boolean` | (Falso) muestra vista previa |
+| `hideCode` | `boolean` | (Falso) Si colapsar el ejemplo de código por defecto. |
-### Adding `preview` to your code example
+### Añadiendo `preview` a tu ejemplo de código
-Adding the `preview` flag builds a running example of the code below the code snippet. This also automatically adds a button to open the running example in Stackblitz.
+Añadir la bandera `preview` construye un ejemplo en ejecución del código debajo del fragmento de código. Esto también añade automáticamente un botón para abrir el ejemplo en ejecución en Stackblitz.
-NOTE: `preview` only works with standalone.
+NOTA: `preview` solo funciona con standalone.
-### Styling example previews with Tailwind CSS
+### Estilizando vistas previas de ejemplo con Tailwind CSS
-Tailwind utility classes can be used within code examples.
+Las clases de utilidad de Tailwind se pueden usar dentro de los ejemplos de código.
-## Tabs
+## Pestañas
-
+
-
+
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.
-## Workflow
+## Flujo de trabajo
-Style numbered steps using ``. Numbering is created using CSS (handy!).
+Estila pasos numerados usando ``. La numeración se crea usando CSS (¡práctico!).
-### `` and `` Attributes
+### Atributos de `` y ``
-| Attributes | Details |
-| :----------------- | :------------------------------------------------ |
-| `` | All steps must be nested inside a workflow |
-| `title` | Step title |
-| step body contents | Anything between `` and `` |
+| Atributos | Detalles |
+| :----------------- | :----------------------------------------------------------------- |
+| `` | Todos los pasos deben estar anidados dentro de un flujo de trabajo |
+| `title` | Título del paso |
+| step body contents | Cualquier cosa entre `` y `` |
-Steps must start on a new line, and can contain `docs-code`s and other nested elements and styles.
+Los pasos deben comenzar en una nueva línea, y pueden contener `docs-code`s y otros elementos y estilos anidados.
-
- 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.
+
+ Usas la CLI de Angular para crear proyectos, generar código de aplicación y biblioteca, y realizar una variedad de tareas de desarrollo continuas como pruebas, empaquetado y despliegue.
-To install the Angular CLI, open a terminal window and run the following command:
+Para instalar la CLI de Angular, abre una ventana de terminal y ejecuta el siguiente comando:
```shell
npm install -g @angular/cli
@@ -262,77 +262,77 @@ npm install -g @angular/cli
-
- You develop apps in the context of an Angular workspace.
+
+ Desarrollas aplicaciones en el contexto de un espacio de trabajo de Angular.
-To create a new workspace and initial starter app:
+Para crear un nuevo espacio de trabajo y una aplicación inicial:
-- Run the CLI command `ng new` and provide the name `my-app`, as shown here:
+- Ejecuta el comando CLI `ng new` y proporciona el nombre `my-app`, como se muestra aquí:
```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.
+- El comando ng new te pide información sobre las características a incluir en la aplicación inicial. Acepta los valores predeterminados presionando la tecla Enter o Return.
- The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
+ La CLI de Angular instala los paquetes npm de Angular necesarios y otras dependencias. Esto puede tardar unos minutos.
- The CLI creates a new workspace and a simple Welcome app, ready to run.
+ La CLI crea un nuevo espacio de trabajo y una aplicación simple de Bienvenida, lista para ejecutarse.
-
- The Angular CLI includes a server, for you to build and serve your app locally.
+
+ La CLI de Angular incluye un servidor, para que compiles y sirvas tu aplicación localmente.
-1. Navigate to the workspace folder, such as `my-app`.
-2. Run the following command:
+1. Navega a la carpeta del espacio de trabajo, como `my-app`.
+2. Ejecuta el siguiente comando:
```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.
+ El comando `ng serve` lanza el servidor, observa tus archivos y recompila la aplicación a medida que haces cambios en esos archivos.
-The `--open` (or just `-o`) option automatically opens your browser to .
-If your installation and setup was successful, you should see a page similar to the following.
-
+ La opción `--open` (o simplemente `-o`) abre automáticamente tu navegador en .
+ Si tu instalación y configuración tuvieron éxito, deberías ver una página similar a la siguiente.
+
-
- That's all the docs components! Now:
+
+ ¡Esos son todos los componentes de la documentación! Ahora:
-
-
-
-
+
+
+
+
-## Images and video
+## Imágenes y video
-You can add images using the semantic Markdown image:
+Puedes añadir imágenes usando la imagen Markdown semántica:
-
+
-### Add `#small` and `#medium` to change the image size
+### Añade `#small` y `#medium` para cambiar el tamaño de la imagen
-
-
+
+
-## Add attributes using curly braces syntax
+## Añadir atributos usando la sintaxis de llaves
-
-
+
+
-Embedded videos are created with `docs-video` and just need a `src` and `alt`:
+Los videos incrustados se crean con `docs-video` y solo necesitan un `src` y `alt`:
-## Charts & Graphs
+## Gráficos y Diagramas
-Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the code language to `mermaid`, all theming is built-in.
+Escribe diagramas y gráficos usando [Mermaid](http://mermaid.js.org/) estableciendo el lenguaje de código a `mermaid`, todo el tema está integrado.
```mermaid
graph TD;
@@ -344,23 +344,23 @@ Write diagrams and charts using [Mermaid](http://mermaid.js.org/) by setting the
```mermaid
sequenceDiagram
- Alice->>+John: Hello John, how are you?
- Alice->>+John: John, can you hear me?
- John-->>-Alice: Hi Alice, I can hear you!
- John-->>-Alice: I feel great!
+ Alice->>+John: Hola John, ¿cómo estás?
+ Alice->>+John: John, ¿puedes oírme?
+ John-->>-Alice: Hola Alice, ¡te puedo oír!
+ John-->>-Alice: ¡Me siento genial!
```
```mermaid
- pie title Pets adopted by volunteers
- "Dogs" : 386
- "Cats" : 85
- "Rats" : 15
+ pie title Mascotas adoptadas por voluntarios
+ "Perros" : 386
+ "Gatos" : 85
+ "Ratas" : 15
```
-## Horizontal Line Divider
+## Divisor de línea horizontal
-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.
+Esto se puede usar para separar secciones de la página, como estamos a punto de hacer a continuación. Estos estilos se añadirán por defecto, no se necesita nada personalizado.
-The end!
+¡El fin!